/* HTD Profile (tab root) — score, heatmap, AI entry, settings stub */
(function () {
  const Icon = window.HTDIcon;
  const { useNav, SectionLabel, Panel, ListRow } = window.HTDUI;
  const F = window.HTD_FIX;

  function Profile({ tweaks }) {
    const nav = useNav(); const p = F.profile;
    const isNew = !!(tweaks && tweaks.emptyStates);
    const score = Math.round(window.HTDMotion.useCountUp(isNew ? 0 : p.score));
    const heat = isNew ? p.heatmap.map(row=>row.map(()=>'nodata')) : p.heatmap;
    return (
      <div className="screen-enter" style={{ paddingTop:6 }}>
        <div style={{ textAlign:'center', paddingTop:4 }}>
          <div className="display-lg" style={{ fontSize:24 }}>{p.handle}</div>
          <div className="label-mono" style={{ marginTop:4 }}>HARDCASE · IRONCROWN</div>
        </div>

        <Panel glow style={{ marginTop:16, textAlign:'center', cursor:'pointer' }} onClick={()=>nav.push('IdentityArc')}>
          <div className="label-mono">RESILIENCE SCORE</div>
          <div className="row" style={{ alignItems:'baseline', justifyContent:'center', gap:6, marginTop:4 }}>
            <span style={{ fontFamily:'var(--display)', fontWeight:700, fontSize:52, color: isNew?'var(--steel)':'var(--acid)', lineHeight:.9 }}>{isNew?'—':score}</span>
            <span className="label-mono" style={{ color:'var(--steel)' }}>/{p.scoreMax}</span></div>
          <div className="label-mono" style={{ marginTop:2, color: isNew?'var(--steel)':'var(--acid)' }}>{isNew?'UNRANKED · SCORE BUILDS FROM PROOF':'HARDCASE · 18 DAYS TO UNBREAKABLE ›'}</div>
          {isNew && <button className="btn-primary" style={{ marginTop:14, fontSize:15, padding:13 }} onClick={()=>nav.go('home')}>COMPLETE FIRST MISSION</button>}
        </Panel>

        <SectionLabel>SCORE BREAKDOWN</SectionLabel>
        <Panel pad={false}>{p.subScores.map(([l,v],i)=>(
          <div key={l} className="row" style={{ gap:12, padding:'11px 14px', borderBottom:i<p.subScores.length-1?'1px solid var(--hairline)':'none' }}>
            <span className="label-mono" style={{ width:118, flex:'0 0 auto' }}>{l}</span>
            <div style={{ flex:1, height:6, borderRadius:3, background:'var(--raised-2)', overflow:'hidden' }}>
              <div style={{ width:v+'%', height:'100%', background: v>=85?'var(--acid)':v>=70?'var(--acid-deep)':'var(--amber)' }} /></div>
            <span className="num-mono" style={{ fontSize:12, color:'var(--bone)', width:24, textAlign:'right' }}>{v}</span>
          </div>))}</Panel>

        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr 1fr', gap:8, marginTop:12 }}>
          {[[isNew?0:p.streak,'STREAK'],[isNew?0:p.proofs,'PROOFS'],[isNew?0:p.crews,'CREWS'],[isNew?0:p.challengesN,'CHALLENGES']].map(([v,l])=>(
            <Panel key={l} style={{ textAlign:'center', padding:'12px 4px' }}>
              <div style={{ fontFamily:'var(--display)', fontWeight:700, fontSize:22 }}>{v}</div>
              <div className="label-mono" style={{ marginTop:3, fontSize:8 }}>{l}</div></Panel>))}
        </div>

        <SectionLabel>PROOF HEATMAP · 18 WEEKS · TAP FOR CALENDAR</SectionLabel>
        <Panel onClick={()=>nav.push('CalendarHeatmap')} style={{ cursor:'pointer' }}><div style={{ display:'flex', flexDirection:'column', gap:3 }}>
          {heat.map((row,ri)=>(<div key={ri} style={{ display:'flex', gap:3 }}>
            {row.map((c,ci)=><div key={ci} className={'cal-cell '+c} style={{ flex:1, aspectRatio:'1', borderRadius:2 }} />)}</div>))}
        </div>
        <div className="row" style={{ gap:14, marginTop:12, justifyContent:'flex-end' }}>
          {[['COMPLETE','complete'],['PARTIAL','partial'],['MISSED','missed']].map(([l,c])=>(
            <span key={l} className="label-mono" style={{ display:'flex', alignItems:'center', gap:5 }}>
              <span className={'cal-cell '+c} style={{ width:9, height:9, borderRadius:2 }} />{l}</span>))}</div></Panel>

        <SectionLabel>BADGES</SectionLabel>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:9 }}>
          {p.badges.map(([name,ic,earned])=>{
            const on = earned && !isNew;
            return (
            <Panel key={name} style={{ textAlign:'center', padding:'14px 6px', opacity: on?1:0.45,
              borderColor: on?'var(--hairline-2)':'var(--hairline)' }}>
              <Icon name={on?ic:'lock'} size={20} color={on?'var(--acid)':'var(--steel)'} />
              <div className="label-mono" style={{ marginTop:8, fontSize:8, color: on?'var(--bone-muted)':'var(--steel)' }}>{name}</div>
            </Panel>);})}
        </div>

        <SectionLabel>INTELLIGENCE</SectionLabel>
        <button onClick={()=>nav.push('AIArchitect')} className="panel panel-pad row between" style={{ width:'100%', cursor:'pointer',
          borderColor:'var(--border-active)', boxShadow:'0 0 18px -8px var(--acid-glow)' }}>
          <div className="row" style={{ gap:12 }}>
            <div style={{ width:38, height:38, borderRadius:9, display:'grid', placeItems:'center', border:'1px solid var(--border-active)' }}>
              <Icon name="compass" size={20} color="var(--acid)" /></div>
            <div style={{ textAlign:'left' }}><div style={{ fontFamily:'var(--display)', fontWeight:600, fontSize:16 }}>AI RESILIENCE ARCHITECT</div>
              <div className="label-mono" style={{ marginTop:2 }}>WEAKNESS · AVOIDANCE · PRESCRIPTION</div></div></div>
          <Icon name="chevronRight" size={20} color="var(--acid)" /></button>

        <SectionLabel>COMPETE</SectionLabel>
        <Panel pad={false} style={{ padding:'0 14px' }}>
          <ListRow icon="zap" title="Duels" sub={'RECORD '+F.duels.record.w+'W · '+F.duels.record.l+'L · 1 ACTIVE'} onClick={()=>nav.push('Duels')} />
          <ListRow icon="trophy" title="Weekly League" sub="STEEL · RANK #3 · PROMOTION ZONE" onClick={()=>nav.go('mission')} />
          <ListRow icon="pulse" title="Weekly Debrief" sub="SUNDAY RITUAL · AI SYNTHESIS" onClick={()=>nav.push('WeeklyDebrief')} />
          <ListRow icon="crew" title="Build the Standard" sub="INVITE 3 · EARN A SHIELD · 1/3" onClick={()=>nav.push('Referral')} />
          <ListRow icon="spark" title="Season Recap" sub="SEASON 04 WRAPPED · READY" onClick={()=>nav.push('Wrapped')} />
        </Panel>

        <SectionLabel>TRAINING</SectionLabel>
        <Panel pad={false} style={{ padding:'0 14px' }}>
          <ListRow icon="calendar" title="Protocol Library" sub="PERSONA TRACKS · PHYSICAL · MENTAL" onClick={()=>nav.push('ProtocolLibrary')} />
          <ListRow icon="map" title="Activity Library" sub="BROWSE MISSION TYPES" onClick={()=>nav.push('ActivityLibrary')} />
          <ListRow icon="trend" title="Progression Plan" sub="BUILD BLOCK · WEEK 3 / 12" onClick={()=>nav.push('ProgressionPlan')} />
          <ListRow icon="pulse" title="Readiness" sub="85 / 100 · GOOD" onClick={()=>nav.push('ReadinessDetail')} />
        </Panel>

        <SectionLabel>ENTITLEMENT</SectionLabel>
        <Panel><div className="row between"><div className="row" style={{ gap:11 }}>
          <Icon name="lock" size={18} color="var(--acid)" />
          <div><div style={{ fontFamily:'var(--display)', fontWeight:600, fontSize:15 }}>ATHLETE PRO</div>
            <div className="label-mono" style={{ marginTop:2 }}>HTD SIGNED ENTITLEMENT · ACTIVE</div></div></div>
          <span className="label-mono acid" onClick={()=>nav.push('EntitlementsPricing')} style={{ cursor:'pointer' }}>MANAGE</span></div></Panel>

        <SectionLabel>RECENT PROOFS</SectionLabel>
        <Panel pad={false}>{p.recent.map((r,i)=>(
          <div key={i} className="row between" style={{ padding:'13px 14px', borderBottom:i<p.recent.length-1?'1px solid var(--hairline)':'none' }}>
            <div className="row" style={{ gap:11 }}><Icon name="check" size={16} color="var(--acid)" />
              <span style={{ fontFamily:'var(--ui)', fontWeight:600, fontSize:14 }}>{r.mission}</span></div>
            <div className="row" style={{ gap:10 }}><span className="label-mono">{r.when}</span>
              <span className="label-mono" style={{ color: r.conf==='HIGH'?'var(--acid)':'var(--amber)' }}>{r.conf}</span></div></div>))}</Panel>

        <SectionLabel>ACCOUNT</SectionLabel>
        <Panel pad={false} style={{ padding:'0 14px' }}>
          <ListRow icon="settings" title="Settings" sub="ACCOUNT · PRIVACY · NOTIFICATIONS" onClick={()=>nav.push('Settings')} />
          <ListRow icon="watch" title="Wearable Connections" sub="GARMIN · APPLE HEALTH" onClick={()=>nav.push('WearableConnections')} />
          <ListRow icon="shield" title="Proof Visibility" sub="DEFAULT · PUBLIC" onClick={()=>nav.push('PrivacyProofVisibility')} />
          <ListRow icon="shieldCheck" title="Trust Center" sub="VERIFIER LVL 2 · 96 TRUST · 2 IN QUEUE" onClick={()=>nav.push('TrustCenter')} />
          <ListRow icon="gps" title="HTD Everywhere" sub="WIDGET · WATCH · LIVE ACTIVITY" onClick={()=>nav.push('Surfaces')} />
          <ListRow icon="back" title="Log Out" danger right={<span className="label-mono danger-c">REPLAY FLOW</span>} onClick={()=>nav.setPhase('splash')} />
        </Panel>
      </div>
    );
  }

  window.HTDProfile = { Profile };
})();