import { ArrowLeftRight, Banknote, FileSpreadsheet, Receipt as ReceiptIcon, Wallet } from 'lucide-react';
import type { LedgerRow, LedgerSource } from './types';

interface Props {
    row: Pick<LedgerRow, 'source' | 'recovery_id' | 'expense_id' | 'receipt_id' | 'paired_entry_id'>;
    onClick?: () => void;
}

const META: Record<LedgerSource, { label: string; classes: string; Icon: typeof Wallet }> = {
    manual:     { label: 'Manuel',       classes: 'bg-slate-100 text-slate-700 border-slate-200',   Icon: Wallet },
    recovery:   { label: 'Recouvrement', classes: 'bg-sky-50 text-sky-700 border-sky-200',          Icon: Banknote },
    expense:    { label: 'Dépense',      classes: 'bg-amber-50 text-amber-700 border-amber-200',    Icon: FileSpreadsheet },
    receipt:    { label: 'Reçu',         classes: 'bg-violet-50 text-violet-700 border-violet-200', Icon: ReceiptIcon },
    allocation: { label: 'Allocation',   classes: 'bg-emerald-50 text-emerald-700 border-emerald-200', Icon: ArrowLeftRight },
};

export function SourceBadge({ row, onClick }: Props) {
    const meta = META[row.source] ?? META.manual;
    const refId = row.recovery_id ?? row.expense_id ?? row.receipt_id ?? row.paired_entry_id;
    const isClickable = onClick != null && row.source !== 'manual';

    const content = (
        <span
            className={`inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11px] font-medium ${meta.classes} ${
                isClickable ? 'cursor-pointer hover:brightness-95 transition' : ''
            }`}
            title={refId ? `${meta.label} #${refId} — cliquer pour voir le détail` : meta.label}
        >
            <meta.Icon className="h-3 w-3" />
            {meta.label}
            {refId ? <span className="opacity-60">#{refId}</span> : null}
        </span>
    );

    if (isClickable) {
        return (
            <button type="button" onClick={onClick} className="focus:outline-none">
                {content}
            </button>
        );
    }
    return content;
}