clienthub/src/components/payment-status.tsx

import type { ClientView } from '@/lib/client-view';
import { Card } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';

interface PaymentStatusProps {
  accepted_total: string;
  payments: ClientView['payments'];
  /** Label for the total row. Defaults to "Totale Investimento" */
  totalLabel?: string;
  /** Override the displayed amount (retainer: show offer accepted_total, not project total) */
  overrideAmount?: string;
  /** When true, hide individual payment rows (Acconto/Saldo) — used for retainer offers */
  hideRows?: boolean;
}

type PaymentStatusValue = 'da_saldare' | 'inviata' | 'saldato';

const statusConfig: Record<
  PaymentStatusValue,
  { label: string; badgeClass: string; dotClass: string }
> = {
  da_saldare: {
    label: 'Da Saldare',
    badgeClass: 'border-transparent bg-[#2563eb] text-white',
    dotClass: 'bg-[#2563eb]',
  },
  inviata: {
    label: 'Inviata',
    badgeClass: 'border-transparent bg-[#ca8a04] text-white',
    dotClass: 'bg-[#ca8a04]',
  },
  saldato: {
    label: 'Saldato',
    badgeClass: 'border-transparent bg-[#16a34a] text-white',
    dotClass: 'bg-[#16a34a]',
  },
};

export function PaymentStatus({
  accepted_total,
  payments,
  totalLabel = 'Totale Investimento',
  overrideAmount,
  hideRows = false,
}: PaymentStatusProps) {
  const displayAmount = overrideAmount ?? accepted_total;
  const totalFormatted = parseFloat(displayAmount || '0').toLocaleString('it-IT', {
    style: 'currency',
    currency: 'EUR',
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  });

  return (
    <Card className="rounded-lg border border-[#e5e5e5] bg-white shadow-none overflow-hidden">
      {/* Totale — unico importo visibile al cliente (LOCKED) */}
      <div className="px-6 py-5 border-b border-[#e5e5e5] bg-[#f9f9f9]">
        <p className="text-xs font-semibold text-[#666666] uppercase tracking-wider mb-1">
          {totalLabel}
        </p>
        <p className="text-3xl font-bold text-[#1a1a1a] tracking-tight">
          {totalFormatted}
        </p>
      </div>

      {/* Righe pagamento: solo etichetta + stato, MAI importo singolo — omesse se hideRows */}
      {!hideRows && (
        <div className="px-6 py-4 space-y-3">
          {payments.length === 0 ? (
            <p className="text-sm text-[#999999] italic py-2">
              Nessun piano di pagamento configurato.
            </p>
          ) : (
            payments.map((payment) => {
              const status = payment.status as PaymentStatusValue;
              const config = statusConfig[status] ?? statusConfig.da_saldare;

              return (
                <div
                  key={payment.id}
                  className="flex items-center justify-between gap-4 py-2"
                >
                  {/* Indicatore dot + etichetta */}
                  <div className="flex items-center gap-2.5">
                    <span
                      className={`w-2 h-2 rounded-full shrink-0 ${config.dotClass}`}
                      aria-hidden="true"
                    />
                    <p className="text-sm font-medium text-[#1a1a1a]">
                      {payment.label}
                    </p>
                  </div>

                  {/* Badge stato — nessun importo */}
                  <Badge className={`text-xs shrink-0 ${config.badgeClass}`}>
                    {config.label}
                  </Badge>
                </div>
              );
            })
          )}
        </div>
      )}

      {/* Nota informativa */}
      <div className="px-6 py-3 border-t border-[#e5e5e5] bg-[#f9f9f9]">
        <p className="text-xs text-[#999999] italic">
          Per dettagli o domande sui pagamenti, contattaci direttamente.
        </p>
      </div>
    </Card>
  );
}