import { Card, CardContent } from '@/components/ui/card';
import { useTranslation } from '@/hooks/use-translation';
import { Coins, Percent, Wallet } from 'lucide-react';
import { fmtTnd } from './format';
import type { Totaux } from './types';

/**
 * Les trois cartes de totaux (brut / retenue / net).
 *
 * Les valeurs viennent TOUJOURS des props serveur : avec des taux différents
 * d'une ligne à l'autre, la retenue totale n'est pas un pourcentage du brut —
 * d'où le rappel affiché sous les cartes.
 */
export function TotalsBar({ totaux }: { totaux: Totaux }) {
    const { t } = useTranslation();

    return (
        <div className="flex flex-col gap-2">
            <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
                <TotalCard icon={<Coins className="h-5 w-5 text-slate-500" />} label={t('retenue', 'total_gross')} value={fmtTnd(totaux.brut)} />
                <TotalCard
                    icon={<Percent className="h-5 w-5 text-amber-600" />}
                    label={t('retenue', 'total_withheld')}
                    value={fmtTnd(totaux.retenue)}
                    valueClassName="text-amber-700"
                />
                <TotalCard
                    icon={<Wallet className="h-5 w-5 text-emerald-600" />}
                    label={t('retenue', 'total_net')}
                    value={fmtTnd(totaux.net)}
                    valueClassName="text-emerald-700"
                    emphasis
                />
            </div>
            <p className="text-muted-foreground text-xs">
                {t('retenue', 'total_lines')} : <span className="tabular-nums">{totaux.count}</span> — {t('retenue', 'totals_are_sum_hint')}
            </p>
        </div>
    );
}

function TotalCard({
    icon,
    label,
    value,
    valueClassName,
    emphasis,
}: {
    icon: React.ReactNode;
    label: string;
    value: string;
    valueClassName?: string;
    emphasis?: boolean;
}) {
    return (
        <Card>
            <CardContent className="flex items-center justify-between px-4 py-3">
                <div className="flex flex-col gap-0.5">
                    <span className="text-muted-foreground text-xs">{label}</span>
                    <span className={`tabular-nums ${emphasis ? 'text-2xl font-bold' : 'text-xl font-semibold'} ${valueClassName ?? ''}`}>
                        {value}
                    </span>
                </div>
                {icon}
            </CardContent>
        </Card>
    );
}