/* HTD Growth — Duels, Weekly League, Proof Reels */
(function () {
  const { useState, useEffect } = React;
  const Icon = window.HTDIcon;
  const { useNav, PushView, SectionLabel, Panel, Avatar, toast } = window.HTDUI;
  const F = window.HTD_FIX;

  // ---------- DUELS HUB ----------
  function VersusBar({ you, opp }) {
    const total = you + opp;
    return (
      <div style={{ display:'flex', height:10, borderRadius:5, overflow:'hidden', gap:2 }}>
        <div style={{ width:(you/total*100)+'%', background:'var(--acid)', borderRadius:'5px 0 0 5px', boxShadow:'0 0 10px var(--acid-glow)' }} />
        <div style={{ flex:1, background:'var(--danger)', borderRadius:'0 5px 5px 0', opacity:.8 }} />
      </div>
    );
  }

  function Duels() {
    const nav = useNav(); const D = F.duels; const d = D.active;
    return (
      <PushView title="DUELS" right={['share']}
        footer={<button className="btn-primary" onClick={()=>nav.push('DuelCallout')}>CALL SOMEONE OUT<span className="sub">SAME MISSION · 24H · NO HIDING</span></button>}>
        <div className="row between" style={{ marginTop:8 }}>
          <div><div className="label-mono">YOUR RECORD</div>
            <div className="row" style={{ alignItems:'baseline', gap:6, marginTop:3 }}>
              <span style={{ fontFamily:'var(--display)', fontWeight:700, fontSize:26, color:'var(--acid)' }}>{D.record.w}W</span>
              <span style={{ fontFamily:'var(--display)', fontWeight:700, fontSize:26, color:'var(--danger)' }}>{D.record.l}L</span></div></div>
          <span className="label-mono acid">● 1 ACTIVE DUEL</span>
        </div>

        <SectionLabel>HEAD TO HEAD · ENDS {d.ends}</SectionLabel>
        <Panel glow>
          <div className="row between" style={{ marginBottom:14 }}>
            <div className="row" style={{ gap:10 }}>
              <Avatar color="#3a4a2a" label="Y" size={42} />
              <div><div style={{ fontFamily:'var(--display)', fontWeight:700, fontSize:16, color:'var(--acid)' }}>YOU</div>
                <div className="label-mono">{d.you}% DONE</div></div>
            </div>
            <div style={{ fontFamily:'var(--display)', fontWeight:700, fontSize:22, color:'var(--steel)' }}>VS</div>
            <div className="row" style={{ gap:10 }}>
              <div style={{ textAlign:'right' }}><div style={{ fontFamily:'var(--display)', fontWeight:700, fontSize:16 }}>{d.opponent}</div>
                <div className="label-mono">{d.opp}% DONE</div></div>
              <Avatar color={d.oppAvatar} label="J" size={42} />
            </div>
          </div>
          <VersusBar you={d.you} opp={d.opp} />
          <div className="row between" style={{ marginTop:12 }}>
            <span className="label-mono" style={{ color:'var(--bone)' }}>{d.mission}</span>
            <span className="label-mono acid">LEADING +{d.you-d.opp}</span>
          </div>
          <div className="label-mono" style={{ marginTop:8, color:'var(--amber)' }}>STAKE · {d.stake}</div>
        </Panel>

        <SectionLabel>DUEL FEED</SectionLabel>
        <Panel pad={false}>{d.log.map(([who,what,ago],i)=>(
          <div key={i} className="row between" style={{ padding:'12px 14px', borderBottom:i<d.log.length-1?'1px solid var(--hairline)':'none' }}>
            <div className="row" style={{ gap:10 }}>
              <span className="label-mono" style={{ width:54, color: who==='YOU'?'var(--acid)':'var(--bone-muted)' }}>{who}</span>
              <span style={{ fontSize:13, color:'var(--bone-muted)' }}>{what}</span></div>
            <span className="label-mono">{ago}</span></div>))}</Panel>

        <SectionLabel>THE L CARD · WHAT THE LOSER POSTS</SectionLabel>
        <div style={{ borderRadius:'var(--r-lg)', border:'1px solid rgba(255,59,48,0.4)', padding:18,
          background:'linear-gradient(160deg,#1d0d0b,#060505 70%)' }}>
          <div className="display-xl" style={{ fontSize:34, color:'var(--danger)' }}>I TOOK<br/>THE L.</div>
          <div className="muted" style={{ fontSize:12.5, marginTop:10 }}>Lost to {d.opponent} · {d.mission}</div>
          <div className="row between" style={{ marginTop:14, borderTop:'1px solid var(--hairline)', paddingTop:10 }}>
            <span className="label-mono">HARD THINGS DAILY</span><span className="label-mono danger-c">#TOOKTHEL</span></div>
        </div>
      </PushView>
    );
  }

  // ---------- DUEL CALLOUT ----------
  function DuelCallout() {
    const nav = useNav(); const D = F.duels;
    const [opp, setOpp] = useState('DANIEL K.');
    const [stake, setStake] = useState(D.stakes[0]);
    const [sent, setSent] = useState(false);
    if (sent) return (
      <PushView title="CALLOUT SENT" onBack={()=>nav.popToRoot()}
        footer={<button className="btn-primary" onClick={()=>nav.popToRoot()}>DONE<span className="sub">THEY HAVE 6H TO ACCEPT</span></button>}>
        <div style={{ textAlign:'center', padding:'44px 20px 0' }} className="screen-enter">
          <div style={{ width:72, height:72, margin:'0 auto 16px', borderRadius:'50%', display:'grid', placeItems:'center',
            border:'2px solid var(--acid)', boxShadow:'0 0 28px -4px var(--acid-glow)' }}><Icon name="zap" size={32} color="var(--acid)" /></div>
          <div className="display-xl" style={{ fontSize:32, color:'var(--acid)' }}>CALLOUT SENT</div>
          <div className="muted" style={{ fontSize:13.5, marginTop:10 }}>{opp} has been called out.<br/>{F.today.title} · 24H · {stake.toLowerCase()}</div>
        </div>
      </PushView>);
    return (
      <PushView title="CALL OUT"
        footer={<button className="btn-primary" onClick={()=>{ setSent(true); toast('CALLOUT SENT TO '+opp); }}>SEND CALLOUT<span className="sub">SAME MISSION · 24H WINDOW</span></button>}>
        <SectionLabel style={{ marginTop:8 }}>PICK YOUR OPPONENT</SectionLabel>
        {D.callouts.map(([name,col,crew,rec])=>(
          <button key={name} onClick={()=>setOpp(name)} className="row between panel" style={{ width:'100%', padding:13, marginBottom:9, cursor:'pointer',
            borderColor: opp===name?'var(--acid)':'var(--hairline)', background: opp===name?'rgba(152,255,16,0.06)':'var(--panel)' }}>
            <div className="row" style={{ gap:11 }}>
              <Avatar color={col} label={name[0]} size={36} />
              <div style={{ textAlign:'left' }}><div style={{ fontFamily:'var(--display)', fontWeight:600, fontSize:15, color: opp===name?'var(--acid)':'var(--bone)' }}>{name}</div>
                <div className="label-mono" style={{ marginTop:2 }}>{crew} · {rec}</div></div></div>
            {opp===name && <Icon name="check" size={17} color="var(--acid)" />}
          </button>))}
        <SectionLabel>THE MISSION</SectionLabel>
        <Panel><div className="row between"><div>
          <div style={{ fontFamily:'var(--display)', fontWeight:700, fontSize:18 }}>{F.today.title}</div>
          <div className="label-mono" style={{ marginTop:3 }}>TODAY'S DROP · BOTH RUN IT</div></div>
          <Icon name="target" size={20} color="var(--acid)" /></div></Panel>
        <SectionLabel>STAKES</SectionLabel>
        {D.stakes.map(s=>(
          <button key={s} onClick={()=>setStake(s)} className="row between" style={{ width:'100%', padding:'13px 14px', marginBottom:8, cursor:'pointer',
            background: stake===s?'rgba(152,255,16,0.06)':'var(--panel)', borderRadius:'var(--r)',
            border:'1px solid '+(stake===s?'var(--acid)':'var(--hairline)') }}>
            <span className="label-mono" style={{ color: stake===s?'var(--acid)':'var(--bone-muted)' }}>{s}</span>
            {stake===s && <Icon name="check" size={15} color="var(--acid)" />}
          </button>))}
      </PushView>
    );
  }

  // ---------- WEEKLY LEAGUE (tab content + pushed) ----------
  function LeagueBoard() {
    const nav = useNav(); const L = F.league;
    const tierIdx = L.tiers.indexOf(L.tier);
    return (
      <div>
        <Panel glow style={{ marginTop:4 }}>
          <div className="row between">
            <div><div className="label-mono">{L.week} · {L.tier} LEAGUE</div>
              <div className="display-lg" style={{ fontSize:24, marginTop:5, color:'var(--acid)' }}>RANK #3 / {L.size}</div></div>
            <div style={{ textAlign:'right' }}><div className="label-mono">ENDS IN</div>
              <div className="num-mono" style={{ fontFamily:'var(--display)', fontWeight:700, fontSize:20, marginTop:2 }}>{L.ends}</div></div>
          </div>
          <div className="row" style={{ gap:5, marginTop:14 }}>
            {L.tiers.map((t,i)=>(
              <div key={t} style={{ flex:1, textAlign:'center' }}>
                <div style={{ height:4, borderRadius:2, background: i<tierIdx?'var(--acid-deep)':i===tierIdx?'var(--acid)':'var(--raised-2)',
                  boxShadow: i===tierIdx?'0 0 8px var(--acid-glow)':'none' }} />
                <div className="label-mono" style={{ fontSize:7, marginTop:5, color: i===tierIdx?'var(--acid)':'var(--steel)' }}>{t}</div></div>))}
          </div>
          <div className="label-mono acid" style={{ marginTop:10 }}>▲ TOP {L.promo} PROMOTE TO CARBON</div>
        </Panel>
        <SectionLabel>YOUR COHORT · 30 ATHLETES</SectionLabel>
        <Panel pad={false}>
          {L.cohort.map(([rank,name,pts,zone],i)=>{
            const you = name==='YOU';
            const promo = +rank <= L.promo, releg = +rank > L.releg;
            return (
              <React.Fragment key={rank}>
                {rank==='26' && <div className="label-mono danger-c" style={{ padding:'9px 14px', borderTop:'1px dashed rgba(255,59,48,0.35)', borderBottom:'1px solid var(--hairline)' }}>▼ RELEGATION ZONE · BOTTOM 5 DROP TO IRON</div>}
                <div className="row between" style={{ padding:'11px 14px', borderBottom:'1px solid var(--hairline)',
                  background: you?'rgba(152,255,16,0.06)':'transparent' }}>
                  <div className="row" style={{ gap:13 }}>
                    <span className="num-mono" style={{ width:20, fontSize:13, color: promo?'var(--acid)':releg?'var(--danger)':'var(--steel)' }}>{rank}</span>
                    <span style={{ fontFamily:'var(--ui)', fontWeight:600, fontSize:14, whiteSpace:'nowrap', color: you?'var(--acid)':'var(--bone)' }}>{name}</span>
                    {promo && <Icon name="trend" size={13} color="var(--acid)" />}
                  </div>
                  <span className="num-mono" style={{ fontSize:13, color:'var(--bone-muted)' }}>{pts}</span>
                </div>
                {rank==='5' && <div className="label-mono" style={{ padding:'9px 14px', borderBottom:'1px solid var(--hairline)', color:'var(--steel)' }}>— SAFE ZONE —</div>}
              </React.Fragment>);
          })}
          <button onClick={()=>nav.push('LeaderboardDetail')} className="label-mono" style={{ width:'100%', padding:14, background:'none', border:'none', color:'var(--bone-muted)', cursor:'pointer', letterSpacing:2 }}>VIEW GLOBAL LEADERBOARD</button>
        </Panel>
      </div>
    );
  }

  // ---------- PROOF REELS ----------
  function ProofReels() {
    const nav = useNav();
    const [i, setI] = useState(0);
    const [respected, setRespected] = useState({});
    const r = F.reels[i];
    const next = () => setI(n => (n+1) % F.reels.length);
    const prev = () => setI(n => (n-1+F.reels.length) % F.reels.length);
    const touch = React.useRef(null);
    return (
      <div className="pushview" style={{ position:'absolute', inset:0, zIndex:50, background:'#000', display:'flex', flexDirection:'column' }}
        onTouchStart={e=>{ touch.current=e.touches[0].clientY; }}
        onTouchEnd={e=>{ const dy=e.changedTouches[0].clientY-touch.current; if(dy<-40) next(); else if(dy>40) prev(); }}
        onWheel={e=>{ if(e.deltaY>20) next(); else if(e.deltaY<-20) prev(); }}>
        <div key={i} className="screen-enter" style={{ position:'absolute', inset:0, background:r.grad }}>
          <image-slot id={'reel-'+i} placeholder="Drop proof footage still" shape="rect"
            style={{ position:'absolute', inset:0, width:'100%', height:'100%', opacity:.85 }}></image-slot>
          {/* faux video texture */}
          <div className="grid-bg" style={{ position:'absolute', inset:0, opacity:.7, pointerEvents:'none' }} />
          <div style={{ position:'absolute', top:'34%', left:'50%', transform:'translate(-50%,-50%)', width:64, height:64, pointerEvents:'none',
            borderRadius:'50%', border:'1px solid rgba(244,241,232,0.3)', display:'grid', placeItems:'center', background:'rgba(0,0,0,0.35)' }}>
            <div style={{ width:0, height:0, borderTop:'11px solid transparent', borderBottom:'11px solid transparent', borderLeft:'18px solid var(--bone)', marginLeft:4 }} />
          </div>
          <div className="label-mono" style={{ position:'absolute', top:'46%', left:0, right:0, textAlign:'center', color:'var(--steel)', pointerEvents:'none' }}>VIDEO PROOF · TAP TO PLAY</div>
        </div>
        {/* top chrome */}
        <div style={{ position:'relative', zIndex:2, display:'flex', alignItems:'center', justifyContent:'space-between', padding:'56px 16px 0' }}>
          <button className="iconbtn" onClick={()=>nav.pop()} style={{ color:'var(--bone)' }}><Icon name="back" size={22} /></button>
          <span className="label-mono" style={{ color:'var(--bone)' }}>PROOF REELS · {i+1}/{F.reels.length}</span>
          <button className="iconbtn" onClick={()=>toast('REEL LINK COPIED')}><Icon name="share" size={20} /></button>
        </div>
        {/* right rail */}
        <div style={{ position:'absolute', right:8, bottom:140, zIndex:2, display:'flex', flexDirection:'column', gap:20, alignItems:'center', width:56 }}>
          <button onClick={()=>setRespected(s=>({...s,[i]:!s[i]}))} style={{ background:'none', border:'none', cursor:'pointer', textAlign:'center', width:56, color: respected[i]?'var(--acid)':'var(--bone)' }}>
            <Icon name="heart" size={28} fill={respected[i]?'var(--acid)':'none'} color={respected[i]?'var(--acid)':'var(--bone)'} />
            <div className="label-mono" style={{ marginTop:4, color:'inherit' }}>{r.respect}</div></button>
          <button onClick={()=>toast('COMMENTS · '+r.comments)} style={{ background:'none', border:'none', cursor:'pointer', textAlign:'center', width:56, color:'var(--bone)' }}>
            <Icon name="comment" size={26} /><div className="label-mono" style={{ marginTop:4 }}>{r.comments}</div></button>
          <button onClick={()=>toast('DUEL '+r.user.split(' ')[0]+' · CALLOUT READY')} style={{ background:'none', border:'none', cursor:'pointer', textAlign:'center', width:56, color:'var(--bone)' }}>
            <Icon name="zap" size={26} /><div className="label-mono" style={{ marginTop:4 }}>DUEL</div></button>
        </div>
        {/* bottom meta */}
        <div style={{ position:'absolute', left:0, right:70, bottom:0, zIndex:2, padding:'0 16px 44px' }}>
          <div className="row" style={{ gap:10, marginBottom:10 }}>
            <Avatar color={r.avatar} label={r.user[0]} size={34} />
            <div><div style={{ fontFamily:'var(--display)', fontWeight:600, fontSize:15 }}>{r.user}</div>
              <div className="label-mono acid">✓ PROOF {r.conf}</div></div>
          </div>
          <div className="display-lg" style={{ fontSize:20 }}>{r.mission}</div>
          <div style={{ fontSize:13, color:'var(--bone-muted)', marginTop:5 }}>{r.caption}</div>
          <div className="row" style={{ gap:14, marginTop:10 }}>
            {r.stat.map(s=><span key={s} className="chip" style={{ background:'rgba(0,0,0,0.4)' }}>{s}</span>)}
          </div>
          <div className="label-mono" style={{ marginTop:14, color:'var(--steel)' }}>SWIPE ↑ FOR NEXT PROOF</div>
        </div>
      </div>
    );
  }

  window.HTDGrowth = { Duels, DuelCallout, LeagueBoard, ProofReels };
})();