import InputError from '@/components/input-error';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
import { Drawer, DrawerClose, DrawerContent, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/components/ui/drawer';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { DateRangePicker } from '@/components/date-range';
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { useTranslation } from '@/hooks/use-translation';
import AppLayout from '@/layouts/app-layout';
import { type BreadcrumbItem } from '@/types';
import { Head, router, useForm, usePage } from '@inertiajs/react';
import {
    ArrowDownToLine,
    ArrowUpFromLine,
    ArrowUpDown,
    CheckCircle2,
    ChevronDown,
    ChevronUp,
    Clock,
    Eye,
    FileText,
    Plus,
    Search,
    RotateCcw,
    Trash2,
    TrendingUp,
} from 'lucide-react';
import { useEffect, useMemo, useState } from 'react';
import { toast } from 'sonner';
import { useMediaQuery } from 'usehooks-ts';

interface TeamMember {
    id: number;
    name: string;
    has_pin: boolean;
}
interface ReceiptRow {
    id: number;
    encrypted_id: string;
    date: string;
    giver: string;
    receiver: string;
    amount: string;
    currency: string;
    payment_mode: string;
    note: string | null;
    signature_status: string | null;
    signature_blocked: boolean;
    signature_blocked_at: string | null;
    signature_attempts: number;
    signed_at: string | null;
    deleted_at: string | null;
}
interface PageProps {
    receipts: ReceiptRow[];
    teamMembers: TeamMember[];
    auth: { user: { id: number; name?: string; last_name?: string } | null; isAdmin?: boolean };
    flash?: { type: string; message: string };
}

const useModeLabel = () => {
    const { t } = useTranslation();
    return (m: string) =>
        ({
            CASH: t('recus', 'mode_short_cash', 'Espèces'),
            CHÈQUE: t('recus', 'mode_short_cheque', 'Chèque'),
            VIREMENT: t('recus', 'mode_short_transfer', 'Virement'),
            PAYMEE: t('recus', 'mode_short_paymee', 'Paymee'),
            TPE: t('recus', 'mode_short_tpe', 'TPE'),
        }[m] ?? m);
};

const modeBadgeClass = (m: string) => {
    if (m === 'CASH') return 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400';
    if (m === 'CHÈQUE') return 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400';
    if (m === 'VIREMENT') return 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400';
    if (m === 'TPE') return 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400';
    return 'bg-muted text-muted-foreground';
};

function SigBadge({ status, blocked }: { status: string | null; blocked?: boolean }) {
    const { t } = useTranslation();
    if (blocked)
        return (
            <span className="inline-flex items-center gap-1 rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-700 dark:bg-red-900/30 dark:text-red-400">
                <Clock className="h-3 w-3" /> {t('recus', 'status_blocked', 'Bloqué')}
            </span>
        );
    if (status === 'signed')
        return (
            <span className="inline-flex items-center gap-1 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700 dark:bg-green-900/30 dark:text-green-400">
                <CheckCircle2 className="h-3 w-3" /> {t('recus', 'status_signed', 'Signé')}
            </span>
        );
    if (status === 'pending')
        return (
            <span className="inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-700 dark:bg-amber-900/30 dark:text-amber-400">
                <Clock className="h-3 w-3" /> {t('recus', 'status_pending', 'En attente')}
            </span>
        );
    return (
        <span className="inline-flex items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground">
            {t('recus', 'status_none', '— Sans signature')}
        </span>
    );
}

function ReceiptForm({
    data,
    setData,
    errors,
    processing,
    onSubmit,
    teamMembers,
    receivers,
    currentUserName,
}: {
    data: any;
    setData: any;
    errors: any;
    processing: boolean;
    onSubmit: (e: React.FormEvent) => void;
    teamMembers: TeamMember[];
    receivers: TeamMember[];
    currentUserName: string;
}) {
    const { t, locale } = useTranslation();
    const [now, setNow] = useState(() => new Date());
    useEffect(() => {
        const id = setInterval(() => setNow(new Date()), 30_000);
        return () => clearInterval(id);
    }, []);
    const nowLabel = now.toLocaleString(locale === 'en' ? 'en-US' : 'fr-FR', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
    });

    return (
        <form id="receipt-form" onSubmit={onSubmit} className="space-y-4">
            <div className="grid gap-4 sm:grid-cols-2">
                <div className="sm:col-span-2">
                    <Label>{t('recus', 'date', 'Date')}</Label>
                    <div className="flex h-9 items-center rounded-md border bg-muted/40 px-3 text-sm">
                        {nowLabel}
                    </div>
                </div>
                <div>
                    <Label>{t('recus', 'giver', 'Donneur')}</Label>
                    <p className="mb-1 text-xs text-muted-foreground">{t('recus', 'giver_hint', "Celui qui remet l'argent")}</p>
                    <div className="flex h-9 items-center rounded-md border bg-muted/40 px-3 text-sm">
                        {currentUserName || '—'}
                    </div>
                </div>
                <div>
                    <Label>{t('recus', 'receiver', 'Receveur')}</Label>
                    <p className="mb-1 text-xs text-muted-foreground">{t('recus', 'receiver_hint', 'Celui qui reçoit et signe')}</p>
                    <Select
                        value={data.receiver_user_id || '__none__'}
                        onValueChange={(v) => setData('receiver_user_id', v === '__none__' ? '' : v)}
                    >
                        <SelectTrigger>
                            <SelectValue placeholder={t('recus', 'optional', 'Optionnel')} />
                        </SelectTrigger>
                        <SelectContent>
                            <SelectGroup>
                                <SelectItem value="__none__">{t('recus', 'none', '— Aucun —')}</SelectItem>
                                {receivers.map((m) => (
                                    <SelectItem key={m.id} value={String(m.id)}>
                                        {m.name}
                                    </SelectItem>
                                ))}
                            </SelectGroup>
                        </SelectContent>
                    </Select>
                    {receivers.length === 0 && (
                        <p className="mt-1 text-xs text-amber-600">{t('recus', 'no_pin_warning', 'Aucun membre avec PIN. Définissez un PIN dans Équipe → Utilisateurs.')}</p>
                    )}
                    <InputError message={errors.receiver_user_id} />
                </div>
                <div>
                    <Label>{t('recus', 'amount', 'Montant')}</Label>
                    <Input
                        type="number"
                        step="0.01"
                        min="0.01"
                        value={data.amount}
                        onChange={(e) => setData('amount', e.target.value)}
                        placeholder="0.00"
                        required
                    />
                    <InputError message={errors.amount} />
                </div>
                <div>
                    <Label>{t('recus', 'currency', 'Devise')}</Label>
                    <Select value={data.currency} onValueChange={(v) => setData('currency', v)}>
                        <SelectTrigger>
                            <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                            <SelectItem value="TND">{t('recus', 'currency_tnd', 'TND — Dinar tunisien')}</SelectItem>
                            <SelectItem value="USD">{t('recus', 'currency_usd', 'USD — Dollar US')}</SelectItem>
                            <SelectItem value="EUR">{t('recus', 'currency_eur', 'EUR — Euro')}</SelectItem>
                        </SelectContent>
                    </Select>
                </div>
                <div className="sm:col-span-2">
                    <Label>{t('recus', 'payment_mode', 'Mode de paiement')}</Label>
                    <Select value={data.payment_mode} onValueChange={(v) => setData('payment_mode', v)}>
                        <SelectTrigger>
                            <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                            <SelectItem value="CASH">{t('recus', 'mode_cash', 'Espèces')}</SelectItem>
                            <SelectItem value="CHÈQUE">{t('recus', 'mode_cheque', 'Chèque')}</SelectItem>
                            <SelectItem value="VIREMENT">{t('recus', 'mode_transfer', 'Virement bancaire')}</SelectItem>
                            <SelectItem value="TPE">{t('recus', 'mode_tpe', 'TPE (carte bancaire)')}</SelectItem>
                            <SelectItem value="PAYMEE">{t('recus', 'mode_paymee', 'Paymee')}</SelectItem>
                        </SelectContent>
                    </Select>
                    <InputError message={errors.payment_mode} />
                </div>
                <div className="sm:col-span-2">
                    <Label>
                        {t('recus', 'note', 'Note')} <span className="text-muted-foreground">{t('recus', 'optional_paren', '(optionnel)')}</span>
                    </Label>
                    <Input
                        value={data.note}
                        onChange={(e) => setData('note', e.target.value)}
                        placeholder={t('recus', 'note_placeholder', 'Objet du paiement, référence…')}
                    />
                    <InputError message={errors.note} />
                </div>
            </div>
        </form>
    );
}

