import InputError from '@/components/input-error';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
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, Link, router, useForm, usePage } from '@inertiajs/react';
import { ArrowLeft, CheckCircle2, CreditCard, FileSignature, FileText, Link2, Link2Off, Plus, Receipt as ReceiptIcon, XCircle } from 'lucide-react';
import { useEffect, useState } from 'react';
import { toast } from 'sonner';

interface ReservationSummary {
    id: number;
    encrypted_id: string;
    client_name: string;
    property_name: string;
    property_internal_name: string | null;
    check_in: string | null;
    check_out: string | null;
    currency: string;
    total_to_pay: string;
    already_paid: string;
    pending_total: string;
    left_to_pay: string;
    payment_mode_default: string;
}

interface PaymentRow {
    type: 'recovery' | 'receipt';
    id: number;
    encrypted_id: string;
    receipt_id?: number | null;
    receipt_encrypted_id?: string | null;
    original_amount?: string | null;
    original_currency?: string | null;
    amount: string;
    currency: string;
    payment_mode: string;
    paid_at: string | null;
    created_at: string;
    creator: string;
    receiver: string | null;
    signature_status: string | null;
    signed_at: string | null;
    remark: string | null;
    check_number: string | null;
    bank: string | null;
}

interface PageProps {
    reservation: ReservationSummary;
    payments: PaymentRow[];
    cashReceivers: { id: number; name: string }[];
    availableReceipts: { id: number; encrypted_id: string; label: string }[];
    flash?: { type: string; message: string };
}

