/* ───────────────────────────────────────────────────────────
   insights.jsx — "Il tuo stile": analytics over completed sessions
   Exports: InsightsTab
   ─────────────────────────────────────────────────────────── */

function InsightsTab({ sessions, profile }){
  const a=useMemo(()=>buildAnalytics(sessions),[sessions]);
  const p=PROFILES[profile]||PROFILES.A;
  const hasData=a.totals.sessions>0;

  if(!hasData){
    return (
      <Screen bg="var(--cream)">
        <h1 className="serif" style={{ fontSize:28, color:'var(--navy)', margin:'0 0 18px', fontWeight:500 }}>Il tuo stile</h1>
        <div className="card" style={{ padding:28, textAlign:'center' }}>
          {Icon.chart({ size:30, color:'var(--ink-faint)', style:{margin:'0 auto 12px'} })}
          <div className="serif" style={{ fontSize:18, color:'var(--navy)' }}>Ancora nessun dato</div>
          <p style={{ fontSize:13.5, color:'var(--ink-soft)', margin:'6px 0 0', lineHeight:1.5 }}>Completa una sessione e qui vedrai emergere i tuoi schemi di stile.</p>
        </div>
      </Screen>
    );
  }

  return (
    <Screen bg="var(--cream)">
      <div className="fade-up" style={{ marginBottom:20 }}>
        <h1 className="serif" style={{ fontSize:28, color:'var(--navy)', margin:'0 0 4px', fontWeight:500 }}>Il tuo stile</h1>
        <p style={{ color:'var(--ink-soft)', fontSize:14, margin:0 }}>Quello che le tue scelte raccontano di te.</p>
      </div>

      {/* totals */}
      <div className="card fade-up" style={{ padding:'18px 12px', display:'flex', marginBottom:22 }}>
        {[[a.totals.items,'capi valutati'],[a.totals.keepPct+'%','tenuti'],[a.totals.sessions,'sessioni'],[a.totals.minutes+'m','tempo']].map(([v,l],i)=>(
          <div key={l} style={{ flex:1, textAlign:'center', borderLeft: i?'1px solid var(--line)':'none' }}>
            <Stat value={v} label={l}/>
          </div>
        ))}
      </div>

      {/* narrative insights */}
      <div style={{ display:'flex', flexDirection:'column', gap:12, marginBottom:26 }}>
        {a.insights.map((ins,i)=><InsightCard key={i} ins={ins} delay={i*0.06}/>)}
      </div>

      {/* per category */}
      <h2 className="serif fade-up" style={{ fontSize:19, color:'var(--navy)', margin:'0 0 4px' }}>Per categoria</h2>
      <p className="fade-up" style={{ fontSize:13, color:'var(--ink-soft)', margin:'0 0 14px' }}>Quanto, in media, ogni categoria ti valorizza.</p>
      <div className="card fade-up" style={{ padding:'6px 16px', marginBottom:26 }}>
        {a.cats.map((c,i)=>(
          <div key={c.id} style={{ padding:'13px 0', borderBottom: i<a.cats.length-1?'1px solid var(--line)':'none' }}>
            <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:8 }}>
              <CatIcon id={c.id} size={18} color="var(--navy)"/>
              <span style={{ fontSize:14, fontWeight:700, color:'var(--navy)', flex:1 }}>{c.label}</span>
              <span style={{ fontSize:12, color:'var(--ink-soft)' }}>{Math.round(c.keepRate*100)}% tenuti</span>
              <span className="mono" style={{ fontSize:12.5, fontWeight:600, color: c.avg>=0?'var(--pos-700)':'var(--neg-700)', width:42, textAlign:'right' }}>{c.avg>0?'+':''}{c.avg.toFixed(1)}</span>
            </div>
            <SignedBar value={c.avg} max={6}/>
          </div>
        ))}
      </div>

      {/* per question */}
      <h2 className="serif fade-up" style={{ fontSize:19, color:'var(--navy)', margin:'0 0 4px' }}>Le sei domande</h2>
      <p className="fade-up" style={{ fontSize:13, color:'var(--ink-soft)', margin:'0 0 14px' }}>Dove i tuoi capi convincono di più — e di meno.</p>
      <div className="card fade-up" style={{ padding:'6px 16px', marginBottom:24 }}>
        {a.byQ.map((q,i)=>(
          <div key={q.id} style={{ padding:'12px 0', borderBottom: i<a.byQ.length-1?'1px solid var(--line)':'none', display:'flex', alignItems:'center', gap:12 }}>
            <span style={{ fontSize:13.5, color:'var(--navy)', flex:1, lineHeight:1.3 }}>{q.q}</span>
            <div style={{ width:90, flexShrink:0 }}><SignedBar value={q.avg} max={1} h={6}/></div>
          </div>
        ))}
      </div>

      {/* brand tie-in */}
      <div className="card fade-up" style={{ padding:18, background:p.soft, border:'1px solid '+p.soft }}>
        <div style={{ display:'flex', alignItems:'center', gap:11, marginBottom:9 }}>
          <ProfileSigil profile={profile} size={40}/>
          <div>
            <div className="eyebrow" style={{ color:'var(--ink-faint)' }}>{p.name}</div>
            <div className="serif" style={{ fontSize:16, color:p.tint }}>Il prossimo passo</div>
          </div>
        </div>
        <p style={{ fontSize:13.5, color:'var(--ink-soft)', lineHeight:1.5, margin:'0 0 14px' }}>
          Il decluttering è un punto di partenza. Con Anna puoi trasformare questi schemi in un guardaroba capsule che funziona davvero.
        </p>
        <button className="btn btn-navy btn-block" style={{ fontSize:14.5 }}>Scopri i videocorsi di Scuola di Stile</button>
      </div>
    </Screen>
  );
}

