/* HTD Program 7 — AI Resilience Architect (mock #04) */
(function () {
  const { useState } = React;
  const Icon = window.HTDIcon;
  const { useNav, PushView, SectionLabel, Panel, UTabs } = window.HTDUI;
  const F = window.HTD_FIX;

  function RadarChart({ data, top10 }) {
    const size = 280, cx = size/2, cy = size/2 + 6, R = 95;
    const N = data.length;
    const pt = (i, val) => {
      const a = (-90 + i*(360/N)) * Math.PI/180;
      const r = R * val/100;
      return [cx + r*Math.cos(a), cy + r*Math.sin(a)];
    };
    const poly = (vals) => vals.map((v,i)=>pt(i,v).join(',')).join(' ');
    const rings = [0.33,0.66,1].map(f => data.map((_,i)=>pt(i,f*100).join(',')).join(' '));
    return (
      <svg width="100%" viewBox={`-30 0 ${size+60} ${size+44}`} style={{ display:'block' }}>
        {rings.map((r,i)=><polygon key={i} points={r} fill="none" stroke="var(--hairline-2)" strokeWidth="1" />)}
        {data.map((_,i)=>{ const [x,y]=pt(i,100); return <line key={i} x1={cx} y1={cy} x2={x} y2={y} stroke="var(--hairline)" strokeWidth="1" />; })}
        <polygon points={poly(top10)} fill="none" stroke="var(--steel)" strokeWidth="1.4" strokeDasharray="3 3" />
        <polygon className="radar-you" points={poly(data.map(d=>d.v))} fill="rgba(152,255,16,0.14)" stroke="var(--acid)" strokeWidth="2" />
        {data.map((d,i)=>{ const [x,y]=pt(i,d.v); return <circle key={i} cx={x} cy={y} r="3" fill="var(--acid)" />; })}
        {data.map((d,i)=>{
          const [x,y]=pt(i,118); const top = i===0, bottom = i===3;
          return (
            <g key={i}>
              <text x={x} y={y-2} fill="var(--bone-muted)" fontSize="8.5" fontFamily="var(--mono)" letterSpacing="0.5"
                textAnchor={x<cx-10?'end':x>cx+10?'start':'middle'}>
                {d.k.split(' ').map((w,j)=><tspan key={j} x={x} dy={j?9:0}>{w}</tspan>)}
              </text>
              <text x={x} y={y + (d.k.includes(' ')?20:12)} fill="var(--acid)" fontSize="12" fontWeight="700" fontFamily="var(--display)"
                textAnchor={x<cx-10?'end':x>cx+10?'start':'middle'}>{d.v}</text>
            </g>
          );
        })}
      </svg>
    );
  }

  function TBICard({ label, lines, color }) {
    return (
      <div style={{ flex:1, borderLeft:'1px solid var(--hairline)', paddingLeft:11 }}>
        <div className="label-mono" style={{ color: color||'var(--amber)' }}>{label}</div>
        {lines.map((l,i)=><div key={i} style={{ fontFamily:'var(--ui)', fontWeight:500, fontSize:12.5, color:'var(--bone-muted)', marginTop:i?2:6 }}>{l}</div>)}
      </div>
    );
  }

  function AIArchitect({ asTab }) {
    const nav = useNav();
    const [tab, setTab] = useState('ANALYZE');
    const [flagged, setFlagged] = useState(false);
    const ai = F.ai;
    const plan = (window.HTD_TWEAKS && window.HTD_TWEAKS.plan) || 'PRO';
    const noData = !!(window.HTD_TWEAKS && window.HTD_TWEAKS.emptyStates);

    // premium-locked variant (spec screen 19 state)
    if (plan === 'FREE') {
      const lock = (
        <div style={{ textAlign:'center', padding:'46px 22px 0' }} className="screen-enter">
          <div style={{ width:68, height:68, borderRadius:'50%', margin:'0 auto 18px', display:'grid', placeItems:'center', border:'1px solid var(--hairline-2)' }}>
            <Icon name="lock" size={28} color="var(--steel)" /></div>
          <div className="label-mono acid">PRO FEATURE</div>
          <div className="display-lg" style={{ fontSize:24, margin:'10px 0' }}>AI RESILIENCE ARCHITECT</div>
          <div className="muted" style={{ fontSize:13.5, lineHeight:1.55, maxWidth:280, margin:'0 auto' }}>
            Weakness radar, avoidance detection, and tomorrow’s prescription — built from your proof record.</div>
          <button className="btn-primary" style={{ marginTop:24 }} onClick={()=>nav.push('EntitlementsPricing')}>START PRO</button>
          <div className="label-mono" style={{ marginTop:14, color:'var(--steel)' }}>YOUR DAILY MISSION STAYS FREE. ALWAYS.</div>
        </div>);
      return asTab ? lock : <PushView title="AI RESILIENCE ARCHITECT">{lock}</PushView>;
    }

    // no-data-yet variant
    if (noData) {
      const empty = (
        <div style={{ textAlign:'center', padding:'46px 22px 0' }} className="screen-enter">
          <div style={{ width:68, height:68, borderRadius:'50%', margin:'0 auto 18px', display:'grid', placeItems:'center', border:'1px solid var(--hairline-2)' }}>
            <Icon name="pulse" size={28} color="var(--steel)" /></div>
          <div className="display-lg" style={{ fontSize:24 }}>NO DATA YET</div>
          <div className="muted" style={{ fontSize:13.5, lineHeight:1.55, maxWidth:280, margin:'12px auto 0' }}>
            The Architect needs 3 completed missions to read your patterns. Every proof sharpens the picture.</div>
          <button className="btn-primary" style={{ marginTop:24 }} onClick={()=> asTab ? nav.go('home') : nav.popToRoot()}>START TODAY’S MISSION</button>
        </div>);
      return asTab ? empty : <PushView title="AI RESILIENCE ARCHITECT">{empty}</PushView>;
    }

    const foot = tab==='ASK' ? null : <button className="btn-primary" onClick={()=> asTab ? setTab('ANALYZE') : nav.pop()}>LOCK IN PLAN<span className="sub">MISSION SCHEDULED FOR TOMORROW</span></button>;
    const inner = (<>
        <UTabs items={['ANALYZE','INSIGHTS','COACH','ASK']} value={tab} onChange={setTab} style={{ marginBottom:6 }} />
        {tab==='ASK' && <div style={{ height: asTab? 560 : 520 }}><window.HTDCoachChat.CoachChat /></div>}

        {tab==='ANALYZE' && <div className="screen-enter">
          <Panel style={{ marginTop:14 }}>
            <div className="row between"><div className="label-mono" style={{ color:'var(--bone)' }}>WEAKNESS PROFILE</div>
              <div className="label-mono">UPDATED {ai.updated}</div></div>
            <RadarChart data={ai.radar} top10={ai.top10} />
            <div className="row" style={{ gap:18, justifyContent:'center', marginTop:2 }}>
              <span className="label-mono" style={{ display:'flex', alignItems:'center', gap:6, color:'var(--acid)' }}><span style={{ width:14, height:2, background:'var(--acid)' }} />YOU</span>
              <span className="label-mono" style={{ display:'flex', alignItems:'center', gap:6 }}><span style={{ width:14, height:2, background:'var(--steel)' }} />TOP 10%</span>
            </div>
          </Panel>
          <SectionLabel>AVOIDANCE PATTERN</SectionLabel>
          <Panel><div className="muted" style={{ fontSize:13, marginBottom:12 }}>{ai.avoidance.line}</div>
            <div className="row" style={{ gap:0 }}>
              <TBICard label="TRIGGER" lines={ai.avoidance.trigger} />
              <TBICard label="BEHAVIOR" lines={ai.avoidance.behavior} />
              <TBICard label="IMPACT" lines={ai.avoidance.impact} />
            </div></Panel>
        </div>}

        {tab==='INSIGHTS' && <div className="screen-enter" style={{ paddingTop:8 }}>
          {ai.insights.map(([l,v],i)=>(
            <Panel key={i} style={{ marginBottom:10 }}><div className="label-mono acid">{l}</div>
              <div style={{ fontFamily:'var(--ui)', fontWeight:500, fontSize:14, color:'var(--bone-muted)', marginTop:7, lineHeight:1.45 }}>{v}</div></Panel>))}
          <SectionLabel>RECOMMENDATION LEARNING</SectionLabel>
          <Panel glow><div className="row between" style={{ marginBottom:10 }}>
            <span className="label-mono" style={{ color:'var(--bone)' }}>ENGINE POSTURE</span><span className="label-mono acid">● CALIBRATED</span></div>
            <div className="row" style={{ gap:5 }}>{['COLD START','LEARNING','CALIBRATED','GUARDRAILED'].map((s,i)=>(
              <div key={i} style={{ flex:1 }}><div style={{ height:4, borderRadius:2, background: i<=2?'var(--acid)':'var(--raised-2)' }} />
                <div className="label-mono" style={{ fontSize:7.5, marginTop:5, textAlign:'center', color: i===2?'var(--acid)':'var(--steel)' }}>{s}</div></div>))}</div>
            <div className="muted" style={{ fontSize:12.5, marginTop:14, lineHeight:1.5 }}>{ai.coachLine}</div></Panel>
        </div>}

        {tab==='COACH' && <div className="screen-enter" style={{ paddingTop:8 }}>
          <Panel glow>
            <div className="label-mono" style={{ color:'var(--bone)' }}>TOMORROW'S PRESCRIPTION</div>
            <div className="row" style={{ gap:14, marginTop:12 }}>
              <div style={{ flex:1 }}>
                <div className="label-mono">PRIMARY FOCUS</div>
                <div className="display-lg acid" style={{ fontSize:18, marginTop:5 }}>{ai.prescription.focus}</div>
                <div className="label-mono" style={{ marginTop:14 }}>MISSION</div>
                {ai.prescription.mission.map((m,i)=><div key={i} style={{ fontFamily:'var(--display)', fontWeight:600, fontSize:15, color: i?'var(--bone)':'var(--acid)', marginTop:i?2:5 }}>{m}</div>)}
              </div>
              <div style={{ width:1, background:'var(--hairline)' }} />
              <div style={{ flex:1 }}>
                <div className="label-mono">RITUAL</div>
                {ai.prescription.ritual.map((r,i)=>(<div key={i} className="row" style={{ gap:8, marginTop:i?7:7 }}>
                  <Icon name={['moon','x','droplet'][i]} size={14} color="var(--bone-muted)" />
                  <span style={{ fontSize:13, color:'var(--bone-muted)' }}>{r}</span></div>))}
              </div>
            </div>
          </Panel>
          <button className="btn-ghost" style={{ marginTop:12 }} onClick={()=>nav.push('MissionDetail')}>REQUEST ALTERNATIVE MISSION</button>
          <button className="btn-ghost" style={{ marginTop:10, color: flagged?'var(--acid)':'var(--steel)', borderColor: flagged?'var(--border-active)':'var(--hairline-2)' }}
            onClick={()=>setFlagged(f=>!f)}>{flagged?'✓ FEEDBACK LOGGED · ENGINE WILL ADJUST':'NOT ACCURATE · FLAG THIS READ'}</button>
          <SectionLabel>WHY THIS MISSION</SectionLabel>
          <Panel><div className="muted" style={{ fontSize:13, lineHeight:1.55 }}>
            Mental toughness is your lowest axis (54) and your avoidance pattern targets early efforts. A pre-dawn Z2 run under fatigue builds exactly the capacity you skip.</div></Panel>
          <div className="label-mono" style={{ marginTop:14, color:'var(--steel)', textAlign:'center' }}>GUIDANCE · NOT MEDICAL ADVICE · RESPECTS YOUR CONSTRAINTS</div>
        </div>}
      </>);

    if (asTab) return (
      <div className="screen-enter">
        {inner}
        {foot && <div style={{ marginTop:18 }}>{foot}</div>}
      </div>
    );
    return (
      <PushView title="AI RESILIENCE ARCHITECT" right={['spark']} footer={foot}>
        {inner}
      </PushView>
    );
  }

  function CoachTab() { return <AIArchitect asTab={true} />; }

  window.HTDAI = { AIArchitect, CoachTab };
})();
