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

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

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

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

function paymentSourceTone(source) {
  const tones = {
    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',
  };
  return tones[source] || tones.manual;
}

// 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,
}) {
  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/[0.06] 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>
      )}
    </>
  );
}