// App.jsx — Hoofd applicatie voor de Sorteerhoed Ceremonie

const { useState, useEffect, useRef, useMemo } = React;

// Subtiel klikgeluid via Web Audio
function playClick(type = 'click') {
  try {
    const ctx = window.__audioCtx || (window.__audioCtx = new (window.AudioContext || window.webkitAudioContext)());
    if (ctx.state === 'suspended') ctx.resume();
    const o = ctx.createOscillator();
    const g = ctx.createGain();
    o.connect(g); g.connect(ctx.destination);
    if (type === 'click') {
      o.frequency.value = 800;
      g.gain.value = 0.04;
      g.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.08);
      o.start(); o.stop(ctx.currentTime + 0.08);
    } else if (type === 'page') {
      o.frequency.value = 200;
      o.type = 'triangle';
      g.gain.value = 0.05;
      g.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.25);
      o.start(); o.stop(ctx.currentTime + 0.25);
    } else if (type === 'reveal') {
      o.frequency.value = 120;
      o.type = 'sine';
      g.gain.value = 0.1;
      g.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 1.2);
      o.start(); o.stop(ctx.currentTime + 1.2);
    }
  } catch (e) { /* no-op */ }
}

// Bereken winnende afdeling
function calculateHouse(scores) {
  let max = -1; let winner = 'G';
  for (const k of ['G', 'R', 'H', 'Z']) {
    if (scores[k] > max) { max = scores[k]; winner = k; }
  }
  return winner;
}

// === Schermen ===

function WelcomeScreen({ onStart }) {
  const [name, setName] = useState('');
  const inputRef = useRef(null);

  useEffect(() => { inputRef.current?.focus(); }, []);

  const submit = (e) => {
    e?.preventDefault();
    if (name.trim().length < 2) return;
    playClick('page');
    onStart(name.trim());
  };

  return (
    <div className="screen welcome">
      <div className="parchment-frame">
        <div className="ornament top">✦</div>
        <h1 className="title-script">De Sorteerceremonie</h1>
        <div className="subtitle-italic">Zweinsteins Hogeschool voor Hekserij en Hocus-Pocus</div>

        <div className="welcome-hat">
          <SortingHat size={180} />
        </div>

        <p className="welcome-intro">
          Eeuwenoud is dit lied, gezongen door een hoed,<br/>
          die alle leerlingen plaatst, in 't huis dat hij geschikt acht.<br/>
          <span className="dim">Treed naar voren, jonge tovenaar, en geef uw naam...</span>
        </p>

        <form onSubmit={submit} className="name-form">
          <label className="name-label">Naam van de kandidaat</label>
          <input
            ref={inputRef}
            type="text"
            className="name-input"
            value={name}
            maxLength={32}
            onChange={(e) => setName(e.target.value)}
            placeholder="..."
          />
          <button
            type="submit"
            className="btn-quill"
            disabled={name.trim().length < 2}
          >
            Plaats de Hoed op mijn hoofd
            <span className="btn-arrow">→</span>
          </button>
        </form>

        <div className="ornament bottom">✦</div>
      </div>
    </div>
  );
}

