// Settings.jsx — settings menu + panels (Connected notes, Appearance, Accessibility, …)

const SET_SECTIONS = [
{ id: 'account', label: 'Account', icon: 'user' },
{ id: 'appear', label: 'Appearance', icon: 'palette' },
{ id: 'notes', label: 'Connected notes', icon: 'link' },
{ id: 'access', label: 'Accessibility', icon: 'ear' },
{ id: 'notif', label: 'Notifications', icon: 'bell' },
{ id: 'motiv', label: 'Motivation', icon: 'flame' },
{ id: 'billing', label: 'Billing', icon: 'credit-card' },
{ id: 'data', label: 'Data & privacy', icon: 'shield' }];


function SwitchRow({ label, desc, on, onToggle }) {
  return (
    <div className="set-row">
      <div>
        <div className="label">{label}</div>
        {desc && <div className="desc">{desc}</div>}
      </div>
      <button className={'switch' + (on ? ' on' : '')} onClick={onToggle} role="switch" aria-checked={on} />
    </div>);

}

// Live status of the voice-generation backend: how many summaries have had their
// narration pre-rendered and stored, with a progress bar while warming.
function VoiceLibraryStatus({ toast }) {
  const VB = window.VoiceBackend;
  const [, force] = React.useReducer((x) => x + 1, 0);
  React.useEffect(() => { if (VB) return VB.subscribe(() => force()); }, []);
  if (!VB) return null;
  const s = VB.summary();
  const allReady = s.total > 0 && s.ready === s.total && !s.generating;
  const pct = s.total ? Math.round((s.ready / s.total) * 100) : 100;
  return (
    <div className="vlib">
      <div className="vlib-top">
        <span className={'vlib-ic' + (allReady ? ' ok' : '')}>
          <Icon name={allReady ? 'check' : 'headphones'} size={15} />
        </span>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div className="vlib-title">
            {allReady ? 'Voice library ready' : s.generating ? 'Generating narration…' : 'Voice library'}
          </div>
          <div className="vlib-sub">
            {allReady
              ? `All ${s.total} summaries pre-rendered and stored · voiced by Ellen & Allen`
              : `${s.ready} of ${s.total} summaries narrated and stored in the backend`}
          </div>
        </div>
        <span className="vlib-count mono">{s.ready}/{s.total}</span>
      </div>
      <div className="vlib-track"><span className="vlib-fill" style={{ width: pct + '%' }} /></div>
      <div className="vlib-actions">
        <button className="btn sm" onClick={() => { VB.prewarmAll(); toast && toast('Re-checking voice library…'); }}>
          <Icon name="rotate" size={14} /> Re-generate
        </button>
        <button className="btn sm" onClick={() => { VB.clear(); VB.prewarmAll(); force(); toast && toast('Voice cache cleared — regenerating'); }}>
          <Icon name="trash" size={14} /> Clear cache
        </button>
      </div>
    </div>
  );
}

