// Rumbo — AddFixedModal (shared between CalendarView & FixedExpenses)

const { useState: useStFM } = React;

const AddFixedModal = ({ onClose, onAdd }) => {
  const [form, setForm] = useStFM({
    name: '', amount: '', currency: 'ARS', dueDay: 1,
    category: 'Servicios', icon: '📦', active: true, frequency: 'mensual',
  });

  const icons = ['📶','📱','🏥','🧠','🤖','🎬','🎵','🎨','🏠','🏢','🇵🇪','💼','📚','🎮','🚗','⚡','🌐','💊','☕','🍔'];
  const cats  = ['Servicios','Salud','IA / Software','Entretenimiento','Hogar','Transferencias','Educación','Transporte','Otros'];

  const inp = { width: '100%', background: '#0D0E16', border: '1px solid #ffffff10', borderRadius: 10, padding: '10px 14px', color: '#E2E8F0', fontSize: 14, outline: 'none', fontFamily: "'Outfit', sans-serif", boxSizing: 'border-box' };
  const lbl = { fontSize: 11, color: '#64748B', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.5px', display: 'block', marginBottom: 6 };

  const submit = (e) => {
    e.preventDefault();
    if (!form.name || !form.amount) return;
    onAdd({ ...form, amount: parseFloat(form.amount), id: 'f' + Date.now() });
    onClose();
  };

  return (
    <div style={{ position: 'fixed', inset: 0, background: '#000000cc', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000, backdropFilter: 'blur(4px)' }}>
      <div style={{ background: '#13141F', border: '1px solid #ffffff12', borderRadius: 20, padding: 28, width: 500, boxShadow: '0 24px 64px rgba(0,0,0,0.6)', maxHeight: '90vh', overflowY: 'auto' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
          <h2 style={{ margin: 0, fontSize: 18, fontWeight: 700, color: '#F1F5F9' }}>Nuevo gasto fijo</h2>
          <button onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer' }}>
            <Icon name="x" size={20} color="#475569" />
          </button>
        </div>
        <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          {/* Icon picker */}
          <div>
            <label style={lbl}>Ícono</label>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
              {icons.map(ic => (
                <button key={ic} type="button" onClick={() => setForm(f => ({ ...f, icon: ic }))}
                  style={{ width: 34, height: 34, borderRadius: 8, border: form.icon === ic ? '2px solid var(--accent)' : '1px solid #ffffff10', background: form.icon === ic ? 'color-mix(in srgb, var(--accent) 8%, transparent)' : '#0D0E16', cursor: 'pointer', fontSize: 16 }}>
                  {ic}
                </button>
              ))}
            </div>
          </div>

          <div>
            <label style={lbl}>Nombre</label>
            <input style={inp} placeholder="ej. Netflix" value={form.name}
              onChange={e => setForm(f => ({ ...f, name: e.target.value }))} required />
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <div>
              <label style={lbl}>Monto</label>
              <input style={inp} type="number" placeholder="0" value={form.amount}
                onChange={e => setForm(f => ({ ...f, amount: e.target.value }))} required />
            </div>
            <div>
              <label style={lbl}>Moneda</label>
              <select style={inp} value={form.currency} onChange={e => setForm(f => ({ ...f, currency: e.target.value }))}>
                {SUPPORTED_CURRENCIES.map(c => (
                  <option key={c.code} value={c.code}>{c.flag} {c.code} — {c.name}</option>
                ))}
              </select>
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <div>
              <label style={lbl}>Frecuencia</label>
              <select style={inp} value={form.frequency} onChange={e => setForm(f => ({ ...f, frequency: e.target.value }))}>
                {Object.entries(FREQUENCIES).map(([k, v]) => (
                  <option key={k} value={k}>{v.label}</option>
                ))}
              </select>
            </div>
            <div>
              <label style={lbl}>Día de vencimiento</label>
              <input style={inp} type="number" min="1" max="31" value={form.dueDay}
                onChange={e => setForm(f => ({ ...f, dueDay: parseInt(e.target.value) }))} />
            </div>
          </div>

          <div>
            <label style={lbl}>Categoría</label>
            <select style={inp} value={form.category} onChange={e => setForm(f => ({ ...f, category: e.target.value }))}>
              {cats.map(c => <option key={c} value={c}>{c}</option>)}
            </select>
          </div>

          <button type="submit" style={{ background: 'var(--accent)', border: 'none', borderRadius: 12, color: '#fff', padding: 14, fontSize: 15, fontWeight: 700, cursor: 'pointer', fontFamily: "'Outfit', sans-serif", marginTop: 4 }}>
            Agregar gasto fijo
          </button>
        </form>
      </div>
    </div>
  );
};

Object.assign(window, { AddFixedModal });