import { ChevronLeft, ChevronRight } from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import { Spinner } from '@/components/ui/spinner';
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
import { classroomColor } from '@/lib/classroom-color';
import type { CalendarClassroom, CalendarView } from '@/types';

export const allClassrooms = 'all';

const viewLabels: Record<CalendarView, string> = {
    month: 'Mese',
    week: 'Settimana',
    agenda: 'Agenda',
};

type Props = {
    view: CalendarView;
    title: string;
    loading: boolean;
    classrooms: CalendarClassroom[];
    selectedClassroom: string;
    onPrevious: () => void;
    onNext: () => void;
    onToday: () => void;
    onViewChange: (view: CalendarView) => void;
    onClassroomChange: (uuid: string) => void;
};

export default function CalendarToolbar({
    view,
    title,
    loading,
    classrooms,
    selectedClassroom,
    onPrevious,
    onNext,
    onToday,
    onViewChange,
    onClassroomChange,
}: Props) {
    return (
        <div className="flex flex-wrap items-center justify-between gap-3 border-b px-4 py-3">
            <div className="flex min-w-0 items-center gap-2">
                <div className="flex items-center">
                    <Button
                        variant="outline"
                        size="icon"
                        className="rounded-r-none"
                        onClick={onPrevious}
                        aria-label="Periodo precedente"
                        title="Periodo precedente (freccia sinistra)"
                    >
                        <ChevronLeft />
                    </Button>
                    <Button
                        variant="outline"
                        className="rounded-none border-x-0"
                        onClick={onToday}
                        title="Torna a oggi (tasto T)"
                    >
                        Oggi
                    </Button>
                    <Button
                        variant="outline"
                        size="icon"
                        className="rounded-l-none"
                        onClick={onNext}
                        aria-label="Periodo successivo"
                        title="Periodo successivo (freccia destra)"
                    >
                        <ChevronRight />
                    </Button>
                </div>

                <h1 className="truncate text-base font-semibold first-letter:uppercase">
                    {title}
                </h1>

                <span
                    className="text-muted-foreground flex w-4 items-center"
                    aria-live="polite"
                >
                    {loading && <Spinner aria-label="Caricamento" />}
                    <span className="sr-only">
                        {loading ? 'Caricamento in corso' : ''}
                    </span>
                </span>
            </div>

            <div className="flex w-full items-center gap-2 sm:w-auto">
                <Select
                    value={selectedClassroom}
                    onValueChange={onClassroomChange}
                >
                    <SelectTrigger
                        className="min-w-0 flex-1 sm:w-44 sm:flex-none"
                        aria-label="Filtra per aula"
                    >
                        <SelectValue placeholder="Tutte le aule" />
                    </SelectTrigger>
                    <SelectContent>
                        <SelectItem value={allClassrooms}>
                            Tutte le aule
                        </SelectItem>
                        {classrooms.map((classroom) => (
                            <SelectItem
                                key={classroom.uuid}
                                value={classroom.uuid}
                            >
                                <span
                                    className="size-2 shrink-0 rounded-full"
                                    style={{
                                        backgroundColor:
                                            classroomColor(classroom),
                                    }}
                                    aria-hidden
                                />
                                {classroom.name}
                            </SelectItem>
                        ))}
                    </SelectContent>
                </Select>

                <ToggleGroup
                    type="single"
                    variant="outline"
                    value={view}
                    onValueChange={(next) => {
                        if (next) {
                            onViewChange(next as CalendarView);
                        }
                    }}
                    aria-label="Vista del calendario"
                >
                    {(Object.keys(viewLabels) as CalendarView[]).map((key) => (
                        <ToggleGroupItem
                            key={key}
                            value={key}
                            className="shrink-0 px-2 sm:px-3"
                            aria-label={viewLabels[key]}
                        >
                            {viewLabels[key]}
                        </ToggleGroupItem>
                    ))}
                </ToggleGroup>
            </div>
        </div>
    );
}