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

import { StatusBadge } from "@/components/ui/StatusBadge";
import { formatEuros, formatDateShort, formatDueDelta, isOverdue } from "@/lib/format";
import { cn } from "@/lib/utils";
import type { InvoiceListItem } from "./InvoiceTable";

/**
 * Vue mobile des factures : cards empilées, plus aérées qu'une mini-table.
 * Chaque card est un Link vers le détail.
 */
type InvoiceCardListProps = {
  invoices: InvoiceListItem[];
  className?: string;
};

export function InvoiceCardList({ invoices, className }: InvoiceCardListProps) {
  return (
    <ul className={cn("flex flex-col gap-2", className)}>
      {invoices.map((invoice) => {
        const overdue = isOverdue(invoice.dueDate);
        return (
          <li key={invoice.id}>
            <Link
              to="/factures/$id"
              params={{ id: invoice.id }}
              className={cn(
                "block rounded-card border border-line bg-white p-4",
                "transition-colors hover:border-ink-3",
                "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-rubis-glow",
              )}
            >
              <div className="flex items-start justify-between gap-3">
                <div className="min-w-0">
                  <p className="text-[14.5px] font-semibold text-ink truncate">
                    {invoice.clientName}
                  </p>
                  <p className="mt-0.5 text-[12px] text-ink-3 tabular-nums">
                    {invoice.numero}
                  </p>
                </div>
                <p className="font-display text-[17px] font-semibold tabular-nums text-ink whitespace-nowrap">
                  {formatEuros(invoice.amountTtcCents)}
                </p>
              </div>

              <div className="mt-3 flex items-center justify-between gap-2">
                <StatusBadge status={invoice.status} label={invoice.statusLabel} />
                <p className="text-[12px] text-ink-3 tabular-nums">
                  <span className={cn(overdue && "text-rubis-deep font-semibold")}>
                    {formatDueDelta(invoice.dueDate)}
                  </span>{" "}
                  · {formatDateShort(invoice.dueDate)}
                </p>
              </div>
            </Link>
          </li>
        );
      })}
    </ul>
  );
}
