/* ───────────────────────────────────────────────────────────
   home.jsx — dashboard (Oggi) + sessions list
   Exports: HomeTab, SessionsTab, NextSessionCard, SessionRow
   ─────────────────────────────────────────────────────────── */

function greeting(){
  const h=new Date().getHours();
  if(h<12) return 'Buongiorno';
  if(h<18) return 'Buon pomeriggio';
  return 'Buonasera';
}

function countdownParts(ms){
  const s=Math.max(0,Math.floor(ms/1000));
  const d=Math.floor(s/86400), h=Math.floor(s%86400/3600), m=Math.floor(s%3600/60), sec=s%60;
  return { d,h,m,sec, s };
}

function HomeTab({ user, profile, sessions, now, onStart, onOpenResult, onReschedule, onFree, onTab }) {
  const planned=sessions.filter(s=>s.status==='planned' && s.kind!=='maintenance')
    .sort((a,b)=>a.date-b.date);
  const next=planned[0];
  const done=sessions.filter(s=>s.status==='done').sort((a,b)=>b.date-a.date);
  const p=PROFILES[profile]||PROFILES.A;
  const analytics=useMemo(()=>buildAnalytics(sessions),[sessions]);
  const topInsight=analytics.insights[0];

  return (
    <Screen bg="var(--cream)">
      {/* header */}
      <div className="fade-up" style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:22 }}>
        <div>
          <div style={{ fontSize:13.5, color:'var(--ink-soft)', fontWeight:600 }}>{greeting()},</div>
          <div className="serif" style={{ fontSize:26, color:'var(--navy)', lineHeight:1.1 }}>{user?.nome||'benvenuta'}</div>
        </div>
        <button onClick={()=>onTab('insights')} style={{ border:'none', background:'none', cursor:'pointer', display:'flex', alignItems:'center', gap:8 }}>
          <div style={{ textAlign:'right' }}>
            <div style={{ fontSize:10, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--ink-faint)', fontWeight:700 }}>Profilo</div>
            <div className="serif" style={{ fontSize:14, color:p.tint, fontStyle:'italic' }}>{p.name}</div>
          </div>
          <ProfileSigil profile={profile} size={44}/>
        </button>
      </div>

      {/* next session hero */}
      {next
        ? <NextSessionCard s={next} now={now} onStart={()=>onStart(next)} onReschedule={()=>onReschedule(next)}/>
        : <div className="card" style={{ padding:22, textAlign:'center' }}>
            <div className="serif" style={{ fontSize:18, color:'var(--navy)' }}>Nessuna sessione in programma</div>
            <p style={{ fontSize:13.5, color:'var(--ink-soft)', margin:'6px 0 0' }}>Avvia una sessione libera quando vuoi.</p>
          </div>}

      {/* free session */}
      <button onClick={onFree} className="card" style={{ width:'100%', border:'none', cursor:'pointer',
        display:'flex', alignItems:'center', gap:13, padding:'14px 16px', marginTop:12, textAlign:'left' }}>
        <div style={{ width:42, height:42, borderRadius:12, background:'var(--blush)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
          {Icon.flame({ size:21, color:'var(--magenta)' })}
        </div>
        <div style={{ flex:1 }}>
          <div style={{ fontSize:15, fontWeight:700, color:'var(--navy)' }}>Sessione libera</div>
          <div style={{ fontSize:12.5, color:'var(--ink-soft)' }}>Hai dieci minuti? Inizia subito, senza piano.</div>
        </div>
        {Icon.chevR({ size:18, color:'var(--ink-faint)' })}
      </button>

      {/* insight teaser */}
      {topInsight && (
        <button onClick={()=>onTab('insights')} style={{ width:'100%', textAlign:'left', cursor:'pointer', marginTop:22,
          border:'none', borderRadius:'var(--r-lg)', padding:18, position:'relative', overflow:'hidden',
          background:'linear-gradient(140deg, #0a2e63 0%, #002255 100%)' }}>
          <div className="eyebrow" style={{ color:'var(--sky)', marginBottom:9, display:'flex', alignItems:'center', gap:7 }}>
            {Icon.spark({ size:14, color:'var(--sky)' })} Il tuo stile, dai dati
          </div>
          <div className="serif" style={{ fontSize:18, color:'#fff', lineHeight:1.35, fontWeight:500 }}>{topInsight.text}</div>
          <div style={{ fontSize:13, color:'rgba(255,255,255,.7)', marginTop:8, display:'flex', alignItems:'center', gap:6 }}>
            Scopri il consiglio {Icon.arrowR({ size:15, color:'rgba(255,255,255,.7)' })}
          </div>
        </button>
      )}

      {/* recent results */}
      {done.length>0 && (
        <div style={{ marginTop:26 }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:12 }}>
            <h2 className="serif" style={{ fontSize:18, color:'var(--navy)', margin:0 }}>Sessioni completate</h2>
            <button onClick={()=>onTab('sessions')} style={{ border:'none', background:'none', color:'var(--magenta)', fontSize:13, fontWeight:700, cursor:'pointer', fontFamily:'var(--font-body)' }}>Tutte</button>
          </div>
          <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
            {done.slice(0,2).map(s=><SessionRow key={s.id} s={s} onClick={()=>onOpenResult(s)}/>)}
          </div>
        </div>
      )}
    </Screen>
  );
}

