BillTracker/client/components/bill-modal/DebtDetailsSection.jsx

import { ChevronDown } from 'lucide-react';
import { cn } from '@/lib/utils';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';

// Collapsible Debt / Snowball fields (interest rate, current balance, minimum
// payment, snowball visibility). State lives in the parent BillModal (the save
// action reads these values); this is a presentational extraction.
export default function DebtDetailsSection({
  inp,
  errors, setErrors,
  showDebtSection, setShowDebtSection,
  isSnowballCategory, showOnSnowball,
  interestRate, setInterestRate,
  currentBalance, setCurrentBalance,
  minimumPayment, setMinimumPayment,
  validateInterestRate, validateCurrentBalance, validateMinimumPayment,
  handleBlur,
  onSnowballVisibilityChange,
}) {
  return (
    <div className="col-span-2">
      <div className="flex items-center gap-3">
        <div className="h-px flex-1 bg-border/40" />
        <button
          type="button"
          onClick={() => setShowDebtSection(s => !s)}
          className="flex items-center gap-1.5 text-[11px] uppercase tracking-wider text-muted-foreground hover:text-foreground transition-colors shrink-0"
        >
          <ChevronDown
            className={cn('h-3 w-3 transition-transform duration-150', !showDebtSection && '-rotate-90')}
          />
          Debt / Snowball Details
          {isSnowballCategory && (
            <span className="text-[9px] text-emerald-400 font-semibold tracking-normal normal-case">
              · auto-detected
            </span>
          )}
          {!showOnSnowball && isSnowballCategory && (
            <span className="text-[9px] text-amber-400 font-semibold tracking-normal normal-case">
              · exempt
            </span>
          )}
        </button>
        <div className="h-px flex-1 bg-border/40" />
      </div>

      {showDebtSection && (
        <div className="grid sm:grid-cols-2 gap-x-5 gap-y-4 mt-3 p-3 rounded-xl bg-muted/20 border border-border/30">

          {/* Interest Rate */}
          <div className="space-y-1.5">
            <Label className="text-xs uppercase tracking-wider text-muted-foreground">Interest rate (APR %)</Label>
            <Input
              className={cn(inp, 'font-mono', errors.interestRate && 'border-red-500 focus-visible:ring-red-500')}
              type="number" min="0" max="100" step="0.01" placeholder="Optional"
              value={interestRate}
              onChange={e => {
                setInterestRate(e.target.value);
                setTimeout(() => setErrors(prev => ({ ...prev, interestRate: validateInterestRate(e.target.value) })), 300);
              }}
              onBlur={() => handleBlur('interestRate', interestRate, validateInterestRate)}
            />
            {errors.interestRate && (
              <span className="text-[10px] text-red-500 font-medium">{errors.interestRate}</span>
            )}
            <p className="text-[10px] text-muted-foreground/70">Enter 29.99 for 29.99%.</p>
          </div>

          {/* Current Balance */}
          <div className="space-y-1.5">
            <Label className="text-xs uppercase tracking-wider text-muted-foreground">Current Balance ($)</Label>
            <Input
              className={cn(inp, 'font-mono', errors.currentBalance && 'border-red-500 focus-visible:ring-red-500')}
              type="number" min="0" step="0.01" placeholder="Optional"
              value={currentBalance}
              onChange={e => {
                setCurrentBalance(e.target.value);
                setTimeout(() => setErrors(prev => ({ ...prev, currentBalance: validateCurrentBalance(e.target.value) })), 300);
              }}
              onBlur={() => handleBlur('currentBalance', currentBalance, validateCurrentBalance)}
            />
            {errors.currentBalance && (
              <span className="text-[10px] text-red-500 font-medium">{errors.currentBalance}</span>
            )}
            <p className="text-[10px] text-muted-foreground/70">Outstanding debt balance.</p>
          </div>

          {/* Minimum Payment */}
          <div className="space-y-1.5">
            <Label className="text-xs uppercase tracking-wider text-muted-foreground">Minimum Payment ($)</Label>
            <Input
              className={cn(inp, 'font-mono', errors.minimumPayment && 'border-red-500 focus-visible:ring-red-500')}
              type="number" min="0" step="0.01" placeholder="Optional"
              value={minimumPayment}
              onChange={e => {
                setMinimumPayment(e.target.value);
                setTimeout(() => setErrors(prev => ({ ...prev, minimumPayment: validateMinimumPayment(e.target.value) })), 300);
              }}
              onBlur={() => handleBlur('minimumPayment', minimumPayment, validateMinimumPayment)}
            />
            {errors.minimumPayment && (
              <span className="text-[10px] text-red-500 font-medium">{errors.minimumPayment}</span>
            )}
            <p className="text-[10px] text-muted-foreground/70">Required minimum monthly payment.</p>
          </div>

          {/* Include in Snowball */}
          <div className="flex flex-col justify-end pb-1 space-y-1">
            <label className="flex items-center gap-2.5 cursor-pointer group">
              <input
                type="checkbox"
                checked={showOnSnowball}
                onChange={e => onSnowballVisibilityChange(e.target.checked)}
                className="h-4 w-4 rounded border-border accent-emerald-500"
              />
              <span className="text-sm text-muted-foreground group-hover:text-foreground transition-colors">
                Show on Debt Snowball
              </span>
            </label>
            <p className="text-[10px] text-muted-foreground/70 pl-6">
              Uncheck to exempt an auto-detected snowball bill, or check to include this bill manually.
            </p>
          </div>

        </div>
      )}
    </div>
  );
}