// Rumbo — Debts · v3 · Input numérico + chips + feedback dinámico prominente

const { useState: useStD, useMemo: useMemoD, useEffect: useEffD } = React;

/* ── Drawer "Agregar deuda" — patrón unificado: hero contexto + iconos + moneda + resumen ── */
const AddDebtDrawer = ({ onClose, onAdd, data }) => {
  const [form, setF] = useStD({
    name: '', institution: '', balance: '', originalAmount: '',
    rate: '', minPayment: '', currency: 'ARS', color: '#EF4444',
    dueDay: 1, weekDay: 0, annualDay: 1, annualMonth: 1,
    reminder: 1, frequency: 'mensual', iconName: 'creditCard',
  });
  const [showCurrencyPicker, setShowCurrencyPicker] = useStD(false);
  const [showAdvanced,       setShowAdvanced]       = useStD(false);
  const [showIconPicker,     setShowIconPicker]     = useStD(false);

  const MONTHS_NAMES = ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];
  const WEEK_DAYS = [
    { short:'L', full:'Lunes'     },
    { short:'M', full:'Martes'    },
    { short:'M', full:'Miércoles' },
    { short:'J', full:'Jueves'    },
    { short:'V', full:'Viernes'   },
    { short:'S', full:'Sábado'    },
    { short:'D', full:'Domingo'   },
  ];

  const REMINDERS = [
    { value: 0, label: 'El mismo día' },
    { value: 1, label: '1 día antes'  },
    { value: 3, label: '3 días antes' },
  ];

  // Helpers — formato de monto con miles + decimal con coma (es-AR)
  const parseAmount = (s) => {
    let v = String(s || '').replace(/[^\d,]/g, '');
    const parts = v.split(',');
    if (parts.length > 2) v = parts[0] + ',' + parts.slice(1).join('');
    const [i, d] = v.split(',');
    return d !== undefined ? `${i},${d.slice(0,2)}` : (i || '');
  };
  const fmtAmount = (raw) => {
    if (raw === '' || raw == null) return '';
    const [i, d] = String(raw).split(',');
    const intNum = Number(i || '0');
    const intFmt = isNaN(intNum) ? '0' : intNum.toLocaleString('es-AR');
    return d !== undefined ? `${intFmt},${d}` : intFmt;
  };
  const toNumber = (raw) => {
    if (raw === '' || raw == null) return 0;
    return parseFloat(String(raw).replace(',', '.')) || 0;
  };
  const CADENCE = { diario:'por día', semanal:'por semana', quincenal:'por quincena', mensual:'por mes', anual:'por año' };
  const cadenceLabel = CADENCE[form.frequency] || 'por mes';

  const selCur = (typeof SUPPORTED_CURRENCIES !== 'undefined'
    ? SUPPORTED_CURRENCIES.find(c => c.code === form.currency) || SUPPORTED_CURRENCIES[0]
    : { code:'ARS', symbol:'$', flag:'🇦🇷' });

  // Contexto financiero
  const totalActivos        = (data?.accounts || []).reduce((s, a) => s + (a.balance||0), 0);
  const totalDeudasActuales = (data?.debts    || []).reduce((s, d) => s + (d.balance||0), 0);
  const nuevaDeuda          = toNumber(form.balance);
  const totalDeudasFinal    = totalDeudasActuales + nuevaDeuda;
  const pctSobreActivos     = totalActivos > 0 ? Math.round((totalDeudasFinal / totalActivos) * 100) : 0;

  // Estilos compartidos
  const secCard  = { background:'var(--surface-2)', border:'1.5px solid var(--border)', borderRadius:'var(--r-lg)', padding:'14px 18px', marginBottom:14 };
  const lbl      = { fontSize:11, fontWeight:700, color:'var(--t5)', textTransform:'uppercase', letterSpacing:'0.4px', marginBottom:8 };
  const rawInput = { width:'100%', background:'none', border:'none', outline:'none', color:'var(--t1)', fontSize:15, fontFamily:'var(--font)', fontWeight:500 };
  const noSpin   = { WebkitAppearance:'none', MozAppearance:'textfield' };

  // Frase resumen dinámica
  const summaryPhrase = (() => {
    if (!form.name || !form.balance) return '';
    const amtStr = `${selCur.symbol}${fmtAmount(form.balance)}`;
    const reminderLabel = REMINDERS.find(r => r.value === form.reminder)?.label?.toLowerCase() || '1 día antes';
    switch (form.frequency) {
      case 'diario':
        return `${form.name} con saldo ${amtStr} ${selCur.code}, pago diario. Te avisaremos ${reminderLabel}.`;
      case 'semanal':
        return `${form.name} con saldo ${amtStr} ${selCur.code}, pago semanal cada ${WEEK_DAYS[form.weekDay].full}. Te avisaremos ${reminderLabel}.`;
      case 'quincenal':
        return `${form.name} con saldo ${amtStr} ${selCur.code}, pago quincenal desde el día ${form.dueDay}. Te avisaremos ${reminderLabel}.`;
      case 'mensual':
        return `${form.name} con saldo ${amtStr} ${selCur.code}, pago mensual el día ${form.dueDay} de cada mes. Te avisaremos ${reminderLabel}.`;
      case 'anual':
        return `${form.name} con saldo ${amtStr} ${selCur.code}, pago anual el ${form.annualDay} de ${MONTHS_NAMES[form.annualMonth-1]}. Te avisaremos ${reminderLabel}.`;
      default: return '';
    }
  })();

  const submit = () => {
    if (!form.name || !form.balance) { window.showToast('Completá nombre y saldo actual', 'warning'); return; }
    const dueDay = form.frequency === 'anual' ? form.annualDay : (parseInt(form.dueDay) || 1);
    onAdd({
      ...form,
      id: 'd' + Date.now(),
      balance:        toNumber(form.balance),
      originalAmount: toNumber(form.originalAmount) || toNumber(form.balance),
      rate:           parseFloat(form.rate)                           || 0,
      minPayment:     toNumber(form.minPayment),
      dueDay,
    });
    onClose();
    window.showToast('Deuda agregada', 'success');
  };

  return (
    <>
      <div className="drawer-backdrop" onClick={onClose} />
      <div className="drawer">
        <div className="drawer-handle" />

        {/* Header */}
        <div style={{ display:'flex', alignItems:'center', gap:12, padding:'10px 20px 16px', borderBottom:'1px solid var(--border)' }}>
          <button onClick={onClose} style={{ width:34,height:34,borderRadius:'var(--r-md)',background:'var(--surface-2)',border:'1px solid var(--border)',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0 }}>
            <Icon name="x" size={17} color="var(--t3)" />
          </button>
          <div>
            <div style={{ fontSize:16, fontWeight:800, color:'var(--t1)' }}>Agregar deuda</div>
            <div style={{ fontSize:12, color:'var(--t4)' }}>Tarjeta, préstamo, cuota…</div>
          </div>
        </div>

        <div style={{ padding:'18px 20px' }}>

          {/* HERO — golpe de realidad: activos vs deudas */}
          <div style={{
            background: nuevaDeuda > 0
              ? 'linear-gradient(135deg, var(--danger) 0%, #991B1B 100%)'
              : 'linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%)',
            border: nuevaDeuda > 0 ? 'none' : '1.5px solid var(--border)',
            borderRadius:'var(--r-xl)',
            padding:'18px 20px', marginBottom:18,
            color: nuevaDeuda > 0 ? '#fff' : 'var(--t1)',
            boxShadow: nuevaDeuda > 0 ? 'var(--sh-fab)' : 'var(--sh-sm)',
            transition:'all 0.25s',
          }}>
            <div style={{
              fontSize:11, fontWeight:700,
              color: nuevaDeuda > 0 ? 'rgba(255,255,255,0.8)' : 'var(--t5)',
              textTransform:'uppercase', letterSpacing:'0.5px', marginBottom:10,
            }}>
              {nuevaDeuda > 0 ? 'Con esta deuda nueva' : 'Tu situación actual'}
            </div>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-end', gap:16, marginBottom:10 }}>
              <div>
                <div style={{ fontSize:11, color: nuevaDeuda > 0 ? 'rgba(255,255,255,0.75)' : 'var(--t5)', marginBottom:2 }}>Deuda total</div>
                <div style={{
                  fontSize:26, fontWeight:900, lineHeight:1.1, fontVariantNumeric:'tabular-nums', letterSpacing:'-0.5px',
                  color: nuevaDeuda > 0 ? '#fff' : 'var(--danger)',
                }}>
                  {fmtFull(totalDeudasFinal)}
                </div>
              </div>
              <div style={{ textAlign:'right' }}>
                <div style={{ fontSize:11, color: nuevaDeuda > 0 ? 'rgba(255,255,255,0.75)' : 'var(--t5)', marginBottom:2 }}>Activos</div>
                <div style={{
                  fontSize:18, fontWeight:800, lineHeight:1.1, fontVariantNumeric:'tabular-nums',
                  color: nuevaDeuda > 0 ? '#fff' : 'var(--success)',
                }}>
                  {fmtFull(totalActivos)}
                </div>
              </div>
            </div>
            <div style={{
              fontSize:12, lineHeight:1.5,
              color: nuevaDeuda > 0 ? 'rgba(255,255,255,0.9)' : 'var(--t3)',
            }}>
              {nuevaDeuda > 0
                ? `Pasarías de deber ${fmtFull(totalDeudasActuales)} a ${fmtFull(totalDeudasFinal)} (${pctSobreActivos}% de tus activos).`
                : `Hoy debés ${fmtFull(totalDeudasActuales)} (${pctSobreActivos}% de tus activos). Cargá el saldo para ver el impacto.`
              }
            </div>
          </div>

          {/* Ícono — botón que abre el IconPicker */}
          <div style={secCard}>
            <div style={lbl}>Ícono</div>
            <button type="button" onClick={() => setShowIconPicker(true)}
              style={{
                width:'100%', display:'flex', alignItems:'center', gap:12,
                padding:'10px 12px', background:'var(--surface)', border:'1.5px solid var(--border)',
                borderRadius:'var(--r-md)', cursor:'pointer', fontFamily:'var(--font)',
              }}>
              <div style={{ width:36, height:36, borderRadius:'var(--r-md)', background:'var(--accent-muted)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
                <Icon name={form.iconName} size={18} color="var(--accent)" strokeWidth={1.7} />
              </div>
              <span style={{ flex:1, textAlign:'left', fontSize:13, color:'var(--t3)', fontWeight:600 }}>
                Cambiar ícono
              </span>
              <Icon name="chevronRight" size={15} color="var(--t5)" />
            </button>
          </div>

          {/* Nombre de la deuda */}
          <div style={secCard}>
            <div style={{ ...lbl, display:'flex', justifyContent:'space-between' }}>
              <span>Nombre de la deuda <span style={{ color:'var(--danger)' }}>*</span></span>
              <span style={{ fontWeight:400, textTransform:'none', letterSpacing:0 }}>{(form.name||'').length}/60</span>
            </div>
            <input type="text" placeholder="Ej. Tarjeta Visa, Préstamo Naranja…" value={form.name} maxLength={60}
              onChange={e=>setF(x=>({...x,name:e.target.value}))}
              style={rawInput} />
          </div>

          {/* Entidad / Banco */}
          <div style={secCard}>
            <div style={lbl}>Entidad / Banco</div>
            <input type="text" placeholder="Ej. Banco Galicia, Naranja X…" value={form.institution}
              onChange={e=>setF(x=>({...x,institution:e.target.value}))}
              style={rawInput} />
          </div>

          {/* Saldo actual + pill de moneda */}
          <div style={secCard}>
            <div style={lbl}>Saldo actual <span style={{ color:'var(--danger)' }}>*</span></div>
            <div style={{ display:'flex', alignItems:'center', gap:12 }}>
              <span style={{ fontSize:22, fontWeight:900, color:'var(--danger)', lineHeight:1 }}>−</span>
              <input type="text" inputMode="decimal" placeholder="0" value={fmtAmount(form.balance)}
                onChange={e=>setF(x=>({...x,balance:parseAmount(e.target.value)}))}
                style={{ ...rawInput, fontSize:30, fontWeight:900, fontVariantNumeric:'tabular-nums', flex:1 }} />
              <button type="button" onClick={() => setShowCurrencyPicker(true)}
                style={{ display:'flex',alignItems:'center',gap:6,background:'var(--surface)',border:'1.5px solid var(--border)',borderRadius:'var(--r-md)',padding:'7px 10px',color:'var(--t2)',fontWeight:700,fontSize:13,flexShrink:0,cursor:'pointer' }}>
                <span style={{ fontSize:18 }}>{selCur.flag}</span>
                <span>{selCur.code}</span>
                <Icon name="chevronDown" size={13} color="var(--t4)" />
              </button>
            </div>
          </div>

          {/* Datos avanzados — colapsable */}
          <button type="button" onClick={() => setShowAdvanced(s=>!s)}
            style={{
              width:'100%', display:'flex', alignItems:'center', justifyContent:'space-between',
              padding:'12px 18px', marginBottom:14, cursor:'pointer',
              background:'var(--surface-2)', border:'1.5px solid var(--border)', borderRadius:'var(--r-lg)',
              fontFamily:'var(--font)',
            }}>
            <span style={{ color:'var(--t3)', fontSize:13, fontWeight:600 }}>Datos avanzados (opcional)</span>
            <Icon name={showAdvanced ? 'chevronDown' : 'chevronRight'} size={15} color="var(--t4)" />
          </button>

          {showAdvanced && (
            <div style={secCard}>
              <div style={{ fontSize:11, color:'var(--t5)', marginBottom:12, lineHeight:1.5 }}>
                Si no los sabés, dejalos en 0. Sirven para calcularte cuándo te liberás y cuánto pagás de interés.
              </div>
              <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:16 }}>
                <div>
                  <div style={lbl}>Monto original</div>
                  <input type="text" inputMode="decimal" placeholder="0" value={fmtAmount(form.originalAmount)}
                    onChange={e=>setF(x=>({...x,originalAmount:parseAmount(e.target.value)}))}
                    style={{ ...rawInput, fontSize:18, fontWeight:800, fontVariantNumeric:'tabular-nums' }} />
                  <div style={{ fontSize:11, color:'var(--t5)', marginTop:4 }}>deuda inicial</div>
                </div>
                <div>
                  <div style={lbl}>TNA %</div>
                  <div style={{ display:'flex', alignItems:'baseline', gap:4 }}>
                    <input type="number" inputMode="decimal" placeholder="0" value={form.rate} min="0" max="999" step="0.5"
                      onChange={e=>setF(x=>({...x,rate:e.target.value}))}
                      style={{ ...rawInput, ...noSpin, fontSize:18, fontWeight:800, flex:1 }} />
                    <span style={{ fontSize:14, fontWeight:700, color:'var(--t4)' }}>%</span>
                  </div>
                  <div style={{ fontSize:11, color:'var(--t5)', marginTop:4 }}>tasa nominal anual</div>
                </div>
              </div>
            </div>
          )}

          {/* Cuota mínima */}
          <div style={secCard}>
            <div style={lbl}>Cuota mínima</div>
            <div style={{ display:'flex', alignItems:'center', gap:10 }}>
              <div style={{ width:34, height:34, borderRadius:'var(--r-md)', background:'var(--surface)', border:'1px solid var(--border)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
                <Icon name="creditCard" size={15} color="var(--t4)" />
              </div>
              <div style={{ display:'flex', alignItems:'baseline', gap:4, flex:1 }}>
                <span style={{ fontSize:16, fontWeight:800, color:'var(--t4)' }}>{selCur.symbol}</span>
                <input type="text" inputMode="decimal" placeholder="0" value={fmtAmount(form.minPayment)}
                  onChange={e=>setF(x=>({...x,minPayment:parseAmount(e.target.value)}))}
                  style={{ ...rawInput, fontSize:22, fontWeight:900, fontVariantNumeric:'tabular-nums' }} />
              </div>
              <span style={{ fontSize:12, color:'var(--t5)', flexShrink:0 }}>{cadenceLabel}</span>
            </div>
          </div>

          {/* Frecuencia + selector contextual */}
          <div style={secCard}>
            <div style={lbl}>Frecuencia de pago</div>
            <div style={{ display:'flex', gap:8, flexWrap:'wrap' }}>
              {Object.entries(FREQUENCIES).map(([k, v]) => (
                <button key={k} type="button"
                  onClick={() => setF(x => ({ ...x, frequency: k }))}
                  style={{
                    padding:'7px 14px', borderRadius:'var(--r-md)',
                    border: `1.5px solid ${(form.frequency||'mensual')===k ? 'var(--accent)' : 'var(--border)'}`,
                    background: (form.frequency||'mensual')===k ? 'var(--accent-muted)' : 'none',
                    color: (form.frequency||'mensual')===k ? 'var(--accent)' : 'var(--t4)',
                    fontSize:13, fontWeight:600, cursor:'pointer', fontFamily:'var(--font)',
                    transition:'all 0.15s',
                  }}>
                  {v.label}
                </button>
              ))}
            </div>

            {/* DIARIO — confirmación */}
            {form.frequency === 'diario' && (
              <div style={{ borderTop:'1px solid var(--border)', marginTop:14, paddingTop:12, display:'flex', alignItems:'center', gap:8 }}>
                <div style={{ width:28,height:28,borderRadius:'var(--r-md)',background:'var(--success-bg)',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0 }}>
                  <Icon name="checkCircle" size={15} color="var(--success)" />
                </div>
                <span style={{ fontSize:12, color:'var(--t3)', lineHeight:1.5 }}>
                  Pago programado <strong style={{ color:'var(--t1)' }}>todos los días</strong>.
                </span>
              </div>
            )}

            {/* SEMANAL — 7 botones L M M J V S D */}
            {form.frequency === 'semanal' && (
              <div style={{ borderTop:'1px solid var(--border)', marginTop:14, paddingTop:14 }}>
                <div style={lbl}>¿Qué día de la semana?</div>
                <div style={{ display:'grid', gridTemplateColumns:'repeat(7,1fr)', gap:6 }}>
                  {WEEK_DAYS.map((d, i) => {
                    const active = form.weekDay === i;
                    return (
                      <button key={i} type="button" onClick={() => setF(f=>({...f,weekDay:i}))}
                        style={{
                          display:'flex', flexDirection:'column', alignItems:'center', gap:4,
                          padding:'10px 4px', borderRadius:'var(--r-md)', cursor:'pointer',
                          background: active ? 'var(--accent)' : 'var(--surface)',
                          border: `1.5px solid ${active ? 'var(--accent)' : 'var(--border)'}`,
                          boxShadow: active ? 'var(--sh-fab)' : 'none',
                          transition:'all 0.15s',
                        }}>
                        <span style={{ fontSize:13, fontWeight:800, color: active ? '#fff' : 'var(--t2)' }}>{d.short}</span>
                        <span style={{ fontSize:9, color: active ? 'rgba(255,255,255,0.75)' : 'var(--t5)', fontWeight:600 }}>
                          {d.full.slice(0,3)}
                        </span>
                      </button>
                    );
                  })}
                </div>
              </div>
            )}

            {/* QUINCENAL — día inicio + nota */}
            {form.frequency === 'quincenal' && (
              <div style={{ borderTop:'1px solid var(--border)', marginTop:14, paddingTop:14 }}>
                <DatePicker
                  label="Día de inicio"
                  value={form.dueDay}
                  onChange={v => setF(f=>({...f,dueDay:v}))}
                  dayOnly
                />
                <div style={{ display:'flex', alignItems:'flex-start', gap:8, background:'var(--accent-muted)', borderRadius:'var(--r-md)', padding:'10px 12px', marginTop:-4 }}>
                  <Icon name="info" size={14} color="var(--accent)" />
                  <span style={{ fontSize:12, color:'var(--accent-text)', lineHeight:1.5 }}>
                    Se repite <strong>cada 15 días</strong> desde el día {form.dueDay || '—'}.
                  </span>
                </div>
              </div>
            )}

            {/* MENSUAL — DatePicker dayOnly */}
            {form.frequency === 'mensual' && (
              <div style={{ borderTop:'1px solid var(--border)', marginTop:14, paddingTop:14 }}>
                <DatePicker
                  label="Día del mes"
                  value={form.dueDay}
                  onChange={v => setF(f=>({...f,dueDay:v}))}
                  dayOnly
                />
              </div>
            )}

            {/* ANUAL — día + mes */}
            {form.frequency === 'anual' && (
              <div style={{ borderTop:'1px solid var(--border)', marginTop:14, paddingTop:14 }}>
                <div style={lbl}>¿Qué día del año vence?</div>
                <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:10, marginBottom:10 }}>
                  <div style={{ background:'var(--surface)', border:'1px solid var(--border)', borderRadius:'var(--r-md)', padding:'10px 12px' }}>
                    <div style={{ fontSize:10,fontWeight:700,color:'var(--t5)',textTransform:'uppercase',letterSpacing:'0.4px',marginBottom:8 }}>Día</div>
                    <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:3, maxHeight:120, overflowY:'auto' }}>
                      {Array.from({length:31},(_,i)=>i+1).map(d => (
                        <button key={d} type="button" onClick={() => setF(f=>({...f,annualDay:d}))}
                          style={{
                            padding:'5px 2px', borderRadius:'var(--r-sm)', border:'none', cursor:'pointer',
                            fontSize:12, fontWeight: form.annualDay===d ? 800 : 400,
                            background: form.annualDay===d ? 'var(--accent)' : 'none',
                            color:      form.annualDay===d ? '#fff' : 'var(--t2)',
                            transition:'all 0.12s',
                          }}>{d}</button>
                      ))}
                    </div>
                  </div>
                  <div style={{ background:'var(--surface)', border:'1px solid var(--border)', borderRadius:'var(--r-md)', padding:'10px 12px' }}>
                    <div style={{ fontSize:10,fontWeight:700,color:'var(--t5)',textTransform:'uppercase',letterSpacing:'0.4px',marginBottom:8 }}>Mes</div>
                    <div style={{ display:'flex', flexDirection:'column', gap:2, maxHeight:120, overflowY:'auto' }}>
                      {MONTHS_NAMES.map((m,i) => (
                        <button key={i} type="button" onClick={() => setF(f=>({...f,annualMonth:i+1}))}
                          style={{
                            padding:'5px 8px', borderRadius:'var(--r-sm)', border:'none', cursor:'pointer',
                            fontSize:12, fontWeight: form.annualMonth===i+1 ? 800 : 400,
                            background: form.annualMonth===i+1 ? 'var(--accent)' : 'none',
                            color:      form.annualMonth===i+1 ? '#fff' : 'var(--t2)',
                            textAlign:'left', transition:'all 0.12s',
                          }}>{m}</button>
                      ))}
                    </div>
                  </div>
                </div>
                <div style={{ display:'flex', alignItems:'center', gap:7, background:'var(--accent-muted)', borderRadius:'var(--r-md)', padding:'9px 12px' }}>
                  <Icon name="calendar" size={14} color="var(--accent)" />
                  <span style={{ fontSize:12, color:'var(--accent-text)', fontWeight:700 }}>
                    Cada año el {form.annualDay} de {MONTHS_NAMES[form.annualMonth-1]}
                  </span>
                </div>
              </div>
            )}
          </div>

          {/* Recordatorio — chips full-width estilo AddFixedDrawer */}
          <div style={secCard}>
            <div style={lbl}>
              <span style={{ display:'flex', alignItems:'center', gap:6 }}>
                <Icon name="bell" size={13} color="var(--t5)" /> Recordatorio
              </span>
            </div>
            <div style={{ display:'flex', gap:8 }}>
              {REMINDERS.map(r => (
                <button key={r.value} type="button" onClick={() => setF(f=>({...f,reminder:r.value}))}
                  style={{
                    flex:1, padding:'9px 4px', borderRadius:'var(--r-md)', cursor:'pointer',
                    fontSize:12, fontWeight:700, textAlign:'center', transition:'all 0.15s',
                    background: form.reminder===r.value ? 'var(--accent)' : 'var(--surface)',
                    color:      form.reminder===r.value ? '#fff' : 'var(--t3)',
                    border:     `1.5px solid ${form.reminder===r.value ? 'var(--accent)' : 'var(--border)'}`,
                    boxShadow:  form.reminder===r.value ? 'var(--sh-fab)' : 'none',
                  }}>
                  {r.label}
                </button>
              ))}
            </div>
          </div>

          {/* Frase resumen dinámica */}
          {summaryPhrase && (
            <div style={{ background:'var(--surface-2)', border:'1.5px solid var(--border)', borderRadius:'var(--r-lg)', padding:'14px 16px', marginBottom:16, display:'flex', alignItems:'flex-start', gap:10 }}>
              <div style={{ width:32,height:32,borderRadius:'var(--r-md)',background:'var(--accent-muted)',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0 }}>
                <Icon name="sparkles" size={15} color="var(--accent)" />
              </div>
              <p style={{ fontSize:13, color:'var(--t2)', lineHeight:1.6, margin:0 }}>
                {summaryPhrase}
              </p>
            </div>
          )}

          {/* Botón */}
          <button onClick={submit} className="btn btn-primary btn-full" style={{ borderRadius:'var(--r-lg)', padding:15, fontSize:15 }}>
            <Icon name="checkCircle" size={18} color="#fff" /> Agregar deuda
          </button>
        </div>
      </div>

      {/* Currency Picker reutilizado */}
      {showCurrencyPicker && (
        <CurrencyPicker
          value={form.currency}
          onChange={c => setF(f=>({...f,currency:c}))}
          onClose={() => setShowCurrencyPicker(false)}
        />
      )}

      {showIconPicker && (
        <IconPicker
          value={form.iconName}
          onChange={ic => setF(f=>({...f,iconName:ic}))}
          onClose={() => setShowIconPicker(false)}
        />
      )}
    </>
  );
};

