/* HTD Program 8 — Protocols & Progression */
(function () {
  const { useState } = React;
  const Icon = window.HTDIcon;
  const { useNav, PushView, SectionLabel, Panel } = window.HTDUI;
  const F = window.HTD_FIX;

  function ProtocolLibrary() {
    const nav = useNav(); const P = F.protocols;
    const [type, setType] = useState('ALL');
    const lib = P.library.filter(p => type==='ALL' || p.type===type);
    return (
      <PushView title="PROTOCOL LIBRARY">
        <SectionLabel style={{ marginTop:8 }}>PERSONA & DAY TRACKS</SectionLabel>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:9 }}>
          {P.tracks.map(t=>(
            <button key={t.name} onClick={()=> t.locked ? nav.push('FeatureGate',{feature:t.name}) : nav.push('ProgressionPlan')}
              style={{ textAlign:'left', cursor:'pointer', padding:13, background:'var(--panel)', borderRadius:'var(--r)',
                border:'1px solid '+(t.locked?'var(--hairline)':'var(--hairline-2)'), position:'relative', opacity:t.locked?0.7:1 }}>
              {t.locked && <Icon name="lock" size={14} color="var(--steel)" style={{ position:'absolute', top:12, right:12 }} />}
              <div className="label-mono">{t.tag}</div>
              <div style={{ fontFamily:'var(--display)', fontWeight:700, fontSize:22, marginTop:6 }}>{t.name}</div>
              <div className="label-mono" style={{ marginTop:6 }}>{t.days} DAYS</div>
              <div style={{ height:5, borderRadius:3, background:'var(--raised-2)', marginTop:9, overflow:'hidden' }}>
                <div style={{ width:(t.done/t.days*100)+'%', height:'100%', background:'var(--acid)' }} /></div>
            </button>))}
        </div>
        <SectionLabel>LIBRARY</SectionLabel>
        <div className="seg" style={{ flexWrap:'wrap' }}>
          {['ALL','PHYSICAL','MENTAL','RECOVERY'].map(t=>(
            <button key={t} className={'seg-item'+(type===t?' active':'')} onClick={()=>setType(t)}>{t}</button>))}</div>
        <Panel pad={false} style={{ marginTop:12 }}>
          {lib.map((p,i)=>(
            <button key={p.name} onClick={()=> p.locked ? nav.push('FeatureGate',{feature:p.name}) : nav.push('ProtocolDetail',{name:p.name})}
              className="row between" style={{ width:'100%', padding:'13px 14px', background:'none', border:'none',
                borderBottom:i<lib.length-1?'1px solid var(--hairline)':'none', cursor:'pointer', textAlign:'left' }}>
              <div className="row" style={{ gap:11 }}>
                <Icon name={p.type==='MENTAL'?'spark':p.type==='RECOVERY'?'droplet':'pulse'} size={17} color={p.locked?'var(--steel)':'var(--acid)'} />
                <div><div style={{ fontFamily:'var(--ui)', fontWeight:600, fontSize:14.5, color:p.locked?'var(--bone-muted)':'var(--bone)' }}>{p.name}</div>
                  <div className="label-mono" style={{ marginTop:2 }}>{p.type} · {p.proof}{p.cert?' · CERTIFIED':''}</div></div></div>
              <Icon name={p.locked?'lock':'chevronRight'} size={17} color="var(--steel)" /></button>))}
        </Panel>
      </PushView>
    );
  }

  function ProtocolDetail() {
    const d = F.protocols.detail;
    const Block = ({label, children}) => (<><SectionLabel>{label}</SectionLabel><Panel>{children}</Panel></>);
    const List = ({items, icon, color}) => items.map((x,i)=>(
      <div key={i} className="row" style={{ gap:9, padding:'5px 0', alignItems:'flex-start' }}>
        <Icon name={icon} size={15} color={color||'var(--acid)'} style={{ marginTop:2 }} /><span className="muted" style={{ fontSize:13, lineHeight:1.4 }}>{x}</span></div>));
    return (
      <PushView title="PROTOCOL" right={['share']}>
        <div className="label-mono acid" style={{ marginTop:8 }}>{d.type}</div>
        <div className="display-xl" style={{ fontSize:32, margin:'8px 0 4px' }}>{d.name}</div>
        <div className="row" style={{ gap:8, marginTop:8 }}>
          <span className="chip" style={{ color:'var(--acid)', borderColor:'var(--border-active)' }}><Icon name="shieldCheck" size={12} color="var(--acid)" />{d.cert}</span></div>
        <Block label="PURPOSE"><div className="muted" style={{ fontSize:13.5, lineHeight:1.55 }}>{d.purpose}</div></Block>
        <Block label="PROOF STANDARD"><div className="row" style={{ gap:9 }}><Icon name="gps" size={16} color="var(--acid)" />
          <span style={{ fontSize:13.5, color:'var(--bone-muted)' }}>{d.proof}</span></div></Block>
        <div className="row" style={{ gap:10, marginTop:14 }}>
          <Panel style={{ flex:1 }}><div className="label-mono">PROGRESSION</div><div className="muted" style={{ fontSize:12.5, marginTop:6, lineHeight:1.45 }}>{d.progression}</div></Panel>
          <Panel style={{ flex:1 }}><div className="label-mono">REGRESSION</div><div className="muted" style={{ fontSize:12.5, marginTop:6, lineHeight:1.45 }}>{d.regression}</div></Panel>
        </div>
        <Block label="CONTRAINDICATIONS"><List items={d.contra} icon="alert" color="var(--amber)" /></Block>
        <Block label="COACHING CUES"><List items={d.cues} icon="check" /></Block>
        <Block label="COMMON FAILURE MODES"><List items={d.failure} icon="x" color="var(--danger)" /></Block>
        <Block label="SUBSTITUTIONS"><List items={d.subs} icon="chevronRight" color="var(--steel)" /></Block>
        <div className="row between" style={{ marginTop:16, padding:'0 2px' }}>
          <span className="label-mono">EXPECTED RECOVERY COST</span><span className="label-mono amber-c">{d.recoveryCost}</span></div>
      </PushView>
    );
  }

  function ProgressionPlan() {
    const p = F.protocols.progression;
    return (
      <PushView title="PROGRESSION PLAN">
        <Panel glow style={{ marginTop:8 }}>
          <div className="label-mono">CURRENT CYCLE</div>
          <div className="display-lg" style={{ fontSize:20, marginTop:6, color:'var(--bone)' }}>{p.cycle}</div>
        </Panel>
        <SectionLabel>12-WEEK ROADMAP</SectionLabel>
        <Panel>
          <div className="row" style={{ gap:6, alignItems:'flex-end' }}>
            {p.markers.map(([m,st],i)=>(
              <div key={i} style={{ flex:1, textAlign:'center' }}>
                <div style={{ height: st==='now'?44:st==='done'?30:24, borderRadius:4, background: st==='done'?'var(--acid-deep)':st==='now'?'var(--acid)':'var(--raised-2)',
                  border:'1px solid '+(st==='next'?'var(--hairline-2)':'transparent') }} />
                <div className="label-mono" style={{ fontSize:7, marginTop:6, color: st==='now'?'var(--acid)':'var(--steel)' }}>{m}</div>
                <div className="label-mono" style={{ fontSize:7, color:'var(--steel-dim)' }}>W{i+1}</div></div>))}
          </div>
        </Panel>
        <div className="row" style={{ gap:10, marginTop:12 }}>
          <Panel style={{ flex:1 }}><div className="label-mono">READINESS ADJ</div>
            <div className="muted" style={{ fontSize:12.5, marginTop:6, lineHeight:1.4 }}>{p.readinessAdj}</div></Panel>
          <Panel style={{ flex:1 }}><div className="label-mono">STREAK RISK</div>
            <div style={{ fontFamily:'var(--display)', fontWeight:700, fontSize:18, color:'var(--danger)', marginTop:6 }}>{p.streakRisk}</div></Panel>
        </div>
        <SectionLabel>UPCOMING MISSIONS</SectionLabel>
        <Panel pad={false}>{p.upcoming.map(([m,w],i)=>(
          <div key={i} className="row between" style={{ padding:'13px 14px', borderBottom:i<p.upcoming.length-1?'1px solid var(--hairline)':'none' }}>
            <span style={{ fontFamily:'var(--ui)', fontWeight:600, fontSize:14 }}>{m}</span>
            <span className="label-mono">{w}</span></div>))}</Panel>
      </PushView>
    );
  }

  window.HTDContent = { ProtocolLibrary, ProtocolDetail, ProgressionPlan };
})();