// ============================================================
// SETTINGS — confluences, threshold, session, account, export.
// ============================================================
const { useState: useStateS } = React;

function SettingsScreen({ user, setUser, confluences, setConfluences, persistProfile, trades, onReplay, onLogout }) {
  const { Btn, Icon, t } = window.CJUI;
  const { SESSIONS, confluenceFrequency } = window.CJData;
  const [adding, setAdding] = useStateS('');
  const [dragIdx, setDragIdx] = useStateS(null);
  const [armIdx, setArmIdx] = useStateS(null); // row armed for drag (handle pressed)

  const freq = confluenceFrequency(trades, confluences);
  const usesOf = (id) => (freq.find((f) => f.id === id) || { uses: 0 }).uses;

  // confluences live in app state + are persisted to the profile
  const commit = (next) => { setConfluences(next); persistProfile({ confluences: next }); };
  const add = () => {
    const name = adding.trim();
    if (!name) return;
    commit([...confluences, { id: 'c' + Date.now(), name }]);
    setAdding('');
  };
  const remove = (id) => commit(confluences.filter((c) => c.id !== id));
  // drag-to-reorder: arm on the handle (so the input stays editable),
  // reorder live while dragging over rows, persist once on drop.
  const onDragStart = (i) => () => setDragIdx(i);
  const onDragEnter = (i) => () => {
    if (dragIdx === null || dragIdx === i) return;
    const copy = [...confluences];
    const [m] = copy.splice(dragIdx, 1);
    copy.splice(i, 0, m);
    setConfluences(copy);   // live, no write yet
    setDragIdx(i);
  };
  const onDragEnd = () => { setDragIdx(null); setArmIdx(null); persistProfile({ confluences }); };
  const rename = (id, name) => setConfluences(confluences.map((c) => (c.id === id ? { ...c, name } : c)));
  const saveRename = () => persistProfile({ confluences });

  const setThreshold = (n) => { setUser((u) => ({ ...u, minConfluences: n })); persistProfile({ min_confluences: n }); };
  const setInstrument = (v) => { setUser((u) => ({ ...u, instrument: v })); persistProfile({ instrument: v }); };
  const toggleSession = (id) => {
    const next = user.sessions.includes(id) ? user.sessions.filter((x) => x !== id) : [...user.sessions, id];
    setUser((u) => ({ ...u, sessions: next }));
    persistProfile({ sessions: next });
  };

  // real CSV export of all trades (was a mock alert)
  const exportCsv = () => {
    const { nameOf } = window.CJData;
    const esc = (v) => '"' + String(v == null ? '' : v).replace(/"/g, '""') + '"';
    const head = ['Date', 'Time', 'Instrument', 'Direction', 'PnL', 'Confluences', 'Note'];
    const rows = trades.map((tr) => {
      const d = new Date(tr.ts);
      return [
        d.toLocaleDateString('en-CA'),
        d.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' }),
        tr.instrument, tr.direction, tr.pnl,
        tr.conf.map(nameOf).join(' | '), tr.note || '',
      ].map(esc).join(',');
    });
    const csv = [head.map(esc).join(','), ...rows].join('\n');
    const url = URL.createObjectURL(new Blob([csv], { type: 'text/csv;charset=utf-8' }));
    const a = document.createElement('a');
    a.href = url; a.download = 'confluence-score-trades.csv'; a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div className="fade-in" style={{ paddingTop: 26, display: 'grid', gap: 20, maxWidth: 720 }}>
      {/* Confluences */}
      <section className="panel">
        <div className="panel-head">
          <span className="panel-title">{t('set.myConf')}</span>
          <span className="panel-hint">{t('set.myConfHint', { n: confluences.length })}</span>
        </div>
        <div className="panel-body">
          <div className="set-list">
            {confluences.map((c, i) => (
              <div className={'set-conf' + (dragIdx === i ? ' dragging' : '')} key={c.id}
                draggable={armIdx === i}
                onDragStart={onDragStart(i)} onDragEnter={onDragEnter(i)}
                onDragOver={(e) => e.preventDefault()} onDragEnd={onDragEnd}>
                <span className="grip" title="Drag to reorder"
                  onMouseDown={() => setArmIdx(i)} onMouseUp={() => setArmIdx(null)}
                  onTouchStart={() => setArmIdx(i)}>
                  <Icon d="grip" size={16} />
                </span>
                <input className="nm nm-edit" value={c.name} onChange={(e) => rename(c.id, e.target.value)} onBlur={saveRename} aria-label="Confluence name" />
                <span className="uses">{t('set.usedTimes', { n: usesOf(c.id) })}</span>
                <button className="iconbtn" onClick={() => remove(c.id)} title={t('common.delete')}><Icon d="x" size={13} /></button>
              </div>
            ))}
          </div>
          <div className="addconf">
            <input placeholder={t('set.addConf')} value={adding} onChange={(e) => setAdding(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && add()} />
            <Btn kind="ghost" icon="plus" onClick={add}>{t('set.add')}</Btn>
          </div>
        </div>
      </section>

      {/* Threshold + session */}
      <section className="panel">
        <div className="panel-head"><span className="panel-title">{t('set.rules')}</span></div>
        <div className="panel-body set-section">
          <div>
            <span className="field-label">{t('set.minConf')}</span>
            <div className="seg three">
              {[2, 3, 4].map((n) => (
                <button key={n} className={'optbtn' + (user.minConfluences === n ? ' sel' : '')} onClick={() => setThreshold(n)}>
                  {n === 4 ? '4+' : n}<span className="om">{n === 2 ? t('set.looser') : n === 3 ? t('set.balanced') : t('set.strict')}</span>
                </button>
              ))}
            </div>
          </div>
          <div>
            <span className="field-label">{t('set.sessions')}</span>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {SESSIONS.map((s) => (
                <button key={s.id} className={'cchip big click' + (user.sessions.includes(s.id) ? ' on' : '')} onClick={() => toggleSession(s.id)}>
                  {t('sess.' + s.id)} <span style={{ color: 'var(--faint)', marginLeft: 4 }}>{s.time}</span>
                </button>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Account */}
      <section className="panel">
        <div className="panel-head"><span className="panel-title">{t('set.account')}</span></div>
        <div className="panel-body">
          <div className="kv"><div><div className="k">{t('set.email')}</div></div><span className="mono" style={{ color: 'var(--muted)', fontSize: 13 }}>{user.email}</span></div>
          <div className="kv"><div><div className="k">{t('set.access')}</div><div className="kdesc">{t('set.accessDesc')}</div></div><span className="cchip on">{t('set.member')}</span></div>
          <div className="kv">
            <div><div className="k">{t('set.export')}</div><div className="kdesc">{t('set.exportDesc')}</div></div>
            <Btn kind="ghost" icon="download" onClick={exportCsv}>{t('set.exportBtn')}</Btn>
          </div>
          <div className="kv">
            <div><div className="k">{t('set.instrument')}</div></div>
            <div style={{ display: 'flex', gap: 6 }}>
              {['ES', 'NQ', 'Both'].map((v) => (
                <button key={v} className={'cchip big click' + (user.instrument === v ? ' on' : '')} onClick={() => setInstrument(v)}>{v}</button>
              ))}
            </div>
          </div>
          <div className="kv">
            <div><div className="k">{t('set.rerun')}</div><div className="kdesc">{t('set.rerunDesc')}</div></div>
            <Btn kind="ghost" onClick={onReplay}>{t('set.rerunBtn')}</Btn>
          </div>
          <div className="kv">
            <div><div className="k">{t('set.logout')}</div><div className="kdesc">{t('set.logoutDesc')}</div></div>
            <Btn kind="danger" icon="arrowL" onClick={onLogout}>{t('common.logout')}</Btn>
          </div>
        </div>
      </section>
    </div>
  );
}

window.SettingsScreen = SettingsScreen;