/* ── Tarjeta de deuda ── */
const DebtCard = ({ debt, isFirst, extraPayment }) => {
  const paidPct    = Math.round(((debt.originalAmount - debt.balance) / debt.originalAmount) * 100);
  const monthlyRate = debt.rate / 100 / 12;
  const payment    = debt.minPayment + (isFirst ? extraPayment : 0);
  const monthsLeft = monthlyRate > 0 && payment > debt.balance * monthlyRate
    ? Math.ceil(Math.log(1 / (1 - (debt.balance * monthlyRate) / payment)) / Math.log(1 + monthlyRate))
    : payment > 0 ? Math.ceil(debt.balance / payment) : 999;
  const safeMonths = isFinite(monthsLeft) && monthsLeft > 0 ? Math.min(monthsLeft, 360) : '—';

  return (
    <div style={{
      background:'var(--surface)', border:'1px solid var(--border)', borderRadius:'var(--r-xl)',
      boxShadow:'var(--sh-sm)', overflow:'hidden',
    }}>
      {/* Barra de color superior */}
      <div style={{ height:4, background: debt.color, opacity:0.85 }} />
      <div style={{ padding:'16px 18px' }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:12 }}>
          <div>
            <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:3 }}>
              <span style={{ fontSize:15, fontWeight:700, color:'var(--t1)' }}>{debt.name}</span>
              {isFirst && <span className="badge badge-blue"><Icon name="target" size={11} color="var(--accent-text)" strokeWidth={2.2} /> Atacar primero</span>}
              {debt.rate === 0 && <span className="badge badge-green">0% interés</span>}
            </div>
            <div style={{ fontSize:12, color:'var(--t4)' }}>{debt.institution} · Vence día {debt.dueDay}</div>
          </div>
          <div style={{ textAlign:'right' }}>
            <div style={{ fontSize:22, fontWeight:900, color:debt.color, fontVariantNumeric:'tabular-nums', letterSpacing:'-0.5px' }}>{fmtFull(debt.balance, debt.currency)}</div>
            <div style={{ fontSize:11, color:'var(--t5)' }}>de {fmtFull(debt.originalAmount, debt.currency)}</div>
          </div>
        </div>

        {/* Progress */}
        <div className="progress-track" style={{ marginBottom:5 }}>
          <div className="progress-fill" style={{ width:`${paidPct}%`, background:debt.color }} />
        </div>
        <div style={{ display:'flex', justifyContent:'space-between', marginBottom:14 }}>
          <span style={{ fontSize:11, color:'var(--t5)' }}>Progreso de pago</span>
          <span style={{ fontSize:11, fontWeight:700, color:debt.color }}>{paidPct}% pagado</span>
        </div>

        {/* Stats 4 cols */}
        <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:8 }}>
          {[
            { l:'TNA',        v: debt.rate>0?`${debt.rate}%`:'Sin int.' },
            { l:'Cuota',      v: fmtFull(payment) },
            { l:'Meses',      v: safeMonths },
            { l:'Vence día',  v: debt.dueDay },
          ].map(({ l, v }) => (
            <div key={l} style={{ background:'var(--surface-2)', borderRadius:'var(--r-md)', padding:'9px 10px', textAlign:'center' }}>
              <div style={{ fontSize:14, fontWeight:800, color:'var(--t2)', fontVariantNumeric:'tabular-nums' }}>{v}</div>
              <div style={{ fontSize:10, color:'var(--t5)', marginTop:2 }}>{l}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

/* ── Pantalla Deudas ── */
const Debts = ({ data, setData, theme, toggleTheme, selectedMonth, setSelectedMonth }) => {
  const [method,       setMethod]       = useStD('avalanche');
  const [extraPayment, setExtraPayment] = useStD(20000);
  const [showAddDebt,  setShowAddDebt]  = useStD(false);

  // El FAB central del bottom-nav mobile dispara este evento contextual
  useEffD(() => {
    const handler = (e) => { if (e.detail === 'debt') setShowAddDebt(true); };
    window.addEventListener('rumbo:openAdd', handler);
    return () => window.removeEventListener('rumbo:openAdd', handler);
  }, []);

  const { debts } = data;
  const curMonth = selectedMonth || `${new Date().getFullYear()}-${String(new Date().getMonth()+1).padStart(2,'0')}`;
  const todayKey = `${new Date().getFullYear()}-${String(new Date().getMonth()+1).padStart(2,'0')}`;
  const isFutureMonth = curMonth > todayKey;
  const isPastMonth   = curMonth < todayKey;

  // Calcular cuotas que vencen en el mes seleccionado (cada deuda × sus fechas de vencimiento)
  const monthlyDuesItems = useMemoD(() => {
    const items = [];
    debts.forEach(d => {
      const dates = (typeof getDueDatesInMonth === 'function')
        ? getDueDatesInMonth({ ...d, frequency: d.frequency || 'mensual' }, curMonth)
        : [new Date(curMonth + '-' + String(d.dueDay || 1).padStart(2,'0'))];
      dates.forEach(date => items.push({ debt: d, date, amount: d.minPayment || 0 }));
    });
    return items.sort((a,b) => a.date - b.date);
  }, [debts, curMonth]);
  const monthlyDuesTotal = monthlyDuesItems.reduce((s,i) => s + i.amount, 0);
  const totalDebt    = debts.reduce((s,d) => s+d.balance, 0);
  const totalInterest = debts.reduce((s,d) => s+d.balance*(d.rate/100/12), 0);
  const minPayments  = debts.reduce((s,d) => s+d.minPayment, 0);
  const totalPayment = minPayments + extraPayment;
  const monthsFree   = totalPayment > 0 ? Math.ceil(totalDebt / (totalPayment * 0.7)) : 999;

  const freedomDate = new Date();
  freedomDate.setMonth(freedomDate.getMonth() + monthsFree);
  const freedomStr = freedomDate.toLocaleDateString('es-AR', { month:'long', year:'numeric' });

  const sorted = useMemoD(() => {
    const copy = [...debts];
    return method === 'avalanche'
      ? copy.sort((a,b) => b.rate - a.rate)
      : copy.sort((a,b) => a.balance - b.balance);
  }, [debts, method]);

  const handleAddDebt = (debt) => {
    const updated = { ...data, debts: [...data.debts, debt] };
    setData(updated); saveData(updated);
    window.showToast('Deuda agregada', 'success');
  };

  // Quick chips para pago extra
  const CHIPS = [0, 10000, 25000, 50000, 100000];

  return (
    <div style={{ background:'var(--bg)', minHeight:'100%', paddingBottom:32 }}>

      {/* Header */}
      <div className="screen-header">
        <div>
          <h1 className="screen-title">Plan de escape</h1>
          <p className="screen-sub">Estrategia para liberarte de deudas</p>
        </div>
        <div style={{ display:'flex', gap:8, flexWrap:'wrap', justifyContent:'flex-end' }}>
          {setSelectedMonth && (
            <MonthSwitcher value={curMonth} onChange={setSelectedMonth} transactions={data.transactions || []} compact />
          )}
          {toggleTheme && (
            <button className="theme-toggle" onClick={toggleTheme}>
              <Icon name={theme==='dark'?'sun':'moon'} size={15} color="var(--t3)" />
            </button>
          )}
        </div>
      </div>

      <div style={{ padding:'14px 20px 0' }}>

        {/* A pagar en el mes seleccionado — anclado al rumbo temporal */}
        {monthlyDuesItems.length > 0 && (
          <div style={{
            background:'var(--surface)', border:'1.5px solid var(--border)',
            borderRadius:'var(--r-xl)', padding:'16px 18px', marginBottom:14, boxShadow:'var(--sh-sm)',
          }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:12 }}>
              <div>
                <div style={{ fontSize:11, fontWeight:700, color:'var(--t5)', textTransform:'uppercase', letterSpacing:'0.4px', marginBottom:2 }}>
                  {isFutureMonth ? 'A pagar en' : isPastMonth ? 'Tenías que pagar en' : 'A pagar este mes'}
                </div>
                <div style={{ fontSize:14, fontWeight:700, color:'var(--t1)' }}>
                  {(() => { const [y,m]=curMonth.split('-').map(Number); const lbl = new Date(y,m-1,1).toLocaleDateString('es-AR',{month:'long',year:'numeric'}); return lbl.charAt(0).toUpperCase()+lbl.slice(1); })()}
                </div>
              </div>
              <div style={{ textAlign:'right' }}>
                <div style={{ fontSize:22, fontWeight:900, color:'var(--danger)', fontVariantNumeric:'tabular-nums', letterSpacing:'-0.5px' }}>
                  {fmtFull(monthlyDuesTotal)}
                </div>
                <div style={{ fontSize:11, color:'var(--t5)' }}>{monthlyDuesItems.length} {monthlyDuesItems.length===1?'cuota':'cuotas'}</div>
              </div>
            </div>
            <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
              {monthlyDuesItems.map((it, i) => (
                <div key={i} style={{ display:'flex', alignItems:'center', gap:10, padding:'8px 10px', background:'var(--surface-2)', border:'1px solid var(--border)', borderRadius:'var(--r-md)' }}>
                  <div style={{ width:32, height:32, borderRadius:'var(--r-sm)', background:'var(--surface)', border:'1px solid var(--border)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
                    <Icon name={it.debt.iconName || 'creditCard'} size={14} color={it.debt.color || 'var(--danger)'} strokeWidth={1.7} />
                  </div>
                  <div style={{ flex:1, minWidth:0 }}>
                    <div style={{ fontSize:13, fontWeight:700, color:'var(--t1)', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{it.debt.name}</div>
                    <div style={{ fontSize:11, color:'var(--t5)' }}>
                      {it.date.toLocaleDateString('es-AR', { weekday:'short', day:'numeric', month:'short' })}
                    </div>
                  </div>
                  <div style={{ fontSize:13, fontWeight:800, color:'var(--t1)', fontVariantNumeric:'tabular-nums', flexShrink:0 }}>
                    {fmtFull(it.amount, it.debt.currency)}
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Banner libertad — feedback prominente */}
        <div style={{
          background:`linear-gradient(135deg, var(--accent) 0%, #1D4ED8 100%)`,
          borderRadius:'var(--r-xl)', padding:'20px 22px', marginBottom:16, color:'#fff',
          display:'flex', alignItems:'center', justifyContent:'space-between', gap:16,
          boxShadow:'var(--sh-fab)',
        }}>
          <div>
            <div style={{ fontSize:12, fontWeight:700, opacity:0.7, textTransform:'uppercase', letterSpacing:'0.5px', marginBottom:6 }}>
              Con el plan actual te liberás en
            </div>
            <div style={{ fontSize:32, fontWeight:900, letterSpacing:'-1px', lineHeight:1 }}>
              {monthsFree} <span style={{ fontSize:18, fontWeight:700 }}>meses</span>
            </div>
            <div style={{ fontSize:13, opacity:0.75, marginTop:4 }}>Estimado para {freedomStr}</div>
          </div>
          <div style={{ textAlign:'right', flexShrink:0 }}>
            <svg width="64" height="64" viewBox="0 0 72 72">
              <circle cx="36" cy="36" r="30" fill="none" stroke="rgba(255,255,255,0.2)" strokeWidth="6"/>
              <circle cx="36" cy="36" r="30" fill="none" stroke="#fff" strokeWidth="6"
                strokeDasharray={`${Math.min(100, (1 - totalDebt/Math.max(1, debts.reduce((s,d)=>s+d.originalAmount,0)))*100) * 1.885} 188.5`}
                strokeLinecap="round" transform="rotate(-90 36 36)"/>
              <text x="36" y="41" textAnchor="middle" fill="#fff" fontSize="13" fontWeight="900" fontFamily="'Outfit',sans-serif">
                {Math.round((1 - totalDebt/Math.max(1, debts.reduce((s,d)=>s+d.originalAmount,0)))*100)}%
              </text>
            </svg>
            <div style={{ fontSize:11, opacity:0.7, marginTop:4 }}>pagado</div>
          </div>
        </div>

        {/* Stats rápidos */}
        <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:10, marginBottom:16 }} className="stats-grid-3">
          {[
            { l:'Deuda total',     v:fmtFull(totalDebt),              c:'var(--danger)'  },
            { l:'Interés/mes',     v:fmtFull(Math.round(totalInterest)), c:'var(--warning)' },
            { l:'Cuotas mín.',     v:fmtFull(minPayments),            c:'var(--t2)'      },
          ].map(({l,v,c}) => (
            <div key={l} style={{ background:'var(--surface)', border:'1px solid var(--border)', borderRadius:'var(--r-lg)', padding:'13px 14px', boxShadow:'var(--sh-xs)' }}>
              <div style={{ fontSize:10, fontWeight:700, color:'var(--t5)', textTransform:'uppercase', letterSpacing:'0.4px', marginBottom:5 }}>{l}</div>
              <div style={{ fontSize:17, fontWeight:800, color:c, fontVariantNumeric:'tabular-nums' }}>{v}</div>
            </div>
          ))}
        </div>

        {/* Pago extra — input numérico + chips */}
        <div style={{ background:'var(--surface)', border:'1px solid var(--border)', borderRadius:'var(--r-xl)', padding:'18px 20px', marginBottom:16, boxShadow:'var(--sh-sm)' }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:12 }}>
            <div>
              <div style={{ fontSize:14, fontWeight:700, color:'var(--t1)' }}>Pago extra mensual</div>
              <div style={{ fontSize:12, color:'var(--t4)', marginTop:2 }}>Suma esto a tus cuotas mínimas</div>
            </div>
            <div style={{ textAlign:'right' }}>
              <div style={{ fontSize:22, fontWeight:900, color:'var(--accent)', fontVariantNumeric:'tabular-nums' }}>{fmtFull(extraPayment)}</div>
            </div>
          </div>

          {/* Input numérico preciso */}
          <div style={{ display:'flex', alignItems:'center', gap:10, background:'var(--surface-2)', border:'1.5px solid var(--border)', borderRadius:'var(--r-md)', padding:'10px 14px', marginBottom:12 }}>
            <span style={{ fontSize:16, fontWeight:800, color:'var(--accent)' }}>+$</span>
            <input
              type="number" inputMode="numeric" min="0" step="1000"
              value={extraPayment}
              onChange={e => setExtraPayment(Math.max(0, parseInt(e.target.value)||0))}
              style={{ flex:1, background:'none', border:'none', outline:'none', fontSize:18, fontWeight:800, color:'var(--t1)', fontFamily:'var(--font)', fontVariantNumeric:'tabular-nums' }}
            />
          </div>

          {/* Chips rápidos */}
          <div style={{ display:'flex', gap:8, flexWrap:'wrap' }}>
            {CHIPS.map(v => (
              <button key={v} onClick={() => setExtraPayment(v)}
                style={{
                  padding:'6px 12px', borderRadius:'var(--r-full)', fontSize:12, fontWeight:700,
                  background: extraPayment===v ? 'var(--accent)' : 'var(--surface-2)',
                  color: extraPayment===v ? '#fff' : 'var(--t3)',
                  border: `1px solid ${extraPayment===v ? 'transparent' : 'var(--border)'}`,
                  transition:'all 0.15s',
                }}>
                {v === 0 ? 'Sin extra' : `+${fmtFull(v)}`}
              </button>
            ))}
          </div>

          {/* Insight dinámico */}
          {extraPayment > 0 && (
            <div className="insight info" style={{ marginTop:12, marginBottom:0 }}>
              <div className="insight-icon" style={{ background:'var(--accent-muted)' }}>
                <Icon name="zap" size={18} color="var(--accent)" />
              </div>
              <div>
                <div style={{ fontSize:13, fontWeight:700, color:'var(--accent-text)' }}>
                  Con {fmtFull(extraPayment)} extra/mes…
                </div>
                <div style={{ fontSize:12, color:'var(--t3)', marginTop:3 }}>
                  Te liberás ~{Math.max(1, monthsFree - Math.ceil(extraPayment / 8000))} meses antes y ahorrás {fmtFull(Math.round(totalInterest * Math.ceil(extraPayment / 8000)))} en intereses.
                </div>
              </div>
            </div>
          )}
        </div>

        {/* Estrategia */}
        <div style={{ background:'var(--surface)', border:'1px solid var(--border)', borderRadius:'var(--r-xl)', padding:'18px 20px', marginBottom:16, boxShadow:'var(--sh-sm)' }}>
          <div style={{ fontSize:14, fontWeight:700, color:'var(--t1)', marginBottom:12 }}>Estrategia de pago</div>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:10 }}>
            {[
              { k:'avalanche', l:'Avalancha', d:'Mayor interés primero — ahorrás más dinero', icon:'trending', c:'var(--accent)' },
              { k:'snowball',  l:'Bola de nieve', d:'Menor saldo primero — victorias rápidas',  icon:'target',   c:'var(--success)' },
            ].map(({ k,l,d,icon,c }) => (
              <button key={k} onClick={() => setMethod(k)}
                style={{
                  display:'flex', flexDirection:'column', gap:8, padding:'14px',
                  background: method===k ? (k==='avalanche'?'var(--accent-muted)':'var(--success-bg)') : 'var(--surface-2)',
                  border: `1.5px solid ${method===k ? c : 'var(--border)'}`,
                  borderRadius:'var(--r-lg)', cursor:'pointer', textAlign:'left', transition:'all 0.18s',
                }}>
                <Icon name={icon} size={20} color={method===k?c:'var(--t4)'} />
                <div style={{ fontSize:13, fontWeight:700, color:method===k?c:'var(--t2)' }}>{l}</div>
                <div style={{ fontSize:11, color:'var(--t4)', lineHeight:1.4 }}>{d}</div>
              </button>
            ))}
          </div>
        </div>

        {/* Tarjetas de deuda */}
        <div style={{ fontSize:13, fontWeight:700, color:'var(--t2)', marginBottom:10 }}>
          Orden de ataque · Método {method === 'avalanche' ? 'Avalancha' : 'Bola de nieve'}
        </div>
        <div style={{ display:'flex', flexDirection:'column', gap:12 }}>
          {sorted.map((debt, i) => (
            <DebtCard key={debt.id} debt={debt} isFirst={i===0} extraPayment={extraPayment} />
          ))}
        </div>
      </div>

      {/* FAB persistente */}
      <button className="fab fab-fixed" onClick={() => setShowAddDebt(true)} aria-label="Agregar deuda">
        <Icon name="plus" size={22} color="#fff" strokeWidth={2} />
      </button>

      {showAddDebt && <AddDebtDrawer onClose={() => setShowAddDebt(false)} onAdd={handleAddDebt} data={data} />}
    </div>
  );
};

Object.assign(window, { Debts });