// Bagels — Layout A (Classic three-column), production single-board build.
// Exposes window.BagelsGame. Depends on game-logic.js + game-ui.jsx.
(function () {
  const { useGame, useKeyboard, Wordmark, Legend, Slots, ResultPips, Keypad,
    MessageLine, Timer, Leaderboard, WinNote } = window;

  function ThemeToggle({ dark, onToggle }) {
    const sun = (
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
        <circle cx="12" cy="12" r="4" /><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" />
      </svg>
    );
    const moon = (
      <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor">
        <path d="M21 12.8A9 9 0 1111.2 3a7 7 0 109.8 9.8z" />
      </svg>
    );
    return (
      <button onClick={onToggle} title={dark ? 'Switch to light mode' : 'Switch to dark mode'} aria-label="Toggle dark mode"
        style={{ position: 'absolute', top: 18, right: 20, width: 36, height: 36, borderRadius: 18,
          border: '1px solid var(--cb-line-strong)', background: 'var(--cb-surface)', color: 'var(--cb-ink)',
          cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 4,
          transition: 'border-color .15s' }}
        onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--cb-key-hover)'; }}
        onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--cb-surface)'; }}>
        {dark ? sun : moon}
      </button>
    );
  }

  function GuessList({ g, max = 9 }) {
    if (!g.guesses.length) {
      return <div style={{ fontSize: 13.5, color: 'var(--cb-faint)' }}>Your guesses appear here, newest first.</div>;
    }
    const shown = g.guesses.slice(0, max);
    const extra = g.guesses.length - shown.length;
    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {shown.map((gr) => (
          <div key={gr.n} className="cb-guess">
            <span className="cb-gidx">{gr.n}</span>
            <span className="cb-gnum" style={{ flex: 1 }}>{gr.value}</span>
            <ResultPips bulls={gr.bulls} cows={gr.cows} len={g.len} />
          </div>
        ))}
        {extra > 0 && <div style={{ fontSize: 12, color: 'var(--cb-faint)', paddingLeft: 34 }}>+{extra} earlier</div>}
      </div>
    );
  }

  function BagelsGame({ showLeaderboard = true, len = 4, today, dark, onToggleDark }) {
    const day = today || new Date();
    const g = useGame({ len, today: day });
    useKeyboard(g, true);
    const display = g.won ? g.secret : g.input;
    return (
      <div className="cb-root" data-screen-label="Bagels" style={{ display: 'flex', flexDirection: 'column', padding: '34px 44px 40px' }}>
        <ThemeToggle dark={dark} onToggle={onToggleDark} />
        <div style={{ position: 'relative', display: 'flex', justifyContent: 'center', marginBottom: 30 }}>
          <Wordmark today={day} size="lg" />
          <div style={{ position: 'absolute', left: 0, bottom: 2 }}><Timer g={g} /></div>
        </div>
        <div style={{ flex: 1, display: 'grid', gridTemplateColumns: showLeaderboard ? '270px 1fr 270px' : '300px 1fr', gap: 44, alignItems: 'stretch' }}>
          <section>
            <div className="cb-kicker" style={{ marginBottom: 16 }}>Your guesses · {g.guesses.length}</div>
            <GuessList g={g} />
          </section>
          <section style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 22, borderLeft: '1px solid var(--cb-line)', borderRight: showLeaderboard ? '1px solid var(--cb-line)' : 'none', padding: '0 36px' }}>
            <Slots input={display} len={len} won={g.won} shake={g.shake} />
            {g.won
              ? <WinNote g={g} />
              : <>
                  <MessageLine g={g} center />
                  <div style={{ width: '100%', maxWidth: 360 }}><Keypad g={g} /></div>
                </>}
            <Legend style={{ marginTop: 6 }} />
          </section>
          {showLeaderboard && (
            <section>
              <div className="cb-kicker" style={{ marginBottom: 4 }}>Today's leaderboard</div>
              <div style={{ fontSize: 12, color: 'var(--cb-faint)', marginBottom: 12 }}>fewest guesses up top</div>
              <Leaderboard g={g} variant="list" max={8} />
            </section>
          )}
        </div>
      </div>
    );
  }

  // Exposed as BagelsGame; CowsBullsGame kept as a back-compat alias.
  Object.assign(window, { BagelsGame, CowsBullsGame: BagelsGame });
})();