/* global React, Shield, Button, Chip, Field, ModeSelector, PlayerRow, HUDPill, MetricStrip, PlayingCard, UserPill */

// ─── LoginGate ────────────────────────────────────────────────────────
function LoginGate({ onLogin }) {
  const [name, setName] = React.useState('');
  const [pwd, setPwd] = React.useState('');
  return (
    <section className="login-gate" aria-label="Anmeldung">
      <form
        className="login-card"
        onSubmit={(e) => { e.preventDefault(); if (name.trim()) onLogin(name.trim()); }}
      >
        <div className="header">
          <Shield size="lg" />
          <strong>MissionBenefits Towers</strong>
          <span>Private Luxury Race Lounge</span>
        </div>
        <Field label="Name" value={name} onChange={setName} maxLength={48} />
        <Field label="Passwort" value={pwd} onChange={setPwd} type="password" />
        <Button kind="primary" onClick={() => name.trim() && onLogin(name.trim())} style={{ width: '100%' }}>Einloggen</Button>
        <p className="dev-hint">
          Lokale Test‑Accounts:<br />
          <code>Schwarz / georg123</code> · <code>Gebel / gebel123</code> · <code>Weinert / weinert123</code>
        </p>
      </form>
    </section>
  );
}

// ─── Dashboard ──────────────────────────────────────────────────────────
function Dashboard({ user, onCreateRoom, onSolo, onLogout }) {
  const [rounds, setRounds] = React.useState(4);
  const [code, setCode] = React.useState('LUXE');
  const [players, setPlayers] = React.useState([
    { name: 'Gebel',   online: true,  tier: 'Premium',   invited: false },
    { name: 'Weinert', online: false, tier: '—',         lastSeen: '14:02' },
    { name: 'Adler',   online: true,  tier: 'Lounge',    invited: false },
    { name: 'Hahn',    online: false, tier: '—',         lastSeen: 'gestern' },
  ]);
  const onlineCount = players.filter(p => p.online).length;
  const inviteCount = players.filter(p => p.invited).length;
  const togglePrefs = (idx) => setPlayers(p => p.map((x,i) => i===idx ? {...x, invited: !x.invited} : x));

  const [audio, setAudio] = React.useState(true);
  const [haptik, setHaptik] = React.useState(true);
  const [calm, setCalm] = React.useState(false);

  return (
    <div className="lounge-stage">
      <header className="lounge-top">
        <div className="lounge-brand">
          <Shield />
          <div>
            <strong>MissionBenefits Towers</strong>
            <small>Luxury Race Lounge · Magic Towers</small>
          </div>
        </div>
        <UserPill name={user} tier="Lounge" />
        <div className="top-actions">
          <Chip on={audio} onClick={() => setAudio(a => !a)}>Audio</Chip>
          <Chip on={haptik} onClick={() => setHaptik(a => !a)}>Haptik</Chip>
          <Chip on={calm} onClick={() => setCalm(a => !a)}>Ruhige UI</Chip>
          <Chip onClick={onLogout}>Abmelden</Chip>
        </div>
      </header>

      <div className="dash-grid">
        <section className="surface hero" style={{ padding: 0, background: 'transparent', border: 'none', boxShadow: 'none' }}>
          <div className="surface" style={{ padding: 32 }}>
            <p className="eyebrow">MissionBenefits Private Lounge</p>
            <h1 style={{ marginTop: 8 }}>Raum öffnen <span>Spieler einladen</span></h1>
            <p style={{ marginTop: 12 }}>
              Game‑Lobby: Raum erstellen, rechts echte Online‑Spieler einladen,
              danach Race starten — gleiches Deck, klarer Flow.
            </p>
            <div className="hero-actions">
              <span className="chip on">16:9 Game Lobby</span>
              <span className="chip">Cloudflare Room State</span>
              <span className="chip">Same Seed Race</span>
            </div>
          </div>
          <div className="console">
            <div>
              <p className="eyebrow">Online‑Race</p>
              <h2 style={{ marginTop: 4 }}>Raum erstellen</h2>
              <p className="note" style={{ marginTop: 6 }}>Raum‑Code und Runden wählen — „Raum erstellen" synchronisiert mit dem Server.</p>
            </div>
            <div className="field-row">
              <Field label="Spieler (Login)" value={user} readOnly />
              <Field label="Lounge‑Code" value={code} onChange={(v) => setCode(v.toUpperCase().slice(0,8))} maxLength={8} />
            </div>
            <div>
              <p className="eyebrow" style={{ marginBottom: 8 }}>Runden</p>
              <ModeSelector value={rounds} onChange={setRounds} />
            </div>
            <div className="button-row">
              <Button kind="primary" onClick={() => onCreateRoom({ code, rounds })}>Raum erstellen</Button>
              <Button kind="secondary">Code kopieren</Button>
            </div>
            <Button kind="primary" onClick={onSolo}>Solo starten · Magic Towers</Button>
            <p className="note">Nach dem Erstellen werden die Invite‑Buttons rechts aktiv.</p>
          </div>
        </section>

        <aside className="surface online-aside">
          <div>
            <p className="eyebrow">Online Spieler</p>
            <h3 style={{ marginTop: 4 }}>Einladen</h3>
            <p className="note" style={{ marginTop: 6 }}>Wähle bis zu drei Spieler — sie erhalten eine Einladung, sobald der Raum offen ist.</p>
          </div>
          <div className="players">
            {players.map((p, i) => (
              <PlayerRow key={p.name} {...p} onInvite={() => togglePrefs(i)} />
            ))}
          </div>
          <div className="online-summary">
            <div className="summary"><small>Online</small><b>{onlineCount}</b></div>
            <div className="summary"><small>Invites</small><b>{inviteCount}</b></div>
          </div>
        </aside>
      </div>

      <MetricStrip items={[
        { label: 'Modus',   value: 'Race' },
        { label: 'Runden',  value: rounds },
        { label: 'Code',    value: code || '—' },
        { label: 'Raum',    value: 'Offen' },
        { label: 'Invites', value: inviteCount },
        { label: 'Status',  value: 'Setup', color: 'var(--mb-ok)' },
      ]} />
    </div>
  );
}

