import { Copy, PenLine, EyeOff, Eye, Clock, Trash2 } from 'lucide-react';
import { cn } from '@/lib/utils';
import { MobileBillRow } from '@/components/MobileBillRow';

function ordinal(n) {
  const d = Number(n);
  if (!d) return '—';
  if (d > 3 && d < 21) return `${d}th`;
  switch (d % 10) {
    case 1: return `${d}st`;
    case 2: return `${d}nd`;
    case 3: return `${d}rd`;
    default: return `${d}th`;
  }
}

function hasHistoricalVisibility(bill) {
  return !!bill.has_history_ranges || (bill.history_visibility && bill.history_visibility !== 'default');
}

function AprColor({ rate }) {
  const cls =
    rate >= 25 ? 'text-rose-400' :
    rate >= 15 ? 'text-amber-400' :
    'text-muted-foreground';
  return <span className={cn('tracker-number text-[11px] font-semibold', cls)}>{rate}% APR</span>;
}

const ALL_ON = {
  showCategory: true, showDueDay: true, showAmount: true, showCycle: true,
  showApr: true, showBalance: true, showMinPayment: true, showAutopay: true, show2fa: true,
};

function BillCard({ bill, prefs = ALL_ON, onEdit, onToggle, onDelete, onHistory, onDuplicate }) {
  const isDebt    = bill.current_balance != null || bill.minimum_payment != null;
  const hasHistory = hasHistoricalVisibility(bill);

  return (
    <div className={cn(
      'flex items-center gap-3 px-5 py-3.5 transition-colors',
      'hover:bg-accent/20',
      !bill.active && 'opacity-60',
    )}>

      {/* Main info */}
      <div className="flex-1 min-w-0 space-y-1.5">

        {/* Name + badges */}
        <div className="flex flex-wrap items-center gap-1.5">
          <button
            type="button"
            onClick={() => onEdit?.(bill.id)}
            className="max-w-[240px] truncate text-left text-sm font-semibold text-foreground transition-colors hover:text-primary"
          >
            {bill.name}
          </button>

          {prefs.showCategory && bill.category_name && (
            <span className="shrink-0 rounded border border-border/70 bg-secondary/60 px-1.5 py-0.5 text-[11px] font-medium text-muted-foreground">
              {bill.category_name}
            </span>
          )}

          {prefs.showAutopay && !!bill.autopay_enabled && (
            <span className="shrink-0 rounded bg-emerald-500/20 px-1.5 py-0.5 text-[11px] font-semibold text-emerald-300">
              Autopay
            </span>
          )}
          {prefs.show2fa && !!bill.has_2fa && (
            <span className="shrink-0 rounded bg-violet-500/20 px-1.5 py-0.5 text-[11px] font-semibold text-violet-300">
              2FA
            </span>
          )}
          {prefs.showSubscription && !!bill.is_subscription && (
            <span className="shrink-0 rounded bg-indigo-500/15 px-1.5 py-0.5 text-[11px] font-semibold text-indigo-600 dark:text-indigo-300">
              Sub
            </span>
          )}
          {hasHistory && (
            <span
              className="inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-sky-500/25 bg-sky-500/10 text-sky-500"
              title="Historical visibility configured"
            >
              <Clock className="h-2.5 w-2.5" />
            </span>
          )}
        </div>

        {/* Meta row */}
        <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs font-medium text-muted-foreground">
          {prefs.showCycle && <span className="capitalize">{bill.billing_cycle || 'monthly'}</span>}

          {prefs.showCycle && prefs.showDueDay && <span className="text-border">·</span>}

          {prefs.showDueDay && <span>Due {ordinal(bill.due_day)}</span>}

          {prefs.showApr && isDebt && bill.interest_rate != null && (
            <>
              {(prefs.showCycle || prefs.showDueDay) && <span className="text-border">·</span>}
              <AprColor rate={bill.interest_rate} />
            </>
          )}

          {prefs.showBalance && isDebt && bill.current_balance != null && (
            <>
              {(prefs.showCycle || prefs.showDueDay || (prefs.showApr && bill.interest_rate != null)) && <span className="text-border">·</span>}
              <span className="tracker-number text-[11px] font-medium text-muted-foreground">
                ${Number(bill.current_balance).toLocaleString(undefined, { maximumFractionDigits: 0 })} balance
              </span>
            </>
          )}
        </div>

      </div>

      {/* Amount */}
      {prefs.showAmount && (
        <div className="text-right shrink-0 hidden sm:block">
          <p className="tracker-number text-sm font-bold text-foreground">
            ${Number(bill.expected_amount).toFixed(2)}
          </p>
          {prefs.showMinPayment && bill.minimum_payment != null && (
            <p className="tracker-number text-[11px] font-medium text-muted-foreground">
              ${Number(bill.minimum_payment).toFixed(0)} min
            </p>
          )}
        </div>
      )}

      {/* Action icons */}
      <div className="flex items-center gap-0.5 shrink-0">
        <button
          type="button"
          onClick={() => onEdit?.(bill.id)}
          title="Edit"
          className="rounded-md p-1.5 text-muted-foreground hover:bg-muted/70 hover:text-foreground transition-colors"
        >
          <PenLine className="h-3.5 w-3.5" />
        </button>

        <button
          type="button"
          onClick={() => onDuplicate?.(bill)}
          title="Duplicate"
          className="rounded-md p-1.5 text-muted-foreground hover:bg-primary/10 hover:text-primary transition-colors"
        >
          <Copy className="h-3.5 w-3.5" />
        </button>

        {!bill.active && onHistory && (
          <button
            type="button"
            onClick={() => onHistory?.(bill)}
            title="History visibility"
            className="rounded-md p-1.5 text-muted-foreground hover:bg-sky-500/10 hover:text-sky-400 transition-colors"
          >
            <Clock className="h-3.5 w-3.5" />
          </button>
        )}

        <button
          type="button"
          onClick={() => onToggle?.(bill)}
          title={bill.active ? 'Deactivate' : 'Activate'}
          className={cn(
            'rounded-md p-1.5 transition-colors',
            bill.active
              ? 'text-muted-foreground hover:bg-amber-500/10 hover:text-amber-400'
              : 'text-muted-foreground hover:bg-emerald-500/10 hover:text-emerald-400',
          )}
        >
          {bill.active ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
        </button>

        <button
          type="button"
          onClick={() => onDelete?.(bill)}
          title="Delete"
          className="rounded-md p-1.5 text-muted-foreground hover:bg-destructive/10 hover:text-destructive transition-colors"
        >
          <Trash2 className="h-3.5 w-3.5" />
        </button>
      </div>

    </div>
  );
}

export default function BillsTableInner({ bills, prefs = ALL_ON, onEdit, onToggle, onDelete, onHistory, onDuplicate }) {
  return (
    <>
      <div className="hidden divide-y divide-border/30 sm:block">
        {bills.map(bill => (
          <BillCard
            key={bill.id}
            bill={bill}
            prefs={prefs}
            onEdit={onEdit}
            onToggle={onToggle}
            onDelete={onDelete}
            onHistory={onHistory}
            onDuplicate={onDuplicate}
          />
        ))}
      </div>
      <div className="space-y-3 p-3 sm:hidden">
        {bills.map(bill => (
          <MobileBillRow
            key={bill.id}
            bill={bill}
            onEdit={onEdit}
            onToggle={onToggle}
            onDelete={onDelete}
            onHistory={onHistory}
            onDuplicate={onDuplicate}
          />
        ))}
      </div>
    </>
  );
}