function NextSessionCard({ s, now, onStart, onReschedule }) {
  const remain=countdownParts(s.date-now);
  const soon = remain.s < 3600;           // under an hour
  const c=catById(s.section);
  const label = s.section==='all'?'Tutto il guardaroba':c.label;
  const timeStr = remain.d>0
    ? `tra ${remain.d} ${remain.d===1?'giorno':'giorni'}`
    : `${String(remain.h).padStart(2,'0')}:${String(remain.m).padStart(2,'0')}:${String(remain.sec).padStart(2,'0')}`;
  return (
    <div className="fade-up card" style={{ padding:0, overflow:'hidden', animationDelay:'.06s' }}>
      <div style={{ background:'linear-gradient(135deg, #16407e 0%, #002255 70%)', padding:'20px 20px 22px', position:'relative' }}>
        <svg viewBox="0 0 200 200" style={{ position:'absolute', right:-30, top:-30, width:170, opacity:.14 }}>
          {[40,70,100].map((r,i)=><circle key={i} cx="100" cy="100" r={r} fill="none" stroke="#a8d2e0" strokeWidth="1.2"/>)}
        </svg>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', position:'relative' }}>
          <div>
            <div className="eyebrow" style={{ color:'var(--sky)', marginBottom:8 }}>Prossima sessione · {relDay(s.date)}</div>
            <div className="serif" style={{ fontSize:24, color:'#fff', fontWeight:500 }}>{label}</div>
            <div style={{ fontSize:13, color:'rgba(255,255,255,.66)', marginTop:3 }}>{s.durationMin} minuti · {s.title}</div>
          </div>
          <div style={{ width:46, height:46, borderRadius:13, background:'rgba(255,255,255,.12)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
            {s.section==='all'? <span className="serif" style={{color:'#fff',fontSize:20,fontStyle:'italic'}}>★</span> : <CatIcon id={s.section} size={24} color="#fff"/>}
          </div>
        </div>
        <div style={{ display:'flex', alignItems:'center', gap:9, marginTop:18, position:'relative' }}>
          {Icon.clock({ size:17, color: soon?'#ffd6e8':'var(--sky)' })}
          <span className="mono tnum" style={{ fontSize: remain.d>0?17:24, color:'#fff', letterSpacing:1, fontWeight:500 }}>{timeStr}</span>
          {soon && <span style={{ fontSize:11, fontWeight:700, color:'#fff', background:'var(--magenta)', padding:'3px 9px', borderRadius:999, letterSpacing:'.04em' }}>A BREVE</span>}
        </div>
      </div>
      <div style={{ display:'flex', gap:10, padding:14 }}>
        <button className="btn btn-primary" style={{ flex:1 }} onClick={onStart}>Inizia sessione</button>
        <button className="btn btn-ghost" style={{ paddingLeft:16, paddingRight:16 }} onClick={onReschedule} aria-label="Riprogramma">
          {Icon.cal({ size:18, color:'var(--navy)' })}
        </button>
      </div>
    </div>
  );
}

function SessionRow({ s, onClick }) {
  const a=useMemo(()=>{
    const kept=s.items.filter(i=>verdict(i.score)==='keep').length;
    return { kept, given:s.items.length-kept };
  },[s]);
  const c=catById(s.section);
  return (
    <button onClick={onClick} className="card" style={{ width:'100%', border:'none', cursor:'pointer',
      display:'flex', alignItems:'center', gap:13, padding:'13px 15px', textAlign:'left' }}>
      <div style={{ width:46, height:46, borderRadius:12, background:'var(--blush)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0, position:'relative' }}>
        <CatIcon id={s.section==='all'?'top':s.section} size={23} color="var(--navy)"/>
      </div>
      <div style={{ flex:1, minWidth:0 }}>
        <div style={{ display:'flex', alignItems:'center', gap:8 }}>
          <span style={{ fontSize:15, fontWeight:700, color:'var(--navy)' }}>{s.title}</span>
          <span style={{ fontSize:11.5, color:'var(--ink-faint)' }}>· {relDay(s.date)}</span>
        </div>
        <div style={{ fontSize:12.5, color:'var(--ink-soft)', marginTop:2 }}>
          {s.section==='all'?'Tutto il guardaroba':c.label} · {s.items.length} capi
        </div>
      </div>
      <div style={{ display:'flex', gap:6, alignItems:'center', flexShrink:0 }}>
        <span className="mono" style={{ fontSize:12.5, color:'var(--pos-700)', fontWeight:500 }}>{a.kept}</span>
        <span style={{ width:1, height:14, background:'var(--line-2)' }}/>
        <span className="mono" style={{ fontSize:12.5, color:'var(--neg-700)', fontWeight:500 }}>{a.given}</span>
        {Icon.chevR({ size:17, color:'var(--ink-faint)', style:{marginLeft:4} })}
      </div>
    </button>
  );
}

function SessionsTab({ sessions, now, onStart, onOpenResult, onReschedule, onFree }) {
  const planned=sessions.filter(s=>s.status==='planned').sort((a,b)=>a.date-b.date);
  const done=sessions.filter(s=>s.status==='done').sort((a,b)=>b.date-a.date);
  return (
    <Screen bg="var(--cream)">
      <h1 className="serif fade-up" style={{ fontSize:28, color:'var(--navy)', margin:'0 0 4px', fontWeight:500 }}>Sessioni</h1>
      <p className="fade-up" style={{ color:'var(--ink-soft)', fontSize:14, margin:'0 0 22px' }}>Il tuo percorso, una sezione alla volta.</p>

      <button onClick={onFree} className="btn btn-ghost btn-block" style={{ marginBottom:24 }}>
        {Icon.plus({ size:18, color:'var(--navy)' })} Sessione libera
      </button>

      {planned.length>0 && <>
        <div className="eyebrow" style={{ color:'var(--ink-faint)', marginBottom:12 }}>In programma</div>
        <div style={{ display:'flex', flexDirection:'column', gap:10, marginBottom:26 }}>
          {planned.map(s=><PlannedRow key={s.id} s={s} now={now} onStart={()=>onStart(s)} onReschedule={()=>onReschedule(s)}/>)}
        </div>
      </>}

      {done.length>0 && <>
        <div className="eyebrow" style={{ color:'var(--ink-faint)', marginBottom:12 }}>Completate</div>
        <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
          {done.map(s=><SessionRow key={s.id} s={s} onClick={()=>onOpenResult(s)}/>)}
        </div>
      </>}
    </Screen>
  );
}

function PlannedRow({ s, now, onStart, onReschedule }) {
  const c=catById(s.section);
  const maint=s.kind==='maintenance';
  const remain=countdownParts(s.date-now);
  const timeStr = remain.d>0 ? relDay(s.date) : `${String(remain.h).padStart(2,'0')}:${String(remain.m).padStart(2,'0')}:${String(remain.sec).padStart(2,'0')}`;
  return (
    <div className="card" style={{ padding:'13px 15px', display:'flex', alignItems:'center', gap:13 }}>
      <div style={{ width:46, height:46, borderRadius:12, flexShrink:0, display:'flex', alignItems:'center', justifyContent:'center',
        background: maint?'var(--magenta-050)':'var(--sky-300)' }}>
        {maint? Icon.bell({ size:21, color:'var(--magenta)' })
          : s.section==='all'? <span className="serif" style={{fontSize:18,fontStyle:'italic',color:'var(--navy)'}}>★</span>
          : <CatIcon id={s.section} size={23} color="var(--navy)"/>}
      </div>
      <div style={{ flex:1, minWidth:0 }}>
        <div style={{ fontSize:15, fontWeight:700, color:'var(--navy)' }}>{maint?'Cambio stagione':(s.section==='all'?'Tutto il guardaroba':c.label)}</div>
        <div style={{ fontSize:12.5, color: remain.d>0?'var(--ink-soft)':'var(--magenta)', marginTop:2, fontWeight: remain.d>0?500:700 }}>
          <span className="mono">{timeStr}</span> · {s.durationMin} min
        </div>
      </div>
      {!maint && (
        remain.s<3600
          ? <button className="btn btn-primary" style={{ padding:'9px 15px', fontSize:13.5 }} onClick={onStart}>Inizia</button>
          : <button onClick={onReschedule} aria-label="Riprogramma" style={{ width:38, height:38, borderRadius:11, border:'1.5px solid var(--line-2)', background:'transparent', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center' }}>{Icon.cal({ size:17, color:'var(--ink-soft)' })}</button>
      )}
    </div>
  );
}

Object.assign(window, { HomeTab, SessionsTab, NextSessionCard, SessionRow, countdownParts, greeting });