/* ============================================================================
   MATRIA, Practice Atlas screen.
   80 practices · 7 categories · evidence labelled, never equally validated.
   ============================================================================ */

const EV_COLORS = {
  Strong:'#7da883', Moderate:'#c9b07a', Emerging:'#9bb8c8',
  Mixed:'#cf8f6a', Traditional:'#c89bb0', Cultural:'#a99bc8',
};

function EvTag({level, small, dark}){
  const c=EV_COLORS[level]||'#999';
  // On dark surfaces the evidence colour carries the text (each label is
  // colour-coded); on light surfaces dark ink reads best.
  return <span style={{display:'inline-flex',alignItems:'center',gap:6,height:small?22:26,
    padding:small?'0 10px':'0 12px',flex:'none',whiteSpace:'nowrap',
    borderRadius:999,fontSize:small?10:10.5,fontWeight:700,letterSpacing:'.04em',
    background:dark?c+'2b':c+'22',border:'1px solid '+(dark?c+'8c':c+'77'),
    color:dark?c:'#46433d'}}>
    <span style={{width:6,height:6,borderRadius:'50%',background:c,flex:'none'}}/>{level}</span>;
}

function PracticeAtlas({ctx}){
  const A=window.MATRIA_PRACTICES;
  const [cat,setCat]=useState('All');
  const [ev,setEv]=useState('All');
  const [open,setOpen]=useState(null);
  const cats=['All',...A.meta.categories];
  const evs=['All','Strong','Moderate','Emerging','Mixed','Traditional','Cultural'];
  const list=A.practices.filter(p=>(cat==='All'||p.category===cat)&&(ev==='All'||p.evidence_level===ev));
  return (
    <div className="screen matria-cream">
      <StatusBar/>
      <TopBar onBack={()=>ctx.back()} title="Practice Atlas"/>
      <div className="s-body matria-flow" style={{paddingBottom:8}}>
        <div className="pad matria-section" style={{paddingTop:6}}>
          <h1 className="title">Practice Atlas</h1>
          <p className="lead" style={{marginTop:6}}>{A.meta.count} practices, labelled by evidence. Pilates and herbal tradition are not the same kind of claim, so Matria never pretends they are.</p>
          <div className="chip-row section-controls">
            {cats.map(c=><button key={c} className={'chip'+(c===cat?' on':'')} style={{height:27,fontSize:11.5}} onClick={()=>{setCat(c);setOpen(null);}}>{c}</button>)}
          </div>
          <div className="chip-row chip-row--tight section-controls">
            {evs.map(e=>(
              <button key={e} onClick={()=>{setEv(e);setOpen(null);}} style={{height:24,padding:'0 9px',borderRadius:7,fontSize:9.5,fontWeight:700,
                cursor:'pointer',fontFamily:'var(--font-body)',letterSpacing:'.03em',
                background:e===ev?(EV_COLORS[e]||'#46433d')+'33':'transparent',
                border:'1px solid '+(e===ev?(EV_COLORS[e]||'#46433d'):'var(--line-cream)'),
                color:'#5a5246'}}>
                {e!=='All'&&<span style={{display:'inline-block',width:6,height:6,borderRadius:'50%',background:EV_COLORS[e],marginRight:5}}/>}{e}
              </button>
            ))}
          </div>
          <div className="meta matria-section__content" style={{fontSize:10.5}}>{list.length} practices</div>
        </div>
        <div className="pad matria-list">
          {list.map(p=>{
            const isOpen=open===p.id;
            return (
              <div key={p.id} className="card" style={{borderColor:isOpen?'var(--gold-line)':undefined,overflow:'hidden'}}>
                <div style={{display:'flex',alignItems:'center',gap:11,padding:'11px 13px',cursor:'pointer'}} onClick={()=>setOpen(isOpen?null:p.id)}>
                  <div style={{flex:1}}>
                    <div className="section-title" style={{fontFamily:'var(--font-display)',fontSize:14.5,color:'var(--ink)',fontWeight:600}}>{p.name}</div>
                    <div className="meta" style={{fontSize:10.5,marginTop:2}}>{p.category} · {p.tradition}</div>
                  </div>
                  <EvTag level={p.evidence_level} small/>
                  <span style={{color:'var(--ink-faint)',transform:isOpen?'rotate(90deg)':'none',transition:'transform .2s'}}><Icon name="chevron" size={14}/></span>
                </div>
                {isOpen && (
                  <div style={{padding:'0 13px 13px',borderTop:'1px solid var(--line-cream-soft)'}}>
                    <div className="label" style={{fontSize:8.5,margin:'11px 0 6px'}}>Best for</div>
                    <div style={{display:'flex',flexWrap:'wrap',gap:6}}>
                      {p.best_for.map(b=><span key={b} className="tag" style={{height:22,fontSize:10}}>{b}</span>)}
                    </div>
                    <div className="label" style={{fontSize:8.5,margin:'11px 0 4px'}}>When to use</div>
                    <p style={{fontSize:12,lineHeight:1.5,color:'#46433d',margin:0}}>{p.use_when}</p>
                    {p.avoid_when.length>0 && <>
                      <div className="label" style={{fontSize:8.5,margin:'11px 0 4px',color:'#a8542f'}}>When not to</div>
                      {p.avoid_when.map(a=><p key={a} style={{fontSize:11.5,lineHeight:1.45,color:'#8a4a2e',margin:'0 0 3px'}}>{a}</p>)}
                    </>}
                    {p.note && <p style={{fontSize:11.5,lineHeight:1.5,color:'var(--ink-soft)',fontStyle:'italic',margin:'10px 0 0'}}>{p.note}</p>}
                    <div className="label" style={{fontSize:8.5,margin:'11px 0 4px'}}>Sources</div>
                    {p.sources.map(s=><div key={s} style={{fontSize:10.5,color:'var(--ink-soft)',lineHeight:1.45}}>{s}</div>)}
                  </div>
                )}
              </div>
            );
          })}
        </div>
        <div className="pad">
          <p style={{fontSize:10.5,color:'var(--ink-faint)',fontStyle:'italic',lineHeight:1.55,margin:'16px 0 12px'}}>
            Practices are invitations, not homework. Cultural traditions appear as knowledge systems, not prescriptions.
            Matria never offers manifestation, detoxes, or astrology as health advice.</p>
        </div>
      </div>
    </div>
  );
}

