// HUD.jsx — in-room overlay: room bar, presence, voice controls (mit Push-to-Talk),
// text chat, and the meeting-ritual dock. Echter Voice/Text-Transport = Code-Track;
// die UI + lokales Mock-Verhalten sind die Design-Schicht.
function RoomBar({ room, onLeave }) {
  return (
    <div className="gy-bar">
      <div className="gy-bar-room">
        <span className="gy-dot live" />
        <span className="gy-bar-name">{room.name}</span>
        <span className="gy-bar-sub">{room.sub}</span>
      </div>
      <button className="gy-leave" onClick={onLeave}>← Hausflur</button>
    </div>
  );
}

function Presence({ people, talking }) {
  return (
    <div className="gy-presence">
      <div className="t-eyebrow">// im raum · {people.length + 1}</div>
      <div className="gy-presence-list">
        <div className={'gy-pr' + (talking ? ' speaking' : '')}>
          <span className="gy-pr-cap" style={{ background: hashColor('du') }} />
          <span className="gy-pr-name">du</span>
          <span className="gy-pr-state">{talking ? '● spricht' : '🎙'}</span>
        </div>
        {people.map(p => (
          <div key={p.name} className={'gy-pr' + (p.speaking ? ' speaking' : '')}>
            <span className="gy-pr-cap" style={{ background: hashColor(p.name) }} />
            <span className="gy-pr-name">{p.name}</span>
            <span className="gy-pr-state">{p.muted ? '🔇' : p.speaking ? '● spricht' : '🎙'}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function VoiceBar({ muted, onMute, ducking, talking, onTalkStart, onTalkEnd }) {
  return (
    <div className="gy-voice">
      <button className={'gy-mic' + (muted ? ' muted' : '')} onClick={onMute}>
        {muted ? '🔇 Mic an' : '🎙 Mic aus'}
      </button>
      <button className={'gy-ptt' + (talking ? ' on' : '')}
        onMouseDown={onTalkStart} onMouseUp={onTalkEnd} onMouseLeave={onTalkEnd}
        onTouchStart={onTalkStart} onTouchEnd={onTalkEnd}>
        {talking ? '● du sprichst' : '🎤 Push-to-Talk'}
      </button>
      <div className="gy-voice-meta">
        <span className="gy-chip">positional</span>
        <span className={'gy-chip' + (ducking ? ' hot' : '')}>{ducking ? 'ducking −6dB' : 'Betonhall'}</span>
        <span className="gy-chip">Voice = 7. Instrument</span>
      </div>
    </div>
  );
}

function ChatPanel({ me }) {
  const [msgs, setMsgs] = React.useState([
    { who: 'nebel-nomade', text: 'na endlich, hausflur ist auf 🌀' },
    { who: 'beton-biene', text: 'wer legt auf?' },
    { who: 'freaky-falter', text: 'gleich. erst kaffee ☕' },
  ]);
  const [draft, setDraft] = React.useState('');
  const listRef = React.useRef(null);
  const send = () => {
    const t = draft.trim();
    if (!t) return;
    setMsgs(m => [...m, { who: me, text: t, me: true }]);
    setDraft('');
  };
  React.useEffect(() => { const el = listRef.current; if (el) el.scrollTop = el.scrollHeight; }, [msgs]);
  return (
    <div className="gy-chat">
      <div className="t-eyebrow gy-chat-head">// chat · text</div>
      <div className="gy-chat-list" ref={listRef}>
        {msgs.map((m, i) => (
          <div key={i} className={'gy-msg' + (m.me ? ' me' : '')}>
            <span className="gy-msg-who" style={{ color: hashColor(m.who) }}>{m.who}</span>
            <span className="gy-msg-text">{m.text}</span>
          </div>
        ))}
      </div>
      <div className="gy-chat-input">
        <input value={draft} onChange={e => setDraft(e.target.value)}
          onKeyDown={e => e.key === 'Enter' && send()} placeholder="schreib was…" aria-label="Nachricht" />
        <button onClick={send} aria-label="Senden">↵</button>
      </div>
    </div>
  );
}

const GYM_RITUALS = [
  { id: 'stick', glyph: '🪄', label: 'Redestab', note: 'wer hält, spricht' },
  { id: 'vote',  glyph: '🎛️', label: 'Voting',   note: 'Einigkeit = Dur-Akkord' },
  { id: 'energy',glyph: '🥁', label: 'Energie',  note: 'Check an der Kick' },
  { id: 'clap',  glyph: '👏', label: 'Applaus',  note: 'Welle durch den Raum' },
];

function RitualDock({ active, onRitual, energy }) {
  return (
    <div className="gy-dock">
      <div className="t-eyebrow gy-dock-head">// meeting-rituale · in arbeit</div>
      <div className="gy-dock-row">
        {GYM_RITUALS.map(r => (
          <button key={r.id} className={'gy-ritual' + (active === r.id ? ' on' : '')} onClick={() => onRitual(r.id)}>
            <span className="gy-ritual-glyph">{r.glyph}</span>
            <span className="gy-ritual-label">{r.label}</span>
            <span className="gy-ritual-note">{r.note}</span>
            {r.id === 'energy' && (
              <span className="gy-energy"><span className="gy-energy-fill" style={{ width: energy + '%' }} /></span>
            )}
          </button>
        ))}
      </div>
    </div>
  );
}
Object.assign(window, { RoomBar, Presence, VoiceBar, ChatPanel, RitualDock, GYM_RITUALS });