/* HTD Apex Layer — Live Crew Session, Gym Chapter, World Day, Trust Center, Push Gallery */
(function () {
  const { useState, useEffect } = React;
  const Icon = window.HTDIcon;
  const { useNav, PushView, SectionLabel, Panel, Avatar, toast } = window.HTDUI;
  const F = window.HTD_FIX;

  // ---------- LIVE CREW SESSION ----------
  function LiveSession() {
    const nav = useNav(); const L = F.liveSession;
    const [joined, setJoined] = useState(false);
    const [sec, setSec] = useState(1132);
    useEffect(() => { const id = setInterval(() => setSec(s => s + 1), 1000); return () => clearInterval(id); }, []);
    const mm = String(Math.floor(sec/60)).padStart(2,'0'), ss = String(sec%60).padStart(2,'0');
    return (
      <PushView title="LIVE CREW SESSION"
        footer={joined
          ? <button className="btn-primary" onClick={()=>nav.push('ProofCapture')}>SUBMIT PROOF<span className="sub">3 CREW STILL MOVING WITH YOU</span></button>
          : <button className="btn-primary" onClick={()=>{ setJoined(true); toast('YOU’RE IN · CREW CAN SEE YOU MOVING'); }}>JOIN THE SESSION<span className="sub">SAME MISSION · LIVE · TOGETHER</span></button>}>
        <div className="row between" style={{ marginTop:8 }}>
          <div>
            <div className="label-mono acid" style={{ display:'flex', alignItems:'center', gap:6 }}>
              <span style={{ width:7, height:7, borderRadius:'50%', background:'var(--danger)', boxShadow:'0 0 8px var(--danger)' }} />
              LIVE · {L.members.length + (joined?1:0)} MID-MISSION</div>
            <div className="display-lg" style={{ fontSize:22, marginTop:6 }}>{L.mission}</div>
          </div>
          <div style={{ textAlign:'right' }}>
            <div className="label-mono">SESSION</div>
            <div className="num-mono" style={{ fontFamily:'var(--display)', fontWeight:700, fontSize:22, color:'var(--acid)' }}>{mm}:{ss}</div>
          </div>
        </div>

        <SectionLabel>CREW · LIVE TILES</SectionLabel>
        {joined && (
          <Panel glow style={{ marginBottom:10 }}>
            <div className="row between">
              <div className="row" style={{ gap:10 }}>
                <Avatar color="#3a4a2a" label="Y" size={34} />
                <div><div style={{ fontFamily:'var(--display)', fontWeight:700, fontSize:15, color:'var(--acid)' }}>YOU</div>
                  <div className="label-mono">JUST JOINED · GPS LOCKED</div></div></div>
              <span className="label-mono acid">● MOVING</span>
            </div>
          </Panel>)}
        <Panel pad={false}>
          {L.members.map(([name, col, pct, dist, hr], i) => (
            <div key={name} style={{ padding:'13px 14px', borderBottom: i<L.members.length-1?'1px solid var(--hairline)':'none' }}>
              <div className="row between" style={{ marginBottom:9 }}>
                <div className="row" style={{ gap:10 }}>
                  <Avatar color={col} label={name[0]} size={30} />
                  <span style={{ fontFamily:'var(--display)', fontWeight:600, fontSize:14, whiteSpace:'nowrap' }}>{name}</span>
                </div>
                <div className="row" style={{ gap:14 }}>
                  <span className="num-mono" style={{ fontSize:12, color:'var(--bone)' }}>{dist}</span>
                  <span className="num-mono" style={{ fontSize:12, color:'var(--acid)' }}>♥ {hr}</span>
                </div>
              </div>
              <div style={{ height:5, borderRadius:3, background:'var(--raised-2)', overflow:'hidden' }}>
                <div style={{ width:pct+'%', height:'100%', background:'var(--acid)', boxShadow:'0 0 8px var(--acid-glow)' }} />
              </div>
            </div>))}
        </Panel>

        <div className="row" style={{ gap:10, marginTop:14 }}>
          <button className="btn-ghost" onClick={()=>toast('CREW AUDIO · PROVIDER STUB · WIRES TO LIVEKIT')} style={{ flex:1 }}>
            {L.voice}</button>
          <button className="btn-ghost" style={{ width:'auto', padding:'0 16px' }} onClick={()=>toast('HYPE SENT TO CREW')}>SEND HYPE</button>
        </div>
        <div className="label-mono" style={{ textAlign:'center', marginTop:14, color:'var(--steel)' }}>SESSIONS FORM AUTOMATICALLY AT EACH DROP</div>
      </PushView>
    );
  }

  // ---------- GYM CHAPTER ----------
  function GymChapter() {
    const nav = useNav(); const G = F.gym;
    const [member, setMember] = useState(true);
    return (
      <PushView title="GYM CHAPTER" right={['share']}
        footer={<button className="btn-primary" onClick={()=>nav.push('ChallengeDetail')}>BACK YOUR GYM<span className="sub">GYM VS GYM · WEEK 24 · VS {G.rival}</span></button>}>
        <div style={{ marginTop:8, borderRadius:'var(--r-lg)', overflow:'hidden', border:'1px solid var(--hairline-2)',
          background:'linear-gradient(150deg,#171a12,#070806 70%)' }}>
          <image-slot id="gym-ironworks" placeholder="Drop the gym photo" shape="rect"
            style={{ display:'block', width:'100%', height:'110px' }}></image-slot>
          <div style={{ padding:18 }}>
          <div className="row between" style={{ alignItems:'flex-start' }}>
            <div>
              <div className="label-mono">{G.city} · CHAPTER</div>
              <div style={{ fontFamily:'var(--display)', fontWeight:700, fontSize:30, lineHeight:.95, margin:'8px 0 4px' }}>{G.name}</div>
              <div className="label-mono acid">{G.rank} · {G.members} ATHLETES</div>
            </div>
            <button onClick={()=>{ setMember(m=>!m); toast(member?'LEFT CHAPTER':'JOINED '+G.name); }}
              className="label-mono" style={{ padding:'8px 12px', borderRadius:6, cursor:'pointer',
                border:'1px solid '+(member?'var(--acid)':'var(--hairline-2)'),
                background: member?'rgba(152,255,16,0.08)':'transparent', color: member?'var(--acid)':'var(--bone-muted)' }}>
              {member?'✓ MEMBER':'JOIN'}</button>
          </div>
          </div>
        </div>

        <div className="row" style={{ gap:10, marginTop:12 }}>
          <Panel style={{ flex:1, textAlign:'center' }}>
            <div style={{ fontFamily:'var(--display)', fontWeight:700, fontSize:20, color:'var(--acid)' }}>{G.weekPts}</div>
            <div className="label-mono" style={{ marginTop:3 }}>WEEK PTS</div></Panel>
          <Panel style={{ flex:1, textAlign:'center' }}>
            <div style={{ fontFamily:'var(--display)', fontWeight:700, fontSize:20 }}>{G.members}</div>
            <div className="label-mono" style={{ marginTop:3 }}>ATHLETES</div></Panel>
          <Panel style={{ flex:1, textAlign:'center' }}>
            <div style={{ fontFamily:'var(--display)', fontWeight:700, fontSize:20, color:'var(--danger)' }}>VS</div>
            <div className="label-mono" style={{ marginTop:3 }}>{G.rival.split(' ')[0]}</div></Panel>
        </div>

        <SectionLabel>GYM BOARD · THIS WEEK</SectionLabel>
        <Panel pad={false}>{G.board.map(([r,n,p],i)=>(
          <div key={r} className="row between" style={{ padding:'12px 14px', borderBottom:i<G.board.length-1?'1px solid var(--hairline)':'none',
            background: n==='YOU'?'rgba(152,255,16,0.05)':'transparent' }}>
            <div className="row" style={{ gap:13 }}>
              <span className="num-mono" style={{ width:16, fontSize:13, color: +r<=3?'var(--acid)':'var(--steel)' }}>{r}</span>
              <span style={{ fontFamily:'var(--ui)', fontWeight:600, fontSize:14, whiteSpace:'nowrap', color: n==='YOU'?'var(--acid)':'var(--bone)' }}>{n}</span></div>
            <span className="num-mono" style={{ fontSize:13, color:'var(--bone-muted)' }}>{p}</span></div>))}</Panel>

        <SectionLabel>CHAPTER SESSIONS · SHOW UP IRL</SectionLabel>
        <Panel pad={false}>{G.sessions.map(([when,what],i)=>(
          <div key={when} className="row between" style={{ padding:'13px 14px', borderBottom:i<G.sessions.length-1?'1px solid var(--hairline)':'none' }}>
            <div className="row" style={{ gap:11 }}>
              <Icon name="calendar" size={16} color="var(--acid)" />
              <span style={{ fontFamily:'var(--ui)', fontWeight:600, fontSize:14 }}>{what}</span></div>
            <span className="label-mono">{when}</span></div>))}</Panel>
      </PushView>
    );
  }

  // ---------- HTD WORLD DAY ----------
  function WorldDay() {
    const W = F.worldDay;
    const [joined, setJoined] = useState(false);
    const [n, setN] = useState(2418335);
    useEffect(() => { const id = setInterval(() => setN(v => v + Math.floor(Math.random()*9)+2), 1400); return () => clearInterval(id); }, []);
    return (
      <PushView title="HTD WORLD DAY"
        footer={<button className={joined?'btn-ghost':'btn-primary'} onClick={()=>{ setJoined(j=>!j); toast(joined?'WITHDRAWN':'YOU’RE IN · JUNE 21 · SAME DAY AS EVERYONE'); }}>
          {joined?'✓ IN · JUNE 21':'I’M IN'}{!joined && <span className="sub">ONE MISSION · EVERY ATHLETE ON EARTH</span>}</button>}>
        <div style={{ marginTop:8, borderRadius:'var(--r-lg)', overflow:'hidden', border:'1px solid var(--border-active)',
          boxShadow:'0 0 30px -10px var(--acid-glow)', background:'linear-gradient(160deg,#131a0c,#060705 75%)', padding:'22px 18px', position:'relative' }}>
          <image-slot id="world-day" placeholder="Drop the World Day hero" shape="rect"
            style={{ position:'absolute', inset:0, width:'100%', height:'100%', opacity:.5 }}></image-slot>
          <div className="grid-bg" style={{ position:'absolute', inset:0, opacity:.8, pointerEvents:'none' }} />
          <div style={{ position:'absolute', inset:0, pointerEvents:'none', background:'linear-gradient(180deg, rgba(6,7,5,0.3), rgba(6,7,5,0.9) 80%)' }} />
          <div style={{ position:'relative', pointerEvents:'none' }}>
            <div className="label-mono acid" style={{ letterSpacing:3 }}>{W.date} · GLOBAL DROP</div>
            <div className="display-xl" style={{ fontSize:38, margin:'10px 0 6px' }}>{W.mission}</div>
            <div className="muted" style={{ fontSize:13.5 }}>{W.sub}</div>
            <div className="row between" style={{ marginTop:18, borderTop:'1px solid var(--hairline)', paddingTop:14 }}>
              <div><div className="num-mono" style={{ fontFamily:'var(--display)', fontWeight:700, fontSize:24, color:'var(--acid)' }}>{n.toLocaleString()}</div>
                <div className="label-mono" style={{ marginTop:2 }}>ATHLETES IN</div></div>
              <div style={{ textAlign:'center' }}><div className="num-mono" style={{ fontFamily:'var(--display)', fontWeight:700, fontSize:24 }}>{W.cities}</div>
                <div className="label-mono" style={{ marginTop:2 }}>CITIES</div></div>
              <div style={{ textAlign:'right' }}><div className="num-mono" style={{ fontFamily:'var(--display)', fontWeight:700, fontSize:24, color:'var(--amber)' }}>{W.countdown}</div>
                <div className="label-mono" style={{ marginTop:2 }}>TO DROP</div></div>
            </div>
          </div>
        </div>
        <SectionLabel>HOW IT WORKS</SectionLabel>
        <Panel pad={false}>{[
          ['One mission, one day','Same 5K drops at 05:00 in every timezone.'],
          ['Proof floods the feed','A 24h global wall of proof — the biggest day in HTD.'],
          ['Cities compete','Highest completion rate takes the City Crown for the year.'],
        ].map(([t,d],i)=>(
          <div key={t} className="row" style={{ gap:13, padding:'13px 14px', alignItems:'flex-start', borderBottom:i<2?'1px solid var(--hairline)':'none' }}>
            <span className="num-mono" style={{ fontFamily:'var(--display)', fontWeight:700, fontSize:15, color:'var(--steel)', width:16 }}>{i+1}</span>
            <div><div style={{ fontFamily:'var(--display)', fontWeight:600, fontSize:14.5 }}>{t}</div>
              <div className="muted" style={{ fontSize:12.5, marginTop:3, lineHeight:1.45 }}>{d}</div></div>
          </div>))}</Panel>
        <button className="btn-ghost" style={{ marginTop:14 }} onClick={()=>toast('CREW INVITED · ALL 12')}>BRING YOUR CREW</button>
      </PushView>
    );
  }

  // ---------- TRUST CENTER ----------
  function TrustCenter() {
    const T = F.trust;
    const [votes, setVotes] = useState({});
    return (
      <PushView title="TRUST CENTER">
        <Panel glow style={{ marginTop:8 }}>
          <div className="row between">
            <div><div className="label-mono">{T.status}</div>
              <div className="row" style={{ alignItems:'baseline', gap:5, marginTop:4 }}>
                <span style={{ fontFamily:'var(--display)', fontWeight:700, fontSize:38, color:'var(--acid)', lineHeight:.9 }}>{T.score}</span>
                <span className="label-mono">TRUST SCORE</span></div></div>
            <div style={{ textAlign:'right' }}>
              <div className="label-mono">{T.verifications} REVIEWS</div>
              <div className="label-mono acid" style={{ marginTop:4 }}>{T.accuracy} ACCURACY</div></div>
          </div>
        </Panel>
        <div className="muted" style={{ fontSize:12.5, margin:'12px 2px 0', lineHeight:1.5 }}>
          The only fitness numbers that can’t be faked. Flagged proofs go to the community jury — verifiers earn standing.</div>
        <SectionLabel>JURY QUEUE · {T.queue.length} FLAGGED</SectionLabel>
        {T.queue.map((q, i) => {
          const v = votes[i];
          return (
            <Panel key={i} style={{ marginBottom:10, borderColor: v ? (v==='LEGIT'?'var(--border-active)':'rgba(255,59,48,0.4)') : 'var(--hairline)' }}>
              <div className="row between" style={{ marginBottom:8 }}>
                <span style={{ fontFamily:'var(--display)', fontWeight:700, fontSize:16 }}>{q.mission}</span>
                <span className="label-mono">{q.user}</span></div>
              <div className="row" style={{ gap:8, marginBottom:12 }}>
                <Icon name="alert" size={14} color="var(--amber)" />
                <span style={{ fontSize:12.5, color:'var(--amber)' }}>{q.flag}</span></div>
              {v ? <div className="label-mono" style={{ color: v==='LEGIT'?'var(--acid)':'var(--danger)' }}>✓ VOTED {v} · 2 OF 3 JURORS AGREE</div>
                 : <div className="row" style={{ gap:9 }}>
                     <button className="btn-ghost" style={{ padding:'10px', color:'var(--acid)', borderColor:'var(--border-active)' }}
                       onClick={()=>{ setVotes(s=>({...s,[i]:'LEGIT'})); toast('VOTE CAST · LEGIT'); }}>LEGIT</button>
                     <button className="btn-ghost" style={{ padding:'10px', color:'var(--danger)', borderColor:'rgba(255,59,48,0.4)' }}
                       onClick={()=>{ setVotes(s=>({...s,[i]:'REJECT'})); toast('VOTE CAST · REJECTED'); }}>REJECT</button>
                   </div>}
            </Panel>);
        })}
        <div className="label-mono" style={{ textAlign:'center', marginTop:10, color:'var(--steel)' }}>3 JURORS PER PROOF · IDENTITIES MASKED · ML PRE-SCREENED</div>
      </PushView>
    );
  }

  // ---------- PUSH NOTIFICATION GALLERY ----------
  function PushGallery() {
    return (
      <PushView title="PUSH CHOREOGRAPHY">
        <div className="muted" style={{ fontSize:12.5, marginTop:8, lineHeight:1.5 }}>
          The six push moments, designed. Each earns its interruption — nothing else ships.</div>
        <div style={{ display:'flex', flexDirection:'column', gap:10, marginTop:14 }}>
          {F.pushGallery.map(([time, title, body]) => (
            <div key={title} style={{ borderRadius:14, padding:'12px 14px', background:'rgba(28,30,26,0.92)',
              border:'1px solid rgba(255,255,255,0.09)', backdropFilter:'blur(8px)' }}>
              <div className="row between" style={{ marginBottom:5 }}>
                <div className="row" style={{ gap:8 }}>
                  <div style={{ width:20, height:20, borderRadius:5, background:'#0a0d0a', border:'1px solid var(--border-active)', display:'grid', placeItems:'center' }}>
                    <span style={{ fontFamily:'var(--display)', fontWeight:700, fontSize:10, color:'var(--acid)' }}>H</span></div>
                  <span style={{ fontFamily:'var(--ui)', fontWeight:700, fontSize:12.5, color:'var(--bone)' }}>{title}</span></div>
                <span className="label-mono">{time}</span></div>
              <div style={{ fontSize:13, color:'var(--bone-muted)', lineHeight:1.4, paddingLeft:28 }}>{body}</div>
            </div>))}
        </div>
        <div className="label-mono" style={{ textAlign:'center', marginTop:16, color:'var(--steel)' }}>QUIET HOURS RESPECTED · MAX 3 PER DAY · ALL OPT-OUT</div>
      </PushView>
    );
  }

  window.HTDApex = { LiveSession, GymChapter, WorldDay, TrustCenter, PushGallery };
})();
