// Landing / Quiz / Result screens
const { useState, useEffect, useRef, useMemo } = React;

// ---------- LANDING ----------
function Landing({ onStart }) {
  return (
    <div className="landing">
      <div className="landing-top">
        <div className="brand-row"><span>和 · WAGASHI</span><i className="dot"/><span>心理測驗</span></div>
        <div className="kicker-jp">あなたは どの 和菓子？</div>
        <div className="title-stack">
          <h1 className="title-main serif">
            你是哪一種<br/><em>和菓子？</em>
          </h1>
          <p className="title-sub">
            <b>8 道題，60 秒</b>，<br/>找出你內在的日式甜點靈魂。
          </p>
        </div>
      </div>

      <div className="hero-art"><HeroArt/></div>

      <div style={{display:'flex',flexDirection:'column',alignItems:'center',gap:14,width:'100%'}}>
        <div className="meta">
          <span><b>8</b>題</span><i/>
          <span><b>60</b>秒</span><i/>
          <span><b>8</b>種結果</span>
        </div>
        <button className="cta" onClick={onStart}>
          開始測驗 <span className="arrow">→</span>
        </button>
        <div className="footnote serif">本測驗無科學根據 · 僅供品茶配茶</div>
      </div>
    </div>
  );
}

// ---------- QUIZ ----------
function Quiz({ index, total, question, selected, onPick, onBack, dir }) {
  const pct = ((index + 1) / total) * 100;
  return (
    <div className="quiz">
      <div className="qhead">
        <button className="back" onClick={onBack} disabled={index === 0}
          aria-label="上一題">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"
            strokeLinejoin="round">
            <path d="M15 6l-6 6 6 6"/>
          </svg>
        </button>
        <div className="bar"><i style={{width: pct + '%'}}/></div>
        <div className="count serif"><b>{index+1}</b>/{total}</div>
      </div>

      <div className="qbody" key={index+'-'+dir}
        style={{animation: (dir==='back'?'slideBack':'slideFwd') + ' .4s cubic-bezier(.2,.7,.2,1) both'}}>
        <div className="qnum">QUESTION {String(index+1).padStart(2,'0')} / {String(total).padStart(2,'0')}</div>
        <h2 className="qtext serif">{question.q}</h2>
        <div className="opts">
          {question.opts.map((o, i) => (
            <button key={i}
              className={'opt' + (selected === i ? ' selected' : '')}
              onClick={() => onPick(i)}>
              <span className="ico"><OptIcon name={o.icon}/></span>
              <span className="label">{o.label}</span>
              <span className="tag">{o.tag}</span>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

// ---------- RESULT ----------
function Confetti({ n = 36 }) {
  const pieces = useMemo(() => {
    return Array.from({length:n}).map((_,i) => {
      const colors = ['#F7D4DC','#E89AAA','#C9A86A','#C8D3B8','#FBDCE2','#F5E2A8'];
      return {
        id:i,
        left: Math.random()*100,
        dx: (Math.random()*2-1)*80,
        rot: (Math.random()*2-1)*720,
        dur: 4 + Math.random()*3,
        delay: Math.random()*1.5,
        size: 6 + Math.random()*7,
        color: colors[Math.floor(Math.random()*colors.length)],
        shape: Math.random() > .4 ? 'petal' : 'dot',
      };
    });
  }, [n]);
  return (
    <div className="confetti">
      {pieces.map(p => (
        <div key={p.id} className="petal" style={{
          left: p.left + '%',
          '--dx': p.dx + 'px',
          '--rot': p.rot + 'deg',
          animation: `fall ${p.dur}s cubic-bezier(.3,.2,.6,1) ${p.delay}s both`,
        }}>
          {p.shape==='petal' ? (
            <svg width={p.size*2} height={p.size*2} viewBox="0 0 20 20">
              <path d="M10 1 Q16 6 19 10 Q16 14 10 19 Q4 14 1 10 Q4 6 10 1 Z"
                fill={p.color} opacity=".92"/>
              <path d="M10 1 Q10 10 10 19" stroke={p.color} strokeWidth=".4" opacity=".6"/>
            </svg>
          ) : (
            <div style={{width:p.size,height:p.size,borderRadius:'50%',background:p.color,opacity:.9}}/>
          )}
        </div>
      ))}
    </div>
  );
}

function Result({ wagashi, onShare, onRestart }) {
  const [showConfetti, setShowConfetti] = useState(true);
  useEffect(() => {
    const t = setTimeout(() => setShowConfetti(false), 6500);
    return () => clearTimeout(t);
  }, []);

  return (
    <div className="result" id="result-card">
      {showConfetti && <Confetti/>}
      <div className="stamp serif">和 · RESULT</div>
      <div className="result-kicker pop">YOUR WAGASHI SOUL</div>
      <div className="result-art pop d1"><WagashiArt type={wagashi.key}/></div>
      <div className="pop d2" style={{display:'flex',flexDirection:'column',alignItems:'center',gap:6}}>
        <div className="result-jp">{wagashi.jp}</div>
        <h1 className="result-name serif">{wagashi.name}</h1>
      </div>
      <div className="divider-kanji pop d3"><i/><span>品 · 性 · 格</span><i/></div>
      <p className="result-poem pop d3">
        {wagashi.poem.split('\n').map((l,i)=>(<React.Fragment key={i}>{l}<br/></React.Fragment>))}
      </p>
      <div className="traits pop d4">
        {wagashi.traits.map((t,i)=>(<span key={i} className="trait">{t}</span>))}
      </div>
      <div className="btns pop d5">
        <button className="cta" onClick={onShare}>
          分享到 Instagram <span className="arrow">↗</span>
        </button>
        <button className="cta secondary" onClick={onRestart}>重新測驗</button>
      </div>
    </div>
  );
}

Object.assign(window, { Landing, Quiz, Result, Confetti });