BillTracker/client/components/tracker/EditableCell.tsx

import { useState, useRef } from 'react';
import { toast } from 'sonner';
import { api } from '@/api';
import { createPaymentOrConfirm } from '@/lib/paymentActions';
import { cn, fmt, fmtDate, errMessage } from '@/lib/utils';
import { Input } from '@/components/ui/input';
import type { Dollars } from '@/lib/money';
import type { TrackerRow } from '@/types';

// `threshold` = actual_amount ?? expected_amount for this bill/month
interface EditableCellProps {
  row: TrackerRow;
  field: 'amount' | 'date';
  threshold: Dollars;
  defaultPaymentDate: string;
  refresh: () => void;
}

export function EditableCell({ row, field, threshold, defaultPaymentDate, refresh }: EditableCellProps) {
  const [editing, setEditing] = useState(false);
  const [value, setValue]     = useState('');
  const inputRef              = useRef<HTMLInputElement>(null);

  const displayVal = field === 'amount'
    ? (row.total_paid > 0 ? fmt(row.total_paid) : '—')
    : (row.last_paid_date ? fmtDate(row.last_paid_date) : '—');

  const isEmpty  = field === 'amount' ? row.total_paid <= 0 : !row.last_paid_date;
  // Mismatch when paid amount differs from the effective threshold for this month
  const mismatch = field === 'amount' && row.total_paid > 0 && row.total_paid !== threshold;

  function startEdit() {
    if (editing) return;
    setValue(field === 'amount'
      ? (row.total_paid > 0 ? String(row.total_paid) : '')
      : (row.last_paid_date || ''));
    setEditing(true);
    setTimeout(() => { inputRef.current?.focus(); inputRef.current?.select(); }, 0);
  }

  async function commit() {
    setEditing(false);
    const val = value.trim();
    if (!val) return;
    try {
      if (row.payments && row.payments.length > 0) {
        const update: { amount?: number; paid_date?: string } = {};
        if (field === 'amount') update.amount    = parseFloat(val);
        if (field === 'date')   update.paid_date = val;
        await api.updatePayment(row.payments[0]!.id, update);
        toast.success('Saved');
        refresh();
      } else {
        await createPaymentOrConfirm(
          {
            bill_id:   row.id,
            amount:    field === 'amount' ? parseFloat(val) : threshold,
            paid_date: field === 'date'   ? val             : defaultPaymentDate,
          },
          () => { toast.success('Saved'); refresh(); },
        );
      }
    } catch (err) {
      toast.error(errMessage(err));
    }
  }

  function onKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
    if (e.key === 'Enter')  inputRef.current?.blur();
    if (e.key === 'Escape') { setValue(''); setEditing(false); }
  }

  if (editing) {
    return (
      <Input
        ref={inputRef}
        type={field === 'date' ? 'date' : 'number'}
        step={field === 'amount' ? '0.01' : undefined}
        min={field === 'amount' ? '0' : undefined}
        value={value}
        onChange={e => setValue(e.target.value)}
        onBlur={commit}
        onKeyDown={onKeyDown}
        className="h-7 w-28 text-right font-mono text-sm bg-background/80 border-border/60"
      />
    );
  }

  return (
    <span
      onClick={startEdit}
      title={`Click to edit ${field === 'amount' ? 'payment amount' : 'paid date'}`}
      className={cn(
        'cursor-pointer rounded-md px-1.5 py-0.5 text-sm font-mono',
        'transition-all duration-150 hover:bg-accent hover:ring-1 hover:ring-border',
        isEmpty   && 'text-muted-foreground',
        mismatch  && 'text-amber-500',
        !isEmpty  && !mismatch && 'text-emerald-500',
      )}
    >
      {displayVal}
    </span>
  );
}