/* ───────────────────────────────────────────────────────────
   planning.jsx — turn quiz answers into a decluttering schedule
   Exports: PlanningScreen
   ─────────────────────────────────────────────────────────── */

function PlanningScreen({ quiz, onConfirm, onBack }) {
  const cad = quiz?.g5 || 'B';
  const cadText = {
    A:{ t:'Una grande seduta', d:'Tutto in un’unica sessione intensiva da 90 minuti.' },
    B:{ t:'Qualche seduta da un’ora', d:'Sessioni da 60 minuti, a qualche giorno di distanza.' },
    C:{ t:'Sedute brevi e frequenti', d:'Sessioni da 30 minuti, una a settimana.' },
  }[cad];

  const [when,setWhen]=useState('mattina');
  const plan=useMemo(()=>planSessions(quiz),[quiz]);
  const real=plan.filter(s=>s.kind!=='maintenance');
  const maint=plan.find(s=>s.kind==='maintenance');

  return (
    <Screen bg="var(--cream)">
      <BackBar onBack={onBack}/>
      <div className="fade-up">
        <div className="eyebrow" style={{ color:'var(--magenta)', marginBottom:10 }}>Il tuo piano</div>
        <h1 className="serif" style={{ fontSize:29, margin:'0 0 8px', color:'var(--navy)', fontWeight:500 }}>{cadText.t}</h1>
        <p style={{ color:'var(--ink-soft)', fontSize:14.5, lineHeight:1.5, margin:'0 0 22px' }}>{cadText.d}</p>

        {/* time of day */}
        <div className="card" style={{ padding:16, marginBottom:14 }}>
          <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:12 }}>
            {Icon.spark({ size:18, color:'var(--sky-700)' })}
            <span style={{ fontSize:13.5, color:'var(--ink-soft)', lineHeight:1.4 }}>
              Anna consiglia il <b style={{color:'var(--navy)'}}>mattino di un giorno libero</b>. Quando preferisci?
            </span>
          </div>
          <div style={{ display:'flex', gap:8 }}>
            {['mattina','pomeriggio','sera'].map(w=>(
              <button key={w} onClick={()=>setWhen(w)} style={{
                flex:1, padding:'10px 0', borderRadius:12, fontSize:13.5, fontWeight:650, cursor:'pointer',
                textTransform:'capitalize', fontFamily:'var(--font-body)',
                border:'1.5px solid '+(when===w?'var(--navy)':'var(--line-2)'),
                background: when===w?'var(--navy)':'transparent',
                color: when===w?'#fff':'var(--ink-soft)' }}>{w}</button>
            ))}
          </div>
        </div>
      </div>

      {/* timeline */}
      <div style={{ position:'relative', marginTop:8 }}>
        <div style={{ position:'absolute', left:19, top:14, bottom:60, width:1.5, background:'var(--line-2)' }}/>
        {real.map((s,i)=>(
          <PlanRow key={s.id} s={s} idx={i} delay={i*0.06}/>
        ))}
        {maint && (
          <div className="fade-up" style={{ display:'flex', gap:16, alignItems:'flex-start', position:'relative', animationDelay:'.4s' }}>
            <div style={{ width:39, display:'flex', justifyContent:'center', paddingTop:4 }}>
              <div style={{ width:39, height:39, borderRadius:999, background:'var(--blush)',
                display:'flex', alignItems:'center', justifyContent:'center', boxShadow:'0 0 0 4px var(--cream)' }}>
                {Icon.bell({ size:18, color:'var(--magenta)' })}
              </div>
            </div>
            <div style={{ flex:1, paddingBottom:22 }}>
              <div style={{ fontSize:11.5, color:'var(--ink-faint)', fontWeight:700, letterSpacing:'.04em', textTransform:'uppercase' }}>Promemoria · {relDay(maint.date)}</div>
              <div className="serif" style={{ fontSize:17, color:'var(--navy)', marginTop:3 }}>Decluttering cambio stagione</div>
              <div style={{ fontSize:13, color:'var(--ink-soft)', marginTop:2 }}>Una sessione di mantenimento per non ricadere nel caos.</div>
            </div>
          </div>
        )}
      </div>

      <div className="card" style={{ padding:'13px 15px', display:'flex', gap:11, alignItems:'flex-start', background:'var(--navy)', marginTop:8 }}>
        {Icon.bell({ size:17, color:'var(--sky)', style:{marginTop:1, flexShrink:0} })}
        <span style={{ fontSize:12.5, color:'rgba(255,255,255,.82)', lineHeight:1.45 }}>
          Ti avviseremo poco prima di ogni sessione. Se ne salti una, te la riproporremo per riprogrammarla.
        </span>
      </div>

      <button className="btn btn-primary btn-block" onClick={()=>onConfirm(plan)} style={{ marginTop:18 }}>
        Conferma il piano {Icon.check({ size:18, color:'#fff', sw:2.4 })}
      </button>
    </Screen>
  );
}

function PlanRow({ s, idx, delay }) {
  const c=catById(s.section);
  const label = s.section==='all' ? 'Tutto il guardaroba' : c.label;
  const sub = s.section==='all' ? 'Una sezione dopo l’altra' : c.sub;
  return (
    <div className="fade-up" style={{ display:'flex', gap:16, alignItems:'flex-start', position:'relative', animationDelay:delay+'s' }}>
      <div style={{ width:39, display:'flex', justifyContent:'center', paddingTop:4 }}>
        <div style={{ width:39, height:39, borderRadius:999, background:'var(--paper)',
          display:'flex', alignItems:'center', justifyContent:'center',
          boxShadow:'0 0 0 4px var(--cream), var(--shadow-card)' }}>
          {s.section==='all'
            ? <span className="serif" style={{ fontSize:16, fontStyle:'italic', color:'var(--navy)' }}>★</span>
            : <CatIcon id={s.section} size={20} color="var(--navy)"/>}
        </div>
      </div>
      <div style={{ flex:1, paddingBottom:22 }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', gap:10 }}>
          <div style={{ fontSize:11.5, color: idx===0?'var(--magenta)':'var(--ink-faint)', fontWeight:700, letterSpacing:'.04em', textTransform:'uppercase' }}>
            {relDay(s.date)}{idx===0?' · prima sessione':''}
          </div>
          <div className="mono" style={{ fontSize:12, color:'var(--ink-soft)' }}>{s.durationMin} min</div>
        </div>
        <div className="serif" style={{ fontSize:18, color:'var(--navy)', marginTop:3 }}>{label}</div>
        <div style={{ fontSize:13, color:'var(--ink-soft)', marginTop:1 }}>{sub}</div>
      </div>
    </div>
  );
}

Object.assign(window, { PlanningScreen });