/* ───────────────────────────────────────────────────────────
   quiz.jsx — profiling quiz + profile reveal
   Exports: QuizScreen, ProfileReveal
   ─────────────────────────────────────────────────────────── */

function computeProfile(ans){
  const tally={A:0,B:0,C:0};
  ['g1','g2','g3'].forEach(id=>{ if(ans[id]) tally[ans[id]]++; });
  let best='A', bestN=-1;
  for(const k of ['A','B','C']) if(tally[k]>bestN){ best=k; bestN=tally[k]; }
  return best;
}

function QuizScreen({ onDone, onBack }) {
  const [i,setI]=useState(0);
  const [ans,setAns]=useState({});
  const [leaving,setLeaving]=useState(false);
  const Q=QUIZ[i];

  const pick=(v)=>{
    const next={...ans,[Q.id]:v};
    setAns(next);
    setLeaving(true);
    setTimeout(()=>{
      if(i<QUIZ.length-1){ setI(i+1); setLeaving(false); }
      else { onDone(next, computeProfile(next)); }
    },240);
  };
  const back=()=>{ if(i===0){ onBack&&onBack(); } else { setI(i-1); } };

  return (
    <Screen bg="var(--cream)">
      <BackBar onBack={back}/>
      <div style={{ marginBottom:26 }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:10 }}>
          <span className="eyebrow" style={{ color:'var(--ink-faint)' }}>Profilo · {i+1} di {QUIZ.length}</span>
          {Q.kind==='profile'
            ? <span className="eyebrow" style={{ color:'var(--magenta)' }}>Il tuo punto di partenza</span>
            : <span className="eyebrow" style={{ color:'var(--sky-700)' }}>{Q.kind==='size'?'Dimensione armadio':'Ritmo'}</span>}
        </div>
        <Stepper n={QUIZ.length} i={i}/>
      </div>

      <div key={i} style={{ animation: leaving?'fadeIn .22s reverse forwards':'fadeUp .42s cubic-bezier(.2,.8,.2,1) both' }}>
        <h1 className="serif" style={{ fontSize:27, lineHeight:1.18, color:'var(--navy)', margin:'0 0 26px', fontWeight:500 }}>
          {Q.q}
        </h1>
        <div style={{ display:'flex', flexDirection:'column', gap:12 }}>
          {Q.opts.map((o,k)=>{
            const on=ans[Q.id]===o.v;
            return (
              <button key={o.v} onClick={()=>pick(o.v)} style={{
                textAlign:'left', cursor:'pointer', fontFamily:'var(--font-body)',
                border:'1.5px solid '+(on?'var(--navy)':'var(--line-2)'),
                background: on?'var(--navy)':'var(--paper)',
                color: on?'#fff':'var(--ink)',
                borderRadius:18, padding:'17px 18px', display:'flex', alignItems:'center', gap:14,
                boxShadow:'var(--shadow-card)', transition:'transform .12s, background .15s, border-color .15s',
                animation:'fadeUp .5s both', animationDelay:(0.05+k*0.06)+'s' }}>
                <span className="serif" style={{ fontSize:18, fontStyle:'italic', width:26, flexShrink:0,
                  color: on?'var(--sky)':'var(--ink-faint)' }}>{o.v}</span>
                <span style={{ fontSize:15.5, lineHeight:1.35, fontWeight:500 }}>{o.label}</span>
              </button>
            );
          })}
        </div>
      </div>
    </Screen>
  );
}

function ProfileReveal({ profile, name, onDone }) {
  const p=PROFILES[profile]||PROFILES.A;
  const [show,setShow]=useState(false);
  useEffect(()=>{ const t=setTimeout(()=>setShow(true),420); return ()=>clearTimeout(t); },[]);
  return (
    <div className="app-scroll" style={{ minHeight:'100%',
      background:`radial-gradient(120% 70% at 50% -5%, ${p.soft} 0%, var(--cream) 55%)` }}>
      <div style={{ padding:'78px 26px 40px', display:'flex', flexDirection:'column', minHeight:'100%', textAlign:'center' }}>
        <div className="fade-up">
          <div className="eyebrow" style={{ color:'var(--ink-faint)', marginBottom:24 }}>Il tuo profilo</div>
        </div>

        <div className="pop-in" style={{ display:'flex', justifyContent:'center', marginBottom:22 }}>
          <ProfileSigil profile={profile} size={108}/>
        </div>

        <div className="fade-up" style={{ animationDelay:'.12s' }}>
          <h1 className="serif" style={{ fontSize:38, color:p.tint, margin:'0 0 6px', fontWeight:500 }}>{p.name}</h1>
          <div style={{ fontSize:13.5, letterSpacing:'.14em', textTransform:'uppercase', color:'var(--ink-soft)', fontWeight:700 }}>{p.tag}</div>
        </div>

        <div style={{ flex:1, display:'flex', alignItems:'center', justifyContent:'center', padding:'12px 0' }}>
          {show && (
            <p className="serif fade-up" style={{ fontSize:19, lineHeight:1.5, color:'var(--navy)', fontWeight:400, fontStyle:'italic', maxWidth:330, margin:0 }}>
              “{p.body}”
            </p>
          )}
        </div>

        <div className="fade-up" style={{ animationDelay:'.2s' }}>
          <p style={{ fontSize:13.5, color:'var(--ink-soft)', marginBottom:16, lineHeight:1.5 }}>
            {name?name+', il':'Il'} tuo profilo guiderà i consigli e le sessioni. Lo rivedrai in ogni momento.
          </p>
          <button className="btn btn-navy btn-block" onClick={onDone}>
            Pianifica il decluttering {Icon.arrowR({ size:18, color:'#fff' })}
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { QuizScreen, ProfileReveal, computeProfile });