export default function RecusIndex() {
    const { receipts, teamMembers, auth, flash } = usePage<PageProps>().props;
    const { t } = useTranslation();
    const modeLabel = useModeLabel();
    const currentUserId = auth?.user?.id ? String(auth.user.id) : '';
    const currentUserName = auth?.user
        ? `${auth.user.name ?? ''} ${auth.user.last_name ?? ''}`.trim() || `#${currentUserId}`
        : '';
    const isAdmin = Boolean(auth?.isAdmin);
    const [open, setOpen] = useState(false);
    const [search, setSearch] = useState('');
    const [filterStatus, setFilterStatus] = useState<'all' | 'pending' | 'signed' | 'none' | 'deleted'>('all');
    const [dateRange, setDateRange] = useState<{ from?: Date; to?: Date } | undefined>(undefined);
    type SortKey = 'date' | 'giver' | 'receiver' | 'amount' | 'payment_mode' | 'note' | 'signature_status';
    const [sortKey, setSortKey] = useState<SortKey>('date');
    const [sortDir, setSortDir] = useState<'asc' | 'desc'>('desc');
    const toggleSort = (k: SortKey) => {
        if (sortKey === k) setSortDir((d) => (d === 'asc' ? 'desc' : 'asc'));
        else { setSortKey(k); setSortDir('asc'); }
    };
    const isDesktop = useMediaQuery('(min-width: 768px)');

    const breadcrumbs: BreadcrumbItem[] = [
        { title: t('recus', 'breadcrumb_finance', 'Finance'), href: '/caisse' },
        { title: t('recus', 'title', 'Reçus de paiement'), href: '/recus' },
    ];

    const { data, setData, post, processing, errors, reset } = useForm({
        receiver_user_id: '',
        amount: '',
        currency: 'TND',
        payment_mode: 'CASH',
        note: '',
    });

    useEffect(() => {
        if (flash?.type === 'success') toast.success(flash.message);
        else if (flash?.type === 'error') toast.error(flash.message);
    }, [flash]);

    // Auto-refresh the list when the user returns to this tab/page — e.g. after
    // signing or getting blocked on /recus/{id} and navigating back via the
    // browser. Keeps the badge state (Signé / Bloqué / En attente) fresh
    // without forcing a manual refresh.
    useEffect(() => {
        const refresh = () => router.reload({ only: ['receipts'] });
        // Initial mount — covers the case where the user lands on /recus from
        // a history back-navigation (Inertia restores cached props, otherwise
        // they'd be stale).
        refresh();

        const onVisible = () => {
            if (document.visibilityState === 'visible') refresh();
        };
        const onPageShow = (e: PageTransitionEvent) => {
            // bfcache restore — browser back/forward without re-mounting the doc.
            if (e.persisted) refresh();
        };
        window.addEventListener('focus', refresh);
        window.addEventListener('pageshow', onPageShow);
        document.addEventListener('visibilitychange', onVisible);
        return () => {
            window.removeEventListener('focus', refresh);
            window.removeEventListener('pageshow', onPageShow);
            document.removeEventListener('visibilitychange', onVisible);
        };
    }, []);

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        post(route('recus.store'), {
            onSuccess: () => {
                reset();
                setOpen(false);
            },
        });
    };

    const handleDelete = (id: number) => {
        if (!confirm(t('recus', 'confirm_delete', 'Supprimer ce reçu définitivement ?'))) return;
        router.delete(route('recus.destroy', id), { preserveScroll: true });
    };

    const handleRestore = (id: number) => {
        router.post(route('recus.restore', id), {}, { preserveScroll: true });
    };

    const receivers = teamMembers.filter((m) => m.has_pin);

    // Stats — exclude soft-deleted receipts so KPIs reflect the active state.
    const stats = useMemo(() => {
        const live = receipts.filter((r) => !r.deleted_at);
        const total = live.length;
        const pending = live.filter((r) => r.signature_status === 'pending').length;
        const signed = live.filter((r) => r.signature_status === 'signed').length;
        const totalAmount = live.reduce((sum, r) => {
            if (r.currency === 'TND') return sum + parseFloat(r.amount);
            return sum;
        }, 0);
        return { total, pending, signed, totalAmount };
    }, [receipts]);

    // Filtered + sorted list
    const filtered = useMemo(() => {
        const parseFr = (s: string) => {
            const m = /^(\d{2})\/(\d{2})\/(\d{4})(?:\s+(\d{2}):(\d{2}))?$/.exec(s);
            if (!m) return 0;
            const [, d, mo, y, h = '0', mi = '0'] = m;
            return new Date(+y, +mo - 1, +d, +h, +mi).getTime();
        };
        const fromMs = dateRange?.from
            ? new Date(dateRange.from.getFullYear(), dateRange.from.getMonth(), dateRange.from.getDate(), 0, 0, 0).getTime()
            : null;
        const toMs = dateRange?.to
            ? new Date(dateRange.to.getFullYear(), dateRange.to.getMonth(), dateRange.to.getDate(), 23, 59, 59).getTime()
            : null;

        const list = receipts.filter((r) => {
            const q = search.toLowerCase();
            const matchSearch =
                !q ||
                r.giver.toLowerCase().includes(q) ||
                r.receiver?.toLowerCase().includes(q) ||
                r.note?.toLowerCase().includes(q) ||
                r.amount.includes(q);

            // Date range filter
            if (fromMs !== null || toMs !== null) {
                const t = parseFr(r.date);
                if (fromMs !== null && t < fromMs) return false;
                if (toMs !== null && t > toMs) return false;
            }

            // Deleted-visibility rules:
            //  - "deleted" tab → only deleted rows.
            //  - "all" tab → everything, including deleted.
            //  - any specific status tab → only that status, deleted excluded.
            const isDeleted = !!r.deleted_at;
            if (filterStatus === 'deleted') {
                if (!isDeleted) return false;
            } else if (filterStatus !== 'all' && isDeleted) {
                return false;
            }
            const matchStatus =
                filterStatus === 'all' ||
                filterStatus === 'deleted' ||
                (filterStatus === 'none' && !r.signature_status) ||
                r.signature_status === filterStatus;
            return matchSearch && matchStatus;
        });

        const parseFrDateTime = (s: string) => {
            // "dd/mm/yyyy HH:mm" → epoch (fallback 0)
            const m = /^(\d{2})\/(\d{2})\/(\d{4})(?:\s+(\d{2}):(\d{2}))?$/.exec(s);
            if (!m) return 0;
            const [, d, mo, y, h = '0', mi = '0'] = m;
            return new Date(+y, +mo - 1, +d, +h, +mi).getTime();
        };

        const cmp = (a: ReceiptRow, b: ReceiptRow): number => {
            switch (sortKey) {
                case 'date':
                    return parseFrDateTime(a.date) - parseFrDateTime(b.date);
                case 'amount':
                    return parseFloat(a.amount) - parseFloat(b.amount);
                case 'signature_status': {
                    const rank = (r: ReceiptRow) =>
                        r.signature_blocked ? 3 : r.signature_status === 'signed' ? 2 : r.signature_status === 'pending' ? 1 : 0;
                    return rank(a) - rank(b);
                }
                case 'giver':
                case 'receiver':
                case 'payment_mode':
                case 'note': {
                    const av = (a[sortKey] ?? '').toString().toLowerCase();
                    const bv = (b[sortKey] ?? '').toString().toLowerCase();
                    return av.localeCompare(bv);
                }
                default:
                    return 0;
            }
        };

        return [...list].sort((a, b) => (sortDir === 'asc' ? cmp(a, b) : -cmp(a, b)));
    }, [receipts, search, filterStatus, sortKey, sortDir, dateRange]);

    const formProps = { data, setData, errors, processing, onSubmit: handleSubmit, teamMembers, receivers, currentUserName };

    const triggerButton = (
        <Button size="sm" className="gap-2">
            <Plus className="h-4 w-4" /> {t('recus', 'new', 'Nouveau reçu')}
        </Button>
    );

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title={t('recus', 'title', 'Reçus de paiement')} />
            <div className="flex h-full flex-1 flex-col gap-6 p-3 sm:p-4 lg:p-6">
                {/* Page header */}
                <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                    <div>
                        <h1 className="text-xl font-semibold tracking-tight sm:text-2xl">{t('recus', 'title', 'Reçus de paiement')}</h1>
                        <p className="text-sm text-muted-foreground">{t('recus', 'subtitle', "Remises d'espèces entre membres de l'équipe")}</p>
                    </div>
                    {isDesktop ? (
                        <Dialog open={open} onOpenChange={setOpen}>
                            <DialogTrigger asChild>{triggerButton}</DialogTrigger>
                            <DialogContent className="max-w-lg">
                                <DialogHeader>
                                    <DialogTitle>{t('recus', 'create_dialog_title', 'Créer un reçu de paiement')}</DialogTitle>
                                </DialogHeader>
                                <div className="py-2">
                                    <ReceiptForm {...formProps} />
                                </div>
                                <DialogFooter>
                                    <Button variant="outline" onClick={() => setOpen(false)}>
                                        {t('recus', 'cancel', 'Annuler')}
                                    </Button>
                                    <Button type="submit" form="receipt-form" disabled={processing}>
                                        {t('recus', 'create_submit', 'Créer le reçu')}
                                    </Button>
                                </DialogFooter>
                            </DialogContent>
                        </Dialog>
                    ) : (
                        <Drawer open={open} onOpenChange={setOpen}>
                            <DrawerTrigger asChild>{triggerButton}</DrawerTrigger>
                            <DrawerContent>
                                <DrawerHeader>
                                    <DrawerTitle>{t('recus', 'create_dialog_title', 'Créer un reçu de paiement')}</DrawerTitle>
                                </DrawerHeader>
                                <div className="overflow-y-auto px-4 pb-2">
                                    <ReceiptForm {...formProps} />
                                </div>
                                <DrawerFooter>
                                    <Button type="submit" form="receipt-form" disabled={processing}>
                                        {t('recus', 'create_submit', 'Créer le reçu')}
                                    </Button>
                                    <DrawerClose asChild>
                                        <Button variant="outline">{t('recus', 'cancel', 'Annuler')}</Button>
                                    </DrawerClose>
                                </DrawerFooter>
                            </DrawerContent>
                        </Drawer>
                    )}
                </div>

                {/* KPI cards */}
                <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
                    <Card>
                        <CardContent className="p-4">
                            <div className="flex items-center justify-between">
                                <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">{t('recus', 'kpi_total', 'Total reçus')}</p>
                                <FileText className="h-4 w-4 text-muted-foreground" />
                            </div>
                            <p className="mt-2 text-2xl font-bold">{stats.total}</p>
                        </CardContent>
                    </Card>
                    <Card>
                        <CardContent className="p-4">
                            <div className="flex items-center justify-between">
                                <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">{t('recus', 'kpi_amount_tnd', 'Montant TND')}</p>
                                <TrendingUp className="h-4 w-4 text-muted-foreground" />
                            </div>
                            <p className="mt-2 text-2xl font-bold">
                                {stats.totalAmount.toLocaleString('fr-TN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
                            </p>
                        </CardContent>
                    </Card>
                    <Card>
                        <CardContent className="p-4">
                            <div className="flex items-center justify-between">
                                <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">{t('recus', 'kpi_pending', 'En attente')}</p>
                                <Clock className="h-4 w-4 text-amber-500" />
                            </div>
                            <p className="mt-2 text-2xl font-bold text-amber-600">{stats.pending}</p>
                        </CardContent>
                    </Card>
                    <Card>
                        <CardContent className="p-4">
                            <div className="flex items-center justify-between">
                                <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">{t('recus', 'kpi_signed', 'Signés')}</p>
                                <CheckCircle2 className="h-4 w-4 text-green-500" />
                            </div>
                            <p className="mt-2 text-2xl font-bold text-green-600">{stats.signed}</p>
                        </CardContent>
                    </Card>
                </div>

                {/* Filters */}
                <div className="flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center">
                    <div className="relative flex-1 min-w-[200px]">
                        <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                        <Input
                            className="pl-9"
                            placeholder={t('recus', 'search_placeholder', 'Rechercher par donneur, receveur, note…')}
                            value={search}
                            onChange={(e) => setSearch(e.target.value)}
                        />
                    </div>
                    <div className="flex items-center gap-1">
                        <DateRangePicker
                            date={dateRange}
                            setDate={setDateRange}
                            placeholder={t('recus', 'date_range_placeholder', 'Filtrer par date')}
                        />
                        {(dateRange?.from || dateRange?.to) && (
                            <Button
                                size="sm"
                                variant="ghost"
                                className="h-9 px-2 text-xs"
                                onClick={() => setDateRange(undefined)}
                                title={t('recus', 'date_clear', 'Effacer')}
                            >
                                ×
                            </Button>
                        )}
                    </div>
                    <div className="flex gap-1">
                        {(['all', 'pending', 'signed', 'none', 'deleted'] as const).map((s) => (
                            <Button
                                key={s}
                                size="sm"
                                variant={filterStatus === s ? 'default' : 'outline'}
                                onClick={() => setFilterStatus(s)}
                                className="text-xs"
                            >
                                {s === 'all'
                                    ? t('recus', 'filter_all', 'Tous')
                                    : s === 'pending'
                                      ? t('recus', 'filter_pending', 'En attente')
                                      : s === 'signed'
                                        ? t('recus', 'filter_signed', 'Signés')
                                        : s === 'none'
                                          ? t('recus', 'filter_none', 'Sans signature')
                                          : t('recus', 'filter_deleted', 'Supprimés')}
                            </Button>
                        ))}
                    </div>
                </div>

                {/* Table / cards */}
                {filtered.length === 0 ? (
                    <div className="flex flex-col items-center justify-center rounded-xl border border-dashed py-16 text-center">
                        <FileText className="mb-3 h-10 w-10 text-muted-foreground/40" />
                        <p className="font-medium text-muted-foreground">
                            {receipts.length === 0
                                ? t('recus', 'empty_title', 'Aucun reçu pour le moment')
                                : t('recus', 'empty_search', 'Aucun résultat pour cette recherche')}
                        </p>
                        {receipts.length === 0 && (
                            <p className="mt-1 text-sm text-muted-foreground/70">
                                {t('recus', 'empty_hint', 'Créez votre premier reçu avec le bouton "Nouveau reçu"')}
                            </p>
                        )}
                    </div>
                ) : (
                    <>
                        {/* Desktop table */}
                        <div className="hidden overflow-hidden rounded-xl border md:block">
                            <table className="w-full text-sm">
                                <thead>
                                    <tr className="border-b bg-muted/50">
                                        {([
                                            { key: 'date', label: t('recus', 'th_date', 'Date'), prefix: null },
                                            { key: 'giver', label: t('recus', 'th_giver', 'Donneur'), prefix: <ArrowUpFromLine className="h-3.5 w-3.5" /> },
                                            { key: 'receiver', label: t('recus', 'th_receiver', 'Receveur'), prefix: <ArrowDownToLine className="h-3.5 w-3.5" /> },
                                            { key: 'amount', label: t('recus', 'th_amount', 'Montant'), prefix: null },
                                            { key: 'payment_mode', label: t('recus', 'th_mode', 'Mode'), prefix: null },
                                            { key: 'note', label: t('recus', 'th_note', 'Note'), prefix: null },
                                            { key: 'signature_status', label: t('recus', 'th_status', 'Statut'), prefix: null },
                                        ] as { key: SortKey; label: string; prefix: React.ReactNode }[]).map((col) => {
                                            const active = sortKey === col.key;
                                            const Icon = active ? (sortDir === 'asc' ? ChevronUp : ChevronDown) : ArrowUpDown;
                                            return (
                                                <th
                                                    key={col.key}
                                                    onClick={() => toggleSort(col.key)}
                                                    className={`select-none cursor-pointer px-4 py-3 text-left font-medium text-muted-foreground hover:text-foreground ${active ? 'text-foreground' : ''}`}
                                                >
                                                    <span className="flex items-center gap-1">
                                                        {col.prefix}
                                                        {col.label}
                                                        <Icon className={`h-3 w-3 ${active ? 'opacity-100' : 'opacity-40'}`} />
                                                    </span>
                                                </th>
                                            );
                                        })}
                                        <th className="px-4 py-3 text-right font-medium text-muted-foreground">{t('recus', 'th_actions', 'Actions')}</th>
                                    </tr>
                                </thead>
                                <tbody className="divide-y divide-border">
                                    {filtered.map((r) => (
                                        <tr
                                            key={r.id}
                                            className={`group transition-colors hover:bg-muted/30 ${r.deleted_at ? 'bg-muted/30 text-muted-foreground line-through opacity-60' : ''}`}
                                            title={r.deleted_at ? t('recus', 'deleted_on', 'Supprimé le :at').replace(':at', r.deleted_at) : undefined}
                                        >
                                            <td className="px-4 py-3 text-muted-foreground">{r.date}</td>
                                            <td className="px-4 py-3">
                                                <span className="font-medium">{r.giver}</span>
                                            </td>
                                            <td className="px-4 py-3">
                                                {r.receiver ? (
                                                    <span>{r.receiver}</span>
                                                ) : (
                                                    <span className="text-muted-foreground">—</span>
                                                )}
                                            </td>
                                            <td className="px-4 py-3">
                                                <span className="font-semibold tabular-nums">
                                                    {parseFloat(r.amount).toLocaleString('fr-TN', {
                                                        minimumFractionDigits: 2,
                                                        maximumFractionDigits: 2,
                                                    })}
                                                </span>
                                                <span className="ml-1 text-xs text-muted-foreground">{r.currency}</span>
                                            </td>
                                            <td className="px-4 py-3">
                                                <span className={`rounded-full px-2 py-0.5 text-xs font-medium ${modeBadgeClass(r.payment_mode)}`}>
                                                    {modeLabel(r.payment_mode)}
                                                </span>
                                            </td>
                                            <td className="max-w-[160px] truncate px-4 py-3 text-muted-foreground">
                                                {r.note ?? '—'}
                                            </td>
                                            <td className="px-4 py-3">
                                                <div className="flex items-center gap-1">
                                                    <SigBadge status={r.signature_status} blocked={r.signature_blocked} />
                                                    {r.deleted_at && (
                                                        <span className="inline-flex items-center gap-1 rounded-full bg-zinc-200 px-2 py-0.5 text-xs font-medium text-zinc-700 dark:bg-zinc-700/40 dark:text-zinc-300 no-underline">
                                                            {t('recus', 'status_deleted', 'Supprimé')}
                                                        </span>
                                                    )}
                                                </div>
                                            </td>
                                            <td className="px-4 py-3 text-right no-underline">
                                                <div className="flex items-center justify-end gap-1 opacity-0 transition-opacity group-hover:opacity-100">
                                                    {!r.deleted_at && (
                                                        <Button
                                                            size="sm"
                                                            variant="ghost"
                                                            className="h-8 w-8 p-0"
                                                            title={t('recus', 'view', 'Voir le reçu')}
                                                            onClick={() => router.visit(route('recus.show', r.encrypted_id))}
                                                        >
                                                            <Eye className="h-4 w-4" />
                                                        </Button>
                                                    )}
                                                    {r.deleted_at ? (
                                                        isAdmin && (
                                                            <Button
                                                                size="sm"
                                                                variant="ghost"
                                                                className="h-8 w-8 p-0"
                                                                title={t('recus', 'restore', 'Restaurer')}
                                                                onClick={() => handleRestore(r.id)}
                                                            >
                                                                <RotateCcw className="h-4 w-4" />
                                                            </Button>
                                                        )
                                                    ) : (
                                                        (isAdmin || (r.signature_status !== 'signed' && !r.signature_blocked)) && (
                                                            <Button
                                                                size="sm"
                                                                variant="ghost"
                                                                className="h-8 w-8 p-0 text-destructive hover:text-destructive"
                                                                title={t('recus', 'delete', 'Supprimer')}
                                                                onClick={() => handleDelete(r.id)}
                                                            >
                                                                <Trash2 className="h-4 w-4" />
                                                            </Button>
                                                        )
                                                    )}
                                                </div>
                                            </td>
                                        </tr>
                                    ))}
                                </tbody>
                            </table>
                        </div>

                        {/* Mobile cards */}
                        <div className="space-y-3 md:hidden">
                            {filtered.map((r) => (
                                <div key={r.id} className={`rounded-xl border bg-card p-4 shadow-sm ${r.deleted_at ? 'opacity-60' : ''}`}>
                                    <div className="flex items-start justify-between gap-3">
                                        <div>
                                            <p className={`text-xl font-bold tabular-nums ${r.deleted_at ? 'line-through' : ''}`}>
                                                {parseFloat(r.amount).toLocaleString('fr-TN', {
                                                    minimumFractionDigits: 2,
                                                    maximumFractionDigits: 2,
                                                })}
                                                <span className="ml-1 text-sm font-normal text-muted-foreground">{r.currency}</span>
                                            </p>
                                            <p className="text-xs text-muted-foreground">{r.date}</p>
                                            {r.deleted_at && (
                                                <p className="mt-1 text-xs text-zinc-600 dark:text-zinc-400">
                                                    {t('recus', 'deleted_on', 'Supprimé le :at').replace(':at', r.deleted_at)}
                                                </p>
                                            )}
                                        </div>
                                        <div className="flex flex-col items-end gap-1">
                                            <SigBadge status={r.signature_status} blocked={r.signature_blocked} />
                                            {r.deleted_at && (
                                                <span className="inline-flex items-center gap-1 rounded-full bg-zinc-200 px-2 py-0.5 text-xs font-medium text-zinc-700 dark:bg-zinc-700/40 dark:text-zinc-300">
                                                    {t('recus', 'status_deleted', 'Supprimé')}
                                                </span>
                                            )}
                                        </div>
                                    </div>

                                    <div className="mt-3 flex items-center gap-3 text-sm">
                                        <div className="flex items-center gap-1 text-muted-foreground">
                                            <ArrowUpFromLine className="h-3.5 w-3.5 shrink-0" />
                                            <span className="font-medium text-foreground">{r.giver}</span>
                                        </div>
                                        <span className="text-muted-foreground">→</span>
                                        <div className="flex items-center gap-1 text-muted-foreground">
                                            <ArrowDownToLine className="h-3.5 w-3.5 shrink-0" />
                                            <span className="font-medium text-foreground">{r.receiver || '—'}</span>
                                        </div>
                                    </div>

                                    <div className="mt-2 flex items-center gap-2">
                                        <span className={`rounded-full px-2 py-0.5 text-xs font-medium ${modeBadgeClass(r.payment_mode)}`}>
                                            {modeLabel(r.payment_mode)}
                                        </span>
                                        {r.note && (
                                            <span className="truncate text-xs text-muted-foreground">{r.note}</span>
                                        )}
                                    </div>
                                    <div className="mt-3 flex gap-2 border-t pt-3">
                                        {!r.deleted_at && (
                                            <Button
                                                size="sm"
                                                variant="outline"
                                                className="flex-1 gap-1"
                                                onClick={() => router.visit(route('recus.show', r.encrypted_id))}
                                            >
                                                <Eye className="h-3.5 w-3.5" /> {t('recus', 'view', 'Voir le reçu')}
                                            </Button>
                                        )}
                                        {r.deleted_at
                                            ? isAdmin && (
                                                  <Button
                                                      size="sm"
                                                      variant="outline"
                                                      className="flex-1 gap-1"
                                                      onClick={() => handleRestore(r.id)}
                                                  >
                                                      <RotateCcw className="h-3.5 w-3.5" /> {t('recus', 'restore', 'Restaurer')}
                                                  </Button>
                                              )
                                            : (isAdmin || (r.signature_status !== 'signed' && !r.signature_blocked)) && (
                                                  <Button
                                                      size="sm"
                                                      variant="outline"
                                                      className="text-destructive hover:text-destructive"
                                                      onClick={() => handleDelete(r.id)}
                                                  >
                                                      <Trash2 className="h-3.5 w-3.5" />
                                                  </Button>
                                              )}
                                    </div>
                                </div>
                            ))}
                        </div>

                        <p className="text-right text-xs text-muted-foreground">
                            {filtered.length}{' '}
                            {filtered.length > 1 ? t('recus', 'count_many', 'résultats') : t('recus', 'count_one', 'résultat')}
                            {search || filterStatus !== 'all' ? ` ${t('recus', 'count_of', 'sur')} ${receipts.length}` : ''}
                        </p>
                    </>
                )}
            </div>
        </AppLayout>
    );
}