import { formatCurrency } from '@/lib/utils';

export function DashboardSummaryKpis({
    summary,
    periodLabel,
}: {
    summary: {
        revenue: string;
        expenses: string;
        net: string;
        treasury: string;
        pending_invoices: number;
        pending_amount: string;
    };
    periodLabel?: string;
}) {
    return (
        <section className="space-y-3">
            <div className="flex flex-wrap items-baseline justify-between gap-2">
                <h2 className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
                    Synthèse financière
                </h2>
                {periodLabel ? (
                    <p className="text-muted-foreground text-xs">
                        Période : <span className="font-medium text-foreground">{periodLabel}</span>
                        <span className="text-muted-foreground"> · filtres avancés dans Suivi financier</span>
                    </p>
                ) : null}
            </div>
            <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-6">
                <SummaryCard label="Chiffre d'affaires" hint="Facturé période (issue_date)" value={summary.revenue} />
                <SummaryCard
                    label="Dépenses"
                    hint="Achats + NDF + salaires"
                    value={summary.expenses}
                />
                <SummaryCard label="Résultat net" hint="CA − dépenses" value={summary.net} />
                <SummaryCard
                    label="Flux de trésorerie"
                    hint="Encaissements − FF − rembours. NDF"
                    value={summary.treasury}
                />
                <SummaryCard
                    label="Pièces ouvertes"
                    hint="Clients + fournisseurs (à date)"
                    value={String(summary.pending_invoices)}
                    format="number"
                />
                <SummaryCard
                    label="Encours total"
                    hint="Créances + dettes (à date)"
                    value={summary.pending_amount}
                />
            </div>
        </section>
    );
}

function SummaryCard({
    label,
    value,
    hint,
    format = 'currency',
}: {
    label: string;
    value: string;
    hint?: string;
    format?: 'currency' | 'number';
}) {
    const display =
        format === 'currency' ? formatCurrency(value) : value;

    return (
        <div className="rounded-lg border bg-card p-4 shadow-xs">
            <p className="text-xs text-muted-foreground">{label}</p>
            <p className="mt-1 text-xl font-semibold tabular-nums">{display}</p>
            {hint ? <p className="mt-1 text-[11px] text-muted-foreground">{hint}</p> : null}
        </div>
    );
}