BillTracker/client/components/BillsTableInner.jsx

import { ArrowDown, ArrowUp, Copy, GripVertical, PenLine, EyeOff, Eye, Clock, Trash2 } from 'lucide-react';
import { cn } from '@/lib/utils';
import { scheduleLabel } from '@/lib/billingSchedule';
import { MobileBillRow } from '@/components/MobileBillRow';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';

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, moveControls, dragProps }) {
  const isDebt    = bill.current_balance != null || bill.minimum_payment != null;
  const hasHistory = hasHistoricalVisibility(bill);

  return (
    <div
      draggable={dragProps?.draggable}
      onDragStart={dragProps?.onDragStart}
      onDragEnter={dragProps?.onDragEnter}
      onDragOver={dragProps?.onDragOver}
      onDragEnd={dragProps?.onDragEnd}
      onDrop={dragProps?.onDrop}
      className={cn(
      'group flex items-center gap-3 px-5 py-3.5 transition-colors',
      'hover:bg-accent/20',
      !bill.active && 'opacity-60',
      dragProps?.isDragging && 'opacity-45',
      dragProps?.isDropTarget && 'ring-2 ring-inset ring-primary/35',
    )}>

      <div className="flex shrink-0 items-center gap-0.5">
        <GripVertical
          className={cn(
            'h-4 w-4 text-muted-foreground/55',
            moveControls?.enabled && 'cursor-grab group-active:cursor-grabbing',
            !moveControls?.enabled && 'opacity-30',
          )}
          aria-hidden="true"
        />
        <div className="hidden flex-col sm:flex">
          <button
            type="button"
            onClick={moveControls?.onMoveUp}
            disabled={!moveControls?.enabled || !moveControls?.canMoveUp || moveControls?.moving}
            className="rounded text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:opacity-25"
            title="Move bill up"
            aria-label={`Move ${bill.name} up`}
          >
            <ArrowUp className="h-3 w-3" />
          </button>
          <button
            type="button"
            onClick={moveControls?.onMoveDown}
            disabled={!moveControls?.enabled || !moveControls?.canMoveDown || moveControls?.moving}
            className="rounded text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:opacity-25"
            title="Move bill down"
            aria-label={`Move ${bill.name} down`}
          >
            <ArrowDown className="h-3 w-3" />
          </button>
        </div>
      </div>

      {/* 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>
          )}

          <TooltipProvider delayDuration={300}>
            {prefs.showAutopay && !!bill.autopay_enabled && (
              <Tooltip>
                <TooltipTrigger asChild>
                  <span className="shrink-0 rounded border border-sky-500/25 bg-sky-500/10 px-1.5 py-0.5 text-[11px] font-semibold text-sky-600 dark:text-sky-300 cursor-default">
                    AP
                  </span>
                </TooltipTrigger>
                <TooltipContent>Autopay enabled</TooltipContent>
              </Tooltip>
            )}
            {prefs.show2fa && !!bill.has_2fa && (
              <Tooltip>
                <TooltipTrigger asChild>
                  <span className="shrink-0 rounded bg-violet-500/20 px-1.5 py-0.5 text-[11px] font-semibold text-violet-300 cursor-default">
                    2FA
                  </span>
                </TooltipTrigger>
                <TooltipContent>Two-factor authentication configured</TooltipContent>
              </Tooltip>
            )}
            {prefs.showSubscription && !!bill.is_subscription && (
              <Tooltip>
                <TooltipTrigger asChild>
                  <span className="shrink-0 rounded border border-indigo-500/25 bg-indigo-500/10 px-1.5 py-0.5 text-[11px] font-semibold text-indigo-600 dark:text-indigo-300 cursor-default">
                    S
                  </span>
                </TooltipTrigger>
                <TooltipContent>Subscription</TooltipContent>
              </Tooltip>
            )}
            {(!!bill.has_merchant_rule || !!bill.has_linked_transactions) && (
              <Tooltip>
                <TooltipTrigger asChild>
                  <span className="shrink-0 rounded border border-emerald-500/25 bg-emerald-500/10 px-1.5 py-0.5 text-[11px] font-semibold text-emerald-600 dark:text-emerald-400 cursor-default">
                    L
                  </span>
                </TooltipTrigger>
                <TooltipContent>Linked to bank transactions</TooltipContent>
              </Tooltip>
            )}
            {hasHistory && (
              <Tooltip>
                <TooltipTrigger asChild>
                  <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 cursor-default">
                    <Clock className="h-2.5 w-2.5" />
                  </span>
                </TooltipTrigger>
                <TooltipContent>Historical visibility configured</TooltipContent>
              </Tooltip>
            )}
          </TooltipProvider>
        </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>{scheduleLabel(bill)}</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, moveControlsFor, dragPropsFor }) {
  return (
    <>
      <div className="hidden divide-y divide-border/30 sm:block">
        {bills.map((bill, index) => (
          <BillCard
            key={bill.id}
            bill={bill}
            prefs={prefs}
            onEdit={onEdit}
            onToggle={onToggle}
            onDelete={onDelete}
            onHistory={onHistory}
            onDuplicate={onDuplicate}
            moveControls={moveControlsFor?.(bill, index)}
            dragProps={dragPropsFor?.(bill, index)}
          />
        ))}
      </div>
      <div className="space-y-3 p-3 sm:hidden">
        {bills.map((bill, index) => (
          <MobileBillRow
            key={bill.id}
            bill={bill}
            onEdit={onEdit}
            onToggle={onToggle}
            onDelete={onDelete}
            onHistory={onHistory}
            onDuplicate={onDuplicate}
            moveControls={moveControlsFor?.(bill, index)}
            dragProps={dragPropsFor?.(bill, index)}
          />
        ))}
      </div>
    </>
  );
}