function QuestionScreen({ question, index, total, onAnswer }) {
  const [hovering, setHovering] = useState(null);
  const [picked, setPicked] = useState(null);

  const choose = (choice, i) => {
    if (picked !== null) return;
    setPicked(i);
    playClick('click');
    setTimeout(() => onAnswer(choice), 420);
  };

  return (
    <div className="screen question" key={question.id}>
      <div className="parchment-frame question-frame">
        <div className="q-progress">
          <div className="q-progress-text">Vraag {index + 1} van {total}</div>
          <div className="q-progress-bar">
            <div className="q-progress-fill" style={{ width: `${((index) / total) * 100}%` }}></div>
          </div>
        </div>

        <div className="q-hat">
          <SortingHat size={110} talking={true} />
        </div>

        <div className="q-text">
          <span className="q-quote">&ldquo;</span>
          {question.text}
          <span className="q-quote">&rdquo;</span>
        </div>

        <div className={`q-choices q-${question.type}`}>
          {question.choices.map((c, i) => (
            <button
              key={i}
              className={`choice ${picked === i ? 'picked' : ''} ${picked !== null && picked !== i ? 'fade' : ''}`}
              onMouseEnter={() => setHovering(i)}
              onMouseLeave={() => setHovering(null)}
              onClick={() => choose(c, i)}
              disabled={picked !== null}
            >
              <span className="choice-marker">{String.fromCharCode(65 + i)}</span>
              <span className="choice-label">{c.label}</span>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

function ThinkingScreen({ onDone, name }) {
  const [mutterIdx, setMutterIdx] = useState(0);
  const [phase, setPhase] = useState(0); // 0: appear, 1: muttering, 2: decided

  useEffect(() => {
    playClick('page');
    const t1 = setTimeout(() => setPhase(1), 600);
    return () => clearTimeout(t1);
  }, []);

  useEffect(() => {
    if (phase !== 1) return;
    // cycle through mutters
    const mutters = window.MUTTERS;
    let i = 0;
    setMutterIdx(0);
    const iv = setInterval(() => {
      i = (i + 1) % mutters.length;
      setMutterIdx(i);
    }, 900);
    const t = setTimeout(() => {
      clearInterval(iv);
      setPhase(2);
      setTimeout(() => onDone(), 900);
    }, 5400);
    return () => { clearInterval(iv); clearTimeout(t); };
  }, [phase]);

  const mutters = window.MUTTERS;

  return (
    <div className="screen thinking">
      <div className="thinking-stage">
        <div className={`thinking-hat phase-${phase}`}>
          <SortingHat size={280} thinking={phase === 1} talking={phase === 1} />
        </div>

        <div className="mutter-stack" aria-live="polite">
          {phase === 1 && mutters.map((m, i) => (
            <div
              key={i}
              className={`mutter ${i === mutterIdx ? 'mutter-active' : ''} ${i < mutterIdx ? 'mutter-past' : ''}`}
            >
              {m}
            </div>
          ))}
          {phase === 2 && (
            <div className="mutter mutter-final">Ik weet het...</div>
          )}
        </div>

        {/* Floating sparks */}
        <div className="sparks">
          {Array.from({ length: 14 }).map((_, i) => (
            <span key={i} className="spark" style={{
              '--i': i,
              left: `${(i * 7.3) % 100}%`,
              animationDelay: `${(i * 0.31) % 3}s`,
            }} />
          ))}
        </div>
      </div>
    </div>
  );
}

function RevealScreen({ houseKey, name, onRestart, onShowDetails }) {
  const house = window.HOUSES[houseKey];
  const [phase, setPhase] = useState(0); // 0: dark, 1: shout, 2: reveal, 3: details

  useEffect(() => {
    playClick('reveal');
    const t1 = setTimeout(() => setPhase(1), 200);
    const t2 = setTimeout(() => setPhase(2), 1100);
    const t3 = setTimeout(() => setPhase(3), 3000);
    return () => { clearTimeout(t1); clearTimeout(t2); clearTimeout(t3); };
  }, [houseKey]);

  const cssVars = {
    '--hp': house.primary,
    '--hpd': house.primaryDeep,
    '--ha': house.accent,
    '--hab': house.accentBright,
    '--hparch': house.parchment,
  };

  return (
    <div className={`screen reveal reveal-${houseKey} reveal-phase-${phase}`} style={cssVars}>
      {/* Achtergrond gloed */}
      <div className="reveal-bg">
        <div className="reveal-vignette"></div>
        <div className="reveal-rays">
          {Array.from({ length: 24 }).map((_, i) => (
            <div key={i} className="ray" style={{ transform: `rotate(${(i / 24) * 360}deg)` }} />
          ))}
        </div>
      </div>

      {/* Confetti / vonken */}
      <div className="confetti">
        {Array.from({ length: 60 }).map((_, i) => (
          <span
            key={i}
            className="conf"
            style={{
              left: `${(i * 5.7) % 100}%`,
              animationDelay: `${(i * 0.07) % 2.5}s`,
              animationDuration: `${3 + (i % 4)}s`,
              background: i % 2 === 0 ? house.accentBright : house.primary,
            }}
          />
        ))}
      </div>

      {/* Kaarsen onder */}
      <div className="candles">
        {Array.from({ length: 9 }).map((_, i) => (
          <div key={i} className="candle">
            <div className="candle-stick" />
            <div className="flame" style={{ '--flame-color': house.accentBright }} />
          </div>
        ))}
      </div>

      <div className="reveal-content">
        <div className="reveal-pre">
          <span className="pre-name">{name},</span> de Sorteerhoed heeft besloten...
        </div>

        <h1 className="house-name">{house.name}</h1>

        <div className="reveal-crest">
          <HouseCrest house={house} size={220} />
        </div>

        <div className="house-motto">{house.motto}</div>

        {phase >= 3 && (
          <div className="reveal-details">
            <p className="house-desc">{house.description}</p>

            <div className="house-meta">
              <div className="meta-block">
                <div className="meta-h">Kernwaarden</div>
                <div className="meta-list">
                  {house.traits.map((t, i) => (
                    <span key={t} className="trait-pill">{t}</span>
                  ))}
                </div>
              </div>

              <div className="meta-block">
                <div className="meta-h">Element &amp; Symbool</div>
                <div className="meta-row">
                  <span>{house.element}</span>
                  <span className="dot">·</span>
                  <span>{house.animal}</span>
                  <span className="dot">·</span>
                  <span>{house.founder}</span>
                </div>
              </div>

              <div className="meta-block">
                <div className="meta-h">Bekende leden</div>
                <div className="meta-list">
                  {house.famous.map((f, i) => (
                    <span key={f} className="famous-pill">{f}</span>
                  ))}
                </div>
              </div>
            </div>

            <div className="reveal-actions">
              <button className="btn-quill btn-restart" onClick={() => { playClick('page'); onRestart(); }}>
                <span className="btn-arrow">←</span>
                Een nieuwe ceremonie beginnen
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

// === Main App ===

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "forceHouse": "auto",
  "muted": false
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [stage, setStage] = useState('welcome'); // welcome | question | thinking | reveal
  const [name, setName] = useState('');
  const [qIdx, setQIdx] = useState(0);
  const [roundQuestions, setRoundQuestions] = useState([]);
  const [scores, setScores] = useState({ G: 0, R: 0, H: 0, Z: 0 });
  const [house, setHouse] = useState(null);

  // Apply mute changes
  useEffect(() => {
    try { window.SortingAudio.setVolume(t.muted ? 0 : 0.55); } catch (e) {}
  }, [t.muted]);

  const start = (n) => {
    setName(n);
    setScores({ G: 0, R: 0, H: 0, Z: 0 });
    setQIdx(0);
    setRoundQuestions(window.pickQuestionsForRound(window.getRoundSize()));
    // Audio start triggered by user click (browser autoplay policy)
    try { window.SortingAudio.start(); } catch (e) {}
    setStage('question');
  };

  const answer = (choice) => {
    setScores((s) => {
      const next = { ...s };
      for (const [k, v] of Object.entries(choice.points)) {
        next[k] = (next[k] || 0) + v;
      }
      return next;
    });
    const next = qIdx + 1;
    if (next >= roundQuestions.length) {
      setTimeout(() => {
        try { window.SortingAudio.setMode('dramatic'); } catch (e) {}
        setStage('thinking');
      }, 300);
    } else {
      setQIdx(next);
    }
  };

  const onThinkingDone = () => {
    const h = t.forceHouse && t.forceHouse !== 'auto'
      ? t.forceHouse
      : calculateHouse(scores);
    setHouse(h);
    try { window.SortingAudio.revealSting(h); } catch (e) {}
    setStage('reveal');
  };

  const restart = () => {
    setName('');
    setHouse(null);
    setScores({ G: 0, R: 0, H: 0, Z: 0 });
    setQIdx(0);
    try { window.SortingAudio.setMode('ambient'); } catch (e) {}
    setStage('welcome');
  };

  return (
    <>
      <div className="app">
        {/* Achtergrond — perkament + sterren */}
        <div className="bg-layer">
          <div className="bg-stars">
            {Array.from({ length: 50 }).map((_, i) => (
              <span key={i} className="star" style={{
                left: `${(i * 13.7) % 100}%`,
                top: `${(i * 7.3) % 100}%`,
                animationDelay: `${(i * 0.21) % 4}s`,
              }} />
            ))}
          </div>
          <div className="bg-vignette" />
        </div>

        {stage === 'welcome' && <WelcomeScreen onStart={start} />}
        {stage === 'question' && roundQuestions.length > 0 && (
          <QuestionScreen
            key={qIdx}
            question={roundQuestions[qIdx]}
            index={qIdx}
            total={roundQuestions.length}
            onAnswer={answer}
          />
        )}
        {stage === 'thinking' && <ThinkingScreen onDone={onThinkingDone} name={name} />}
        {stage === 'reveal' && house && (
          <RevealScreen houseKey={house} name={name} onRestart={restart} />
        )}
      </div>

      <TweaksPanel>
        <TweakSection label="Sorteerhoed" />
        <TweakSelect
          label="Geforceerde afdeling"
          value={t.forceHouse}
          options={[
            { value: 'auto', label: 'Auto (op basis van antwoorden)' },
            { value: 'G', label: 'Griffoendor' },
            { value: 'R', label: 'Ravenklauw' },
            { value: 'H', label: 'Huffelpuf' },
            { value: 'Z', label: 'Zwadderich' },
          ]}
          onChange={(v) => setTweak('forceHouse', v)}
        />
        <TweakSection label="Geluid" />
        <TweakToggle
          label="Geluid dempen"
          value={t.muted}
          onChange={(v) => setTweak('muted', v)}
        />
        <div style={{ fontSize: 11, color: 'rgba(41,38,27,.6)', lineHeight: 1.45, paddingTop: 4 }}>
          Wanneer een afdeling is geselecteerd zal de Sorteerhoed altijd in dat huis sorteren — handig om alle eindschermen te bekijken.
        </div>
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);