import { EmptyTab, SimpleTable } from './shared';
import { fmt, type InvoiceRow } from './types';

const INVOICE_STATUS_STYLES: Record<string, string> = {
    paid: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400',
    sent: 'bg-sky-100 text-sky-700 dark:bg-sky-900/30 dark:text-sky-400',
    overdue: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
    draft: 'bg-muted text-muted-foreground',
    void: 'bg-muted text-muted-foreground line-through',
};

export default function BillingTab({ invoices }: { invoices: InvoiceRow[] }) {
    return (
        <div className="bg-card border-border overflow-hidden rounded-xl border">
            <div className="border-border border-b px-6 py-4">
                <h2 className="text-foreground text-sm font-semibold">
                    Invoices
                </h2>
            </div>
            {invoices.length > 0 ? (
                <SimpleTable
                    headers={['Invoice', 'Total', 'Status', 'Due', 'Paid']}
                >
                    {invoices.map((inv) => (
                        <tr
                            key={inv.id}
                            className="hover:bg-muted/30 transition-colors"
                        >
                            <td className="px-6 py-3">
                                <p className="text-foreground font-mono text-xs font-medium">
                                    {inv.invoice_number}
                                </p>
                                <p className="text-muted-foreground text-[11px]">
                                    {fmt(inv.created_at)}
                                </p>
                            </td>
                            <td className="text-foreground/90 px-6 py-3 font-medium tabular-nums">
                                {inv.total}
                            </td>
                            <td className="px-6 py-3">
                                <span
                                    className={`rounded-full px-2 py-0.5 text-[10px] font-semibold ${INVOICE_STATUS_STYLES[inv.status] ?? 'bg-muted text-muted-foreground'}`}
                                >
                                    {inv.status}
                                </span>
                            </td>
                            <td className="text-muted-foreground px-6 py-3 text-xs tabular-nums">
                                {fmt(inv.due_date)}
                            </td>
                            <td className="text-muted-foreground px-6 py-3 text-xs tabular-nums">
                                {fmt(inv.paid_at)}
                            </td>
                        </tr>
                    ))}
                </SimpleTable>
            ) : (
                <EmptyTab text="No invoices for this tenant yet." />
            )}
        </div>
    );
}