import { useForm } from '@inertiajs/react';
import { type FormEvent, type ReactNode, useState } from 'react';
import InputError from '@/components/input-error';
import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Switch } from '@/components/ui/switch';
import { toDatetimeLocalValue } from '@/components/classrooms/format';
import classrooms from '@/routes/classrooms';
import meetings from '@/routes/meetings';
import type { Meeting } from '@/components/classrooms/types';

type Props = {
    classroomUuid: string;
    meeting?: Meeting;
    remainingMinutes?: number;
    trigger: ReactNode;
};

export default function MeetingFormDialog({
    classroomUuid,
    meeting,
    remainingMinutes,
    trigger,
}: Props) {
    const [open, setOpen] = useState(false);
    const isEdit = Boolean(meeting);

    const form = useForm({
        title: meeting?.title ?? '',
        scheduled_at: toDatetimeLocalValue(meeting?.scheduled_at),
        duration_minutes: meeting?.duration_minutes ?? 240,
        record: meeting?.record ?? false,
    });

    function handleOpenChange(next: boolean) {
        setOpen(next);
        if (!next) {
            form.reset();
            form.clearErrors();
        }
    }

    function submit(e: FormEvent) {
        e.preventDefault();

        const options = {
            preserveScroll: true,
            onSuccess: () => handleOpenChange(false),
        };

        if (meeting) {
            form.patch(meetings.update({ meeting: meeting.uuid }).url, options);
        } else {
            form.post(
                classrooms.meetings.store({ classroom: classroomUuid }).url,
                options,
            );
        }
    }

    return (
        <Dialog open={open} onOpenChange={handleOpenChange}>
            <DialogTrigger asChild>{trigger}</DialogTrigger>
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>
                        {isEdit ? 'Modifica lezione' : 'Pianifica lezione'}
                    </DialogTitle>
                    <DialogDescription>
                        {isEdit
                            ? 'Aggiorna data, durata o titolo della lezione.'
                            : "Programma una nuova lezione online per l'aula."}
                        {!isEdit && remainingMinutes !== undefined && (
                            <>
                                {' '}
                                Ore residue disponibili:{' '}
                                {Math.floor(remainingMinutes / 60)} h{' '}
                                {remainingMinutes % 60} min.
                            </>
                        )}
                    </DialogDescription>
                </DialogHeader>

                <form onSubmit={submit} className="space-y-4">
                    <div className="grid gap-2">
                        <Label htmlFor="title">Titolo</Label>
                        <Input
                            id="title"
                            value={form.data.title}
                            onChange={(e) =>
                                form.setData('title', e.target.value)
                            }
                            required
                        />
                        <InputError message={form.errors.title} />
                    </div>

                    <div className="grid grid-cols-2 gap-4">
                        <div className="grid gap-2">
                            <Label htmlFor="scheduled_at">Data e ora</Label>
                            <Input
                                id="scheduled_at"
                                type="datetime-local"
                                value={form.data.scheduled_at}
                                onChange={(e) =>
                                    form.setData('scheduled_at', e.target.value)
                                }
                                required
                            />
                            <InputError message={form.errors.scheduled_at} />
                        </div>
                        <div className="grid gap-2">
                            <Label htmlFor="duration_minutes">
                                Durata (minuti)
                            </Label>
                            <Input
                                id="duration_minutes"
                                type="number"
                                min={15}
                                step={15}
                                value={form.data.duration_minutes}
                                onChange={(e) =>
                                    form.setData(
                                        'duration_minutes',
                                        Number(e.target.value),
                                    )
                                }
                                required
                            />
                            <InputError
                                message={form.errors.duration_minutes}
                            />
                        </div>
                    </div>

                    <div className="flex items-center justify-between rounded-lg border p-3">
                        <div className="space-y-0.5">
                            <Label htmlFor="record">Registra la lezione</Label>
                            <p className="text-muted-foreground text-sm">
                                La registrazione sarà disponibile al termine
                                della lezione.
                            </p>
                        </div>
                        <Switch
                            id="record"
                            checked={form.data.record}
                            onCheckedChange={(checked) =>
                                form.setData('record', checked)
                            }
                        />
                    </div>

                    <DialogFooter>
                        <Button type="submit" disabled={form.processing}>
                            {isEdit ? 'Salva modifiche' : 'Pianifica'}
                        </Button>
                    </DialogFooter>
                </form>
            </DialogContent>
        </Dialog>
    );
}