// Lobby.jsx — "besetzter Hausflur": pick a room, ring the bell, enter the password.
// Room names are generic building-spaces (atmosphere, not real venues).
const GYM_ROOMS = [
  { id: 'turnhalle', name: 'Turnhalle', sub: 'großer Floor · Sprossenwände', count: 6, live: true,  locked: true },
  { id: 'kesselraum', name: 'Kesselraum', sub: 'Downtempo · Beton & Hall', count: 3, live: true,  locked: true },
  { id: 'dachboden', name: 'Dachboden', sub: 'Chill · Lichterketten', count: 1, live: false, locked: false },
  { id: 'keller',    name: 'Heizungskeller', sub: 'Techno · eng & heiß', count: 0, live: false, locked: true },
];

function PasswordModal({ room, onClose, onEnter }) {
  const [pw, setPw] = React.useState('');
  return (
    <div className="gy-modal-bg" onClick={onClose}>
      <div className="gy-modal" onClick={e => e.stopPropagation()}>
        <div className="t-eyebrow">// tür · {room.name.toLowerCase()}</div>
        <h3 className="gy-modal-title">Passwort, bitte 🔑</h3>
        <p className="gy-modal-sub">Steht in der Community. Graffiti-Code an der Wand zählt auch.</p>
        <input className="gy-modal-input" type="text" value={pw} autoFocus
          placeholder="· · , _ · · · ·" onChange={e => setPw(e.target.value)}
          onKeyDown={e => e.key === 'Enter' && onEnter()} />
        <div className="gy-modal-row">
          <button className="btn" onClick={onClose}>Zurück</button>
          <button className="btn primary" onClick={onEnter}>Rein da 🌀</button>
        </div>
      </div>
    </div>
  );
}

function Lobby({ onEnterRoom }) {
  const [modal, setModal] = React.useState(null);
  const pick = (room) => { room.locked ? setModal(room) : onEnterRoom(room); };
  return (
    <div className="gy-lobby">
      <div className="gy-lobby-head">
        <div className="t-eyebrow">// besetztes gym · hausflur</div>
        <h1 className="gy-lobby-title">Komm rein.<br />Der Hausflur ist offen.</h1>
        <p className="gy-lobby-sub">
          Such dir eine Tür. Klingel, gib das Passwort — dann triffst du das Kollektiv im Raum.
          Gather.town trifft Squat-Rave. 🪩
        </p>
      </div>
      <div className="gy-doors">
        {GYM_ROOMS.map(room => (
          <button key={room.id} className={'gy-door' + (room.live ? ' live' : '')} onClick={() => pick(room)}>
            <div className="gy-door-top">
              <span className="gy-door-lock">{room.locked ? '🔒' : '🔓'}</span>
              {room.live
                ? <span className="gy-door-live"><span className="gy-dot" />{room.count} im Raum</span>
                : <span className="gy-door-empty">{room.count ? room.count + ' da' : 'leer'}</span>}
            </div>
            <div className="gy-door-name">{room.name}</div>
            <div className="gy-door-sub">{room.sub}</div>
            <div className="gy-door-cta">{room.locked ? 'Klingeln 🔔' : 'Eintreten →'}</div>
          </button>
        ))}
      </div>
      {modal && <PasswordModal room={modal} onClose={() => setModal(null)} onEnter={() => onEnterRoom(modal)} />}
    </div>
  );
}
Object.assign(window, { Lobby, GYM_ROOMS });