import { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { useTranslation } from '@/hooks/use-translation';
import { EditableLineRow } from './editable-line-row';
import { fmtMillimes } from './format';
import type { RetenueCan, RetenueLigne, TauxOption, Totaux } from './types';

interface Props {
    /** Propriétaires ET fournisseurs mélangés, déjà filtrés et ordonnés par l'appelant. */
    lignes: RetenueLigne[];
    /** Totaux serveur du même ensemble que `lignes`. */
    totaux: Totaux;
    declarationId: number;
    /** Taux proposés à la saisie — les mêmes pour les deux familles de bénéficiaires. */
    taux: TauxOption[];
    locked: boolean;
    can: RetenueCan;
    onEdit: (ligne: RetenueLigne) => void;
    onPayment: (ligne: RetenueLigne) => void;
    onDelete: (ligne: RetenueLigne) => void;
    onDeposerTej: (ligne: RetenueLigne) => void;
}

/**
 * Tableau unique des lignes de la déclaration — propriétaires et fournisseurs
 * dans la même grille, distingués par la colonne « Type ».
 *
 * N° | Type | Logement / Facture | Bénéficiaire | M/F | CIN | Montant |
 * Retenue (taux) | Net à payer | Paiement | Actions, avec la ligne de totaux
 * en pied.
 */
export function LinesTable({ lignes, totaux, declarationId, taux, locked, can, onEdit, onPayment, onDelete, onDeposerTej }: Props) {
    const { t } = useTranslation();

    return (
        <div className="overflow-x-auto">
            <Table className="min-w-[1200px]">
                <TableHeader>
                    <TableRow className="bg-muted/50 [&_th]:h-11 [&_th]:text-xs [&_th]:font-semibold">
                        <TableHead className="w-12 text-center">{t('retenue', 'col_number')}</TableHead>
                        <TableHead className="w-28">{t('retenue', 'col_type')}</TableHead>
                        <TableHead>
                            {t('retenue', 'col_property')} / {t('retenue', 'col_invoice')}
                        </TableHead>
                        <TableHead>{t('retenue', 'col_beneficiary')}</TableHead>
                        <TableHead>{t('retenue', 'col_matricule')}</TableHead>
                        <TableHead>{t('retenue', 'col_cin')}</TableHead>
                        <TableHead className="text-right">{t('retenue', 'col_gross')}</TableHead>
                        <TableHead className="text-right">
                            {t('retenue', 'col_withheld')} ({t('retenue', 'col_rate')})
                        </TableHead>
                        <TableHead className="text-right">{t('retenue', 'col_net')}</TableHead>
                        <TableHead>{t('retenue', 'col_payment')}</TableHead>
                        {/* COLLÉE À DROITE. Le tableau porte onze colonnes et
                            défile horizontalement : sans ça, le menu d'actions
                            sort de l'écran et « Envoyer à TEJ » devient
                            introuvable — c'est exactement ce qui est arrivé le
                            2026-08-11, l'action existait et personne ne pouvait
                            l'atteindre. */}
                        <TableHead className="bg-background sticky right-0 z-20 w-14 text-right shadow-[-8px_0_8px_-8px_rgba(0,0,0,0.15)]">
                            {t('retenue', 'col_actions')}
                        </TableHead>
                    </TableRow>
                </TableHeader>
                <TableBody>
                    {lignes.length === 0 && (
                        <TableRow>
                            <TableCell colSpan={11} className="text-muted-foreground py-8 text-center text-sm">
                                {t('retenue', 'no_lines')}
                            </TableCell>
                        </TableRow>
                    )}
                    {lignes.map((ligne, index) => (
                        <EditableLineRow
                            key={ligne.id}
                            ligne={ligne}
                            numero={index + 1}
                            declarationId={declarationId}
                            taux={taux}
                            locked={locked}
                            can={can}
                            onEdit={onEdit}
                            onPayment={onPayment}
                            onDelete={onDelete}
                            onDeposerTej={onDeposerTej}
                        />
                    ))}
                </TableBody>
                {lignes.length > 0 && (
                    <TableFooter>
                        <TableRow className="bg-muted/60 font-semibold">
                            <TableCell colSpan={6} className="text-right">
                                {t('retenue', 'row_totals')}
                            </TableCell>
                            <TableCell className="text-right tabular-nums">{fmtMillimes(totaux.brut)}</TableCell>
                            <TableCell className="text-right text-amber-700 tabular-nums">{fmtMillimes(totaux.retenue)}</TableCell>
                            <TableCell className="text-right text-emerald-700 tabular-nums">{fmtMillimes(totaux.net)}</TableCell>
                            <TableCell colSpan={2} />
                        </TableRow>
                    </TableFooter>
                )}
            </Table>
        </div>
    );
}