function InsightCard({ ins, delay }){
  const map={
    strength:{ icon:Icon.spark, c:'var(--pos)', soft:'rgba(31,138,91,.10)', tag:'Punto di forza' },
    weakness:{ icon:Icon.flag, c:'var(--neg)', soft:'rgba(196,60,43,.09)', tag:'Da rivedere' },
    valorize:{ icon:Icon.gift, c:'var(--magenta)', soft:'var(--magenta-050)', tag:'Suggerimento' },
  }[ins.kind]||{ icon:Icon.spark, c:'var(--navy)', soft:'var(--blush)', tag:'Nota' };
  return (
    <div className="card fade-up" style={{ padding:16, animationDelay:delay+'s', display:'flex', gap:13 }}>
      <div style={{ width:40, height:40, borderRadius:12, background:map.soft, display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
        {map.icon({ size:20, color:map.c })}
      </div>
      <div style={{ flex:1 }}>
        <div className="eyebrow" style={{ color:map.c, marginBottom:5 }}>{map.tag}</div>
        <div style={{ fontSize:15, fontWeight:700, color:'var(--navy)', lineHeight:1.35 }}>{ins.text}</div>
        <div style={{ fontSize:13, color:'var(--ink-soft)', marginTop:5, lineHeight:1.45 }}>{ins.tip}</div>
      </div>
    </div>
  );
}

/* signed bar: center origin, fills right (positive/green) or left (negative/red) */
function SignedBar({ value, max=1, h=7 }){
  const frac=Math.max(-1,Math.min(1, value/max));
  const pos=frac>=0;
  return (
    <div style={{ position:'relative', height:h, borderRadius:h, background:'rgba(0,34,85,.07)' }}>
      <div style={{ position:'absolute', left:'50%', top:0, bottom:0, width:1, background:'rgba(0,34,85,.18)' }}/>
      <div style={{ position:'absolute', top:0, bottom:0, borderRadius:h,
        background: pos?'var(--pos)':'var(--neg)',
        left: pos?'50%':`${50+frac*50}%`, width:`${Math.abs(frac)*50}%`,
        transition:'all .6s cubic-bezier(.2,.8,.2,1)' }}/>
    </div>
  );
}

Object.assign(window, { InsightsTab, InsightCard, SignedBar });