import { Head, Link, router, usePage } from '@inertiajs/react';
import {
    ClipboardPasteIcon,
    CopyIcon,
    MailIcon,
    MoreHorizontalIcon,
    PlusIcon,
    SparklesIcon,
    UploadIcon,
} from 'lucide-react';
import {
    ClassroomStatusBadge,
    FormatempSyncStatusBadge,
    MeetingStatusBadge,
    ParticipantRoleBadge,
} from '@/components/classrooms/badges';
import ConfirmActionDialog from '@/components/classrooms/confirm-action-dialog';
import CopyButton from '@/components/classrooms/copy-button';
import { formatDateTime, formatMinutes } from '@/components/classrooms/format';
import MeetingFormDialog from '@/components/classrooms/meeting-form-dialog';
import ParticipantAiImportDialog from '@/components/classrooms/participant-ai-import-dialog';
import ParticipantFormDialog from '@/components/classrooms/participant-form-dialog';
import ParticipantImportDialog from '@/components/classrooms/participant-import-dialog';
import RecordingsCard from '@/components/classrooms/recordings-card';
import SchedulePlannerDialog from '@/components/classrooms/schedule-planner-dialog';
import type {
    Classroom,
    FormatempSync,
    Meeting,
    Participant,
} from '@/components/classrooms/types';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Button } from '@/components/ui/button';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Progress } from '@/components/ui/progress';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import {
    Tooltip,
    TooltipContent,
    TooltipTrigger,
} from '@/components/ui/tooltip';
import classrooms, { index as classroomsIndex } from '@/routes/classrooms';
import meetings from '@/routes/meetings';
import company from '@/routes/company';

type ParticipantRow = Participant & {
    join_url: string;
    attended_minutes: number;
};

type MeetingRow = Meeting & {
    scheduled_end_at: string;
    public_url: string;
    can_start: boolean;
    attendances_count: number;
};

type Props = {
    classroom: Classroom;
    participants: ParticipantRow[];
    meetings: MeetingRow[];
    syncs: FormatempSync[];
    usage: {
        scheduled_minutes: number;
        remaining_minutes: number;
        learners: number;
    };
    formatempConfigured: boolean;
};

type PageErrors = {
    first_name?: string;
    fiscal_code?: string;
    file?: string;
    title?: string;
    duration_minutes?: string;
    meeting?: string;
    meetings?: string;
    rows?: string;
    formatemp?: string;
    recording?: string;
};

