/* HTD Program 11 — Settings, Privacy, Sessions, Account */
(function () {
  const { useState } = React;
  const Icon = window.HTDIcon;
  const { useNav, PushView, SectionLabel, Panel, ListRow } = window.HTDUI;
  const F = window.HTD_FIX;

  function Toggle({ on, onClick, danger }) {
    return (
      <span onClick={onClick} style={{ width:42, height:24, borderRadius:12, cursor:'pointer', flex:'0 0 auto',
        background: on?(danger?'var(--danger)':'var(--acid)'):'var(--raised-2)', border:'1px solid var(--hairline-2)', position:'relative' }}>
        <span style={{ position:'absolute', top:2, left: on?20:2, width:18, height:18, borderRadius:'50%',
          background: on?(danger?'#fff':'#0a1400'):'var(--steel)', transition:'left .15s' }} /></span>);
  }

  function Settings() {
    const nav = useNav();
    return (
      <PushView title="SETTINGS">
        <SectionLabel style={{ marginTop:6 }}>ACCOUNT</SectionLabel>
        <Panel pad={false} style={{ padding:'0 14px' }}>
          <ListRow icon="user" title="Profile" sub="@HARDCASE · IRONCROWN" onClick={()=>nav.pop()} />
          <ListRow icon="lock" title="Entitlement & Plan" sub="ATHLETE PRO · ACTIVE" onClick={()=>nav.push('EntitlementsPricing')} />
          <ListRow icon="watch" title="Connected Wearables" sub="GARMIN · APPLE HEALTH" onClick={()=>nav.push('WearableConnections')} />
        </Panel>
        <SectionLabel>PREFERENCES</SectionLabel>
        <Panel pad={false} style={{ padding:'0 14px' }}>
          <ListRow icon="shield" title="Privacy & Proof Visibility" sub="DEFAULT · PUBLIC" onClick={()=>nav.push('PrivacyProofVisibility')} />
          <ListRow icon="bell" title="Notifications" sub="5 ACTIVE · QUIET 22:00–06:00" onClick={()=>nav.push('NotificationPrefs')} />
          <ListRow icon="zap" title="Push Choreography" sub="THE 6 MOMENTS · DESIGNED" onClick={()=>nav.push('PushGallery')} />
          <ListRow icon="upload" title="App Store Kit" sub="ICON · SCREENSHOTS · BANNER" onClick={()=>nav.push('StoreKit')} />
          <ListRow icon="settings" title="Sessions & Devices" sub="3 ACTIVE SESSIONS" onClick={()=>nav.push('SessionsDevices')} />
          <ListRow icon="alert" title="Offline & Sync" sub="RETRY QUEUE · 0 PENDING" onClick={()=>nav.push('OfflineSync')} />
        </Panel>
        <SectionLabel>DATA & TRUST</SectionLabel>
        <Panel pad={false} style={{ padding:'0 14px' }}>
          <ListRow icon="upload" title="Account & Data" sub="EXPORT · DELETE" onClick={()=>nav.push('AccountExportDelete')} />
          <ListRow icon="back" title="Log Out" danger right={<span className="label-mono danger-c">REPLAY FLOW</span>} onClick={()=>nav.setPhase('splash')} />
        </Panel>
        <div className="label-mono" style={{ textAlign:'center', marginTop:18, color:'var(--steel)' }}>HTD MOBILE · v1.0.0 · BUILD 2026.06.09</div>
      </PushView>
    );
  }

  function PrivacyProofVisibility() {
    const [vis, setVis] = useState('PUBLIC');
    const [tg, setTg] = useState({ publicProfile:true, crewVisible:true, followPrivate:false });
    return (
      <PushView title="PRIVACY">
        <SectionLabel style={{ marginTop:6 }}>DEFAULT PROOF VISIBILITY</SectionLabel>
        <div className="row" style={{ gap:8 }}>{['PRIVATE','CREW','PUBLIC'].map(v=>(
          <button key={v} onClick={()=>setVis(v)} style={{ flex:1, height:40, cursor:'pointer', borderRadius:'var(--r-sm)',
            background: vis===v?'rgba(152,255,16,0.08)':'var(--panel)', border:'1px solid '+(vis===v?'var(--acid)':'var(--hairline-2)'),
            color: vis===v?'var(--acid)':'var(--bone-muted)', fontFamily:'var(--mono)', fontSize:10.5, letterSpacing:1 }}>{v}</button>))}</div>
        <div className="muted" style={{ fontSize:12.5, marginTop:10, lineHeight:1.5 }}>New proofs default to <span className="acid">{vis}</span>. You can override per submission.</div>
        <SectionLabel>VISIBILITY CONTROLS</SectionLabel>
        <Panel pad={false}>{[['Public profile','publicProfile'],['Visible to crew','crewVisible'],['Private follow approvals','followPrivate']].map(([l,k],i)=>(
          <div key={k} className="row between" style={{ padding:'14px', borderBottom:i<2?'1px solid var(--hairline)':'none' }}>
            <span style={{ fontSize:13.5, color:'var(--bone)' }}>{l}</span><Toggle on={tg[k]} onClick={()=>setTg(s=>({...s,[k]:!s[k]}))} /></div>))}</Panel>
        <SectionLabel>SAFETY</SectionLabel>
        <Panel pad={false} style={{ padding:'0 14px' }}>
          <ListRow icon="x" title="Blocked Accounts" sub="2 BLOCKED" onClick={()=>window.HTDUI.toast('BLOCKED LIST · 2 ACCOUNTS')} />
          <ListRow icon="flag" title="Report History" sub="VIEW REPORTS" onClick={()=>window.HTDUI.toast('1 REPORT · RESOLVED BY MODERATION')} />
        </Panel>
      </PushView>
    );
  }

  function NotificationPrefs() {
    const [n, setN] = useState(()=>F.notifications.map(x=>x[2]));
    return (
      <PushView title="NOTIFICATIONS">
        <SectionLabel style={{ marginTop:6 }}>PUSH</SectionLabel>
        <Panel pad={false}>{F.notifications.map(([l,s],i)=>(
          <div key={l} className="row between" style={{ padding:'13px 14px', borderBottom:i<F.notifications.length-1?'1px solid var(--hairline)':'none' }}>
            <div><div style={{ fontSize:14, color:'var(--bone)' }}>{l}</div><div className="label-mono" style={{ marginTop:2 }}>{s}</div></div>
            <Toggle on={n[i]} onClick={()=>setN(a=>a.map((v,j)=>j===i?!v:v))} /></div>))}</Panel>
        <SectionLabel>QUIET HOURS</SectionLabel>
        <Panel><div className="row between" style={{ cursor:'pointer' }} onClick={()=>window.HTDUI.toast('QUIET HOURS · TIME PICKER IN BETA')}><span style={{ fontSize:13.5, color:'var(--bone)' }}>Do not disturb</span>
          <span className="num-mono acid" style={{ fontSize:14 }}>22:00 – 06:00</span></div></Panel>
      </PushView>
    );
  }

  function SessionsDevices() {
    const toast = window.HTDUI.toast;
    const [revoked, setRevoked] = useState({});
    return (
      <PushView title="SESSIONS">
        <SectionLabel style={{ marginTop:6 }}>ACTIVE DEVICES</SectionLabel>
        <Panel pad={false}>{F.sessions.filter((s,i)=>!revoked[i]).map(([d,loc,here],i)=>(
          <div key={d} className="row between" style={{ padding:'14px', borderBottom:'1px solid var(--hairline)' }}>
            <div className="row" style={{ gap:12 }}>
              <Icon name={here?'mission':'feed'} size={18} color="var(--bone-muted)" />
              <div><div style={{ fontFamily:'var(--ui)', fontWeight:600, fontSize:14 }}>{d}</div>
                <div className="label-mono" style={{ marginTop:2 }}>{loc}</div></div></div>
            {here ? <span className="label-mono acid">● THIS DEVICE</span>
                  : <button onClick={()=>{ setRevoked(r=>({...r,[F.sessions.findIndex(s=>s[0]===d)]:true})); toast('SESSION REVOKED · '+d); }}
                      className="label-mono danger-c" style={{ background:'none', border:'1px solid rgba(255,59,48,0.35)', borderRadius:6, padding:'6px 10px', cursor:'pointer' }}>REVOKE</button>}
          </div>))}</Panel>
        <button className="btn-ghost" style={{ marginTop:16, color:'var(--danger)', borderColor:'rgba(255,59,48,0.35)' }}
          onClick={()=>{ setRevoked({1:true,2:true}); toast('ALL OTHER SESSIONS LOGGED OUT'); }}>LOG OUT ALL OTHER SESSIONS</button>
      </PushView>
    );
  }

  function AccountExportDelete() {
    const nav = useNav();
    const [confirm, setConfirm] = useState(false);
    return (
      <PushView title="ACCOUNT & DATA">
        <SectionLabel style={{ marginTop:6 }}>EXPORT</SectionLabel>
        <Panel><div className="row between"><div className="row" style={{ gap:11 }}>
          <Icon name="upload" size={18} color="var(--acid)" />
          <div><div style={{ fontFamily:'var(--ui)', fontWeight:600, fontSize:14 }}>Export account data</div>
            <div className="label-mono" style={{ marginTop:2 }}>PROOFS · MISSIONS · PROFILE</div></div></div>
          <button className="label-mono acid" style={{ background:'none', border:'1px solid var(--border-active)', borderRadius:6, padding:'7px 12px', cursor:'pointer' }}
            onClick={()=>window.HTDUI.toast('EXPORT REQUESTED · EMAIL WITHIN 24H')}>REQUEST</button></div></Panel>
        <SectionLabel style={{ color:'var(--danger)' }}>DANGER ZONE</SectionLabel>
        <Panel style={{ borderColor:'rgba(255,59,48,0.35)' }}>
          <div className="row" style={{ gap:11, marginBottom:12 }}><Icon name="alert" size={18} color="var(--danger)" />
            <div><div style={{ fontFamily:'var(--ui)', fontWeight:600, fontSize:14, color:'var(--danger)' }}>Delete account</div>
              <div className="muted" style={{ fontSize:12.5, marginTop:3, lineHeight:1.45 }}>Permanently erases your proof record, missions, and crews. Cannot be undone.</div></div></div>
          {!confirm
            ? <button className="btn-ghost" style={{ color:'var(--danger)', borderColor:'rgba(255,59,48,0.4)' }} onClick={()=>setConfirm(true)}>DELETE ACCOUNT</button>
            : <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
                <div className="label-mono danger-c" style={{ textAlign:'center' }}>THIS IS PERMANENT. CONFIRM?</div>
                <div className="row" style={{ gap:10 }}>
                  <button className="btn-ghost" onClick={()=>setConfirm(false)}>CANCEL</button>
                  <button className="btn-ghost" style={{ background:'var(--danger)', color:'#fff', border:'none' }} onClick={()=>nav.setPhase('splash')}>DELETE FOREVER</button></div></div>}
        </Panel>
      </PushView>
    );
  }

  window.HTDSettings = { Settings, PrivacyProofVisibility, NotificationPrefs, SessionsDevices, AccountExportDelete };
})();