/* ───────────────────────────────────────────────────────────
   results.jsx — session results: ranking + cut-line + item detail
   Exports: ResultsScreen, ItemDetail
   ─────────────────────────────────────────────────────────── */

function ResultsScreen({ session, threshold=0.5, onBack }){
  const [sel,setSel]=useState(null);
  const ranked=useMemo(()=> [...session.items].sort((a,b)=> b.score-a.score || a.name.localeCompare(b.name)),[session]);
  const kept=ranked.filter(i=>verdict(i.score,threshold)==='keep');
  const given=ranked.filter(i=>verdict(i.score,threshold)==='give');
  const firstGiveIdx=ranked.findIndex(i=>verdict(i.score,threshold)==='give');

  return (
    <div className="app-scroll" style={{ minHeight:'100%', background:'var(--cream)' }}>
      {/* hero */}
      <div style={{ background:'linear-gradient(150deg, #0a2e63 0%, #001a44 100%)', padding:'54px 22px 26px', position:'relative', overflow:'hidden' }}>
        <svg viewBox="0 0 200 200" style={{ position:'absolute', right:-40, top:-20, width:200, opacity:.12 }}>
          {[40,70,100].map((r,i)=><circle key={i} cx="100" cy="100" r={r} fill="none" stroke="#a8d2e0" strokeWidth="1.2"/>)}
        </svg>
        <BackBar onBack={onBack} dark right={<span className="eyebrow" style={{color:'rgba(255,255,255,.5)'}}>{relDay(session.date)}</span>}/>
        <div style={{ display:'flex', alignItems:'center', gap:20, position:'relative' }}>
          <div style={{ background:'#fff', borderRadius:'50%', padding:6 }}>
            <Donut kept={kept.length} given={given.length} size={120} stroke={16}/>
          </div>
          <div style={{ flex:1 }}>
            <div className="eyebrow" style={{ color:'var(--sky)', marginBottom:6 }}>{secLabel(session)} · {session.title}</div>
            <div className="serif" style={{ fontSize:25, color:'#fff', fontWeight:500, lineHeight:1.1 }}>{kept.length} restano,<br/>{given.length} vanno via</div>
          </div>
        </div>
        <div style={{ display:'flex', gap:0, marginTop:22, position:'relative' }}>
          {[['Capi',session.items.length],['Tenuti',kept.length],['Via',given.length],['Tempo',Math.round((session.elapsedSec||0)/60)+'m']].map(([l,v],i)=>(
            <div key={l} style={{ flex:1, textAlign:'center', borderLeft: i?'1px solid rgba(255,255,255,.14)':'none' }}>
              <div className="serif" style={{ fontSize:22, color:'#fff' }}>{v}</div>
              <div style={{ fontSize:10.5, color:'rgba(255,255,255,.55)', letterSpacing:'.06em', textTransform:'uppercase', fontWeight:700, marginTop:2 }}>{l}</div>
            </div>
          ))}
        </div>
      </div>

      {/* ranking */}
      <div style={{ padding:'22px 18px 40px' }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:6 }}>
          <h2 className="serif" style={{ fontSize:20, color:'var(--navy)', margin:0 }}>La classifica</h2>
          <span style={{ fontSize:12, color:'var(--ink-faint)' }}>tocca un capo</span>
        </div>
        <p style={{ fontSize:13, color:'var(--ink-soft)', margin:'0 0 16px', lineHeight:1.45 }}>
          Dal capo che più ti somiglia a quello da cui liberarti. Chi sta appena sopra la linea merita un secondo pensiero.
        </p>

        <div style={{ display:'flex', flexDirection:'column', gap:9 }}>
          {ranked.map((it,idx)=>(
            <React.Fragment key={it.id}>
              {idx===firstGiveIdx && firstGiveIdx>0 && <CutLine/>}
              <RankRow it={it} rank={idx+1} threshold={threshold} onClick={()=>setSel(it)}/>
            </React.Fragment>
          ))}
          {firstGiveIdx===0 && <CutLine note="Tutti i capi sono sotto la linea"/>}
        </div>
      </div>

      <Sidebar open={!!sel} onClose={()=>setSel(null)}>
        {sel && <ItemDetail item={sel} threshold={threshold} onClose={()=>setSel(null)}/>}
      </Sidebar>
    </div>
  );
}

