import { Link } from "@tanstack/react-router";

import { Card } from "@rubis/ui";
import { Eyebrow } from "@rubis/ui";
import { cn } from "@/lib/utils";

/**
 * TopLatePayers — wireframe 4.1, panneau "Top retards".
 *
 * Note marque : "manié avec tact, jamais visible côté client" (cf. annotation
 * du wireframe). On nomme "Retards récurrents" et pas "Mauvais payeurs".
 */
export type LatePayer = {
  clientId: string;
  name: string;
  lateInvoicesCount: number;
};

type TopLatePayersProps = {
  payers: LatePayer[];
  className?: string;
};

export function TopLatePayers({ payers, className }: TopLatePayersProps) {
  return (
    <Card padding="md" className={cn("min-w-0", className)}>
      <div className="flex items-center justify-between">
        <Eyebrow tone="ink">Retards récurrents</Eyebrow>
        <Link
          to="/clients"
          className="text-[12px] text-ink-3 hover:text-rubis hover:underline underline-offset-4"
        >
          Voir tout
        </Link>
      </div>

      {payers.length === 0 ? (
        <p className="mt-4 text-[14px] text-ink-3 italic">
          Aucun retard récurrent. Vos clients sont sérieux.
        </p>
      ) : (
        <ul className="mt-4 flex flex-col divide-y divide-line">
          {payers.map((payer) => (
            <li
              key={payer.clientId}
              className="flex items-center justify-between gap-3 py-2.5 first:pt-0 last:pb-0 text-[13.5px]"
            >
              <span className="truncate text-ink">{payer.name}</span>
              <span className="shrink-0 text-ink-2">
                <strong className="font-semibold tabular-nums">{payer.lateInvoicesCount}</strong>{" "}
                <span className="text-ink-3">
                  {payer.lateInvoicesCount > 1 ? "retards" : "retard"}
                </span>
              </span>
            </li>
          ))}
        </ul>
      )}
    </Card>
  );
}