export default function Show() {
    const { t } = useTranslation();
    const { reservation, payments, cashReceivers, availableReceipts, flash } = usePage<PageProps>().props;
    const [showForm, setShowForm] = useState(false);
    const [attachDialogOpen, setAttachDialogOpen] = useState(false);
    const [selectedReceiptId, setSelectedReceiptId] = useState<string>('__none__');

    const { data, setData, put, processing, errors, reset } = useForm({
        nouveau_montant: '',
        date_de_paiement: new Date().toISOString().split('T')[0],
        currency: 'TND',
        mode_paiement: reservation.payment_mode_default || 'CASH',
        check_number: '',
        bank: '',
        remarque: '',
        receiver_user_id: '',
        montant_restant: reservation.left_to_pay,
    });

    const breadcrumbs: BreadcrumbItem[] = [
        { title: t('recouvrements', 'recoveries'), href: '/recouvrements' },
        { title: t('recouvrements', 'payment_details'), href: `/recouvrements/${reservation.id}` },
    ];

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

    const showChequeFields = data.mode_paiement === 'CHÈQUE';
    const showCashReceiver = data.mode_paiement === 'CASH';

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        put(route('recouvrements.store', { reservation_id: reservation.id }), {
            preserveScroll: true,
            onSuccess: () => {
                reset('nouveau_montant', 'receiver_user_id', 'remarque', 'check_number', 'bank');
                setShowForm(false);
            },
        });
    };

    const handleAttachReceipt = () => {
        if (selectedReceiptId === '__none__') return;
        router.post(
            route('recouvrements.attach-receipt', reservation.id),
            { receipt_id: Number(selectedReceiptId) },
            {
                preserveScroll: true,
                onSuccess: () => {
                    setAttachDialogOpen(false);
                    setSelectedReceiptId('__none__');
                },
            },
        );
    };

    const handleDetachReceipt = (receiptId: number) => {
        router.delete(route('recouvrements.detach-receipt', receiptId), { preserveScroll: true });
    };

    const handleCancelPending = (recoveryId: number) => {
        if (!window.confirm('Annuler ce paiement en attente de signature ? Le solde sera libéré.')) return;
        router.delete(route('recouvrements.cancel-pending', recoveryId), { preserveScroll: true });
    };

    const handleGeneratePaymentLink = () => {
        router.post(route('clictopay.generate-reservation', reservation.id), {}, { preserveScroll: true });
    };

    const modeLabel = (m: string) => {
        if (m === 'CASH') return t('recouvrements', 'cash');
        if (m === 'CHÈQUE') return t('recouvrements', 'check');
        if (m === 'VIREMENT') return t('recouvrements', 'transfer');
        if (m === 'PAYMEE') return t('recouvrements', 'paymee');
        return m;
    };

    const signatureBadge = (p: PaymentRow) => {
        if (p.payment_mode !== 'CASH' && p.type === 'recovery') return null;
        if (p.signature_status === 'signed')
            return (
                <Badge variant="default" className="gap-1 bg-green-600">
                    <CheckCircle2 className="h-3 w-3" /> {t('recouvrements', 'signed')}
                </Badge>
            );
        if (p.signature_status === 'pending')
            return (
                <Badge variant="secondary" className="gap-1">
                    <FileSignature className="h-3 w-3" /> {t('recouvrements', 'pending_signature')}
                </Badge>
            );
        if (p.signature_status === 'cancelled')
            return (
                <Badge variant="outline" className="gap-1">
                    <XCircle className="h-3 w-3" /> {t('recouvrements', 'cancelled')}
                </Badge>
            );
        return null;
    };

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title={`${t('recouvrements', 'payment_details')} — ${reservation.client_name}`} />
            {/* Print-only styles: hide app chrome (sidebar, top header) and any print:hidden subtree. */}
            <style>{`
                @media print {
                    body { background: white !important; }
                    [data-slot="sidebar"], header { display: none !important; }
                    [data-slot="sidebar-wrapper"] { display: block !important; width: 100% !important; }
                    main { padding: 0 !important; }
                }
            `}</style>
            <div className="mx-auto max-w-4xl space-y-4 p-3 sm:space-y-6 sm:p-4">
                <div className="print:hidden">
                    <Link href="/recouvrements" className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground">
                        <ArrowLeft className="h-4 w-4" /> {t('recouvrements', 'back_to_list')}
                    </Link>
                </div>

                <Card>
                    <CardHeader>
                        <CardTitle>{t('recouvrements', 'reservation')}</CardTitle>
                    </CardHeader>
                    <CardContent className="grid gap-2 text-sm sm:grid-cols-2">
                        <div>
                            <span className="text-muted-foreground">{t('recouvrements', 'client')}: </span>
                            <span className="font-medium">{reservation.client_name}</span>
                        </div>
                        <div>
                            <span className="text-muted-foreground">{t('recouvrements', 'property')}: </span>
                            <span className="font-medium">
                                {reservation.property_name}
                                {reservation.property_internal_name ? ` (${reservation.property_internal_name})` : ''}
                            </span>
                        </div>
                        <div className="sm:col-span-2">
                            <span className="text-muted-foreground">{t('recouvrements', 'dates')}: </span>
                            <span className="font-medium">
                                {reservation.check_in} → {reservation.check_out}
                            </span>
                        </div>
                    </CardContent>
                </Card>

                <Card>
                    <CardContent className="p-4 sm:p-6">
                        <div className="flex items-center justify-between text-sm sm:text-base">
                            <span className="text-muted-foreground">{t('recouvrements', 'total_to_pay')}</span>
                            <span className="font-medium">
                                {reservation.total_to_pay} {reservation.currency}
                            </span>
                        </div>
                        <div className="mt-2 flex items-center justify-between text-sm sm:text-base">
                            <span className="text-muted-foreground">{t('recouvrements', 'already_paid')}</span>
                            <span className="font-medium">
                                {reservation.already_paid} {reservation.currency}
                            </span>
                        </div>
                        {Number(reservation.pending_total) > 0 && (
                            <div className="mt-2 flex items-center justify-between text-sm sm:text-base">
                                <span className="text-muted-foreground">En attente de signature</span>
                                <span className="font-medium text-amber-600">
                                    {reservation.pending_total} {reservation.currency}
                                </span>
                            </div>
                        )}
                        <div className="mt-3 flex items-center justify-between border-t pt-3 text-base sm:text-xl">
                            <span className="font-semibold">{t('recouvrements', 'left_to_pay')}</span>
                            <span className={`font-bold ${Number(reservation.left_to_pay) > 0 ? 'text-amber-600' : 'text-green-600'}`}>
                                {reservation.left_to_pay} {reservation.currency}
                            </span>
                        </div>
                    </CardContent>
                </Card>

                <Card>
                    <CardHeader className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                        <CardTitle>{t('recouvrements', 'payment_history')}</CardTitle>
                        <div className="flex gap-2 print:hidden">
                            {Number(reservation.left_to_pay) - Number(reservation.pending_total) > 0 && !showForm && (
                                <Button onClick={() => setShowForm(true)} size="sm" className="w-full sm:w-auto">
                                    <Plus className="mr-1 h-4 w-4" /> {t('recouvrements', 'add_payment')}
                                </Button>
                            )}
                            {Number(reservation.left_to_pay) - Number(reservation.pending_total) > 0 && (
                                <Button
                                    size="sm"
                                    variant="outline"
                                    className="w-full sm:w-auto"
                                    onClick={() => setAttachDialogOpen(true)}
                                >
                                    <Link2 className="mr-1 h-4 w-4" /> Attacher un reçu
                                </Button>
                            )}
                            {Number(reservation.left_to_pay) - Number(reservation.pending_total) > 0 && (
                                <Button
                                    size="sm"
                                    variant="outline"
                                    className="w-full sm:w-auto"
                                    onClick={handleGeneratePaymentLink}
                                >
                                    <CreditCard className="mr-1 h-4 w-4" /> {t('clictopay', 'generate_for_reservation')}
                                </Button>
                            )}
                            <Button
                                size="sm"
                                variant="outline"
                                className="w-full sm:w-auto print:hidden"
                                onClick={() =>
                                    reservation.encrypted_id &&
                                    router.visit(route('recouvrements.statement', reservation.encrypted_id))
                                }
                            >
                                <ReceiptIcon className="mr-1 h-4 w-4" /> {t('recouvrements', 'owner_statement', 'Relevé propriétaire')}
                            </Button>
                        </div>
                    </CardHeader>
                    <CardContent>
                        {showForm && (
                            <form onSubmit={handleSubmit} className="mb-6 space-y-3 rounded-md border bg-muted/30 p-4 print:hidden">
                                <div className="grid gap-3 sm:grid-cols-2">
                                    <div>
                                        <Label htmlFor="nouveau_montant">{t('recouvrements', 'amount_paid')}</Label>
                                        <Input
                                            id="nouveau_montant"
                                            value={data.nouveau_montant}
                                            onChange={(e) => setData('nouveau_montant', e.target.value)}
                                            required
                                        />
                                        <InputError message={errors.nouveau_montant} />
                                    </div>
                                    <div>
                                        <Label htmlFor="date_de_paiement">{t('recouvrements', 'payment_date')}</Label>
                                        <Input
                                            id="date_de_paiement"
                                            type="date"
                                            value={data.date_de_paiement}
                                            onChange={(e) => setData('date_de_paiement', e.target.value)}
                                            required
                                        />
                                        <InputError message={errors.date_de_paiement} />
                                    </div>
                                    <div>
                                        <Label htmlFor="currency">{t('recouvrements', 'currency')}</Label>
                                        <Select value={data.currency} onValueChange={(v) => setData('currency', v as 'TND' | 'USD' | 'EUR')}>
                                            <SelectTrigger>
                                                <SelectValue />
                                            </SelectTrigger>
                                            <SelectContent>
                                                <SelectGroup>
                                                    <SelectItem value="TND">TND</SelectItem>
                                                    <SelectItem value="USD">USD</SelectItem>
                                                    <SelectItem value="EUR">EUR</SelectItem>
                                                </SelectGroup>
                                            </SelectContent>
                                        </Select>
                                    </div>
                                    <div>
                                        <Label htmlFor="mode_paiement">{t('recouvrements', 'payment_mode')}</Label>
                                        <Select value={data.mode_paiement} onValueChange={(v) => setData('mode_paiement', v)}>
                                            <SelectTrigger>
                                                <SelectValue />
                                            </SelectTrigger>
                                            <SelectContent>
                                                <SelectGroup>
                                                    <SelectItem value="CASH">{t('recouvrements', 'cash')}</SelectItem>
                                                    <SelectItem value="CHÈQUE">{t('recouvrements', 'check')}</SelectItem>
                                                    <SelectItem value="VIREMENT">{t('recouvrements', 'transfer')}</SelectItem>
                                                    <SelectItem value="PAYMEE">{t('recouvrements', 'paymee')}</SelectItem>
                                                </SelectGroup>
                                            </SelectContent>
                                        </Select>
                                    </div>
                                    {showChequeFields && (
                                        <>
                                            <div>
                                                <Label htmlFor="check_number">{t('recouvrements', 'check_number')}</Label>
                                                <Input
                                                    id="check_number"
                                                    value={data.check_number}
                                                    onChange={(e) => setData('check_number', e.target.value)}
                                                />
                                            </div>
                                            <div>
                                                <Label htmlFor="bank">{t('recouvrements', 'bank')}</Label>
                                                <Input id="bank" value={data.bank} onChange={(e) => setData('bank', e.target.value)} />
                                            </div>
                                        </>
                                    )}
                                    {showCashReceiver && (
                                        <div className="sm:col-span-2">
                                            <Label htmlFor="receiver_user_id">{t('recouvrements', 'cash_receiver')}</Label>
                                            <Select value={data.receiver_user_id} onValueChange={(v) => setData('receiver_user_id', v)}>
                                                <SelectTrigger>
                                                    <SelectValue placeholder={t('recouvrements', 'select_receiver')} />
                                                </SelectTrigger>
                                                <SelectContent>
                                                    <SelectGroup>
                                                        {cashReceivers.map((u) => (
                                                            <SelectItem key={u.id} value={String(u.id)}>
                                                                {u.name}
                                                            </SelectItem>
                                                        ))}
                                                    </SelectGroup>
                                                </SelectContent>
                                            </Select>
                                            <InputError message={errors.receiver_user_id} />
                                        </div>
                                    )}
                                    <div className="sm:col-span-2">
                                        <Label htmlFor="remarque">{t('recouvrements', 'remark')}</Label>
                                        <Input id="remarque" value={data.remarque} onChange={(e) => setData('remarque', e.target.value)} />
                                    </div>
                                </div>
                                <div className="flex gap-2">
                                    <Button type="submit" disabled={processing}>
                                        {t('recouvrements', 'save')}
                                    </Button>
                                    <Button type="button" variant="outline" onClick={() => setShowForm(false)}>
                                        {t('recouvrements', 'cancel')}
                                    </Button>
                                </div>
                            </form>
                        )}

                        {payments.length === 0 ? (
                            <p className="text-sm text-muted-foreground">{t('recouvrements', 'no_payments_yet')}</p>
                        ) : (
                            <>
                                {/* Desktop table */}
                                <div className="hidden overflow-x-auto md:block">
                                    <table className="w-full text-sm">
                                        <thead className="bg-muted">
                                            <tr>
                                                <th className="p-2 text-left">{t('recouvrements', 'date')}</th>
                                                <th className="p-2 text-left">{t('recouvrements', 'amount')}</th>
                                                <th className="p-2 text-left">{t('recouvrements', 'payment_mode')}</th>
                                                <th className="p-2 text-left">{t('recouvrements', 'cash_receiver')}</th>
                                                <th className="p-2 text-left">{t('recouvrements', 'created_by')}</th>
                                                <th className="p-2 text-left">{t('recouvrements', 'remark')}</th>
                                                <th className="p-2 text-right print:hidden">{t('recouvrements', 'actions')}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {payments.map((p) => (
                                                <tr key={`${p.type}-${p.id}`} className="border-t">
                                                    <td className="p-2">{p.paid_at ?? p.created_at}</td>
                                                    <td className="p-2 font-medium">
                                                        {p.amount} {p.currency}
                                                    </td>
                                                    <td className="p-2">
                                                        <div className="flex flex-col gap-1">
                                                            <span>{modeLabel(p.payment_mode)}</span>
                                                            {signatureBadge(p)}
                                                        </div>
                                                    </td>
                                                    <td className="p-2">{p.receiver ?? '-'}</td>
                                                    <td className="p-2">{p.creator}</td>
                                                    <td className="p-2 text-muted-foreground">{p.remark ?? '-'}</td>
                                                    <td className="p-2 text-right print:hidden">
                                                        {p.type === 'recovery' ? (
                                                            <div className="flex items-center justify-end gap-1">
                                                                <Button
                                                                    size="sm"
                                                                    variant="outline"
                                                                    onClick={() =>
                                                                        router.visit(
                                                                            p.receipt_encrypted_id
                                                                                ? route('recus.show', p.receipt_encrypted_id)
                                                                                : `/paiement/recu/${p.encrypted_id}`,
                                                                        )
                                                                    }
                                                                >
                                                                    {t('recouvrements', 'view_receipt')}
                                                                </Button>
                                                                {p.signature_status === 'pending' && (
                                                                    <Button
                                                                        size="sm"
                                                                        variant="ghost"
                                                                        title="Annuler ce paiement en attente"
                                                                        onClick={() => handleCancelPending(p.id)}
                                                                    >
                                                                        <XCircle className="h-4 w-4 text-amber-600" />
                                                                    </Button>
                                                                )}
                                                                {p.receipt_id && (
                                                                    <Button
                                                                        size="sm"
                                                                        variant="ghost"
                                                                        title="Détacher ce reçu"
                                                                        onClick={() => handleDetachReceipt(p.receipt_id!)}
                                                                    >
                                                                        <Link2Off className="h-4 w-4 text-muted-foreground" />
                                                                    </Button>
                                                                )}
                                                            </div>
                                                        ) : (
                                                            <div className="flex items-center justify-end gap-1">
                                                                <Button
                                                                    size="sm"
                                                                    variant="outline"
                                                                    className="gap-1"
                                                                    onClick={() => router.visit(route('recus.show', p.encrypted_id))}
                                                                >
                                                                    <FileText className="h-3 w-3" /> Voir le reçu
                                                                </Button>
                                                                <Button
                                                                    size="sm"
                                                                    variant="ghost"
                                                                    title="Détacher ce reçu"
                                                                    onClick={() => handleDetachReceipt(p.id)}
                                                                >
                                                                    <Link2Off className="h-4 w-4 text-muted-foreground" />
                                                                </Button>
                                                            </div>
                                                        )}
                                                    </td>
                                                </tr>
                                            ))}
                                        </tbody>
                                    </table>
                                </div>

                                {/* Mobile cards */}
                                <div className="space-y-3 md:hidden">
                                    {payments.map((p) => (
                                        <div
                                            key={`${p.type}-${p.id}`}
                                            className={`rounded-md border p-3 ${p.type === 'receipt' ? 'border-blue-200 bg-blue-50/40 dark:bg-blue-950/20' : ''}`}
                                        >
                                            <div className="flex items-start justify-between gap-2">
                                                <div>
                                                    <div className="text-lg font-semibold">
                                                        {p.amount} {p.currency}
                                                    </div>
                                                    <div className="text-xs text-muted-foreground">{p.paid_at ?? p.created_at}</div>
                                                </div>
                                                <div className="flex flex-col items-end gap-1">
                                                    {p.type === 'receipt' && (
                                                        <Badge variant="outline" className="gap-1 text-blue-600">
                                                            <FileText className="h-3 w-3" /> Reçu lié
                                                        </Badge>
                                                    )}
                                                    {signatureBadge(p)}
                                                </div>
                                            </div>
                                            <div className="mt-3 grid grid-cols-2 gap-2 text-xs">
                                                <div>
                                                    <div className="text-muted-foreground">{t('recouvrements', 'payment_mode')}</div>
                                                    <div className="font-medium">{modeLabel(p.payment_mode)}</div>
                                                </div>
                                                <div>
                                                    <div className="text-muted-foreground">{t('recouvrements', 'cash_receiver')}</div>
                                                    <div className="font-medium">{p.receiver ?? '-'}</div>
                                                </div>
                                                <div>
                                                    <div className="text-muted-foreground">{t('recouvrements', 'created_by')}</div>
                                                    <div className="font-medium">{p.creator}</div>
                                                </div>
                                                {p.remark && (
                                                    <div className="col-span-2">
                                                        <div className="text-muted-foreground">{t('recouvrements', 'remark')}</div>
                                                        <div>{p.remark}</div>
                                                    </div>
                                                )}
                                            </div>
                                            <div className="mt-3 flex gap-2 print:hidden">
                                                {p.type === 'recovery' ? (
                                                    <>
                                                        <Button
                                                            size="sm"
                                                            variant="outline"
                                                            className="flex-1"
                                                            onClick={() =>
                                                                router.visit(
                                                                    p.receipt_encrypted_id
                                                                        ? route('recus.show', p.receipt_encrypted_id)
                                                                        : `/paiement/recu/${p.encrypted_id}`,
                                                                )
                                                            }
                                                        >
                                                            {t('recouvrements', 'view_receipt')}
                                                        </Button>
                                                        {p.signature_status === 'pending' && (
                                                            <Button
                                                                size="sm"
                                                                variant="ghost"
                                                                title="Annuler ce paiement en attente"
                                                                onClick={() => handleCancelPending(p.id)}
                                                            >
                                                                <XCircle className="h-4 w-4 text-amber-600" />
                                                            </Button>
                                                        )}
                                                        {p.receipt_id && (
                                                            <Button
                                                                size="sm"
                                                                variant="ghost"
                                                                title="Détacher"
                                                                onClick={() => handleDetachReceipt(p.receipt_id!)}
                                                            >
                                                                <Link2Off className="h-4 w-4" />
                                                            </Button>
                                                        )}
                                                    </>
                                                ) : (
                                                    <>
                                                        <Button
                                                            size="sm"
                                                            variant="outline"
                                                            className="flex-1 gap-1"
                                                            onClick={() => router.visit(route('recus.show', p.encrypted_id))}
                                                        >
                                                            <FileText className="h-3 w-3" /> Voir le reçu
                                                        </Button>
                                                        <Button
                                                            size="sm"
                                                            variant="ghost"
                                                            title="Détacher"
                                                            onClick={() => handleDetachReceipt(p.id)}
                                                        >
                                                            <Link2Off className="h-4 w-4" />
                                                        </Button>
                                                    </>
                                                )}
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            </>
                        )}
                    </CardContent>
                </Card>
            </div>

            {/* Attach receipt dialog */}
            <Dialog open={attachDialogOpen} onOpenChange={(open) => { setAttachDialogOpen(open); if (!open) setSelectedReceiptId('__none__'); }}>
                <DialogContent>
                    <DialogHeader>
                        <DialogTitle>Attacher un reçu signé</DialogTitle>
                    </DialogHeader>
                    <div className="space-y-3 py-2">
                        {availableReceipts.length === 0 ? (
                            <p className="text-sm text-muted-foreground">
                                Aucun reçu signé disponible. Créez et faites signer un reçu depuis Finance → Reçus de paiement.
                            </p>
                        ) : (
                            <div>
                                <Label>Reçu signé</Label>
                                <Select value={selectedReceiptId} onValueChange={setSelectedReceiptId}>
                                    <SelectTrigger>
                                        <SelectValue placeholder="Choisir un reçu" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectGroup>
                                            <SelectItem value="__none__">— Choisir —</SelectItem>
                                            {availableReceipts.map((r) => (
                                                <SelectItem key={r.id} value={String(r.id)}>
                                                    {r.label}
                                                </SelectItem>
                                            ))}
                                        </SelectGroup>
                                    </SelectContent>
                                </Select>
                                <p className="mt-1 text-xs text-muted-foreground">
                                    Seuls les reçus signés et non encore liés à une réservation sont affichés.
                                </p>
                            </div>
                        )}
                    </div>
                    <DialogFooter>
                        <Button variant="outline" onClick={() => setAttachDialogOpen(false)}>
                            Annuler
                        </Button>
                        <Button
                            onClick={handleAttachReceipt}
                            disabled={selectedReceiptId === '__none__' || availableReceipts.length === 0}
                        >
                            Attacher
                        </Button>
                    </DialogFooter>
                </DialogContent>
            </Dialog>
        </AppLayout>
    );
}