import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/Components/ui/table';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import RestockAction from '@/Pages/DrugPrescription/RestockAction';
import { User } from '@/types';
import { Head } from '@inertiajs/react';
import { CheckCircle2, TriangleAlert } from 'lucide-react';

interface RestockRow {
    id: number;
    drug_name: string;
    available_doses: number;
    package_quantity: number;
    needs_restock: boolean;
    last_restocked_at: string | null;
}

interface RestockSheetProps {
    patient: User;
    prescriptions: RestockRow[];
}

function formatDate(value: string | null): string {
    if (!value) {
        return 'Mai';
    }

    return new Date(value).toLocaleDateString('it', {
        day: '2-digit',
        month: '2-digit',
        year: 'numeric',
    });
}

export default function RestockSheet({
    patient,
    prescriptions,
}: RestockSheetProps) {
    return (
        <AuthenticatedLayout
            backLink={route('dashboard.personal', { target: patient.id })}
            backLinkLabel={`${patient.name} ${patient.surname}`}
        >
            <Head title="Farmaci da riordinare" />

            <div className="py-2">
                <div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
                    <div className="overflow-hidden sm:rounded-lg">
                        <div className="p-6 text-gray-900">
                            <div className="scroll-m-20 text-4xl font-light tracking-tight lg:text-5xl">
                                Farmaci da riordinare
                            </div>

                            <div className="container mx-auto py-10">
                                <div className="overflow-x-auto rounded-md border bg-white">
                                    <Table>
                                        <TableHeader>
                                            <TableRow>
                                                <TableHead>Farmaco</TableHead>
                                                <TableHead>
                                                    Dosi disponibili
                                                </TableHead>
                                                <TableHead>Stato</TableHead>
                                                <TableHead>
                                                    Ultimo riassortimento
                                                </TableHead>
                                                <TableHead className="text-right">
                                                    Azione
                                                </TableHead>
                                            </TableRow>
                                        </TableHeader>
                                        <TableBody>
                                            {prescriptions.length ? (
                                                prescriptions.map((row) => (
                                                    <TableRow key={row.id}>
                                                        <TableCell className="font-medium">
                                                            {row.drug_name}
                                                        </TableCell>
                                                        <TableCell>
                                                            {
                                                                row.available_doses
                                                            }
                                                        </TableCell>
                                                        <TableCell>
                                                            {row.needs_restock ? (
                                                                <span className="inline-flex items-center gap-1 rounded-full bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-700">
                                                                    <TriangleAlert className="h-3.5 w-3.5" />
                                                                    Da
                                                                    riassortire
                                                                </span>
                                                            ) : (
                                                                <span className="inline-flex items-center gap-1 rounded-full bg-emerald-50 px-2 py-0.5 text-xs font-medium text-emerald-700">
                                                                    <CheckCircle2 className="h-3.5 w-3.5" />
                                                                    OK
                                                                </span>
                                                            )}
                                                        </TableCell>
                                                        <TableCell>
                                                            {formatDate(
                                                                row.last_restocked_at,
                                                            )}
                                                        </TableCell>
                                                        <TableCell className="text-right">
                                                            <RestockAction
                                                                prescriptionId={
                                                                    row.id
                                                                }
                                                                drugName={
                                                                    row.drug_name
                                                                }
                                                                availableDoses={
                                                                    row.available_doses
                                                                }
                                                                packageQuantity={
                                                                    row.package_quantity
                                                                }
                                                            />
                                                        </TableCell>
                                                    </TableRow>
                                                ))
                                            ) : (
                                                <TableRow>
                                                    <TableCell
                                                        colSpan={5}
                                                        className="h-24 text-center"
                                                    >
                                                        Nessun farmaco
                                                        prescritto.
                                                    </TableCell>
                                                </TableRow>
                                            )}
                                        </TableBody>
                                    </Table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}
