// gym-app.jsx — lobby ↔ room state machine + ritual interactions + voice/chat wiring.
const GYM_PEOPLE = [
  { name: 'freaky-falter', x: 30, y: 16, s: 1.05, speaking: false, muted: false, stick: false },
  { name: 'nebel-nomade',  x: 56, y: 12, s: 0.92, speaking: false, muted: false, stick: false },
  { name: 'beton-biene',   x: 70, y: 22, s: 0.78, speaking: false, muted: true,  stick: false },
  { name: 'spiral-specht', x: 44, y: 26, s: 0.7,  speaking: false, muted: false, stick: false },
  { name: 'kessel-kauz',   x: 18, y: 24, s: 0.82, speaking: false, muted: false, stick: false },
];
const ME = 'du';

function GymApp() {
  const [room, setRoom] = React.useState(null);
  const [people, setPeople] = React.useState(GYM_PEOPLE);
  const [muted, setMuted] = React.useState(false);
  const [talking, setTalking] = React.useState(false);
  const [ritual, setRitual] = React.useState(null);
  const [energy, setEnergy] = React.useState(42);
  const [flash, setFlash] = React.useState(null);

  const ducking = talking || people.some(p => p.speaking);

  const doRitual = (id) => {
    setRitual(id);
    if (id === 'clap') { setFlash('👏 Applaus-Welle!'); setTimeout(() => setFlash(null), 1400); }
    if (id === 'vote') { setFlash('🎶 Einigkeit — Dur-Akkord ✓'); setTimeout(() => setFlash(null), 1600); }
    if (id === 'energy') { setEnergy(e => Math.min(100, e + 14)); }
    if (id === 'stick') {
      setPeople(ps => {
        const i = Math.floor(Math.random() * ps.length);
        return ps.map((p, j) => ({ ...p, stick: j === i, speaking: j === i }));
      });
    }
  };

  const enter = (r) => { setRoom(r); setPeople(GYM_PEOPLE); setRitual(null); };
  const leave = () => { setRoom(null); setRitual(null); setTalking(false); };

  if (!room) return <Lobby onEnterRoom={enter} />;

  return (
    <div className="gy-room-view">
      <RoomBar room={room} onLeave={leave} />
      <div className="gy-stage">
        <Scene people={people} room={room} />
        <Presence people={people} talking={talking} />
        <ChatPanel me={ME} />
        {flash && <div className="gy-flash">{flash}</div>}
      </div>
      <div className="gy-controls">
        <VoiceBar muted={muted} onMute={() => setMuted(m => !m)} ducking={ducking}
          talking={talking} onTalkStart={() => setTalking(true)} onTalkEnd={() => setTalking(false)} />
        <RitualDock active={ritual} onRitual={doRitual} energy={energy} />
      </div>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<GymApp />);