/* ===================================================================
   GAME 02 — CLASS SELECTION  (personality quiz)
   7 weighted questions → primary character match → "System recommends"
   three classes: deterministic recommended, re-rolling wildcard, and a
   restricted/hidden joke class. window.ClassGame
   =================================================================== */
const { useState: useStateS } = React;
const GS = window.DCC_GAMES;

function shuffleS(arr){
  const a = arr.slice();
  for (let i = a.length - 1; i > 0; i--){ const j = Math.floor(Math.random()*(i+1)); [a[i],a[j]] = [a[j],a[i]]; }
  return a;
}

function ClassGame({ go, toHub }){
  const [phase, setPhase] = useStateS('intro');   // intro | quiz | result
  const [qi, setQi] = useStateS(0);
  const [picked, setPicked] = useStateS(null);
  const [answers, setAnswers] = useStateS([]);
  const [result, setResult] = useStateS(null);     // { winner, score }
  const [wildcard, setWildcard] = useStateS(null);
  const [hidden, setHidden] = useStateS(null);
  const [chosen, setChosen] = useStateS(null);      // selected class id (flourish)
  const [denied, setDenied] = useStateS(false);
  const [copied, share] = window.useShare();

  function start(){
    setQi(0); setPicked(null); setAnswers([]); setResult(null);
    setChosen(null); setDenied(false);
    setPhase('quiz');
  }

  function answer(idx){
    if (picked !== null) return;
    setPicked(idx);
    const chosenOpt = GS.QUIZ[qi].options[idx];
    const nextAnswers = answers.concat([chosenOpt]);
    setTimeout(() => {
      if (qi + 1 < GS.QUIZ.length){
        setAnswers(nextAnswers);
        setQi(qi + 1); setPicked(null);
      } else {
        const res = GS.tallyQuiz(nextAnswers);
        setAnswers(nextAnswers);
        setResult(res);
        setWildcard(GS.rollWildcard());
        setHidden(GS.rollHidden());
        setChosen(null); setDenied(false);
        setPhase('result');
      }
    }, 280);
  }

  function rerollWildcard(){
    let next = GS.rollWildcard();
    if (wildcard && GS.WILDCARDS.length > 1){ // avoid repeating the same one
      let guard = 0;
      while (next.id === wildcard.id && guard++ < 8) next = GS.rollWildcard();
    }
    setWildcard(next);
    if (chosen === (wildcard && wildcard.id)) setChosen(null);
  }

  function selectClass(cls, locked){
    if (locked){ setDenied(true); setChosen(null); return; }
    setChosen(cls.id); setDenied(false);
  }

  function shareResult(){
    const ch = GS.CHARACTERS[result.winner];
    const recId = GS.RECOMMENDED[result.winner];
    const selId = chosen || recId;
    const selName = (GS.CLASSES[selId] || (wildcard && wildcard.id===selId ? wildcard : null) || {name:'—'}).name;
    share(`SYSTEM LOG // The System determined my nature: ${ch.name}. Selected class: ${selName}. ` +
          `— System AI's Unofficial DCC Index`);
  }

  /* ---------------- INTRO ---------------- */
  let body;
  if (phase === 'intro'){
    body = (
      <div className="gstep">
        <div className="gintro-h">Class <span className="em">Selection</span></div>
        <div className="gintro-sub">Determine your nature, crawler.</div>
        <window.SysCard from="System // Class Selection">
          Before the dungeon decides what you are, I'd like to. Answer <b>{GS.QUIZ.length}</b> questions
          honestly — there are no wrong answers, only revealing ones. I'll match you to a crawler and then
          recommend three classes. You may select one. Selection is, of course, mostly ceremonial.
        </window.SysCard>
        <div className="gintro-rules">
          <div className="gintro-rule"><span className="rn">01</span><span>Pick the option that's most <i>you</i>, not the most heroic.</span></div>
          <div className="gintro-rule"><span className="rn">02</span><span>The recommended class is earned and fixed. The wildcard re-rolls every run.</span></div>
          <div className="gintro-rule"><span className="rn">03</span><span>One class is restricted. You'll see why. Don't take it personally.</span></div>
        </div>
        <div className="gnext-wrap">
          <button className="btn" style={{borderColor:'var(--t-spell)',background:'var(--t-spell)'}} onClick={start}>Begin assessment ▸</button>
        </div>
      </div>
    );
  }

  /* ---------------- QUIZ ---------------- */
  else if (phase === 'quiz'){
    const q = GS.QUIZ[qi];
    body = (
      <div className="gstep" key={qi}>
        <window.GameProgress i={qi} n={GS.QUIZ.length} />
        <div className="gq-cat">Behavioral assessment</div>
        <div className="gq">{q.question}</div>
        <div className="gopts">
          {q.options.map((o, idx) => (
            <button key={idx} className={'gopt'+(picked===idx?' picked':'')} onClick={()=>answer(idx)} disabled={picked!==null}>
              <span className="gk">{String.fromCharCode(65+idx)}</span>
              <span>{o.text}</span>
            </button>
          ))}
        </div>
      </div>
    );
  }

  /* ---------------- RESULT: character + System recommends ---------------- */
  else if (phase === 'result'){
    const ch = GS.CHARACTERS[result.winner];
    const rec = GS.CLASSES[GS.RECOMMENDED[result.winner]];
    const cards = [
      { cls:rec,      role:'Recommended', cc:'var(--t-spell)', locked:false, roll:false },
      { cls:wildcard, role:'Wildcard',    cc:'var(--amber)',   locked:false, roll:true  },
      { cls:hidden,   role:'Restricted',  cc:'var(--warn)',    locked:true,  roll:false },
    ];
    body = (
      <div className="gstep">
        <div className="gchar">
          <div className="gc-kick">Nature determined · primary match</div>
          <div className="gc-nm">{ch.name}</div>
          <div className="gc-tag">{ch.tag}</div>
          <p className="gc-blurb">{ch.blurb}</p>
        </div>

        <div className="block-h" style={{marginTop:30}}>System recommends</div>
        <div className="gclass-list">
          {cards.map((c) => (
            <div key={c.role}
              className={'gclass'+(c.locked?' locked':' pick')+(chosen===c.cls.id?' chosen':'')}
              style={{['--cc']: c.cc}}
              onClick={()=>selectClass(c.cls, c.locked)}>
              <span className="gc-role">{c.role}</span>
              <div className="gc-main">
                <div className="gc-name">
                  {c.locked && <span className="lk">🔒</span>}{c.cls.name}
                  {c.roll && <button className="gclass-roll" onClick={(e)=>{e.stopPropagation(); rerollWildcard();}}>↻ re-roll</button>}
                </div>
                <div className="gc-note">{c.cls.note}</div>
              </div>
              <span className="gc-sel">{c.locked ? 'Denied' : (chosen===c.cls.id ? '✓ Selected' : 'Select')}</span>
            </div>
          ))}
        </div>

        {(chosen || denied) && (
          <div style={{marginTop:18}}>
            <window.SysCard from="System // Selection" center>
              {denied
                ? <span>Access denied, crawler. That class is not yours to take. The attempt has been logged and gently mocked.</span>
                : <span>Selection confirmed: <b>{(GS.CLASSES[chosen]||wildcard||{}).name}</b>. Logged. It will be used against you later — affectionately.</span>}
            </window.SysCard>
          </div>
        )}

        <div className="gactions">
          <button className="btn" style={{borderColor:'var(--t-spell)',background:'var(--t-spell)'}} onClick={start}>↻ Retake (re-rolls wildcard)</button>
          <button className="btn amber" onClick={shareResult}>⧉ Transmit result</button>
          <button className="btn ghost" onClick={toHub}>Back to Arcade</button>
        </div>
        <div className="gshare-note" style={{opacity: copied?1:0}}>✓ Result copied to clipboard — paste it anywhere.</div>
        <div className="gmeta-foot">Personality match is for fun — no stats, nothing saved. The wildcard changes every run.</div>
      </div>
    );
  }

  return (
    <div className="view"><div className="wrap">
      <div className="crumbs">
        <a onClick={()=>go({view:'home'})}>Home</a><span className="sep">/</span>
        <a onClick={toHub}>Arcade</a><span className="sep">/</span>
        <span style={{color:'var(--ink)'}}>Class Selection</span>
      </div>
      <window.GameStage accent={window.ACCENTS.class} title="Class Selection · Assessment" onExit={toHub}>
        {body}
      </window.GameStage>
    </div></div>
  );
}
window.ClassGame = ClassGame;