'use strict';

// The Device — scene layout (parent). Full-bleed flesh, eye + scope canvases
// registered behind their plate cutouts, baseplate composited on top.
// Layer order back→front: flesh → eye canvas → scope canvas → baseplate
// (plate is pointer-events none, so scope touches fall through its cutout;
// the eye canvas is also pointer-events none — it tracks via a window listener).

// Registration is measured from baseplate-2.png's alpha channel (the clean
// plate — painted knobs/switches removed; eye aperture + scope cutout remain).
// All values are % of the plate's rendered box.

// ── Scope-canvas registration ─────────────────────────────────────────
// baseplate-2.png (1302×1208): scope cutout spans (202,749)–(1045,1087).
// (Old plate values were L17.33 T63.73 W61.04 H25.80.)
const SCOPE_LEFT_PCT   = 15.51;  // 202 / 1302
const SCOPE_TOP_PCT    = 62.00;  // 749 / 1208
const SCOPE_WIDTH_PCT  = 64.82;  // 844 / 1302
const SCOPE_HEIGHT_PCT = 28.06;  // 339 / 1208
// The canvas overfills the cutout by this much on every side. It's hidden
// behind the plate, and it forgives a ragged cutout edge / sub-% drift.
const SCOPE_BLEED_PCT  = 0.8;

// ── Eye-canvas registration ───────────────────────────────────────────
// baseplate-2.png: eye cutout spans (371,69)–(912,541) — larger and higher
// than the old plate. (Old values were L32.78 T10.82 W33.44 H31.87.)
const EYE_LEFT_PCT   = 28.49;  // 371 / 1302
const EYE_TOP_PCT    = 5.71;   //  69 / 1208
const EYE_WIDTH_PCT  = 41.63;  // 542 / 1302
const EYE_HEIGHT_PCT = 39.16;  // 473 / 1208
// Eye canvas overfills the cutout; the plate hides the square corners so only
// the circular opening shows. The eye art is also overscanned within the
// canvas (EYE_OVERSCAN in eye-canvas.jsx), so this bleed can stay small.
const EYE_BLEED_PCT  = 1.0;

const PLATE_W = 1302;
const PLATE_H = 1208;

function DeviceScene() {
  return (
    <div style={{
      position: 'fixed', inset: 0,
      background: '#060403',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      overflow: 'hidden',
    }}>
      <style>{`
        @keyframes device-wake-blink { 50% { opacity: 0.15; } }
      `}</style>

      {/* full-bleed flesh background with the idle squirm filter (z 0) */}
      <window.FleshLayer />

      {/* plate box — natural aspect, letterboxed against the flesh */}
      <div style={{
        position: 'relative', zIndex: 1,
        width: `min(96vw, calc(96vh * ${PLATE_W / PLATE_H}))`,
        aspectRatio: `${PLATE_W} / ${PLATE_H}`,
      }}>
        {/* eye canvas, registered behind the upper circular cutout */}
        <div style={{
          position: 'absolute',
          left:   `${EYE_LEFT_PCT - EYE_BLEED_PCT}%`,
          top:    `${EYE_TOP_PCT - EYE_BLEED_PCT}%`,
          width:  `${EYE_WIDTH_PCT + 2 * EYE_BLEED_PCT}%`,
          height: `${EYE_HEIGHT_PCT + 2 * EYE_BLEED_PCT}%`,
          zIndex: 1,
          pointerEvents: 'none',
        }}>
          <window.EyeCanvas />
        </div>

        {/* scope canvas, registered behind the screen cutout */}
        <div style={{
          position: 'absolute',
          left:   `${SCOPE_LEFT_PCT - SCOPE_BLEED_PCT}%`,
          top:    `${SCOPE_TOP_PCT - SCOPE_BLEED_PCT}%`,
          width:  `${SCOPE_WIDTH_PCT + 2 * SCOPE_BLEED_PCT}%`,
          height: `${SCOPE_HEIGHT_PCT + 2 * SCOPE_BLEED_PCT}%`,
          zIndex: 1,
        }}>
          <window.ScopeCanvas />
        </div>

        {/* baseplate on top; pointer-events none so the cutout is touchable */}
        <img
          src="/the-device/assets/baseplate-2.png"
          alt=""
          draggable={false}
          style={{
            position: 'absolute', inset: 0,
            width: '100%', height: '100%',
            pointerEvents: 'none',
            zIndex: 2,
          }}
        />

        {/* physical controls, registered over the painted plate (z-index 3) */}
        <window.ControlsLayer />
      </div>
    </div>
  );
}

window.DeviceScene = DeviceScene;