import TextInput from '@/Components/TextInput';
import { Button } from '@/Components/ui/button';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from '@/Components/ui/dialog';
import { useForm } from '@inertiajs/react';
import { useState } from 'react';

interface RestockActionProps {
    prescriptionId: number;
    drugName: string;
    availableDoses: number;
    packageQuantity: number;
}

/**
 * "Segna riassortito" action: opens a dialog that shows the current remaining
 * doses, lets the operator enter the size of the new box (defaults to one
 * package), and displays the resulting total. Confirming adds that box to the
 * remaining doses.
 */
export default function RestockAction({
    prescriptionId,
    drugName,
    availableDoses,
    packageQuantity,
}: RestockActionProps) {
    const [open, setOpen] = useState(false);
    const form = useForm<{ doses: number | string }>({
        doses: packageQuantity,
    });

    const box = Number(form.data.doses) || 0;
    const total = availableDoses + box;

    const submit = () => {
        form.post(
            route('drug-prescriptions.restock', {
                drugPrescription: prescriptionId,
            }),
            {
                preserveScroll: true,
                onSuccess: () => {
                    setOpen(false);
                    form.setData('doses', packageQuantity);
                },
            },
        );
    };

    return (
        <Dialog open={open} onOpenChange={setOpen}>
            <DialogTrigger asChild>
                <Button variant="outline" size="sm">
                    Segna riassortito
                </Button>
            </DialogTrigger>
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>Riassortimento — {drugName}</DialogTitle>
                    <DialogDescription className="text-zinc-500">
                        Aggiungi una nuova scatola alle dosi rimanenti.
                    </DialogDescription>
                </DialogHeader>

                <div className="space-y-3 py-2 text-sm">
                    <div className="flex items-center justify-between">
                        <span className="text-zinc-500">Rimanenza attuale</span>
                        <span className="font-medium">{availableDoses}</span>
                    </div>
                    <div className="flex items-center justify-between gap-4">
                        <span className="text-zinc-500">
                            Nuova scatola (dosi)
                        </span>
                        <TextInput
                            type="number"
                            min={1}
                            className="w-28 text-right"
                            value={form.data.doses}
                            onChange={(e) =>
                                form.setData(
                                    'doses',
                                    e.target.value === ''
                                        ? ''
                                        : Number(e.target.value),
                                )
                            }
                        />
                    </div>
                    <div className="flex items-center justify-between border-t pt-3">
                        <span className="font-medium">
                            Totale dopo il carico
                        </span>
                        <span className="text-lg font-semibold">{total}</span>
                    </div>
                    {form.errors.doses && (
                        <p className="text-right text-red-500">
                            {form.errors.doses}
                        </p>
                    )}
                </div>

                <DialogFooter>
                    <Button
                        variant="ghost"
                        onClick={() => setOpen(false)}
                        disabled={form.processing}
                    >
                        Annulla
                    </Button>
                    <Button
                        onClick={submit}
                        disabled={form.processing || box < 1}
                    >
                        Conferma riassortimento
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}