import { Link } from '@inertiajs/react';
import { useState } from 'react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import { formatDate } from '@/lib/utils';
import {
    index as employeesIndex,
    show as employeeShow,
} from '@/routes/admin/employees';

export type EmployeeDocumentReminder = {
    employee_id: number;
    employee_name: string;
    status: 'expired' | 'expiring';
    label: string;
    expires_on: string;
};

const STORAGE_KEY = 'rh-document-reminders-dismissed';

function fingerprint(reminders: EmployeeDocumentReminder[]): string {
    return reminders
        .map(
            (reminder) =>
                `${reminder.employee_id}:${reminder.label}:${reminder.expires_on}:${reminder.status}`,
        )
        .join('|');
}

export function EmployeeDocumentRemindersModal({
    reminders,
}: {
    reminders: EmployeeDocumentReminder[];
}) {
    const stamp = fingerprint(reminders);
    const [open, setOpen] = useState(() => {
        if (reminders.length === 0 || typeof window === 'undefined') {
            return false;
        }

        return sessionStorage.getItem(STORAGE_KEY) !== stamp;
    });

    if (reminders.length === 0) {
        return null;
    }

    const expired = reminders.filter(
        (reminder) => reminder.status === 'expired',
    );
    const expiring = reminders.filter(
        (reminder) => reminder.status === 'expiring',
    );
    const listFilter = expired.length > 0 ? 'expired' : 'expiring';

    function dismiss() {
        sessionStorage.setItem(STORAGE_KEY, stamp);
        setOpen(false);
    }

    return (
        <Dialog
            open={open}
            onOpenChange={(next) => {
                if (!next) {
                    dismiss();
                }
            }}
        >
            <DialogContent className="max-h-[90vh] overflow-hidden sm:max-w-lg">
                <DialogHeader>
                    <DialogTitle>Relance — pièces administratives</DialogTitle>
                    <DialogDescription>
                        Des pièces arrivent à échéance ou sont déjà expirées.
                        Vérifiez les dossiers concernés.
                    </DialogDescription>
                </DialogHeader>

                <div className="max-h-[50vh] space-y-5 overflow-y-auto pr-1">
                    {expired.length > 0 && (
                        <ReminderGroup
                            title="Expirées"
                            tone="expired"
                            items={expired}
                        />
                    )}
                    {expiring.length > 0 && (
                        <ReminderGroup
                            title="À renouveler (60 jours)"
                            tone="expiring"
                            items={expiring}
                        />
                    )}
                </div>

                <DialogFooter>
                    <Button variant="outline" onClick={dismiss}>
                        J’ai vu
                    </Button>
                    <Button asChild>
                        <Link
                            href={employeesIndex.url({
                                query: {
                                    document_alert: listFilter,
                                    status: 'active',
                                },
                            })}
                        >
                            Voir la liste
                        </Link>
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}

function ReminderGroup({
    title,
    tone,
    items,
}: {
    title: string;
    tone: 'expired' | 'expiring';
    items: EmployeeDocumentReminder[];
}) {
    return (
        <div className="space-y-2">
            <p className="text-xs font-medium tracking-[0.14em] text-muted-foreground uppercase">
                {title}
            </p>
            <ul className="divide-y divide-border border-y">
                {items.map((item) => (
                    <li
                        key={`${item.employee_id}-${item.label}-${item.expires_on}`}
                        className="flex items-start justify-between gap-3 py-2.5"
                    >
                        <div className="min-w-0">
                            <p className="truncate text-sm font-medium tracking-tight">
                                {item.employee_name}
                            </p>
                            <p className="text-xs text-muted-foreground">
                                {item.label} · {formatDate(item.expires_on)}
                            </p>
                        </div>
                        <div className="flex shrink-0 items-center gap-2">
                            <Badge
                                variant={
                                    tone === 'expired'
                                        ? 'destructive'
                                        : 'secondary'
                                }
                            >
                                {tone === 'expired' ? 'Expiré' : 'Échéance'}
                            </Badge>
                            <Button variant="ghost" size="sm" asChild>
                                <Link href={employeeShow(item.employee_id)}>
                                    Dossier
                                </Link>
                            </Button>
                        </div>
                    </li>
                ))}
            </ul>
        </div>
    );
}