export default function ClassroomsShow({
    classroom,
    participants,
    meetings: meetingRows,
    syncs,
    usage,
    formatempConfigured,
}: Props) {
    const { errors } = usePage<{ errors: PageErrors }>().props;

    const maxHoursMinutes = classroom.max_hours
        ? classroom.max_hours * 60
        : null;
    const hoursPercent = maxHoursMinutes
        ? Math.min(
              100,
              Math.round((usage.scheduled_minutes / maxHoursMinutes) * 100),
          )
        : 0;

    function deleteParticipant(participant: ParticipantRow) {
        router.delete(
            classrooms.participants.destroy({
                classroom: classroom.uuid,
                participant: participant.id,
            }).url,
            { preserveScroll: true },
        );
    }

    function endMeeting(meeting: MeetingRow) {
        router.post(
            meetings.end({ meeting: meeting.uuid }).url,
            {},
            { preserveScroll: true },
        );
    }

    function refreshMeeting(meeting: MeetingRow) {
        router.post(
            meetings.refresh({ meeting: meeting.uuid }).url,
            {},
            { preserveScroll: true },
        );
    }

    function deleteMeeting(meeting: MeetingRow) {
        router.delete(meetings.destroy({ meeting: meeting.uuid }).url, {
            preserveScroll: true,
        });
    }

    function sendInvitations() {
        router.post(
            classrooms.invitations.store({ classroom: classroom.uuid }).url,
            {},
            { preserveScroll: true },
        );
    }

    function linkFormatemp() {
        router.post(
            classrooms.formatemp.link({ classroom: classroom.uuid }).url,
            {},
            { preserveScroll: true },
        );
    }

    function syncFormatemp(type: 'classroom' | 'participants') {
        router.post(
            classrooms.formatemp.sync({ classroom: classroom.uuid, type }).url,
            {},
            { preserveScroll: true },
        );
    }

    return (
        <>
            <Head title={classroom.name} />

            <div className="flex flex-1 flex-col gap-6 p-4">
                <div className="flex flex-wrap items-start justify-between gap-4">
                    <div className="space-y-1">
                        <div className="flex items-center gap-2">
                            <h1 className="text-xl font-semibold tracking-tight">
                                {classroom.name}
                            </h1>
                            <ClassroomStatusBadge status={classroom.status} />
                        </div>
                        <p className="text-muted-foreground text-sm">
                            Codice {classroom.code}
                            {classroom.course_title
                                ? ` · ${classroom.course_title}`
                                : ''}
                        </p>
                    </div>

                    <Button asChild variant="outline">
                        <Link href={classrooms.edit(classroom.uuid)}>
                            Modifica
                        </Link>
                    </Button>
                </div>

                <div className="grid gap-4 sm:grid-cols-2">
                    <div className="rounded-xl border p-4">
                        <p className="text-muted-foreground text-sm">
                            Discenti
                        </p>
                        <p className="text-2xl font-semibold">
                            {usage.learners}
                            {classroom.max_participants !== null
                                ? ` / ${classroom.max_participants}`
                                : ''}
                        </p>
                    </div>
                    <div className="rounded-xl border p-4">
                        <p className="text-muted-foreground text-sm">
                            Ore pianificate
                        </p>
                        <p className="text-2xl font-semibold">
                            {formatMinutes(usage.scheduled_minutes)}
                            {maxHoursMinutes !== null
                                ? ` / ${formatMinutes(maxHoursMinutes)}`
                                : ''}
                        </p>
                        {maxHoursMinutes !== null && (
                            <Progress value={hoursPercent} className="mt-2" />
                        )}
                    </div>
                </div>

                <Tabs defaultValue="participants">
                    <TabsList>
                        <TabsTrigger value="participants">
                            Partecipanti
                        </TabsTrigger>
                        <TabsTrigger value="meetings">Lezioni</TabsTrigger>
                        <TabsTrigger value="formatemp">Forma.Temp</TabsTrigger>
                    </TabsList>

                    <TabsContent value="participants" className="space-y-4">
                        <div className="flex flex-wrap items-center justify-between gap-3">
                            <p className="text-muted-foreground text-sm">
                                {participants.length}
                                {classroom.max_participants !== null
                                    ? ` / ${classroom.max_participants}`
                                    : ''}{' '}
                                partecipanti iscritti.
                            </p>
                            <div className="flex gap-2">
                                <Button
                                    variant="outline"
                                    onClick={sendInvitations}
                                    disabled={participants.length === 0}
                                >
                                    <MailIcon />
                                    Invia inviti via email
                                </Button>
                                <ParticipantImportDialog
                                    classroomUuid={classroom.uuid}
                                    trigger={
                                        <Button variant="outline">
                                            <UploadIcon />
                                            Importa CSV/XLSX
                                        </Button>
                                    }
                                />
                                <ParticipantAiImportDialog
                                    classroomUuid={classroom.uuid}
                                    trigger={
                                        <Button variant="outline">
                                            <ClipboardPasteIcon />
                                            Incolla un elenco
                                        </Button>
                                    }
                                />
                                <ParticipantFormDialog
                                    classroomUuid={classroom.uuid}
                                    trigger={
                                        <Button>
                                            <PlusIcon />
                                            Aggiungi partecipante
                                        </Button>
                                    }
                                />
                            </div>
                        </div>

                        {(errors.first_name || errors.fiscal_code) && (
                            <Alert variant="destructive">
                                <AlertTitle>
                                    Errore nel salvataggio del partecipante
                                </AlertTitle>
                                <AlertDescription>
                                    {errors.first_name}
                                    {errors.fiscal_code}
                                </AlertDescription>
                            </Alert>
                        )}

                        <div className="rounded-xl border">
                            <Table>
                                <TableHeader>
                                    <TableRow>
                                        <TableHead>Cognome</TableHead>
                                        <TableHead>Nome</TableHead>
                                        <TableHead>Cod. fiscale</TableHead>
                                        <TableHead>Email</TableHead>
                                        <TableHead>Ruolo</TableHead>
                                        <TableHead>Presenza tot.</TableHead>
                                        <TableHead>Link personale</TableHead>
                                        <TableHead className="text-right">
                                            Azioni
                                        </TableHead>
                                    </TableRow>
                                </TableHeader>
                                <TableBody>
                                    {participants.length === 0 && (
                                        <TableRow>
                                            <TableCell
                                                colSpan={8}
                                                className="text-muted-foreground h-24 text-center"
                                            >
                                                Nessun partecipante iscritto.
                                            </TableCell>
                                        </TableRow>
                                    )}
                                    {participants.map((participant) => (
                                        <TableRow key={participant.id}>
                                            <TableCell>
                                                {participant.last_name}
                                            </TableCell>
                                            <TableCell>
                                                {participant.first_name}
                                            </TableCell>
                                            <TableCell className="font-mono text-xs">
                                                {participant.fiscal_code ?? '—'}
                                            </TableCell>
                                            <TableCell>
                                                {participant.email ?? '—'}
                                            </TableCell>
                                            <TableCell>
                                                <ParticipantRoleBadge
                                                    role={participant.role}
                                                />
                                            </TableCell>
                                            <TableCell>
                                                {formatMinutes(
                                                    participant.attended_minutes,
                                                )}
                                            </TableCell>
                                            <TableCell>
                                                <div className="flex max-w-40 items-center gap-1">
                                                    <span className="text-muted-foreground truncate text-xs">
                                                        {participant.join_url}
                                                    </span>
                                                    <CopyButton
                                                        value={
                                                            participant.join_url
                                                        }
                                                        label="Copia link personale"
                                                    />
                                                </div>
                                            </TableCell>
                                            <TableCell className="text-right">
                                                <div className="flex justify-end gap-1">
                                                    <ParticipantFormDialog
                                                        classroomUuid={
                                                            classroom.uuid
                                                        }
                                                        participant={
                                                            participant
                                                        }
                                                        trigger={
                                                            <Button
                                                                variant="ghost"
                                                                size="sm"
                                                            >
                                                                Modifica
                                                            </Button>
                                                        }
                                                    />
                                                    <ConfirmActionDialog
                                                        trigger={
                                                            <Button
                                                                variant="ghost"
                                                                size="sm"
                                                                className="text-destructive"
                                                            >
                                                                Elimina
                                                            </Button>
                                                        }
                                                        title="Eliminare il partecipante?"
                                                        description={`Stai per rimuovere ${participant.full_name} dall'aula.`}
                                                        confirmLabel="Elimina"
                                                        destructive
                                                        onConfirm={() =>
                                                            deleteParticipant(
                                                                participant,
                                                            )
                                                        }
                                                    />
                                                </div>
                                            </TableCell>
                                        </TableRow>
                                    ))}
                                </TableBody>
                            </Table>
                        </div>
                    </TabsContent>

                    <TabsContent value="meetings" className="space-y-4">
                        <div className="flex flex-wrap items-center justify-between gap-3">
                            <p className="text-muted-foreground text-sm">
                                Minuti residui disponibili:{' '}
                                {formatMinutes(usage.remaining_minutes)}.
                            </p>
                            <div className="flex gap-2">
                                <Button asChild variant="outline">
                                    <a
                                        href={
                                            classrooms.attendance.export({
                                                classroom: classroom.uuid,
                                            }).url
                                        }
                                    >
                                        Esporta presenze CSV
                                    </a>
                                </Button>
                                <SchedulePlannerDialog
                                    classroomUuid={classroom.uuid}
                                    remainingMinutes={usage.remaining_minutes}
                                    trigger={
                                        <Button variant="outline">
                                            <SparklesIcon />
                                            Genera calendario
                                        </Button>
                                    }
                                />
                                <MeetingFormDialog
                                    classroomUuid={classroom.uuid}
                                    remainingMinutes={usage.remaining_minutes}
                                    trigger={
                                        <Button>
                                            <PlusIcon />
                                            Pianifica lezione
                                        </Button>
                                    }
                                />
                            </div>
                        </div>

                        {errors.meeting && (
                            <Alert variant="destructive">
                                <AlertTitle>
                                    Errore nella gestione della lezione
                                </AlertTitle>
                                <AlertDescription>
                                    {errors.meeting}
                                </AlertDescription>
                            </Alert>
                        )}

                        <div className="rounded-xl border">
                            <Table>
                                <TableHeader>
                                    <TableRow>
                                        <TableHead>Data e ora</TableHead>
                                        <TableHead>Titolo</TableHead>
                                        <TableHead>Durata</TableHead>
                                        <TableHead>Stato</TableHead>
                                        <TableHead>Registrazione</TableHead>
                                        <TableHead>Presenze</TableHead>
                                        <TableHead className="text-right">
                                            Azioni
                                        </TableHead>
                                    </TableRow>
                                </TableHeader>
                                <TableBody>
                                    {meetingRows.length === 0 && (
                                        <TableRow>
                                            <TableCell
                                                colSpan={7}
                                                className="text-muted-foreground h-24 text-center"
                                            >
                                                Nessuna lezione pianificata.
                                            </TableCell>
                                        </TableRow>
                                    )}
                                    {meetingRows.map((meeting) => (
                                        <TableRow key={meeting.uuid}>
                                            <TableCell>
                                                {formatDateTime(
                                                    meeting.scheduled_at,
                                                )}{' '}
                                                -{' '}
                                                {formatDateTime(
                                                    meeting.scheduled_end_at,
                                                )
                                                    .split(', ')
                                                    .pop()}
                                            </TableCell>
                                            <TableCell>
                                                {meeting.title}
                                            </TableCell>
                                            <TableCell>
                                                {formatMinutes(
                                                    meeting.duration_minutes,
                                                )}
                                            </TableCell>
                                            <TableCell>
                                                <MeetingStatusBadge
                                                    status={meeting.status}
                                                />
                                            </TableCell>
                                            <TableCell>
                                                {meeting.record ? 'Sì' : 'No'}
                                            </TableCell>
                                            <TableCell>
                                                {meeting.attendances_count}
                                            </TableCell>
                                            <TableCell className="text-right">
                                                <div className="flex justify-end gap-1">
                                                    {meeting.status !==
                                                        'ended' &&
                                                        (meeting.can_start ? (
                                                            <Button
                                                                asChild
                                                                size="sm"
                                                            >
                                                                <a
                                                                    href={
                                                                        meetings.join(
                                                                            {
                                                                                meeting:
                                                                                    meeting.uuid,
                                                                            },
                                                                        ).url
                                                                    }
                                                                >
                                                                    Avvia ed
                                                                    entra
                                                                </a>
                                                            </Button>
                                                        ) : (
                                                            <Tooltip>
                                                                <TooltipTrigger
                                                                    asChild
                                                                >
                                                                    <span>
                                                                        <Button
                                                                            size="sm"
                                                                            disabled
                                                                        >
                                                                            Avvia
                                                                            ed
                                                                            entra
                                                                        </Button>
                                                                    </span>
                                                                </TooltipTrigger>
                                                                <TooltipContent>
                                                                    Non ancora
                                                                    disponibile.
                                                                </TooltipContent>
                                                            </Tooltip>
                                                        ))}
                                                    <DropdownMenu>
                                                        <DropdownMenuTrigger
                                                            asChild
                                                        >
                                                            <Button
                                                                variant="ghost"
                                                                size="icon-sm"
                                                            >
                                                                <MoreHorizontalIcon />
                                                            </Button>
                                                        </DropdownMenuTrigger>
                                                        <DropdownMenuContent align="end">
                                                            <DropdownMenuItem
                                                                asChild
                                                            >
                                                                <Link
                                                                    href={meetings.show(
                                                                        {
                                                                            meeting:
                                                                                meeting.uuid,
                                                                        },
                                                                    )}
                                                                >
                                                                    Dettaglio
                                                                </Link>
                                                            </DropdownMenuItem>
                                                            {meeting.status !==
                                                                'ended' && (
                                                                <DropdownMenuItem
                                                                    onSelect={() =>
                                                                        refreshMeeting(
                                                                            meeting,
                                                                        )
                                                                    }
                                                                >
                                                                    Aggiorna
                                                                    stato
                                                                </DropdownMenuItem>
                                                            )}
                                                            {meeting.status ===
                                                                'running' && (
                                                                <DropdownMenuItem
                                                                    variant="destructive"
                                                                    onSelect={(
                                                                        e,
                                                                    ) => {
                                                                        e.preventDefault();
                                                                        endMeeting(
                                                                            meeting,
                                                                        );
                                                                    }}
                                                                >
                                                                    Termina
                                                                </DropdownMenuItem>
                                                            )}
                                                            {meeting.status ===
                                                                'scheduled' && (
                                                                <DropdownMenuItem
                                                                    onSelect={(
                                                                        e,
                                                                    ) =>
                                                                        e.preventDefault()
                                                                    }
                                                                    asChild
                                                                >
                                                                    <MeetingFormDialog
                                                                        classroomUuid={
                                                                            classroom.uuid
                                                                        }
                                                                        meeting={
                                                                            meeting
                                                                        }
                                                                        trigger={
                                                                            <button
                                                                                type="button"
                                                                                className="w-full text-left"
                                                                            >
                                                                                Modifica
                                                                            </button>
                                                                        }
                                                                    />
                                                                </DropdownMenuItem>
                                                            )}
                                                            <DropdownMenuItem
                                                                onSelect={() =>
                                                                    navigator.clipboard
                                                                        .writeText(
                                                                            meeting.public_url,
                                                                        )
                                                                        .catch(
                                                                            () => {},
                                                                        )
                                                                }
                                                            >
                                                                <CopyIcon />
                                                                Copia link
                                                                pubblico
                                                            </DropdownMenuItem>
                                                            {!meeting.started_at && (
                                                                <DropdownMenuItem
                                                                    variant="destructive"
                                                                    onSelect={(
                                                                        e,
                                                                    ) => {
                                                                        e.preventDefault();
                                                                        deleteMeeting(
                                                                            meeting,
                                                                        );
                                                                    }}
                                                                >
                                                                    Elimina
                                                                </DropdownMenuItem>
                                                            )}
                                                        </DropdownMenuContent>
                                                    </DropdownMenu>
                                                </div>
                                            </TableCell>
                                        </TableRow>
                                    ))}
                                </TableBody>
                            </Table>
                        </div>

                        {errors.recording && (
                            <Alert variant="destructive">
                                <AlertTitle>
                                    Errore nell&apos;eliminazione della
                                    registrazione
                                </AlertTitle>
                                <AlertDescription>
                                    {errors.recording}
                                </AlertDescription>
                            </Alert>
                        )}

                        {classroom.record_meetings && (
                            <RecordingsCard classroomUuid={classroom.uuid} />
                        )}
                    </TabsContent>

                    <TabsContent value="formatemp" className="space-y-4">
                        <p className="text-muted-foreground text-sm">
                            &quot;Collega a Forma.Temp&quot; abbina ogni lezione
                            alla fascia oraria corrispondente del progetto
                            (stessa data e stessi orari). Le presenze si inviano
                            poi dalla pagina di ciascuna lezione terminata.
                        </p>

                        {formatempConfigured &&
                            !classroom.formatemp_project_code && (
                                <Alert>
                                    <AlertTitle>
                                        Codice progetto mancante
                                    </AlertTitle>
                                    <AlertDescription>
                                        Indica il codice progetto Forma.Temp
                                        nelle impostazioni dell&apos;aula per
                                        collegare le lezioni alle fasce orarie.
                                    </AlertDescription>
                                </Alert>
                            )}

                        {!formatempConfigured && (
                            <Alert>
                                <AlertTitle>
                                    Integrazione non configurata
                                </AlertTitle>
                                <AlertDescription>
                                    Configura le credenziali Forma.Temp
                                    dell&apos;azienda per abilitare gli invii.{' '}
                                    <Link
                                        href={company.edit()}
                                        className="underline underline-offset-4"
                                    >
                                        Vai alle impostazioni azienda
                                    </Link>
                                    .
                                </AlertDescription>
                            </Alert>
                        )}

                        {errors.formatemp && (
                            <Alert variant="destructive">
                                <AlertTitle>Errore di invio</AlertTitle>
                                <AlertDescription>
                                    {errors.formatemp}
                                </AlertDescription>
                            </Alert>
                        )}

                        <div className="flex flex-wrap gap-2">
                            <Button
                                disabled={
                                    !formatempConfigured ||
                                    !classroom.formatemp_project_code
                                }
                                onClick={linkFormatemp}
                            >
                                Collega a Forma.Temp
                            </Button>
                            <Button
                                variant="outline"
                                disabled={!formatempConfigured}
                                onClick={() => syncFormatemp('classroom')}
                            >
                                Invia dati aula
                            </Button>
                            <Button
                                variant="outline"
                                disabled={!formatempConfigured}
                                onClick={() => syncFormatemp('participants')}
                            >
                                Invia partecipanti
                            </Button>
                        </div>

                        <div className="rounded-xl border">
                            <Table>
                                <TableHeader>
                                    <TableRow>
                                        <TableHead>Data</TableHead>
                                        <TableHead>Tipo</TableHead>
                                        <TableHead>Stato</TableHead>
                                        <TableHead>Tentativi</TableHead>
                                        <TableHead>Errore</TableHead>
                                    </TableRow>
                                </TableHeader>
                                <TableBody>
                                    {syncs.length === 0 && (
                                        <TableRow>
                                            <TableCell
                                                colSpan={5}
                                                className="text-muted-foreground h-24 text-center"
                                            >
                                                Nessun invio effettuato.
                                            </TableCell>
                                        </TableRow>
                                    )}
                                    {syncs.map((sync) => (
                                        <TableRow key={sync.id}>
                                            <TableCell>
                                                {formatDateTime(
                                                    sync.synced_at ??
                                                        sync.created_at,
                                                )}
                                            </TableCell>
                                            <TableCell>
                                                {syncTypeLabel(sync.type)}
                                            </TableCell>
                                            <TableCell>
                                                <FormatempSyncStatusBadge
                                                    status={sync.status}
                                                />
                                            </TableCell>
                                            <TableCell>
                                                {sync.attempts}
                                            </TableCell>
                                            <TableCell className="text-sm">
                                                {sync.error ? (
                                                    <div className="space-y-1">
                                                        <p className="text-destructive">
                                                            {sync.error}
                                                        </p>
                                                        {sync.explanation && (
                                                            <p className="text-muted-foreground flex items-start gap-1.5">
                                                                <SparklesIcon className="mt-0.5 size-3.5 shrink-0" />
                                                                <span>
                                                                    {
                                                                        sync.explanation
                                                                    }
                                                                </span>
                                                            </p>
                                                        )}
                                                    </div>
                                                ) : (
                                                    '—'
                                                )}
                                            </TableCell>
                                        </TableRow>
                                    ))}
                                </TableBody>
                            </Table>
                        </div>
                    </TabsContent>
                </Tabs>
            </div>
        </>
    );
}

function syncTypeLabel(type: FormatempSync['type']) {
    switch (type) {
        case 'classroom':
            return 'Dati aula';
        case 'participants':
            return 'Partecipanti';
        case 'attendance':
            return 'Presenze';
        case 'connection':
            return 'Verifica connessione';
        case 'fasce':
            return 'Fasce orarie';
        case 'presenza':
            return 'Invio presenze';
        case 'personale':
            return 'Personale coinvolto';
        case 'consolida':
            return 'Consolidamento';
        case 'discente':
            return 'Anagrafica discente';
    }
}

ClassroomsShow.layout = ({ classroom }: Props) => ({
    breadcrumbs: [
        { title: 'Aule', href: classroomsIndex() },
        { title: classroom.name, href: classrooms.show(classroom.uuid) },
    ],
});