import { Link } from '@inertiajs/react';
import { TriangleAlert } from 'lucide-react';
import { classroomColor } from '@/lib/classroom-color';
import { formatHours } from '@/lib/format';
import { cn } from '@/lib/utils';
import { show as classroomShow } from '@/routes/classrooms';
import type { ClassroomUsage as Usage } from '@/types';

const warnAt = 90;

function UsageBar({ percent, color }: { percent: number; color: string }) {
    const width = Math.min(100, Math.max(percent, 0));

    // A neutral track: tinting it with the classroom colour makes an empty bar look full.
    return (
        <div className="bg-muted h-1.5 overflow-hidden rounded-full">
            <div
                className="h-full rounded-full"
                style={{ width: `${width}%`, backgroundColor: color }}
            />
        </div>
    );
}

export default function ClassroomUsage({ usage }: { usage: Usage[] }) {
    if (usage.length === 0) {
        return (
            <p className="text-muted-foreground text-sm">
                Nessuna aula attiva. Le ore consumate compaiono qui appena una
                lezione termina.
            </p>
        );
    }

    return (
        <ul className="divide-y">
            {usage.map((classroom) => {
                const color = classroomColor(classroom);
                const nearLimit = classroom.hours_percent >= warnAt;

                return (
                    <li
                        key={classroom.id}
                        className="py-3 first:pt-0 last:pb-0"
                    >
                        <Link
                            href={classroomShow(classroom.uuid)}
                            className="focus-visible:ring-ring block rounded-md focus-visible:ring-2 focus-visible:outline-none"
                        >
                            <div className="flex items-baseline justify-between gap-3">
                                <span className="flex min-w-0 items-center gap-2">
                                    <span
                                        className="size-2 shrink-0 rounded-full"
                                        style={{ backgroundColor: color }}
                                        aria-hidden
                                    />
                                    <span className="truncate text-sm font-medium">
                                        {classroom.name}
                                    </span>
                                    <span className="text-muted-foreground shrink-0 text-xs">
                                        {classroom.code}
                                    </span>
                                </span>

                                <span className="shrink-0 text-xs tabular-nums">
                                    {formatHours(classroom.hours_used)} /{' '}
                                    {formatHours(classroom.max_hours)} h
                                </span>
                            </div>

                            <div className="mt-2">
                                <UsageBar
                                    percent={classroom.hours_percent}
                                    color={color}
                                />
                            </div>

                            <div className="text-muted-foreground mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs">
                                <span className="tabular-nums">
                                    {classroom.participants_count} /{' '}
                                    {classroom.max_participants} discenti
                                </span>
                                <span className="tabular-nums">
                                    {classroom.meetings_ended}{' '}
                                    {classroom.meetings_ended === 1
                                        ? 'terminata'
                                        : 'terminate'}
                                    , {classroom.meetings_scheduled} da fare
                                </span>
                                <span
                                    className={cn(
                                        'ml-auto flex items-center gap-1 tabular-nums',
                                        nearLimit && 'text-warning',
                                    )}
                                >
                                    {nearLimit && (
                                        <TriangleAlert
                                            className="size-3"
                                            aria-hidden
                                        />
                                    )}
                                    {nearLimit
                                        ? `${classroom.hours_percent}% — ore quasi esaurite`
                                        : `${classroom.hours_percent}%`}
                                </span>
                            </div>
                        </Link>
                    </li>
                );
            })}
        </ul>
    );
}