/* ============================================================
   Config.jsx — configuración (/config)
   ============================================================ */
function Toggle({ on, onClick }) {
  return <div className={`toggle ${on ? 'on' : ''}`} onClick={onClick} role="switch" aria-checked={on} />;
}

/* ---- Clases válidas para el selector ---- */
const ASSET_CLASSES = ['Acción', 'CEDEAR', 'Bono'];

/* ---- Editor de portfolio ---- */
function PortfolioEditor() {
  const [rows,    setRows]    = useState(() => {
    try { const r = localStorage.getItem('fin_portfolio'); return r ? JSON.parse(r) : []; }
    catch { return []; }
  });
  const [saved,   setSaved]   = useState(false);
  const [importErr, setImportErr] = useState('');

  function addRow() {
    setRows(prev => [...prev, { tk: '', nm: '', cls: 'Acción', qty: '', pm: '', broker: '' }]);
  }

  function delRow(i) {
    setRows(prev => prev.filter((_, idx) => idx !== i));
  }

  function updateRow(i, field, val) {
    setRows(prev => prev.map((r, idx) => idx === i ? { ...r, [field]: val } : r));
  }

  function save() {
    const cleaned = rows.map(r => ({
      tk:     String(r.tk   || '').trim().toUpperCase(),
      nm:     String(r.nm   || '').trim(),
      cls:    r.cls,
      qty:    parseFloat(String(r.qty).replace(',', '.')) || 0,
      pm:     parseFloat(String(r.pm ).replace(',', '.')) || 0,
      broker: String(r.broker || '').trim(),
    })).filter(r => r.tk && r.qty > 0 && r.pm > 0);
    localStorage.setItem('fin_portfolio', JSON.stringify(cleaned));
    setRows(cleaned);
    setSaved(true);
    setTimeout(() => setSaved(false), 2000);
    window.location.reload();
  }

  function exportJSON() {
    const blob = new Blob([JSON.stringify(rows, null, 2)], { type: 'application/json' });
    const a = document.createElement('a'); a.href = URL.createObjectURL(blob);
    a.download = 'portfolio.json'; a.click();
  }

  function importJSON(e) {
    setImportErr('');
    const file = e.target.files?.[0]; if (!file) return;
    const reader = new FileReader();
    reader.onload = ev => {
      try {
        const parsed = JSON.parse(ev.target.result);
        if (!Array.isArray(parsed)) throw new Error('Debe ser un array JSON');
        setRows(parsed);
      } catch (err) { setImportErr('Error al importar: ' + err.message); }
    };
    reader.readAsText(file);
    e.target.value = '';
  }

  const thStyle = { fontSize: 11, fontWeight: 600, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.05em', padding: '0 6px 8px', textAlign: 'left' };
  const tdStyle = { padding: '3px 4px', verticalAlign: 'middle' };
  const inpSm = { width: '100%', background: 'var(--surface-3)', border: '1px solid var(--border)', borderRadius: 'var(--radius-sm)', padding: '5px 7px', fontSize: 12.5, color: 'var(--text-1)', fontFamily: 'var(--mono)' };

  return (
    <div>
      <div className="card-sub" style={{ marginBottom: 16 }}>
        Tus posiciones se guardan en este dispositivo. Ingresá <b>ticker</b> como aparece en tu broker (ej: YPFD, GD30, NVDA).
      </div>

      <div style={{ overflowX: 'auto' }}>
        <table style={{ width: '100%', borderCollapse: 'collapse', minWidth: 560 }}>
          <thead>
            <tr>
              {['Ticker','Nombre','Clase','Cantidad','P. Compra','Broker',''].map(h => (
                <th key={h} style={thStyle}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {rows.length === 0 && (
              <tr>
                <td colSpan={7} style={{ padding: '20px 6px', color: 'var(--text-3)', fontSize: 13, textAlign: 'center' }}>
                  Sin posiciones. Hacé click en "+ Agregar" para empezar.
                </td>
              </tr>
            )}
            {rows.map((r, i) => (
              <tr key={i} style={{ borderTop: '1px solid var(--border)' }}>
                <td style={tdStyle}><input style={{ ...inpSm, width: 72 }} value={r.tk} onChange={e => updateRow(i, 'tk', e.target.value)} placeholder="YPFD" /></td>
                <td style={tdStyle}><input style={{ ...inpSm, width: 120, fontFamily: 'var(--sans)' }} value={r.nm} onChange={e => updateRow(i, 'nm', e.target.value)} placeholder="YPF" /></td>
                <td style={tdStyle}>
                  <select style={{ ...inpSm, width: 90 }} value={r.cls} onChange={e => updateRow(i, 'cls', e.target.value)}>
                    {ASSET_CLASSES.map(c => <option key={c} value={c}>{c}</option>)}
                  </select>
                </td>
                <td style={tdStyle}><input style={{ ...inpSm, width: 72 }} type="number" min="0" value={r.qty} onChange={e => updateRow(i, 'qty', e.target.value)} placeholder="10" /></td>
                <td style={tdStyle}><input style={{ ...inpSm, width: 90 }} type="number" min="0" value={r.pm} onChange={e => updateRow(i, 'pm', e.target.value)} placeholder="35000" /></td>
                <td style={tdStyle}><input style={{ ...inpSm, width: 80, fontFamily: 'var(--sans)' }} value={r.broker} onChange={e => updateRow(i, 'broker', e.target.value)} placeholder="Balanz" /></td>
                <td style={{ ...tdStyle, textAlign: 'center' }}>
                  <button onClick={() => delRow(i)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--neg)', padding: 4 }} title="Eliminar">
                    <Icon name="x" size={15} />
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div style={{ display: 'flex', gap: 8, marginTop: 14, flexWrap: 'wrap' }}>
        <button className="btn btn-ghost btn-sm" onClick={addRow}><Icon name="plus" size={14} />Agregar posición</button>
        <button className="btn btn-ghost btn-sm" onClick={exportJSON}><Icon name="arrowUpRight" size={14} />Exportar JSON</button>
        <label className="btn btn-ghost btn-sm" style={{ cursor: 'pointer' }}>
          <Icon name="refresh" size={14} />Importar JSON
          <input type="file" accept=".json" style={{ display: 'none' }} onChange={importJSON} />
        </label>
        <div style={{ flex: 1 }} />
        <button className="btn btn-primary" onClick={save}>
          {saved ? <><Icon name="check" size={14} />Guardado</> : <><Icon name="check" size={14} />Guardar portfolio</>}
        </button>
      </div>

      {importErr && (
        <div className="alert warn" style={{ marginTop: 10, padding: '8px 12px' }}>
          <Icon name="alertTri" size={14} className="a-ico" /><span className="a-body">{importErr}</span>
        </div>
      )}
    </div>
  );
}

/* ---- Sección de API key de broker ---- */
function BrokerApiKey({ name, keyName, secretName, description }) {
  const [key,    setKey]    = useState(() => localStorage.getItem(keyName)    || '');
  const [secret, setSecret] = useState(() => localStorage.getItem(secretName) || '');
  const [saved,  setSaved]  = useState(false);
  const [show,   setShow]   = useState(false);
  const connected = !!localStorage.getItem(keyName);

  function save() {
    if (!key.trim()) return;
    localStorage.setItem(keyName,    key.trim());
    if (secret.trim()) localStorage.setItem(secretName, secret.trim());
    setSaved(true); setTimeout(() => setSaved(false), 2000);
  }
  function remove() {
    localStorage.removeItem(keyName); localStorage.removeItem(secretName);
    setKey(''); setSecret(''); setSaved(false);
  }

  return (
    <div className="integ">
      <div className="integ-ico"><Icon name="bank" size={20} style={{ color: connected ? 'var(--pos)' : 'var(--text-3)' }} /></div>
      <div className="integ-main" style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 2 }}>
          <div className="integ-name">{name}</div>
          <span className={`status-tag ${connected ? 'on' : ''}`}>{connected ? 'conectado' : 'sin API key'}</span>
        </div>
        <div className="integ-desc" style={{ marginBottom: show ? 12 : 0 }}>{description}</div>
        {show && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 4 }}>
            <div className="field" style={{ marginBottom: 0 }}>
              <label className="field-label">API Key</label>
              <input className="inp mono" type="password" value={key} onChange={e => setKey(e.target.value)} placeholder="Pegá tu API Key aquí" style={{ fontSize: 12 }} />
            </div>
            <div className="field" style={{ marginBottom: 0 }}>
              <label className="field-label">Secret Key</label>
              <input className="inp mono" type="password" value={secret} onChange={e => setSecret(e.target.value)} placeholder="Pegá tu Secret Key aquí" style={{ fontSize: 12 }} />
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <button className="btn btn-ghost btn-sm" onClick={() => setShow(false)}>Cancelar</button>
              {connected && <button className="btn btn-ghost btn-sm" style={{ color: 'var(--neg)' }} onClick={remove}><Icon name="x" size={13} />Desconectar</button>}
              <button className="btn btn-primary btn-sm" onClick={save} disabled={!key.trim()}>
                {saved ? <><Icon name="check" size={14} />Guardado</> : <><Icon name="check" size={14} />Guardar</>}
              </button>
            </div>
          </div>
        )}
      </div>
      {!show && (
        <button className="btn btn-ghost btn-sm" style={{ flexShrink: 0 }} onClick={() => setShow(true)}>
          {connected ? 'Editar' : 'Configurar'}
        </button>
      )}
    </div>
  );
}

function Config({ integ, setInteg, invPct, setInvPct, invSplit, setInvSplit }) {
  /* ---- Google Sheet ---- */
  const [sheetId,    setSheetId]    = useState(() => localStorage.getItem('fin_sheet_id') || '');
  const [sheetSaved, setSheetSaved] = useState(false);

  function saveSheet() {
    const trimmed = sheetId.trim();
    if (!trimmed) return;
    localStorage.setItem('fin_sheet_id', trimmed);
    setSheetSaved(true);
    setTimeout(() => setSheetSaved(false), 2000);
  }

  /* ---- PIN ---- */
  const [pinMode,    setPinMode]    = useState(null);
  const [pinCurrent, setPinCurrent] = useState('');
  const [pinNew,     setPinNew]     = useState('');
  const [pinConfirm, setPinConfirm] = useState('');
  const [pinErr,     setPinErr]     = useState('');
  const [pinOk,      setPinOk]      = useState(false);
  const hasPinSet = !!localStorage.getItem('fin_pin_hash');

  async function savePin() {
    setPinErr('');
    if (pinNew.length < 4) { setPinErr('Mínimo 4 caracteres'); return; }
    if (pinNew !== pinConfirm) { setPinErr('Los PINs no coinciden'); return; }
    if (hasPinSet) {
      const h = await window.FIN_HASH(pinCurrent);
      if (h !== localStorage.getItem('fin_pin_hash')) { setPinErr('PIN actual incorrecto'); return; }
    }
    localStorage.setItem('fin_pin_hash', await window.FIN_HASH(pinNew));
    setPinMode(null); setPinCurrent(''); setPinNew(''); setPinConfirm('');
    setPinOk(true); setTimeout(() => setPinOk(false), 2000);
  }

  /* ---- Preferencias ---- */
  const [prefSaved, setPrefSaved] = useState(false);
  function savePrefs() {
    localStorage.setItem('fin_inv_pct',   String(invPct));
    localStorage.setItem('fin_inv_split', String(invSplit));
    setPrefSaved(true); setTimeout(() => setPrefSaved(false), 2000);
  }

  return (
    <div className="content-inner page-enter" style={{ maxWidth: 820 }}>

      {/* Portfolio */}
      <div className="card" style={{ marginBottom: 16 }}>
        <div className="card-title" style={{ marginBottom: 4 }}>
          <Icon name="coins" size={16} className="ico" />Mi Portfolio
        </div>
        <PortfolioEditor />
      </div>

      {/* Brokers API */}
      <div className="card" style={{ marginBottom: 16 }}>
        <div className="card-title" style={{ marginBottom: 4 }}><Icon name="bank" size={16} className="ico" />Conexión con brokers</div>
        <div className="card-sub" style={{ marginBottom: 16 }}>
          Las API keys se guardan solo en este dispositivo y se usan para consultar tus balances y bots reales.
        </div>
        <BrokerApiKey
          name="Pionex"
          keyName="fin_pionex_key"
          secretName="fin_pionex_secret"
          description="Crypto · Grid Bots · Futuros. Obtené tu key en Pionex → API Management."
        />
        <BrokerApiKey
          name="Cocos Capital"
          keyName="fin_cocos_key"
          secretName="fin_cocos_secret"
          description="Broker argentino · Acciones, CEDEARs, Bonos. API en developers.cocos.capital."
        />
        <div className="integ">
          <div className="integ-ico"><Icon name="bank" size={20} style={{ color: 'var(--text-3)' }} /></div>
          <div className="integ-main">
            <div className="integ-name">Balanz <span className="status-tag" style={{ opacity: .6 }}>sin API</span></div>
            <div className="integ-desc">Sin API pública disponible aún. Cargá posiciones en el portfolio manual.</div>
          </div>
        </div>
      </div>

      {/* Google Sheet */}
      <div className="card" style={{ marginBottom: 16 }}>
        <div className="card-title" style={{ marginBottom: 4 }}><Icon name="sheet" size={16} className="ico" />Finanzas personales</div>
        <div className="card-sub" style={{ marginBottom: 16 }}>Conectá una Google Sheet para ver tus ingresos y gastos.</div>
        <div className="field">
          <label className="field-label">ID de la Google Sheet</label>
          <div style={{ display: 'flex', gap: 8 }}>
            <input className="inp mono" style={{ flex: 1 }} value={sheetId}
              onChange={e => setSheetId(e.target.value)}
              placeholder="17wwXIGtp6ogu18fCOF4mmTMNuSDETSXKYxuzMDcAlBI" />
            <button className="btn btn-primary btn-sm" onClick={saveSheet} disabled={!sheetId.trim()}>
              {sheetSaved ? <><Icon name="check" size={14} />Guardado</> : 'Guardar'}
            </button>
          </div>
          <div className="field-hint">
            URL de tu hoja: docs.google.com/spreadsheets/d/<b>[ID]</b>/edit. La hoja debe estar en "cualquiera con el enlace puede ver".
          </div>
        </div>
      </div>

      {/* Seguridad / PIN */}
      <div className="card" style={{ marginBottom: 16 }}>
        <div className="card-title" style={{ marginBottom: 4 }}><Icon name="lock" size={16} className="ico" />Seguridad</div>
        <div className="card-sub" style={{ marginBottom: 14 }}>Todo se guarda en tu navegador. Nunca sale del dispositivo.</div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div>
            <div style={{ fontSize: 13.5, fontWeight: 600 }}>PIN de acceso</div>
            <div className="muted-note" style={{ fontSize: 12 }}>
              {hasPinSet ? 'Configurado — requerido al abrir la app' : 'No configurado'}
            </div>
          </div>
          <button className="btn btn-ghost btn-sm" onClick={() => setPinMode(pinMode ? null : 'change')}>
            <Icon name="lock" size={14} />{hasPinSet ? 'Cambiar PIN' : 'Crear PIN'}
          </button>
        </div>
        {pinMode === 'change' && (
          <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 10 }}>
            {hasPinSet && (
              <div className="field" style={{ marginBottom: 0 }}>
                <label className="field-label">PIN actual</label>
                <input className="inp" type="password" value={pinCurrent} onChange={e => setPinCurrent(e.target.value)} placeholder="••••••" />
              </div>
            )}
            <div className="field" style={{ marginBottom: 0 }}>
              <label className="field-label">PIN nuevo</label>
              <input className="inp" type="password" value={pinNew} onChange={e => setPinNew(e.target.value)} placeholder="•••••• (mín. 4 caracteres)" />
            </div>
            <div className="field" style={{ marginBottom: 0 }}>
              <label className="field-label">Confirmar PIN nuevo</label>
              <input className="inp" type="password" value={pinConfirm} onChange={e => setPinConfirm(e.target.value)} placeholder="••••••" />
            </div>
            {pinErr && (
              <div className="alert warn" style={{ padding: '8px 12px' }}>
                <Icon name="alertTri" size={14} className="a-ico" /><span className="a-body">{pinErr}</span>
              </div>
            )}
            <div style={{ display: 'flex', gap: 8 }}>
              <button className="btn btn-ghost btn-sm" onClick={() => { setPinMode(null); setPinErr(''); }}>Cancelar</button>
              <button className="btn btn-primary btn-sm" onClick={savePin}>
                <Icon name="check" size={14} />{hasPinSet ? 'Actualizar PIN' : 'Crear PIN'}
              </button>
            </div>
          </div>
        )}
        {pinOk && (
          <div className="alert" style={{ marginTop: 12, padding: '8px 12px', borderColor: 'var(--pos)', background: 'color-mix(in oklab, var(--pos) 8%, var(--surface))' }}>
            <Icon name="check" size={14} className="a-ico" style={{ color: 'var(--pos)' }} />
            <span className="a-body" style={{ color: 'var(--pos)' }}>PIN actualizado</span>
          </div>
        )}
      </div>

      {/* Preferencias */}
      <div className="card">
        <div className="card-title" style={{ marginBottom: 4 }}><Icon name="settings" size={16} className="ico" />Preferencias de inversión</div>
        <div className="card-sub" style={{ marginBottom: 22 }}>Definen cuánto destinás a invertir y cómo se reparte.</div>
        <div className="field">
          <label className="field-label" style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span>% del saldo destinado a invertir</span>
            <span className="rng-val">{invPct}%</span>
          </label>
          <input type="range" className="rng" min="0" max="100" step="5" value={invPct} onChange={e => setInvPct(+e.target.value)} />
          <div className="field-hint">Cada mes reservamos este porcentaje del saldo (ingresos − gastos) como "disponible para invertir".</div>
        </div>
        <div className="divider" />
        <div className="field" style={{ marginBottom: 0 }}>
          <label className="field-label" style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span>Perfil: conservador → activo</span>
            <span className="rng-val" style={{ minWidth: 120 }}>{100 - invSplit}/{invSplit}</span>
          </label>
          <input type="range" className="rng" min="0" max="100" step="10" value={invSplit} onChange={e => setInvSplit(+e.target.value)} />
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10 }}>
            <div>
              <div className="muted-note" style={{ fontSize: 11 }}>Conservador · bonos</div>
              <div className="num" style={{ fontSize: 15, fontWeight: 600, color: 'var(--info)' }}>{100 - invSplit}%</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div className="muted-note" style={{ fontSize: 11 }}>Activo · acciones/CEDEARs</div>
              <div className="num" style={{ fontSize: 15, fontWeight: 600, color: 'var(--pos)' }}>{invSplit}%</div>
            </div>
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 20 }}>
          <button className="btn btn-primary" onClick={savePrefs}>
            {prefSaved ? <><Icon name="check" size={15} />Guardado</> : <><Icon name="check" size={15} />Guardar preferencias</>}
          </button>
        </div>
      </div>

    </div>
  );
}

Object.assign(window, { Config });