/* Four pathways block, used on the answer screen */
function PracticePathways({ctx}){
  const A=window.MATRIA_PRACTICES;
  const path=[['Scientific','body_scan'],['Movement','pilates'],['Traditional','yoga_nidra'],['Reflective','letter_never_sent']];
  return (
    <div>
      <div className="label" style={{marginBottom:9}}>Practice pathways</div>
      <p className="meta" style={{margin:'0 0 11px'}}>Several doors, not one prescription, choose the kind of practice that fits today.</p>
      <div style={{display:'flex',flexDirection:'column',gap:8}}>
        {path.map(([kind,id])=>{
          const p=A.practices.find(x=>x.id===id); if(!p) return null;
          return (
            <div key={id} className="dcard" style={{display:'flex',alignItems:'center',gap:11,padding:'11px 14px',cursor:'pointer',borderRadius:12}}
              onClick={()=>ctx.nav('PracticeAtlas')}>
              <div style={{flex:1,minWidth:0}}>
                <div style={{fontSize:9,fontWeight:700,letterSpacing:'.1em',textTransform:'uppercase',color:'var(--gold)',marginBottom:3}}>{kind}</div>
                <div className="meta" style={{fontSize:13,color:'var(--ctext)',lineHeight:1.25}}>{p.name}</div>
              </div>
              <EvTag level={p.evidence_level} small dark/>
              <span style={{color:'var(--ctext-faint)',flex:'none'}}><Icon name="chevron" size={14}/></span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window,{PracticeAtlas,PracticePathways,EvTag,EV_COLORS});