// Scene.jsx — the "besetztes Gym" room as an enclosing 2.5D atmospheric space.
// Maus/WASD pannen die Szene (umsehen) — KEIN echtes Begehen (das ist three.js / Code-Track,
// der echte Live-Gym kann es schon). Material back wall + vanishing-point floor + mirror ball /
// speckles (Wand vs. Boden getrennt + tiefengestaffelt) + wash + haze. Verfall trifft Feier.

const gyRand = (i, n) => ((Math.sin(i * 12.9898 + n * 78.233) * 43758.5453) % 1 + 1) % 1;
// WALL speckles — obere Hälfte, klein, dicht
const GY_WALL_SPECKLES = Array.from({ length: 30 }).map((_, i) => ({
  left: (gyRand(i, 1) * 100).toFixed(1),
  top: (3 + gyRand(i, 2) * 43).toFixed(1),
  size: (1.2 + gyRand(i, 3) * 1.6).toFixed(1),
  col: ['#00ffff', '#ff00aa', '#ff7a00', '#ffffff'][Math.floor(gyRand(i, 4) * 4)],
  delay: (gyRand(i, 5) * 3).toFixed(2),
}));
// FLOOR speckles — untere Hälfte, Größe wächst zum Betrachter (Perspektive)
const GY_FLOOR_SPECKLES = Array.from({ length: 16 }).map((_, i) => {
  const top = 56 + gyRand(i + 50, 2) * 38;       // 56..94
  const depth = (top - 56) / 38;                  // 0 (Horizont) .. 1 (nah)
  return {
    left: (gyRand(i + 50, 1) * 100).toFixed(1),
    top: top.toFixed(1),
    size: (1.4 + depth * 3.6).toFixed(1),
    col: ['#00ffff', '#ff00aa', '#ffffff'][Math.floor(gyRand(i + 50, 4) * 3)],
    delay: (gyRand(i + 50, 5) * 3).toFixed(2),
  };
});

function Scene({ people, room }) {
  const [pan, setPan] = React.useState({ x: 0, y: 0 });
  React.useEffect(() => {
    const keys = {
      a: [22, 0], arrowleft: [22, 0], d: [-22, 0], arrowright: [-22, 0],
      w: [0, 16], arrowup: [0, 16], s: [0, -16], arrowdown: [0, -16],
    };
    const onKey = (e) => {
      const mv = keys[e.key.toLowerCase()];
      if (!mv) return;
      setPan(p => ({
        x: Math.max(-70, Math.min(70, p.x + mv[0])),
        y: Math.max(-44, Math.min(44, p.y + mv[1])),
      }));
      e.preventDefault();
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);
  const look = (e) => {
    const r = e.currentTarget.getBoundingClientRect();
    const mx = (e.clientX - r.left) / r.width - 0.5;
    const my = (e.clientY - r.top) / r.height - 0.5;
    setPan({ x: -mx * 54, y: -my * 34 });
  };

  return (
    <div className="gy-scene" role="img" aria-label={'Raum ' + room.name} onMouseMove={look}
      style={{ perspectiveOrigin: (50 - pan.x * 0.15) + '% ' + (44 - pan.y * 0.18) + '%' }}>
      <div className="gy-room" style={{ transform: 'translate(' + pan.x + 'px,' + pan.y + 'px)' }}>

        {/* ---- BACK WALL (above horizon): concrete + material ---- */}
        <div className="gy-wall">
          <div className="gy-wall-grain" aria-hidden="true" />
          <div className="gy-crack gy-crack-1" aria-hidden="true" />
          <div className="gy-crack gy-crack-2" aria-hidden="true" />
          <div className="gy-sprossen" aria-hidden="true"><span /><span /><span /><span /></div>
          <div className="gy-pipe" aria-hidden="true" />
          <div className="gy-cable" aria-hidden="true" />
          <div className="gy-poster gy-poster-1" aria-hidden="true"><span>OPEN<br/>AIR</span></div>
          <div className="gy-poster gy-poster-2" aria-hidden="true"><span>🌀</span></div>
          <div className="gy-sticker gy-sticker-1" aria-hidden="true">RAVE ON</div>
          <div className="gy-sticker gy-sticker-2" aria-hidden="true">🪩 124</div>
          <div className="gy-tag gy-tag-1">🌀 aufnpunkt woz hier</div>
          <div className="gy-tag gy-tag-2">SQUAT&nbsp;&amp;&nbsp;FEIER</div>
          <div className="gy-neonstrip" aria-hidden="true" />
        </div>

        {/* ---- FLOOR (below horizon): vanishing-point grid ---- */}
        <div className="gy-floor" aria-hidden="true" />
        <div className="gy-horizon" aria-hidden="true" />

        {/* ---- LIGHT: wash beams + haze ---- */}
        <div className="gy-wash gy-wash-cyan" aria-hidden="true" />
        <div className="gy-wash gy-wash-magenta" aria-hidden="true" />
        <div className="gy-haze" aria-hidden="true" />

        {/* ---- mirror ball + split speckle reflections (wall + floor) ---- */}
        <div className="gy-speckles" aria-hidden="true">
          {[...GY_WALL_SPECKLES, ...GY_FLOOR_SPECKLES].map((s, i) => (
            <span key={i} style={{
              left: s.left + '%', top: s.top + '%', width: s.size + 'px', height: s.size + 'px',
              background: s.col, boxShadow: '0 0 6px ' + s.col, animationDelay: s.delay + 's',
            }} />
          ))}
        </div>
        <div className="gy-ball" aria-hidden="true">
          <div className="gy-ball-facets" />
          <div className="gy-ball-shine" />
        </div>

        {/* fairy lights string */}
        <div className="gy-fairy" aria-hidden="true">
          {Array.from({ length: 16 }).map((_, i) => <span key={i} style={{ left: (i / 15 * 100) + '%' }} />)}
        </div>

        {/* freaky instrument prompt in the room */}
        <button className="gy-instrument" title="Instrument spielen">
          <span className="gy-instr-glyph">🥁</span>
          <span className="gy-instr-hint">tap = spielen</span>
        </button>

        {/* avatars placed on the floor, scaled by depth */}
        <div className="gy-people">
          {people.map(p => (
            <div key={p.name} className="gy-person" style={{ left: p.x + '%', bottom: p.y + '%', transform: `scale(${p.s})`, zIndex: Math.round(p.s * 100) }}>
              <Avatar name={p.name} speaking={p.speaking} holdingStick={p.stick} muted={p.muted} size="md" />
              <div className="gy-shadow" style={{ opacity: 0.3 * p.s }} />
            </div>
          ))}
        </div>

        <div className="gy-vignette" aria-hidden="true" />
        <div className="gy-movehint t-mono">Maus / WASD · umsehen · Tap spielt</div>
      </div>
    </div>
  );
}
window.Scene = Scene;