function CutLine({ note }){
  return (
    <div style={{ display:'flex', alignItems:'center', gap:10, padding:'8px 2px', margin:'2px 0' }}>
      <div style={{ flex:1, height:1.5, background:'repeating-linear-gradient(90deg, var(--magenta) 0 7px, transparent 7px 13px)', opacity:.7 }}/>
      <span style={{ fontSize:10.5, fontWeight:800, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--magenta)', display:'flex', alignItems:'center', gap:5 }}>
        {Icon.gift({ size:13, color:'var(--magenta)', sw:2 })} {note||'Sotto: lascia andare'}
      </span>
      <div style={{ flex:1, height:1.5, background:'repeating-linear-gradient(90deg, var(--magenta) 0 7px, transparent 7px 13px)', opacity:.7 }}/>
    </div>
  );
}

function RankRow({ it, rank, threshold, onClick }){
  const keep=verdict(it.score,threshold)==='keep';
  const borderline = keep && it.score <= threshold+1;
  return (
    <button onClick={onClick} className="card" style={{ width:'100%', border:'none', cursor:'pointer', textAlign:'left',
      display:'flex', alignItems:'center', gap:12, padding:'11px 13px',
      opacity: keep?1:0.92, background: keep?'var(--paper)':'var(--blush-200)' }}>
      <span className="serif" style={{ fontSize:15, color:'var(--ink-faint)', width:20, textAlign:'center', flexShrink:0 }}>{rank}</span>
      <GarmentSwatch item={it} size={44} radius={11}/>
      <div style={{ flex:1, minWidth:0 }}>
        <div style={{ fontSize:14.5, fontWeight:700, color:'var(--navy)', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{it.name}</div>
        <div style={{ display:'flex', alignItems:'center', gap:7, marginTop:3 }}>
          <span style={{ fontSize:11.5, color:'var(--ink-soft)' }}>{catById(it.category).label}</span>
          {borderline && <span style={{ fontSize:10, fontWeight:800, letterSpacing:'.04em', color:'#9a7b1e', background:'rgba(181,138,74,.16)', padding:'2px 7px', borderRadius:999 }}>IN BILICO</span>}
        </div>
      </div>
      <VerdictPill v={keep?'keep':'give'} score={it.score} small/>
    </button>
  );
}

function ItemDetail({ item, threshold, onClose }){
  const keep=verdict(item.score,threshold)==='keep';
  return (
    <div>
      <BackBar onBack={onClose} title="Scheda del capo"/>
      <div className="card" style={{ padding:18, display:'flex', gap:15, alignItems:'center', marginBottom:18 }}>
        <GarmentSwatch item={item} size={72} radius={16}/>
        <div style={{ flex:1, minWidth:0 }}>
          <div className="serif" style={{ fontSize:20, color:'var(--navy)', lineHeight:1.15 }}>{item.name}</div>
          <div style={{ fontSize:13, color:'var(--ink-soft)', margin:'4px 0 9px' }}>{catById(item.category).label}</div>
          <VerdictPill v={keep?'keep':'give'} score={item.score}/>
        </div>
      </div>

      <div className="eyebrow" style={{ color:'var(--ink-faint)', marginBottom:12 }}>Le tue risposte</div>
      <div style={{ display:'flex', flexDirection:'column', gap:9 }}>
        {QUESTIONS.map((Q,k)=>{
          const a=item.answers[Q.id]; const A=ANSWERS[a]||{};
          return (
            <div key={Q.id} className="card" style={{ padding:'13px 14px', display:'flex', alignItems:'center', gap:12 }}>
              <span className="serif" style={{ fontSize:14, color:'var(--ink-faint)', width:18, flexShrink:0 }}>{k+1}</span>
              <div style={{ flex:1 }}>
                <div style={{ fontSize:14, color:'var(--navy)', fontWeight:600, lineHeight:1.3 }}>{Q.q.replace(/\n/g,' ')}</div>
              </div>
              <span style={{ display:'inline-flex', alignItems:'center', gap:6, padding:'5px 11px', borderRadius:999, flexShrink:0,
                fontSize:12.5, fontWeight:700, color:'#fff', background:A.color||'var(--calm)' }}>
                {A.glyph} {A.label}
              </span>
            </div>
          );
        })}
      </div>

      <div className="card" style={{ padding:16, marginTop:18, background:'var(--navy)', display:'flex', gap:12, alignItems:'flex-start' }}>
        {Icon.spark({ size:18, color:'var(--sky)', style:{flexShrink:0, marginTop:1} })}
        <div style={{ fontSize:13, color:'rgba(255,255,255,.85)', lineHeight:1.5 }}>
          {keep
            ? 'Conserva questa scheda: la prossima volta che esiti, ricorda perché questo capo è rimasto.'
            : 'Se in futuro ti penti, queste risposte ti ricorderanno perché avevi deciso di lasciarlo andare.'}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ResultsScreen, ItemDetail, CutLine, RankRow });