BillTracker/client/components/bill-modal/PaymentHistoryList.tsx

import { Plus, Link2, Pencil, Trash2 } from 'lucide-react';
import { cn, fmt, fmtDate } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import type { Payment } from '@/types';

function isTransactionLinkedPayment(payment: Payment): boolean {
  return payment?.payment_source === 'transaction_match' || payment?.transaction_id != null;
}

function isHistoryOnlyPayment(payment: Payment): boolean {
  return !!payment?.accounting_excluded;
}

function paymentSourceLabel(source: string | null | undefined): string {
  const labels: Record<string, string> = {
    manual: 'Manual',
    file_import: 'File import',
    provider_sync: 'Sync',
    transaction_match: 'Transaction',
    auto_match: 'SimpleFIN',
  };
  return labels[source ?? ''] || source || 'Manual';
}

const PAYMENT_SOURCE_TONES: Record<string, string> = {
  manual: 'border-emerald-500/25 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',
  file_import: 'border-sky-500/25 bg-sky-500/10 text-sky-600 dark:text-sky-400',
  provider_sync: 'border-violet-500/25 bg-violet-500/10 text-violet-600 dark:text-violet-400',
  transaction_match: 'border-primary/25 bg-primary/10 text-primary',
  auto_match: 'border-violet-500/25 bg-violet-500/10 text-violet-600 dark:text-violet-400',
};

function paymentSourceTone(source: string | null | undefined): string {
  return PAYMENT_SOURCE_TONES[source ?? ''] || PAYMENT_SOURCE_TONES.manual!;
}

interface PaymentHistoryListProps {
  payments: Payment[];
  paymentsLoading?: boolean;
  paymentBusy?: boolean;
  onAdd?: () => void;
  onEdit: (payment: Payment) => void;
  onDelete: (payment: Payment) => void;
}

// Payment-history list for a bill (edit mode): each recorded payment with its
// source badge, plus edit/remove actions for manual payments (matched and
// history-only rows are read-only). Presentational — the parent owns the
// payment state and the add/edit/delete handlers.
export default function PaymentHistoryList({
  payments,
  paymentsLoading,
  paymentBusy,
  onAdd,
  onEdit,
  onDelete,
}: PaymentHistoryListProps) {
  return (
    <>
      <div className="mb-3 flex items-center justify-between gap-3">
        <div>
          <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
            Payment history
          </p>
          <p className="text-[11px] text-muted-foreground/75">{payments.length} recorded</p>
        </div>
        <Button
          type="button"
          size="sm"
          variant="outline"
          disabled={paymentBusy}
          onClick={onAdd}
          className="h-8 gap-2 text-xs"
        >
          <Plus className="h-3.5 w-3.5" />
          Add Payment
        </Button>
      </div>

      {paymentsLoading ? (
        <div className="rounded-lg border border-border/60 bg-muted/20 px-3 py-8 text-center text-sm text-muted-foreground">
          Loading payment history...
        </div>
      ) : payments.length === 0 ? (
        <div className="flex flex-col items-center gap-1.5 rounded-lg bg-muted/20 px-3 py-8 text-center">
          <p className="text-sm font-medium text-muted-foreground">No payments yet</p>
          <p className="text-xs text-muted-foreground/60">
            Use the form below to record the first payment.
          </p>
        </div>
      ) : (
        <div className="max-h-52 space-y-2 overflow-y-auto pr-1">
          {payments.map((payment) => {
            const linkedPayment = isTransactionLinkedPayment(payment);
            const historyOnly = isHistoryOnlyPayment(payment);
            return (
              <div
                key={payment.id}
                className={cn(
                  'flex items-start justify-between gap-3 rounded-lg border px-3 py-2.5',
                  historyOnly
                    ? 'border-amber-500/25 bg-amber-500/6 opacity-85'
                    : 'border-border/60 bg-background/35',
                )}
              >
                <div className="min-w-0">
                  <div className="flex flex-wrap items-center gap-2">
                    <p
                      className={cn(
                        'font-mono text-sm font-semibold',
                        historyOnly
                          ? 'text-muted-foreground line-through decoration-amber-500/70'
                          : 'text-foreground',
                      )}
                    >
                      {fmt(payment.amount)}
                    </p>
                    <span
                      className={cn(
                        'rounded-md border px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide',
                        paymentSourceTone(payment.payment_source),
                      )}
                    >
                      {paymentSourceLabel(payment.payment_source)}
                    </span>
                    {historyOnly && (
                      <span className="rounded-md border border-amber-500/30 bg-amber-500/10 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-amber-600 dark:text-amber-300">
                        History only
                      </span>
                    )}
                  </div>
                  <p className="mt-0.5 truncate text-xs text-muted-foreground">
                    {fmtDate(payment.paid_date)} ·{' '}
                    {payment.method ||
                      (payment.payment_source === 'transaction_match' ? 'Synced' : 'manual')}
                  </p>
                  {payment.notes && (
                    <p className="mt-0.5 truncate text-xs text-muted-foreground/80">
                      {payment.notes}
                    </p>
                  )}
                </div>
                <div className="flex shrink-0 gap-1">
                  {historyOnly ? (
                    <span className="inline-flex h-8 items-center rounded-md border border-amber-500/25 bg-amber-500/10 px-2 text-[11px] font-medium text-amber-600 dark:text-amber-300">
                      Overridden
                    </span>
                  ) : linkedPayment ? (
                    <span className="inline-flex h-8 items-center gap-1.5 rounded-md border border-primary/20 bg-primary/5 px-2 text-[11px] font-medium text-primary">
                      <Link2 className="h-3.5 w-3.5" />
                      Matched
                    </span>
                  ) : (
                    <>
                      <Button
                        type="button"
                        size="icon"
                        variant="ghost"
                        disabled={paymentBusy}
                        onClick={() => onEdit(payment)}
                        className="h-8 w-8"
                        aria-label="Edit payment"
                      >
                        <Pencil className="h-3.5 w-3.5" />
                      </Button>
                      <Button
                        type="button"
                        size="icon"
                        variant="ghost"
                        disabled={paymentBusy}
                        onClick={() => onDelete(payment)}
                        className="h-8 w-8 text-destructive hover:bg-destructive/10 hover:text-destructive"
                        aria-label="Remove payment"
                      >
                        <Trash2 className="h-3.5 w-3.5" />
                      </Button>
                    </>
                  )}
                </div>
              </div>
            );
          })}
        </div>
      )}
    </>
  );
}