/* ==========================================================================
   3D WORLD — Grand Atrium with photographic marble-arch doors
   Each reference image is BOTH the door and the room behind it.
   Doors are placed on an arc around the camera so the visitor can look around.
   Exposes window.Atrium
   ========================================================================== */
const { useRef, useEffect } = React;

const DOOR_H = 1340;                 // door height in world px
const R = 2150;                      // arc radius from camera rest
const CAMZ = -1200;                  // camera rest z (matches REST.z)

/* azimuth per slot (degrees, + = left of center) */
const SLOT_AZ = { L2:57, L1:29, R1:-29, R2:-57, END:0 };

function doorTransform(room){
  const az = SLOT_AZ[room.slot];
  const rad = az*Math.PI/180;
  if(room.slot === "END"){
    return { x:0, z:CAMZ-3050, ry:0, scale:1.16 };
  }
  const x = -R*Math.sin(rad);
  const z = CAMZ - R*Math.cos(rad);
  return { x, z, ry:az, scale:1 };
}

function Door({ room, index, ready }){
  const tf = doorTransform(room);
  const w = DOOR_H*room.aspect;
  const transform =
    `translate3d(${tf.x.toFixed(0)}px, 40px, ${tf.z.toFixed(0)}px) rotateY(${tf.ry}deg) scale(${tf.scale}) translate(-50%,-50%)`;
  const styled = !room.img;   // fallback marble door if a room has no image
  const showImg = !styled && ready;
  return (
    <div className={"door3d"+(styled?" styled":"")} data-portal-id={room.id}
         style={{ "--rh": room.hue, width:w+"px", height:DOOR_H+"px", transform }}>
      <div className="door-aura" />
      <div className="door-light" />
      <div className="door-rays" />
      <div className="door-sparks">
        {Array.from({length:6}).map((_,i)=>(<i key={i} style={{ left:(14+i*13)+"%", "--sd":(2.4+(i%4)*0.6)+"s", "--sdl":(i*0.3)+"s" }} />))}
      </div>
      {styled ? (
        <React.Fragment>
          <div className="leaf l"><div className="leaf-marble" /></div>
          <div className="leaf r"><div className="leaf-marble" /></div>
          <div className="door-frame">
            <div className="df-title">{room.sub.toUpperCase()}</div>
            <div className="df-tag">{room.tag}</div>
            <div className="df-seal">{room.glyph}</div>
          </div>
        </React.Fragment>
      ) : (
        <React.Fragment>
          <div className="leaf l"><div className="leaf-fill" />{showImg && <img className="door-img" src={room.img} alt={room.label} decoding="async" />}</div>
          <div className="leaf r"><div className="leaf-fill" />{showImg && <img className="door-img" src={room.img} alt="" aria-hidden="true" decoding="async" />}</div>
          {!showImg && <div className="door-loading">{room.glyph}</div>}
        </React.Fragment>
      )}
      <div className="door-rim" />
      <div className="door-cap">
        <span className="dc-enter">ENTER</span>
        <span className="dc-idx">{String(index+1).padStart(2,"0")} / 05</span>
      </div>
      <div className="door-reflect" style={ showImg ? { backgroundImage:`url(${room.img})` } : {} } />
    </div>
  );
}

function Atrium({ onPortal, imgReady }){
  const D = window.MBDATA;
  const rooms = D.rooms;
  const byId = (id)=>rooms.find(r=>r.id===id);
  imgReady = imgReady || {};

  const onClick = (e)=>{
    const d = e.target.closest(".door3d");
    if(d){ const room = byId(d.dataset.portalId); if(room) onPortal(room, d); }
  };

  return (
    <div className="atrium" onClick={onClick}>
      {/* environment shell */}
      <div className="plane atrium-floor" />
      <div className="plane atrium-ceil" />
      <div className="plane atrium-back" />

      {/* doors on the arc */}
      {rooms.map((r,i)=>(<Door key={r.id} room={r} index={i} ready={!!imgReady[r.id]} />))}
    </div>
  );
}

window.Atrium = Atrium;
window.Exterior = function(){ return null; };