// Bagels — Mobile (portrait, touch-first) layout. Exposes window.BagelsMobile.
// Reuses the shared hook + pieces from game-ui.jsx.
(function () {
  const { useState, useEffect } = React;
  const { useGame, useKeyboard, Slots, ResultPips, Keypad, MessageLine,
    Timer, Leaderboard, WinNote, Legend } = window;

  // one-time mobile CSS
  if (!document.getElementById('cb-mobile-styles')) {
    const s = document.createElement('style');
    s.id = 'cb-mobile-styles';
    s.textContent = `
    .cbm{ width:100%; height:100%; background:var(--cb-bg); color:var(--cb-ink);
      font-family:var(--cb-sans); display:flex; flex-direction:column;
      border-radius:38px; overflow:hidden; position:relative; }
    .cbm-status{ height:30px; display:flex; align-items:center; justify-content:space-between;
      padding:0 26px; font-size:12.5px; font-weight:600; color:var(--cb-ink);
      font-family:var(--cb-mono); flex:0 0 auto; }
    .cbm-notch{ position:absolute; top:9px; left:50%; transform:translateX(-50%);
      width:104px; height:24px; background:var(--cb-ink); border-radius:14px; opacity:.92; z-index:5; }
    .cbm-body{ flex:1; display:flex; flex-direction:column; padding:8px 20px 18px; min-height:0; }
    .cbm-head{ display:flex; align-items:center; justify-content:space-between; flex:0 0 auto; }
    .cbm-seg{ display:flex; background:var(--cb-key-hover); border-radius:11px; padding:3px; gap:3px; flex:0 0 auto; }
    .cbm-seg button{ flex:1; border:none; background:transparent; font-family:var(--cb-sans);
      font-size:12.5px; font-weight:600; letter-spacing:.04em; padding:8px 4px; border-radius:8px;
      color:var(--cb-muted); cursor:pointer; transition:background .15s, color .15s; }
    .cbm-seg button[data-on="1"]{ background:var(--cb-surface); color:var(--cb-ink);
      box-shadow:0 1px 3px rgba(0,0,0,.08); }
    .cbm-pane{ flex:1; min-height:0; overflow:hidden; }
    .cbm-chip{ display:flex; align-items:center; justify-content:space-between;
      padding:9px 14px; border:1px solid var(--cb-line); border-radius:12px; }
    `;
    document.head.appendChild(s);
  }

  function StatusBar() {
    return (
      <div className="cbm-status">
        <span>9:41</span>
        <span style={{ display: 'inline-flex', gap: 5, alignItems: 'center', opacity: .85 }}>
          <span style={{ fontSize: 11 }}>▦</span><span style={{ fontSize: 11 }}>◗</span>
          <span style={{ width: 22, height: 11, border: '1.5px solid currentColor', borderRadius: 3, display: 'inline-block', position: 'relative' }}>
            <span style={{ position: 'absolute', inset: 1.5, width: '72%', background: 'currentColor', borderRadius: 1 }} />
          </span>
        </span>
      </div>
    );
  }

  function MobileGuesses({ g }) {
    if (!g.guesses.length) {
      return <div style={{ fontSize: 13.5, color: 'var(--cb-faint)', textAlign: 'center', marginTop: 20 }}>Your guesses appear here, newest first.</div>;
    }
    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {g.guesses.slice(0, 6).map((gr) => (
          <div key={gr.n} className="cbm-chip">
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 12 }}>
              <span className="cb-mono" style={{ fontSize: 12, color: 'var(--cb-faint)', width: 16 }}>{gr.n}</span>
              <span className="cb-mono" style={{ fontSize: 21, fontWeight: 600, letterSpacing: '.14em' }}>{gr.value}</span>
            </span>
            <ResultPips bulls={gr.bulls} cows={gr.cows} len={g.len} />
          </div>
        ))}
      </div>
    );
  }

  function BagelsMobile({ active, onActivate, len, today, version, dark, onToggleDark, chrome = true }) {
    const g = useGame({ len, today, version });
    useKeyboard(g, active);
    const [tab, setTab] = useState('guesses');
    const display = g.won ? g.secret : g.input;
    useEffect(() => { if (g.won) setTab('board'); }, [g.won]);

    return (
      <div className="cbm" data-screen-label="Mobile"
        style={{ boxShadow: active && chrome ? '0 0 0 2px var(--cb-accent-soft)' : 'none',
          borderRadius: chrome ? 38 : 0 }}
        onPointerDown={onActivate}>
        {chrome && <div className="cbm-notch" />}
        {chrome && <StatusBar />}
        <div className="cbm-body" style={{ paddingTop: chrome ? 8 : 16 }}>
          {/* header */}
          <div className="cbm-head">
            <span style={{ display: 'inline-flex', alignItems: 'baseline', gap: 7, fontWeight: 700, fontSize: 19 }}>
              <span style={{ fontSize: 17 }}>🥯</span>Bagels
            </span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 12 }}>
              <Timer g={g} />
              <button onClick={(e) => { e.stopPropagation(); onToggleDark && onToggleDark(); }}
                onPointerDown={(e) => e.stopPropagation()} aria-label="Toggle dark mode"
                style={{ width: 32, height: 32, borderRadius: 16, border: '1px solid var(--cb-line-strong)',
                  background: 'var(--cb-surface)', color: 'var(--cb-ink)', cursor: 'pointer', display: 'flex',
                  alignItems: 'center', justifyContent: 'center', fontSize: 14 }}>
                {dark ? '☀' : '☾'}
              </button>
            </span>
          </div>

          {/* slots */}
          <div style={{ display: 'flex', justifyContent: 'center', margin: '18px 0 6px' }}>
            <Slots input={display} len={len} won={g.won} shake={g.shake} slotW={Math.min(64, Math.floor(300 / len))} slotH={74} fz={38} />
          </div>
          <MessageLine g={g} center />

          {/* win: name entry + share, then board */}
          {g.won ? (
            <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0, marginTop: 8 }}>
              <div style={{ display: 'flex', justifyContent: 'center' }}><WinNote g={g} /></div>
              <div className="cb-kicker" style={{ margin: '16px 0 8px', textAlign: 'center' }}>Today's leaderboard</div>
              <div className="cbm-pane"><Leaderboard g={g} variant="list" max={5} /></div>
            </div>
          ) : (
            <>
              {/* tab toggle */}
              <div className="cbm-seg" style={{ marginTop: 14 }}>
                <button data-on={tab === 'guesses' ? 1 : 0} onClick={() => setTab('guesses')}>Guesses · {g.guesses.length}</button>
                <button data-on={tab === 'board' ? 1 : 0} onClick={() => setTab('board')}>Leaderboard</button>
              </div>
              <div className="cbm-pane" style={{ margin: '12px 0 14px' }}>
                {tab === 'guesses' ? <MobileGuesses g={g} /> : <Leaderboard g={g} variant="list" max={6} />}
              </div>
              {/* keypad pinned bottom */}
              <div style={{ flex: '0 0 auto' }}>
                <Keypad g={g} />
                <Legend style={{ marginTop: 12, transform: 'scale(0.92)' }} />
              </div>
            </>
          )}
        </div>
      </div>
    );
  }

  Object.assign(window, { BagelsMobile });
})();