/* ============================================================================
   MATRIA, Fragment Detail: quote, context, lineage, practice, reflection,
   source. A small door into bigger knowledge. Editorial, never motivational.
   ============================================================================ */

function FragmentQuote({f, size=22, dark}){
  const color=dark?'var(--ctext)':'var(--ink)';
  return f.verified
    ? <p style={{fontFamily:'var(--font-display)',fontSize:size,lineHeight:1.34,color,fontWeight:500,margin:0}}>&ldquo;{f.quote_text}&rdquo;</p>
    : <p style={{fontFamily:'var(--font-display)',fontSize:size,lineHeight:1.38,color,fontWeight:500,margin:0,fontStyle:'italic'}}>{f.quote_text}</p>;
}

function FragmentDetail({ctx}){
  const F=window.MATRIA_FRAGMENTS;
  const D=window.MATRIA;
  const S=useMStore();
  const f=F.items[ctx.fragmentId]||F.daily();
  const saved=S.isFragmentSaved(f.id);
  const relQs=(f.related_questions||[]).map(id=>D.QUESTIONS[id]).filter(Boolean);
  const relNodes=(f.related_nodes||[]).map(D.get).filter(Boolean);
  return (
    <div className="screen matria-cream">
      <StatusBar/>
      <TopBar onBack={()=>ctx.back()} title="Fragment"
        right={<button onClick={()=>S.toggleFragment(f.id)} style={{background:'none',border:'none',padding:0,cursor:'pointer',color:saved?'var(--gold-line)':'var(--ink)'}}><Icon name={saved?'bookmark':'save'} size={18}/></button>}/>
      <div className="s-body pad" style={{paddingTop:12}}>
        {/* the fragment, like a museum card */}
        {!f.verified && <div className="label" style={{fontSize:8.5,marginBottom:8,color:'var(--gold-line)'}}>From Matria · not verbatim</div>}
        <FragmentQuote f={f} size={23}/>
        <div style={{margin:'14px 0 0'}}>
          <div style={{fontSize:13.5,color:'#46433d',fontWeight:700}}>{f.speaker_or_source}</div>
          <div style={{fontSize:11,color:'var(--ink-faint)',marginTop:3}}>{f.region} · {f.period}</div>
        </div>
        <div style={{display:'flex',flexWrap:'wrap',gap:7,margin:'10px 0 0'}}>
          <span className="tag" style={{height:22,fontSize:9.5}}>{f.context_label}</span>
          <span className="tag" style={{height:22,fontSize:9.5}}>{f.rights_status}</span>
        </div>
        <hr className="rule" style={{margin:'16px 0 14px'}}/>
        <div className="label" style={{marginBottom:7}}>The world it came from</div>
        <p className="bodytext" style={{fontSize:12.5}}>{f.short_context}</p>
        <div className="label" style={{margin:'15px 0 7px'}}>Why it matters</div>
        <p className="bodytext" style={{fontSize:12.5}}>{f.why_it_matters}</p>
        {/* lineage */}
        {relNodes.length>0 && <>
          <div className="label" style={{margin:'15px 0 9px'}}>Open the lineage</div>
          <div style={{display:'flex',flexWrap:'wrap',gap:7}}>
            {relNodes.map(n=>(
              <span key={n.id} className="tag" style={{cursor:'pointer',height:25,fontSize:10.5}} onClick={()=>ctx.openNode(n.id)}>{n.title}</span>
            ))}
          </div>
        </>}
        {/* related questions */}
        {relQs.length>0 && <>
          <div className="label" style={{margin:'15px 0 9px'}}>Questions this fragment answers to</div>
          <div style={{display:'flex',flexDirection:'column',gap:8}}>
            {relQs.map(q=>(
              <div key={q.id} onClick={()=>{ctx.setQuestion(q.id);ctx.ask(q.text);}} style={{background:'var(--cream-card)',border:'1px solid var(--line-cream)',borderRadius:12,padding:'10px 13px',fontSize:12.5,color:'#46433d',cursor:'pointer',lineHeight:1.4}}>{q.text}</div>
            ))}
          </div>
        </>}
        {/* practice + reflection */}
        <div style={{background:'var(--cream-card-2)',border:'1px solid var(--gold-line)',borderRadius:13,padding:'13px 15px',marginTop:16}}>
          <div className="label" style={{fontSize:9,marginBottom:5}}>A practice</div>
          <p style={{fontSize:12.5,lineHeight:1.55,color:'#46433d',margin:0}}>{f.practice}</p>
          <div className="label" style={{fontSize:9,margin:'12px 0 5px'}}>A question to carry</div>
          <p style={{fontFamily:'var(--font-display)',fontStyle:'italic',fontSize:13.5,lineHeight:1.5,color:'var(--ink)',margin:0}}>{f.reflection_question}</p>
        </div>
        {f.echoes && <button className="btn btn-ghost-dark" style={{border:'1px solid var(--line-gold)',color:'var(--gold-line)',marginTop:13,height:44,fontSize:13}} onClick={()=>ctx.nav('Echoes')}>Open through every lens</button>}
        {/* source */}
        <div className="label" style={{margin:'16px 0 5px'}}>Source</div>
        <p style={{fontSize:12.5,color:'var(--ink)',margin:0,fontWeight:700}}>{f.source_title}</p>
        <p style={{fontSize:11,color:'var(--ink-soft)',margin:'5px 0 0',lineHeight:1.5,fontStyle:'italic'}}>{f.source_note}</p>
        <div style={{display:'flex',gap:9,margin:'18px 0 8px'}}>
          <button className="btn btn-navy" style={{height:48}} onClick={()=>S.toggleFragment(f.id)}>{saved?'Saved to Sanctuary ✓':'Save Fragment'}</button>
        </div>
        <button className="btn" style={{background:'transparent',border:'1px solid var(--line-cream)',color:'var(--ink)',height:46,fontSize:13,margin:'0 0 14px'}} onClick={()=>ctx.nav('Journal')}>Write with this fragment</button>
      </div>
    </div>
  );
}

Object.assign(window,{FragmentDetail,FragmentQuote});