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

  function Ring({ value, display }) {
    const r = 52, c = 2*Math.PI*r, off = c*(1-value/100);
    return (
      <svg width="140" height="140" viewBox="0 0 140 140">
        <circle cx="70" cy="70" r={r} fill="none" stroke="var(--raised-2)" strokeWidth="9" />
        <circle className="ring-sweep" cx="70" cy="70" r={r} fill="none" stroke="var(--acid)" strokeWidth="9" strokeLinecap="round"
          strokeDasharray={c} strokeDashoffset={off} transform="rotate(-90 70 70)" />
        <text x="70" y="68" textAnchor="middle" fontFamily="var(--display)" fontWeight="700" fontSize="40" fill="var(--acid)">{display!=null?display:value}</text>
        <text x="70" y="88" textAnchor="middle" fontFamily="var(--mono)" fontSize="9" letterSpacing="1.5" fill="var(--steel)">/ 100</text>
      </svg>
    );
  }

  function ReadinessDetail() {
    const r = F.readiness;
    const toast = window.HTDUI.toast;
    const [deload, setDeload] = React.useState(false);
    const disp = Math.round(window.HTDMotion.useCountUp(r.score));
    return (
      <PushView title="READINESS">
        <Panel glow style={{ marginTop:8, textAlign:'center', paddingTop:18, paddingBottom:14 }}>
          <Ring value={r.score} display={disp} />
          <div className="row" style={{ justifyContent:'center', gap:18, marginTop:6 }}>
            <span className="label-mono acid">{r.state}</span>
            <span className="label-mono">FATIGUE {r.fatigue}</span>
          </div>
          <div className="label-mono" style={{ marginTop:8, color:'var(--steel)' }}>SOURCE · {r.source}</div>
        </Panel>
        <SectionLabel>SIGNALS</SectionLabel>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:10 }}>
          {r.metrics.map(([l,v,d])=>(
            <Panel key={l}><div className="label-mono">{l}</div>
              <div style={{ fontFamily:'var(--display)', fontWeight:700, fontSize:22, marginTop:5 }}>{v}</div>
              <div className="label-mono acid" style={{ marginTop:2 }}>{d}</div></Panel>))}
        </div>
        <SectionLabel>MISSION ADJUSTMENT</SectionLabel>
        <Panel glow><div className="row" style={{ gap:11 }}><Icon name="pulse" size={18} color="var(--acid)" />
          <div className="muted" style={{ fontSize:13, lineHeight:1.5 }}>{r.adjust}</div></div></Panel>
        <div className="row" style={{ gap:10, marginTop:16 }}>
          <button className="btn-ghost" onClick={()=>toast('MANUAL READINESS LOGGED · ADJUSTS TODAY')}>LOG MANUAL READINESS</button>
          <button className="btn-ghost" style={deload?{ borderColor:'var(--border-active)', color:'var(--acid)' }:{}}
            onClick={()=>{ setDeload(d=>!d); toast(deload?'DELOAD CANCELLED':'DELOAD ACCEPTED · TOMORROW SCALES DOWN'); }}>{deload?'✓ DELOAD SET':'ACCEPT DELOAD'}</button>
        </div>
      </PushView>
    );
  }

  function WearableConnections() {
    const [conn, setConn] = useState(()=>{ const o={}; F.readiness.providers.forEach(([n,s])=>o[n]=s==='CONNECTED'); return o; });
    return (
      <PushView title="WEARABLES">
        <div className="muted" style={{ fontSize:13, marginTop:10, lineHeight:1.5 }}>
          Sleep, HRV, strain, and recovery adjust mission intensity. Connect a provider or import manually.</div>
        <SectionLabel>PROVIDERS</SectionLabel>
        <Panel pad={false}>{F.readiness.providers.map(([name,status],i)=>{
          const blocked = status==='PROVIDER PENDING', always = status==='ALWAYS';
          const c = conn[name];
          return (
            <div key={name} className="row between" style={{ padding:'14px', borderBottom:i<F.readiness.providers.length-1?'1px solid var(--hairline)':'none' }}>
              <div className="row" style={{ gap:12 }}>
                <div style={{ width:34, height:34, borderRadius:8, background:'var(--raised-2)', border:'1px solid var(--hairline-2)', display:'grid', placeItems:'center' }}>
                  <Icon name={always?'upload':'watch'} size={17} color={c?'var(--acid)':'var(--bone-muted)'} /></div>
                <div><div style={{ fontFamily:'var(--ui)', fontWeight:600, fontSize:14.5, color:'var(--bone)' }}>{name}</div>
                  <div className="label-mono" style={{ color: blocked?'var(--amber)':c?'var(--acid)':'var(--steel)' }}>{c?'CONNECTED':status}</div></div></div>
              <button onClick={()=>!blocked && setConn(s=>({...s,[name]:!s[name]}))} disabled={blocked}
                className="label-mono" style={{ padding:'8px 13px', borderRadius:6, cursor: blocked?'not-allowed':'pointer',
                  border:'1px solid '+(c?'var(--acid)':'var(--hairline-2)'), background: c?'rgba(152,255,16,0.08)':'transparent',
                  color: blocked?'var(--steel)':c?'var(--acid)':'var(--bone-muted)' }}>
                {blocked?'PENDING':always?'IMPORT':c?'LINKED':'CONNECT'}</button>
            </div>);
        })}</Panel>
        <div className="label-mono" style={{ marginTop:14, color:'var(--steel)', textAlign:'center' }}>● WHOOP OAUTH AWAITING PROVIDER KEYS</div>
      </PushView>
    );
  }

  window.HTDReadiness = { ReadinessDetail, WearableConnections };
})();