// page-settings.jsx — Settings tab
// User-level prefs (timezone, march speed, alliance name)

const { useState: useStateS } = React;

function SettingsPage({ settings, onChange, templates, onChangeTemplates, onResetDistances, onReloadData, dataSource }) {
  const set = (k, v) => onChange({ ...settings, [k]: v });

  const tzOptions = [
    { v: -12, l: 'UTC-12' }, { v: -11, l: 'UTC-11' }, { v: -10, l: 'UTC-10 (Hawaii)' },
    { v: -9, l: 'UTC-9 (Alaska)' }, { v: -8, l: 'UTC-8 (PT)' }, { v: -7, l: 'UTC-7 (MT)' },
    { v: -6, l: 'UTC-6 (CT)' }, { v: -5, l: 'UTC-5 (ET)' }, { v: -4, l: 'UTC-4' },
    { v: -3, l: 'UTC-3 (BRT)' }, { v: -2, l: 'UTC-2' }, { v: -1, l: 'UTC-1' },
    { v: 0, l: 'UTC' },
    { v: 1, l: 'UTC+1 (CET)' }, { v: 2, l: 'UTC+2' }, { v: 3, l: 'UTC+3 (MSK)' },
    { v: 4, l: 'UTC+4' }, { v: 5, l: 'UTC+5' }, { v: 5.5, l: 'UTC+5:30 (IST)' },
    { v: 6, l: 'UTC+6' }, { v: 7, l: 'UTC+7' }, { v: 8, l: 'UTC+8 (CN/SG/TW)' },
    { v: 9, l: 'UTC+9 (KR/JP)' }, { v: 10, l: 'UTC+10 (AEST)' },
    { v: 11, l: 'UTC+11' }, { v: 12, l: 'UTC+12 (NZST)' },
  ];

  return (
    <div className="page">
      <div className="section-header">
        <h2>Settings</h2>
        <span className="sub">— personal preferences, persisted to this browser</span>
      </div>

      <DataSourceSection currentSource={dataSource} onReloadData={onReloadData} />

      <div className="settings-section">
        <h3>Identity</h3>
        <div className="desc">Cosmetic — appears in the top bar and DM templates.</div>
        <div className="settings-row">
          <span className="l">Alliance name</span>
          <input className="input" value={settings.allianceName || ''} placeholder="e.g. #2 Kings"
                 onChange={(e) => set('allianceName', e.target.value)} />
          <span></span>
        </div>
        <div className="settings-row">
          <span className="l">Your name (R4)</span>
          <input className="input" value={settings.r4Name || ''} placeholder="how members address you"
                 onChange={(e) => set('r4Name', e.target.value)} />
          <span></span>
        </div>
      </div>

      <div className="settings-section">
        <h3>Time</h3>
        <div className="desc">
          The dashboard shows event times in <strong>server time</strong>. Your own timezone is used only
          to label "now" and remind you of the offset to your local clock.
        </div>
        <div className="settings-row">
          <span className="l">Server timezone</span>
          <select className="input" value={String(settings.tzOffsetHrs)}
                  onChange={(e) => set('tzOffsetHrs', parseFloat(e.target.value))}>
            {tzOptions.map(o => <option key={o.v} value={o.v}>{o.l}</option>)}
          </select>
          <span className="h">used for event times</span>
        </div>
        <div className="settings-row">
          <span className="l">Your timezone</span>
          <select className="input" value={String(settings.userTzOffsetHrs)}
                  onChange={(e) => set('userTzOffsetHrs', parseFloat(e.target.value))}>
            <option value="auto">Auto-detect ({-new Date().getTimezoneOffset() / 60 >= 0 ? '+' : ''}{-new Date().getTimezoneOffset() / 60})</option>
            {tzOptions.map(o => <option key={o.v} value={o.v}>{o.l}</option>)}
          </select>
          <span className="h">for "vs your time" hints</span>
        </div>
      </div>

      <div className="settings-section">
        <h3>March</h3>
        <div className="desc">
          Used to convert <code style={{color: 'var(--fg-2)'}}>manual_distance</code> (tiles)
          into seconds of march time on the BT page.
        </div>
        <div className="settings-row">
          <span className="l">March speed</span>
          <input className="input" type="number" min="1" max="50" step="0.1"
                 value={settings.marchSpeed}
                 onChange={(e) => set('marchSpeed', parseFloat(e.target.value) || 1)} />
          <span className="h">tiles per second</span>
        </div>
      </div>

      <div className="settings-section">
        <h3>Activity algorithm</h3>
        <div className="desc">
          A member counts as having a <strong>"growth day"</strong> when their power
          rises by at least <strong>Min change</strong> versus the previous snapshot.
          The four activity levels are derived from how many growth days fall inside
          the rolling window, plus how long since they last logged in.
        </div>
        <div className="settings-row">
          <span className="l">Window</span>
          <input className="input" type="number" min="3" max="60"
                 value={settings.windowDays}
                 onChange={(e) => set('windowDays', parseInt(e.target.value, 10) || 14)} />
          <span className="h">days of power history considered</span>
        </div>
        <div className="settings-row">
          <span className="l">Min change</span>
          <input className="input" type="number" min="0" step="100000"
                 value={settings.minChangePower}
                 onChange={(e) => set('minChangePower', parseInt(e.target.value, 10) || 0)} />
          <span className="h">raw power delta to count as a growth day (e.g. 1000000 = 1M)</span>
        </div>
        <div className="settings-row">
          <span className="l">Active ≥</span>
          <input className="input" type="number" min="1" max="20"
                 value={settings.activeThreshold}
                 onChange={(e) => set('activeThreshold', parseInt(e.target.value, 10) || 3)} />
          <span className="h">growth days in window</span>
        </div>
        <div className="settings-row">
          <span className="l">Normal ≥</span>
          <input className="input" type="number" min="1" max="10"
                 value={settings.normalThreshold}
                 onChange={(e) => set('normalThreshold', parseInt(e.target.value, 10) || 1)} />
          <span className="h">growth days in window</span>
        </div>
        <div className="settings-row">
          <span className="l">Dormant cutoff</span>
          <input className="input" type="number" min="1" max="30"
                 value={settings.dormantLoginDays}
                 onChange={(e) => set('dormantLoginDays', parseInt(e.target.value, 10) || 7)} />
          <span className="h">days since last login</span>
        </div>
      </div>

      <div className="settings-section">
        <h3>Event templates</h3>
        <div className="desc">
          Presets that show up as quick-fill chips in the event editor. Click a row to expand and edit.
        </div>
        <TemplateList templates={templates || []} onChange={onChangeTemplates} />
      </div>

      <div className="settings-section">
        <h3>Data</h3>
        <div className="desc">Local overrides that you've entered by hand.</div>
        <div className="settings-row">
          <span className="l">Events</span>
          <span className="h">override the seeded weekly schedule</span>
          <button className="btn ghost" onClick={() => {
            if (confirm('Reset events to seeded defaults? Your custom events will be lost.')) {
              try { localStorage.removeItem('kingshot.events.v1'); } catch {}
              location.reload();
            }
          }}>Reset events</button>
        </div>
        <div className="settings-row">
          <span className="l">Manual distances</span>
          <span className="h">stored in this browser only</span>
          <button className="btn ghost" onClick={onResetDistances}>Reset all</button>
        </div>
        <div className="settings-row">
          <span className="l">Hero notes</span>
          <span className="h">per-member free-text notes</span>
          <button className="btn ghost" onClick={() => {
            if (confirm('Clear all hero notes?')) {
              try { localStorage.removeItem('kingshot.notes.v1'); } catch {}
              location.reload();
            }
          }}>Reset all</button>
        </div>
        <div className="settings-row">
          <span className="l">BT strategies</span>
          <span className="h">saved BT wave plans</span>
          <button className="btn ghost" onClick={() => {
            if (confirm('Clear all saved BT strategies?')) {
              try { localStorage.removeItem('kingshot.strategies.v1'); } catch {}
              location.reload();
            }
          }}>Reset all</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { SettingsPage });

// ────────────────────────────────────────────
// DataSourceSection — switch between mock and Supabase 有嗎?

function DataSourceSection({ currentSource, onReloadData }) {
  const initial = (window.DataSource && window.DataSource.getConfig()) || { mode: 'mock', supabaseUrl: '', supabaseAnonKey: '' };
  const [draft, setDraft] = React.useState(initial);
  const [status, setStatus] = React.useState(null);

  const dirty =
    draft.mode !== initial.mode ||
    draft.supabaseUrl !== initial.supabaseUrl ||
    draft.supabaseAnonKey !== initial.supabaseAnonKey;

  const handleSave = () => {
    window.DataSource.setConfig(draft);
    setStatus('Saved. Reloading…');
    setTimeout(() => onReloadData && onReloadData(), 300);
  };

  const handleTest = async () => {
    setStatus('Testing…');
    try {
      // Temporarily save, attempt load, report
      window.DataSource.setConfig(draft);
      const data = await window.DataSource.load();
      setStatus(`OK — fetched ${data.members.length} members, ${data.history.length} snapshot rows.`);
    } catch (e) {
      setStatus(`⚠ ${e.message || e}`);
    }
  };

  const update = (k, v) => setDraft(d => ({ ...d, [k]: v }));

  return (
    <div className="settings-section">
      <h3>Data source</h3>
      <div className="desc">
        Where the roster comes from. Currently loaded from <code style={{ color: 'var(--fg-2)' }}>{currentSource || 'unknown'}</code>.
        For Supabase: see <code style={{ color: 'var(--fg-2)' }}>DEPLOY.md</code> for schema + how to get the URL and anon key.
      </div>
      <div className="settings-row">
        <span className="l">Mode</span>
        <div className="chips">
          {[
            { v: 'mock',     l: 'Mock (built-in demo)' },
            { v: 'supabase', l: 'Supabase' },
          ].map(o => (
            <span
              key={o.v}
              className="chip"
              data-on={draft.mode === o.v}
              onClick={() => update('mode', o.v)}
            >{o.l}</span>
          ))}
        </div>
        <span></span>
      </div>
      {draft.mode === 'supabase' && (
        <>
          <div className="settings-row">
            <span className="l">Project URL</span>
            <input className="input" value={draft.supabaseUrl || ''}
                   placeholder="https://abcdefg.supabase.co"
                   onChange={(e) => update('supabaseUrl', e.target.value.trim())} />
            <span className="h">from Supabase Settings → API</span>
          </div>
          <div className="settings-row">
            <span className="l">Anon key</span>
            <input className="input" value={draft.supabaseAnonKey || ''}
                   placeholder="eyJhbGc..."
                   onChange={(e) => update('supabaseAnonKey', e.target.value.trim())}
                   type="password" />
            <span className="h">anon public key, NOT service_role</span>
          </div>
        </>
      )}
      <div className="settings-row">
        <span className="l"></span>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="btn ghost" onClick={handleTest} disabled={draft.mode === 'supabase' && (!draft.supabaseUrl || !draft.supabaseAnonKey)}>
            Test connection
          </button>
          <button className="btn primary" onClick={handleSave} disabled={!dirty}>
            Save & reload
          </button>
        </div>
        <span className="h" style={{ color: status && status.startsWith('⚠') ? 'var(--lost)' : 'var(--fg-3)' }}>
          {status || ''}
        </span>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────
// TemplateList — manage event templates inline

function TemplateList({ templates, onChange }) {
  const [openId, setOpenId] = React.useState(null);

  const update = (id, patch) => {
    onChange(templates.map(t => t.id === id ? { ...t, ...patch } : t));
  };
  const remove = (id) => {
    if (!confirm('Delete this template?')) return;
    onChange(templates.filter(t => t.id !== id));
    if (openId === id) setOpenId(null);
  };
  const add = () => {
    const id = `tpl-${Date.now()}`;
    const newTpl = {
      id,
      label: 'New template',
      name: 'New Event',
      duration_min: 60,
      category: 'alliance',
      color: '#71717a',
      guide_text: '',
    };
    onChange([...templates, newTpl]);
    setOpenId(id);
  };

  return (
    <div className="tpl-list">
      {templates.length === 0 && (
        <div className="muted" style={{ fontSize: 12, padding: '8px 0' }}>No templates yet.</div>
      )}
      {templates.map(t => {
        const isOpen = openId === t.id;
        return (
          <div key={t.id} className={`tpl-row ${isOpen ? 'open' : ''}`}>
            <div className="tpl-row-hd" onClick={() => setOpenId(isOpen ? null : t.id)}>
              <span className="tpl-color" style={{ background: t.color || '#71717a' }}></span>
              <span className="tpl-label">{t.label || '(no label)'}</span>
              <span className="tpl-name muted">{t.name}</span>
              <span className="tpl-meta muted">{t.duration_min}m · {t.category}</span>
              <span className="tpl-caret">{isOpen ? '▾' : '▸'}</span>
            </div>
            {isOpen && (
              <div className="tpl-row-body">
                <div className="form-grid" style={{ gridTemplateColumns: 'repeat(2, 1fr)' }}>
                  <div className="form-row">
                    <label>Label (chip text)</label>
                    <input className="input" value={t.label || ''}
                           onChange={(e) => update(t.id, { label: e.target.value })} />
                  </div>
                  <div className="form-row">
                    <label>Event name (when applied)</label>
                    <input className="input" value={t.name || ''}
                           onChange={(e) => update(t.id, { name: e.target.value })} />
                  </div>
                  <div className="form-row">
                    <label>Duration (min)</label>
                    <input className="input" type="number" min="1" value={t.duration_min || 60}
                           onChange={(e) => update(t.id, { duration_min: parseInt(e.target.value, 10) || 60 })} />
                  </div>
                  <div className="form-row">
                    <label>Category</label>
                    <select className="input" value={t.category || 'alliance'}
                            onChange={(e) => update(t.id, { category: e.target.value })}>
                      <option value="pvp">pvp</option>
                      <option value="pve">pve</option>
                      <option value="alliance">alliance</option>
                      <option value="personal">personal</option>
                    </select>
                  </div>
                </div>
                <div className="form-row">
                  <label>Color</label>
                  <div className="color-swatches">
                    {EVENT_COLORS.map(c => (
                      <button
                        key={c}
                        type="button"
                        className="swatch"
                        data-on={t.color === c}
                        style={{ background: c }}
                        onClick={() => update(t.id, { color: c })}
                      />
                    ))}
                    <input type="color" className="swatch swatch-custom"
                           value={t.color || '#71717a'}
                           onChange={(e) => update(t.id, { color: e.target.value })} />
                  </div>
                </div>
                <div className="form-row">
                  <label>Guide text <span className="muted">({(t.guide_text || '').length} chars)</span></label>
                  <textarea className="input" rows={6}
                            value={t.guide_text || ''}
                            onChange={(e) => update(t.id, { guide_text: e.target.value })}
                            placeholder="Plain text that lands in Discord when this template is used." />
                </div>
                <div className="tpl-row-ft">
                  <button className="btn danger" onClick={() => remove(t.id)}>Delete template</button>
                </div>
              </div>
            )}
          </div>
        );
      })}
      <button className="btn ghost" style={{ marginTop: 10 }} onClick={add}>+ Add template</button>
    </div>
  );
}