function SettingsScreen({ themeMode, setThemeMode, toast, accent, setAccent, profile, setProfile, dyslexia, setDyslexia, readAloud, setReadAloud }) {
  const [active, setActive] = React.useState('notes');
  const fileRef = React.useRef(null);
  const onPhoto = (e) => {
    const f = e.target.files && e.target.files[0];if (!f) return;
    const r = new FileReader();
    r.onload = () => {setProfile((p) => ({ ...p, avatar: r.result }));toast('Photo updated');};
    r.readAsDataURL(f);
  };
  const [mapping, setMapping] = React.useState(false);
  const [goal, setGoal] = React.useState(20);
  const [proPlan, setProPlan] = React.useState(null);
  const [upStep, setUpStep] = React.useState(0);
  const [cycle, setCycle] = React.useState('annual');
  const [syncing, setSyncing] = React.useState(false);
  const [extraSources, setExtraSources] = React.useState([]);
  const [picking, setPicking] = React.useState(false);
  const [tog, setTog] = React.useState({ reduce: false, dyslexia: false, captions: true,
    push: true, email: false, daily: true, sound: true, weekly: true });
  const flip = (k) => setTog((s) => ({ ...s, [k]: !s[k] }));
  // What the user shares with their study circle (Friends page surfaces these).
  const [shareOn, setShareOn] = React.useState(true);
  const [share, setShare] = React.useState({ progress: true, streak: true, minutes: true, qc: true, materials: true, activity: true });
  const flipShare = (k) => setShare((s) => ({ ...s, [k]: !s[k] }));

  return (
    <div className="content-pad fade-up">
      <div className="page-head" style={{ marginBottom: 18 }}>
        <div><p className="eyebrow">Preferences</p><h1>Settings</h1></div>
      </div>

      <div className="settings-grid">
        <div className="settings-menu">
          {SET_SECTIONS.map((s) =>
          <button key={s.id} className={'set-item' + (active === s.id ? ' on' : '')} onClick={() => setActive(s.id)}>
              <Icon name={s.icon} size={17} style={{ color: active === s.id ? 'var(--blue-ink)' : 'var(--ink-3)' }} /> {s.label}
            </button>
          )}
        </div>

        <div className="card pad" style={{ padding: '8px 24px 24px' }}>

          {active === 'notes' &&
          <React.Fragment>
              <div className="set-row" style={{ borderBottom: '1px solid var(--line)' }}>
                <div><div className="label">Connected sources</div><div className="desc">Pathline turns the notes you already keep into study material.</div></div>
              </div>
              <div style={{ padding: '18px 0', borderBottom: '1px solid var(--line-2)' }}>
                <div className="conn-row">
                  <span className="conn-logo" style={{ color: '#000' }}>N</span>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 15, fontWeight: 600 }}>Notion</div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginTop: 3 }}>
                      <span style={{ width: 7, height: 7, borderRadius: 99, background: 'var(--positive)' }} />
                      <span className="mono" style={{ fontSize: 12, color: 'var(--ink-2)' }}>Connected · synced 12m ago</span>
                    </div>
                  </div>
                  <button className={'btn sm' + (syncing ? ' blue' : '')} onClick={() => {if (syncing) return;setSyncing(true);toast('Syncing Notion…');setTimeout(() => {setSyncing(false);toast('Notion synced');}, 1500);}}><Icon name="refresh" size={14} style={syncing ? { animation: 'spin .7s linear infinite' } : undefined} /> {syncing ? 'Syncing…' : 'Sync now'}</button>
                  <button className="btn sm" onClick={() => toast('Disconnected Notion')}>Disconnect</button>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14, marginTop: 14, flexWrap: 'wrap' }}>
                  <div className="desc" style={{ margin: 0 }}>Decide which Notion pages flow into which topics.</div>
                  <button className="btn" onClick={() => setMapping((m) => !m)}>
                    <Icon name="layers" size={15} /> Map notes to topics <Icon name={mapping ? 'chevron' : 'chevron-right'} size={15} />
                  </button>
                </div>
                {mapping &&
              <div className="card tight fade-up" style={{ marginTop: 14, background: 'var(--surface-2)', border: '1px solid var(--line)' }}>
                    {[['Biology / Cells DB', 'Cell Biology'], ['ML course notes', 'Neural Networks'], ['Español 201', 'Verb Conjugation'], ['History reading log', 'The Cold War']].map(([src, top], i) =>
                <div key={i} className="lrow" style={{ padding: '10px 0' }}>
                        <span className="thumb" style={{ width: 30, height: 30, background: 'var(--paper)', color: 'var(--ink-3)' }}><Icon name="book" size={15} /></span>
                        <span style={{ flex: 1, fontSize: 13.5, fontWeight: 500 }}>{src}</span>
                        <Icon name="arrow-right" size={15} style={{ color: 'var(--ink-4)' }} />
                        <span className="chip on" style={{ cursor: 'default' }}>{top}</span>
                      </div>
                )}
                    <button className="btn blue sm block" style={{ marginTop: 10 }} onClick={() => {setMapping(false);toast('Note mapping saved');}}>Save mapping</button>
                  </div>
              }
              </div>
              <div style={{ padding: '18px 0 0' }}>
                {extraSources.map((s) =>
              <div key={s.id} className="conn-row" style={{ marginBottom: 12 }}>
                    <span className="conn-logo">{s.mark}</span>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 15, fontWeight: 600 }}>{s.name}</div>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginTop: 3 }}>
                        <span style={{ width: 7, height: 7, borderRadius: 99, background: 'var(--positive)' }} />
                        <span className="mono" style={{ fontSize: 12, color: 'var(--ink-2)' }}>Connected · just now</span>
                      </div>
                    </div>
                    <button className="btn sm" onClick={() => {setExtraSources((p) => p.filter((x) => x.id !== s.id));toast('Disconnected ' + s.name);}}>Disconnect</button>
                  </div>
              )}
                <div className="set-row" style={{ borderBottom: 'none', paddingTop: extraSources.length ? 6 : 0 }}>
                  <div><div className="label">Add another source</div><div className="desc">Connect another notes app to bring more notes into Pathline.</div></div>
                  <button className="btn" onClick={() => setPicking((p) => !p)}><Icon name="plus" size={15} /> Connect <Icon name={picking ? 'chevron' : 'chevron-right'} size={14} /></button>
                </div>
                {picking &&
              <div className="card tight fade-up" style={{ background: 'var(--surface-2)', border: '1px solid var(--line)' }}>
                    {[{ id: 'obsidian', name: 'Obsidian', mark: 'O' }, { id: 'gdocs', name: 'Google Docs', mark: 'G' }, { id: 'apple', name: 'Apple Notes', mark: 'A' }].map((tpl) => {
                  const already = extraSources.some((s) => s.id === tpl.id);
                  return (
                    <div key={tpl.id} className="lrow" style={{ padding: '10px 0' }}>
                          <span className="conn-logo" style={{ width: 34, height: 34, fontSize: 15 }}>{tpl.mark}</span>
                          <span style={{ flex: 1, fontSize: 14, fontWeight: 500 }}>Connect with {tpl.name}</span>
                          <button className="btn sm" disabled={already} onClick={() => {setExtraSources((p) => [...p, tpl]);setPicking(false);toast('Connected ' + tpl.name);}}>{already ? 'Connected' : 'Connect'}</button>
                        </div>);

                })}
                  </div>
              }
              </div>
            </React.Fragment>
          }

          {active === 'appear' &&
          <React.Fragment>
              <div className="set-row">
                <div><div className="label">Theme</div><div className="desc">Choose how Pathline looks. System follows your device setting.</div></div>
                <div className="theme-seg">
                  {[['light', 'sun', 'Light'], ['dark', 'moon', 'Dark'], ['system', 'monitor', 'System']].map(([id, ic, lab]) =>
                <button key={id} className={themeMode === id ? 'on' : ''} onClick={() => setThemeMode(id)}><Icon name={ic} size={15} /> {lab}</button>
                )}
                </div>
              </div>
              <SwitchRow label="Reduce motion" desc="Minimize animations and card transitions." on={tog.reduce} onToggle={() => flip('reduce')} />
              <div className="set-row">
                <div><div className="label">Accent color</div><div className="desc">Used for highlights and progress — brighter in dark mode.</div></div>
                <div style={{ display: 'flex', gap: 12 }}>
                  {ACCENTS.map((a) => {
                  const on = accent === a.id;
                  return <button key={a.id} title={a.id} onClick={() => {setAccent(a.id);toast('Accent updated');}}
                  style={{ width: 28, height: 28, borderRadius: 99, background: a.light, cursor: 'pointer',
                    border: '2px solid var(--paper)', boxShadow: on ? `0 0 0 2px ${a.light}` : '0 0 0 1px var(--line-strong)' }} />;
                })}
                </div>
              </div>
            </React.Fragment>
          }

          {active === 'access' &&
          <React.Fragment>
              <div className="set-row">
                <div><div className="label" style={{ display: 'flex', alignItems: 'center', gap: 8 }}><Icon name="headphones" size={17} style={{ color: 'var(--blue-ink)' }} /> Read it for me</div>
                  <div className="desc">Add a “Read it for me” button to every summary — Pathline narrates it back to you in a podcast-style voice so you can learn by listening.</div></div>
                <button className={'switch' + (readAloud ? ' on' : '')} onClick={() => {setReadAloud((v) => !v);toast(readAloud ? 'Read it for me off' : 'Read it for me on');}} role="switch" aria-checked={readAloud} />
              </div>
              <VoiceLibraryStatus toast={toast} />
              <SwitchRow label="Closed captions" desc="Show captions when audio is playing." on={tog.captions} onToggle={() => flip('captions')} />
              <div className="set-row">
                <div><div className="label" style={{ display: 'flex', alignItems: 'center', gap: 8 }}><Icon name="book" size={17} style={{ color: 'var(--blue-ink)' }} /> Dyslexia-friendly font</div>
                  <div className="desc">Switch the whole app to OpenDyslexic — weighted letters and wider spacing that are easier to read with dyslexia.</div></div>
                <button className={'switch' + (dyslexia ? ' on' : '')} onClick={() => {setDyslexia((v) => !v);toast(dyslexia ? 'Dyslexia-friendly font off' : 'Dyslexia-friendly font on');}} role="switch" aria-checked={dyslexia} />
              </div>
              <SwitchRow label="Reduce motion" desc="Minimize animations and transitions." on={tog.reduce} onToggle={() => flip('reduce')} />
            </React.Fragment>
          }

          {active === 'account' &&
          <React.Fragment>
              <input type="file" accept="image/*" ref={fileRef} style={{ display: 'none' }} onChange={onPhoto} />
              <div style={{ display: 'flex', alignItems: 'center', gap: 16, padding: '18px 0', borderBottom: '1px solid var(--line-2)' }}>
                <span className="avatar" style={{ width: 56, height: 56, fontSize: 20, cursor: 'default', ...(profile.avatar ? { backgroundImage: `url(${profile.avatar})`, backgroundSize: 'cover', backgroundPosition: 'center', color: 'transparent' } : {}) }}>{initialsOf(profile.name)}</span>
                <div><div className="label" style={{ fontSize: 17 }}>{profile.name || 'Your name'}</div><div className="desc">{profile.email || 'you@example.com'}</div></div>
                <button className="btn sm" style={{ marginLeft: 'auto' }} onClick={() => fileRef.current && fileRef.current.click()}>Change photo</button>
              </div>
              <div className="set-row"><div style={{ flex: 1 }}><div className="field-label">Display name</div><input className="input" value={profile.name} onChange={(e) => setProfile((p) => ({ ...p, name: e.target.value }))} /></div></div>
              <div className="set-row"><div style={{ flex: 1 }}><div className="field-label">Email</div><input className="input" type="email" value={profile.email} onChange={(e) => setProfile((p) => ({ ...p, email: e.target.value }))} /></div></div>
              <div className="set-row" style={{ borderBottom: 'none' }}><div><div className="label">Sign out</div><div className="desc">Sign out of Pathline on this device.</div></div><button className="btn" onClick={() => toast('Signed out')}><Icon name="logout" size={15} /> Sign out</button></div>
            </React.Fragment>
          }

          {active === 'notif' &&
          <React.Fragment>
              <SwitchRow label="Daily review reminder" desc="A nudge when cards are due, at your chosen time." on={tog.daily} onToggle={() => flip('daily')} />
              <SwitchRow label="Push notifications" desc="On this device." on={tog.push} onToggle={() => flip('push')} />
              <SwitchRow label="Weekly progress email" desc="A Sunday recap of what you studied." on={tog.weekly} onToggle={() => flip('weekly')} />
              <SwitchRow label="Sound effects" desc="Subtle sounds on review actions." on={tog.sound} onToggle={() => flip('sound')} />
            </React.Fragment>
          }

          {active === 'motiv' &&
          <React.Fragment>
              <div className="set-row">
                <div><div className="label">Daily goal</div><div className="desc">Cards to review each day to keep your streak.</div></div>
                <div style={{ display: 'flex', gap: 8 }}>{[10, 20, 30, 50].map((n) => <button key={n} className={'chip' + (goal === n ? ' on' : '')} onClick={() => {setGoal(n);toast('Daily goal: ' + n);}}>{n}</button>)}</div>
              </div>
              <SwitchRow label="Streak protection" desc="One free skip day per week so a busy day won't reset your streak." on={tog.email} onToggle={() => flip('email')} />
              <div className="set-row" style={{ borderBottom: 'none' }}>
                <div><div className="label">Current streak</div><div className="desc">Longest: 21 days</div></div>
                <span className="tag" style={{ background: 'color-mix(in srgb,var(--blue) 16%, transparent)', color: 'var(--blue-ink)', fontSize: 14, padding: '6px 13px' }}><Icon name="flame" size={16} /> 7 days</span>
              </div>
            </React.Fragment>
          }

          {active === 'billing' && (() => {
            const PRICE = { monthly: 9, annual: 84 };
            const isPro = !!proPlan;
            const labS = { display: 'block', fontSize: 12, fontWeight: 600, color: 'var(--ink-2)', marginBottom: 6 };
            const inS = { width: '100%', padding: '10px 12px', borderRadius: 10, border: '1px solid var(--line-strong)', background: 'var(--paper)', color: 'var(--ink)', fontSize: 14, fontFamily: 'inherit', boxSizing: 'border-box' };
            return (
              <div style={{ padding: '18px 0' }}>
              <div className="card tight" style={{ background: 'var(--surface-2)', display: 'flex', alignItems: 'center', gap: 14 }}>
                <span style={{ width: 38, height: 38, borderRadius: 10, flex: 'none', display: 'grid', placeItems: 'center', background: isPro ? 'var(--blue)' : 'var(--paper)', color: isPro ? '#fff' : 'var(--ink-2)', border: '1px solid var(--line)' }}><Icon name={isPro ? 'sparkles' : 'credit-card'} size={18} /></span>
                <div style={{ flex: 1 }}>
                  <div className="label" style={{ fontSize: 16 }}>{isPro ? 'Pro plan' : 'Free plan'}</div>
                  <div className="desc">{isPro ? (proPlan === 'annual' ? 'Billed annually · $84/yr' : 'Billed monthly · $9/mo') + ' · unlimited everything' : '3 connected notebooks · unlimited reviews · 5 generations / day'}</div>
                </div>
                {isPro ?
                  <button className="btn" onClick={() => {setProPlan(null);toast('Downgraded to Free');}}>Cancel plan</button> :
                  <button className="btn blue" onClick={() => {setCycle('annual');setUpStep(1);}}>Upgrade to Pro</button>}
              </div>
              <div className="desc" style={{ marginTop: 16 }}>{isPro ? 'Thanks for going Pro — unlimited generations and concept-map export are unlocked.' : 'Pro adds unlimited generations, voice assistance, and concept-map export.'}</div>

              {upStep > 0 &&
                <div className="scrim" onMouseDown={(e) => {if (e.target === e.currentTarget) setUpStep(0);}}>
                  <div className="modal" style={{ maxWidth: 460 }}>
                    <div className="mhead">
                      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                        <span className="itile" style={{ width: 32, height: 32, borderRadius: 9, background: 'var(--blue)', color: '#fff' }}><Icon name="sparkles" size={17} /></span>
                        <span style={{ fontWeight: 600, fontSize: 16 }}>{upStep === 3 ? 'Welcome to Pro' : 'Upgrade to Pro'}</span>
                      </div>
                      <button className="icon-btn" style={{ width: 32, height: 32, border: 'none' }} onClick={() => setUpStep(0)}><Icon name="x" size={18} /></button>
                    </div>
                    {upStep < 3 &&
                    <div style={{ display: 'flex', gap: 6, padding: '0 20px 4px' }}>
                      {['Plan', 'Payment'].map((s, i) => <div key={s} style={{ flex: 1, height: 4, borderRadius: 9, background: upStep >= i + 1 ? 'var(--blue)' : 'var(--line-strong)' }} />)}
                    </div>}
                    <div className="mbody">
                      {upStep === 1 && <React.Fragment>
                        {[['annual', 'Annual', '$84', '/yr', 'Save 22% — best value'], ['monthly', 'Monthly', '$9', '/mo', 'Flexible, cancel anytime']].map(([id, name, price, per, note]) =>
                        <button key={id} onClick={() => setCycle(id)} className="card" style={{ width: '100%', textAlign: 'left', display: 'flex', alignItems: 'center', gap: 12, padding: '14px 16px', marginBottom: 10, cursor: 'pointer', borderColor: cycle === id ? 'var(--blue)' : 'var(--line)', outline: cycle === id ? '1px solid var(--blue)' : 'none' }}>
                            <span style={{ width: 18, height: 18, borderRadius: 99, flex: 'none', border: '2px solid ' + (cycle === id ? 'var(--blue)' : 'var(--line-strong)'), display: 'grid', placeItems: 'center' }}>{cycle === id && <span style={{ width: 8, height: 8, borderRadius: 99, background: 'var(--blue)' }} />}</span>
                            <div style={{ flex: 1 }}>
                              <div style={{ fontWeight: 600, fontSize: 14.5 }}>{name}</div>
                              <div className="desc">{note}</div>
                            </div>
                            <div style={{ textAlign: 'right' }}><span style={{ fontWeight: 700, fontSize: 18 }}>{price}</span><span className="desc">{per}</span></div>
                          </button>
                        )}
                        <button className="btn blue" style={{ width: '100%', marginTop: 6 }} onClick={() => setUpStep(2)}>Continue</button>
                      </React.Fragment>}
                      {upStep === 2 && <React.Fragment>
                        <div className="desc" style={{ marginBottom: 14 }}>You&rsquo;ll be charged <b style={{ color: 'var(--ink)' }}>${PRICE[cycle]}{cycle === 'annual' ? '/yr' : '/mo'}</b>. Cancel anytime.</div>
                        <label style={labS}>Name on card</label>
                        <input style={{ ...inS, marginBottom: 12 }} placeholder="Kelly Chen" />
                        <label style={labS}>Card number</label>
                        <input style={{ ...inS, marginBottom: 12 }} placeholder="1234 5678 9012 3456" />
                        <div style={{ display: 'flex', gap: 12 }}>
                          <div style={{ flex: 1 }}><label style={labS}>Expiry</label><input style={inS} placeholder="MM / YY" /></div>
                          <div style={{ flex: 1 }}><label style={labS}>CVC</label><input style={inS} placeholder="123" /></div>
                        </div>
                        <div style={{ display: 'flex', gap: 10, marginTop: 18 }}>
                          <button className="btn" onClick={() => setUpStep(1)}>Back</button>
                          <button className="btn blue" style={{ flex: 1 }} onClick={() => {setProPlan(cycle);setUpStep(3);}}>Pay ${PRICE[cycle]}{cycle === 'annual' ? '/yr' : '/mo'}</button>
                        </div>
                      </React.Fragment>}
                      {upStep === 3 && <div style={{ textAlign: 'center', padding: '10px 0 6px' }}>
                        <span style={{ width: 56, height: 56, borderRadius: 99, display: 'grid', placeItems: 'center', margin: '0 auto 14px', background: 'color-mix(in srgb,var(--positive) 18%, var(--paper))', color: 'var(--positive)' }}><Icon name="check" size={28} /></span>
                        <div style={{ fontWeight: 600, fontSize: 17, marginBottom: 6 }}>You&rsquo;re on Pro</div>
                        <div className="desc" style={{ marginBottom: 18 }}>Unlimited generations and concept-map export are now unlocked.</div>
                        <button className="btn blue" style={{ width: '100%' }} onClick={() => {setUpStep(0);toast('Upgraded to Pro');}}>Start using Pro</button>
                      </div>}
                    </div>
                  </div>
                </div>
                }
            </div>);

          })()}

          {active === 'data' &&
          <React.Fragment>
              <div className="set-row">
                <div><div className="label" style={{ display: 'flex', alignItems: 'center', gap: 8 }}><Icon name="users" size={17} style={{ color: 'var(--blue-ink)' }} /> Share with friends</div>
                  <div className="desc">Choose what your study circle can see on your profile, learning map, and the weekly leaderboard.</div></div>
                <button className={'switch' + (shareOn ? ' on' : '')} onClick={() => {setShareOn((v) => !v);toast(shareOn ? 'Sharing with friends paused' : 'Sharing with friends on');}} role="switch" aria-checked={shareOn} />
              </div>
              {shareOn ?
            <div style={{ marginLeft: 8, paddingLeft: 18, borderLeft: '2px solid var(--line)' }}>
                  {[
              ['progress', 'Learning progress', 'Overall completion, your domains, and per-topic progress.'],
              ['streak', 'Study streak', 'Your current and longest streak.'],
              ['minutes', 'Weekly study time', 'Minutes studied — shown on the leaderboard.'],
              ['qc', 'Questions & challenges', 'How many questions you ask and challenges you face.'],
              ['materials', 'Study materials', 'Let friends open your summaries and concept maps.'],
              ['activity', 'Recent activity', 'Your latest reviews, notes, and generated materials.']].
              map(([k, label, desc], i, arr) =>
              <div key={k} className="set-row" style={i === arr.length - 1 ? { borderBottom: 'none' } : undefined}>
                      <div><div className="label">{label}</div><div className="desc">{desc}</div></div>
                      <button className={'switch' + (share[k] ? ' on' : '')} onClick={() => flipShare(k)} role="switch" aria-checked={share[k]} />
                    </div>
              )}
                </div> :

            <div className="set-row"><div className="desc" style={{ margin: 0 }}>Sharing is paused — friends can’t see your progress, streak, or materials until you turn it back on.</div></div>
            }
              <div className="set-row" style={{ borderTop: '1px solid var(--line)', marginTop: 8 }}>
                <div><div className="label">Usage analytics</div><div className="desc">Help improve Pathline with anonymous usage data.</div></div>
                <button className={'switch' + (tog.captions ? ' on' : '')} onClick={() => flip('captions')} role="switch" aria-checked={tog.captions} />
              </div>
              <div className="set-row"><div><div className="label">Export your data</div><div className="desc">Download all notes, materials, and review history.</div></div><button className="btn" onClick={() => toast('Preparing export…')}><Icon name="download" size={15} /> Export</button></div>
              <div className="set-row" style={{ borderBottom: 'none' }}><div><div className="label" style={{ color: 'var(--critical)' }}>Delete account</div><div className="desc">Permanently remove your account and all data.</div></div><button className="btn" style={{ color: 'var(--critical)', borderColor: 'color-mix(in srgb,var(--critical) 40%, var(--line-strong))' }}>Delete</button></div>
            </React.Fragment>
          }

        </div>
      </div>
    </div>);

}
window.SettingsScreen = SettingsScreen;