// ─── Race Lobby ──────────────────────────────────────────────────────
function RaceLobby({ user, code, rounds, onStart, onLeave }) {
  const [players, setPlayers] = React.useState([
    { name: user,    ready: false,  host: true },
    { name: 'Gebel', ready: true,   host: false },
  ]);
  const [selfReady, setSelfReady] = React.useState(false);

  // simulate two more players trickling in
  React.useEffect(() => {
    const t1 = setTimeout(() => {
      setPlayers(p => p.find(x => x.name === 'Adler') ? p : [...p, { name: 'Adler', ready: false }]);
    }, 1400);
    const t2 = setTimeout(() => {
      setPlayers(p => p.map(x => x.name === 'Adler' ? { ...x, ready: true } : x));
    }, 3200);
    return () => { clearTimeout(t1); clearTimeout(t2); };
  }, []);

  const finalPlayers = players.map(p => p.name === user ? { ...p, ready: selfReady } : p);
  const allReady = finalPlayers.every(p => p.ready) && finalPlayers.length >= 2;

  return (
    <div className="lounge-stage" style={{ display: 'flex', alignItems: 'center', minHeight: 'calc(100vh - 56px)' }}>
      <div className="lobby-card">
        <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
          <Shield />
          <div>
            <p className="eyebrow">Race‑Lobby</p>
            <h2 style={{ fontFamily: 'var(--font-serif)', fontSize: 30, letterSpacing: '-0.025em', marginTop: 4, display: 'flex', gap: 12, alignItems: 'center' }}>
              Raum <span className="lobby-code-badge">{code}</span>
            </h2>
          </div>
        </div>
        <p className="note">{allReady ? 'Alle bereit — der Host kann starten.' : `Spieler ${finalPlayers.filter(p=>p.ready).length}/${finalPlayers.length} · noch nicht alle bereit …`}</p>

        <div className="lobby-player-list">
          {finalPlayers.map((p) => (
            <div key={p.name} className={'lobby-player' + (p.ready ? ' ready' : '')}>
              <div className="left">
                <div className="user-pill" style={{ padding: '4px 12px 4px 4px', boxShadow: 'none', border: '1px solid var(--line-subtle)' }}>
                  <div className="avatar" style={{ width: 28, height: 28 }}>{p.name[0]}</div>
                  <div>
                    <b style={{ fontSize: 14 }}>{p.name}</b>
                    <small>{p.host ? 'Host · diese Sitzung' : 'Spieler'}</small>
                  </div>
                </div>
              </div>
              <span className={'ready-pill ' + (p.ready ? 'yes' : 'no')}>{p.ready ? '● Bereit' : '○ Wartet'}</span>
            </div>
          ))}
        </div>

        <div style={{ display: 'flex', gap: 10, alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap' }}>
          <span className="note">{rounds} Runden · {code}</span>
          <Button kind="secondary">Code kopieren</Button>
        </div>

        <div className="lobby-actions">
          <Button kind="secondary" onClick={onLeave}>Verlassen</Button>
          <Button kind="secondary" onClick={() => setSelfReady(r => !r)}>{selfReady ? 'Bereit ✓' : 'Bereit'}</Button>
          <Button kind="primary" onClick={onStart} disabled={!allReady}>Match starten</Button>
        </div>
      </div>
    </div>
  );
}

// ─── Game Table ──────────────────────────────────────────────────────
function GameTable({ user, code, rounds, race, onLeave }) {
  // fake tableau — TriPeaks layout
  const peaks = [
    [{ r: 'A', s: '♠' }, { r: '7', s: '♥' }, { r: 'K', s: '♣' }],
    [{ r: '4', s: '♣' }, { r: 'Q', s: '♥' }, { r: '9', s: '♠' }, { r: '2', s: '♦' }, { r: '8', s: '♥' }, { r: 'J', s: '♣' }],
    [
      { r: '6', s: '♥' }, { r: '3', s: '♠' }, { r: '5', s: '♦' }, { r: '10', s: '♣' }, { r: 'J', s: '♥' }, { r: '4', s: '♠' }, { r: '7', s: '♣' }, { r: 'Q', s: '♦' }, { r: '5', s: '♥' },
    ],
  ];
  const playableSet = new Set(['6♥', '3♠', '5♦', '10♣', 'J♥', '4♠', '7♣', 'Q♦', '5♥']);

  return (
    <div className="lounge-stage">
      <div className="game-stage">
        <div className="hud-row">
          <HUDPill lead label="Round" value={`1/${rounds}`} />
          <HUDPill lead label="Score" value="12 480" />
          <HUDPill lead label="Combo" value="3" />
          <HUDPill lead label="Multi" value="×1.42" />
          <HUDPill label="Time" value="02:14" />
          <HUDPill quiet label="Stock" value="14" />
          <HUDPill quiet label="Cards" value="22" />
          <HUDPill label="Peaks" value="0 / 3" />
          <HUDPill lead label="Diamonds" value="◆ 7" />
        </div>

        <div className="felt">
          {race && <div className="race-badge">Live Race</div>}
          <div className="felt-brand">
            <strong>MissionBenefits</strong>
            <small>Luxury Race Lounge</small>
          </div>

          <div className="tableau">
            <div className="tableau-row">
              {peaks[0].map((c) => <PlayingCard key={c.r+c.s+'a'} faceDown />)}
            </div>
            <div className="tableau-row">
              {peaks[1].map((c, i) => <PlayingCard key={c.r+c.s+'b'+i} faceDown />)}
            </div>
            <div className="tableau-row">
              {peaks[2].map((c, i) => (
                <PlayingCard key={c.r+c.s+'c'+i} rank={c.r} suit={c.s} playable={playableSet.has(c.r+c.s)} />
              ))}
            </div>
          </div>

          <div className="dock">
            <div className="dock-zone">
              <span className="lbl">Stock</span>
              <PlayingCard faceDown />
              <span className="hint">Tippen zum Ziehen</span>
            </div>
            <div className="dock-zone">
              <span className="lbl">Ablage</span>
              <PlayingCard rank="8" suit="♦" />
              <span className="hint">aktiv</span>
            </div>
          </div>
        </div>

        <div className="controls-bar">
          <Button kind="secondary" onClick={onLeave}>← Lobby</Button>
          <span className="note">Code · <code style={{background:'rgba(246,227,177,.08)',padding:'2px 8px',borderRadius:6,color:'var(--mb-gold-1)',fontFamily:'var(--font-mono)'}}>{code}</code></span>
          <Button kind="primary">Nächste Runde</Button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { LoginGate, Dashboard, RaceLobby, GameTable });