import * as THREE from "three";
import { Garden, MARGIN } from "./scene3d.js";
import { Snake3D } from "./snake3d.js";
import { Rabbits } from "./rabbit3d.js";
import { Centerline, buildCenterline } from "./snakeMotion.js";

// Camera presets: the 3D view shows the whole yard from high up; Realistic is lower, angled and closer.
const MODES = {
  "3d": { fov: 36, pitch: 55, yaw: 0, fit: 1, follow: 13 },
  cinematic: { fov: 30, pitch: 38, yaw: -16, fit: 0.84, follow: 10 },
};
const UP = new THREE.Vector3(0, 1, 0);
const _dir = new THREE.Vector3(), _pos = new THREE.Vector3(), _target = new THREE.Vector3(), _mat = new THREE.Matrix4(), _q = new THREE.Quaternion();

// Miniature-style depth of field: keeps a horizontal band around the snake sharp, blurs above and
// below, adds a light vignette, then tone-maps to the screen.
class TiltShift {
  constructor() {
    this.target = new THREE.WebGLRenderTarget(1, 1, { type: THREE.HalfFloatType, samples: 4 });
    this.material = new THREE.ShaderMaterial({
      uniforms: { tDiffuse: { value: this.target.texture }, resolution: { value: new THREE.Vector2(1, 1) }, focusY: { value: 0.5 }, band: { value: 0.2 }, maxBlur: { value: 5 } },
      vertexShader: "varying vec2 vUv; void main() { vUv = uv; gl_Position = vec4(position.xy, 0.0, 1.0); }",
      fragmentShader: `
        uniform sampler2D tDiffuse; uniform vec2 resolution; uniform float focusY; uniform float band; uniform float maxBlur;
        varying vec2 vUv;
        const vec2 taps[12] = vec2[](vec2(-0.326,-0.406), vec2(-0.840,-0.074), vec2(-0.696,0.457), vec2(-0.203,0.621),
          vec2(0.962,-0.195), vec2(0.473,-0.480), vec2(0.519,0.767), vec2(0.185,-0.893), vec2(0.507,0.064),
          vec2(0.896,0.412), vec2(-0.322,-0.933), vec2(-0.792,-0.598));
        void main() {
          float blur = smoothstep(band, band + 0.32, abs(vUv.y - focusY)) * maxBlur;
          vec4 c = texture2D(tDiffuse, vUv);
          if (blur > 0.25) {
            vec4 acc = c;
            for (int i = 0; i < 12; i++) acc += texture2D(tDiffuse, vUv + taps[i] * blur / resolution);
            c = acc / 13.0;
          }
          vec2 q = vUv - 0.5;
          c.rgb *= 1.0 - dot(q, q) * 0.6;
          gl_FragColor = c;
          #include <tonemapping_fragment>
          #include <colorspace_fragment>
        }`,
      depthTest: false, depthWrite: false,
    });
    this.quad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), this.material);
    this.quad.frustumCulled = false;
    this.scene = new THREE.Scene();
    this.scene.add(this.quad);
    this.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
  }

  setSize(w, h) {
    this.target.setSize(w, h);
    this.material.uniforms.resolution.value.set(w, h);
    this.material.uniforms.maxBlur.value = Math.max(2, h / 320);
  }

  render(renderer, scene, camera, focusY) {
    renderer.setRenderTarget(this.target);
    renderer.render(scene, camera);
    renderer.setRenderTarget(null);
    this.material.uniforms.focusY.value = focusY;
    renderer.render(this.scene, this.camera);
  }

  dispose() { this.target.dispose(); this.material.dispose(); this.quad.geometry.dispose(); }
}

// The 3D game world. It only reads the server state it is given; it never touches the dashboard.
export class ThreeRenderer {
  constructor(canvas, prefs) {
    this.canvas = canvas;
    this.prefs = prefs;
    this.ready = false;
    this.mode = "3d";
    this.S = null;
    this.cl = new Centerline();
    this.look = new THREE.Vector3();
    this.camSnap = true;
    this.last = 0;
    this.debug = null;
  }

  // Creates the renderer, scene, lights and models (once).
  async init() {
    const r = new THREE.WebGLRenderer({ canvas: this.canvas, antialias: true, powerPreference: "high-performance" });
    this.renderer = r;
    r.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
    r.outputColorSpace = THREE.SRGBColorSpace;
    r.toneMapping = THREE.ACESFilmicToneMapping;
    r.shadowMap.enabled = true;
    r.shadowMap.type = THREE.PCFSoftShadowMap;
    this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera(MODES["3d"].fov, 1, 0.1, 400);
    this.garden = new Garden(this.scene, r);
    this.snake = new Snake3D(this.scene);
    this.rabbits = new Rabbits(this.scene);
    this.post = new TiltShift();
    await Promise.all([this.snake.load(), this.rabbits.load()]);
    this.ready = true;
    this.resize();
    if (this.S) { const s = this.S; this.S = null; this.update(s); }
  }

  // Switches between the "3d" overview and the "cinematic" (Realistic) presentation.
  setMode(mode) { this.mode = MODES[mode] ? mode : "3d"; }

  // Takes a new server snapshot: board size, rocks and food positions come straight from it.
  update(s) {
    const resized = !this.S || this.S.width !== s.width || this.S.height !== s.height;
    this.S = s;
    if (!this.ready) return;
    if (resized) {
      this.garden.build(s.width, s.height);
      this.rabbits.clear();
      this.camSnap = true;
      if (this.debug) this.debug.gridKey = "";
    }
    this.garden.setObstacles(s.obstacles);
    this.rabbits.setFoods(s.foods, s.width, s.height, performance.now());
  }

  // Draws one frame: interpolate the snake, animate, move the camera, render.
  render(now) {
    if (!this.ready || !this.S) return;
    const dt = this.last ? Math.min(100, now - this.last) : 16;
    this.last = now;
    const s = this.S, cinematic = this.mode === "cinematic";
    this.garden.setLighting(this.prefs.tod, cinematic);
    this.garden.setGrid(this.prefs.grid);
    this.garden.update(now);
    buildCenterline(s, now, this.cl);
    this.snake.update(this.cl, s, now, dt);
    this.rabbits.showZ = !cinematic;
    this.rabbits.update(now, dt);
    this.updateCamera(dt);
    if (this.debug) this.updateDebug(dt);
    if (cinematic) {
      _pos.set(this.cl.n ? this.cl.x[0] - s.width / 2 : 0, 0.2, this.cl.n ? this.cl.y[0] - s.height / 2 : 0).project(this.camera);
      this.post.render(this.renderer, this.scene, this.camera, Math.min(0.85, Math.max(0.15, _pos.y * 0.5 + 0.5)));
    } else {
      this.renderer.render(this.scene, this.camera);
    }
  }

  // Camera distance that fits the fenced yard in view at this pitch, yaw and aspect.
  fitDistance(W, H, M) {
    const pitch = THREE.MathUtils.degToRad(M.pitch), yaw = Math.abs(THREE.MathUtils.degToRad(M.yaw));
    const hw = W / 2 + MARGIN * 0.55, hd = H / 2 + MARGIN * 0.55;
    const tv = Math.tan(THREE.MathUtils.degToRad(this.camera.fov) / 2), th = tv * this.camera.aspect;
    const across = hw * Math.cos(yaw) + hd * Math.sin(yaw), deep = hd * Math.cos(yaw) + hw * Math.sin(yaw);
    const distV = (deep * Math.sin(pitch) + 0.9 * Math.cos(pitch)) / tv + deep * Math.cos(pitch);
    const distH = across / th + deep * Math.cos(pitch) * 0.6;
    return Math.max(distV, distH);
  }

  // Eases the camera toward the overview or toward the snake's head; never snaps except on a new board.
  updateCamera(dt) {
    if (this.debug && this.debug.orbit && this.debug.orbit.enabled) { this.debug.orbit.update(); return; }
    const s = this.S, M = MODES[this.mode], W = s.width, H = s.height, cam = this.camera;
    const a = this.camSnap ? 1 : 1 - Math.exp(-dt / 450);
    if (Math.abs(cam.fov - M.fov) > 0.01) { cam.fov += (M.fov - cam.fov) * a; cam.updateProjectionMatrix(); }
    const pitch = THREE.MathUtils.degToRad(M.pitch), yaw = THREE.MathUtils.degToRad(M.yaw);
    _dir.set(Math.sin(yaw) * Math.cos(pitch), Math.sin(pitch), Math.cos(yaw) * Math.cos(pitch));
    const fit = this.fitDistance(W, H, M);
    let dist = fit * M.fit;
    _target.set(0, 0, 0);
    if (this.prefs.follow && this.cl.n) {
      const reachX = Math.max(0, W / 2 - 1.5), reachZ = Math.max(0, H / 2 - 1);
      _target.set(THREE.MathUtils.clamp(this.cl.x[0] - W / 2, -reachX, reachX), 0, THREE.MathUtils.clamp(this.cl.y[0] - H / 2, -reachZ, reachZ));
      dist = Math.min(fit, M.follow);
    }
    if (s.game_over) dist *= 0.93;
    _pos.copy(_target).addScaledVector(_dir, dist);
    cam.position.lerp(_pos, a);
    this.look.lerp(_target, a);
    _mat.lookAt(cam.position, this.look, UP);
    _q.setFromRotationMatrix(_mat);
    if (this.camSnap) cam.quaternion.copy(_q); else cam.quaternion.slerp(_q, 1 - Math.exp(-dt / 160));
    this.camSnap = false;
  }

  // Keeps the drawing buffer, camera aspect and post-processing target in step with the canvas size.
  resize() {
    if (!this.renderer) return;
    const w = Math.max(1, this.canvas.clientWidth), h = Math.max(1, this.canvas.clientHeight);
    const pr = Math.min(window.devicePixelRatio || 1, 2);
    this.renderer.setPixelRatio(pr);
    this.renderer.setSize(w, h, false);
    this.camera.aspect = w / h;
    this.camera.updateProjectionMatrix();
    this.post.setSize(Math.round(w * pr), Math.round(h * pr));
  }

  // Called when the 2D view takes over; the next frame eases back in from where the camera was.
  deactivate() { this.last = 0; }

  // Turns on the developer overlay: path, skeleton, grid, axes, orbit camera, FPS.
  async enableDebug(panel) {
    const d = this.debug = { panel, fps: 60, gridKey: "", flags: {}, orbit: null };
    const pathGeo = new THREE.BufferGeometry();
    pathGeo.setAttribute("position", new THREE.BufferAttribute(new Float32Array(8192 * 3), 3));
    d.path = new THREE.Line(pathGeo, new THREE.LineBasicMaterial({ color: 0xffd23f, depthTest: false }));
    d.path.renderOrder = 10; d.path.frustumCulled = false;
    d.axes = new THREE.AxesHelper(3);
    d.grid = new THREE.LineSegments(new THREE.BufferGeometry(), new THREE.LineBasicMaterial({ color: 0x4ef296, transparent: true, opacity: 0.6 }));
    for (const o of [d.path, d.axes, d.grid]) { o.visible = false; this.scene.add(o); }
    const { OrbitControls } = await import("three/addons/controls/OrbitControls.js");
    d.orbit = new OrbitControls(this.camera, this.canvas);
    d.orbit.enabled = false;
    panel.querySelectorAll("input[data-dbg]").forEach((box) => {
      box.onchange = () => {
        d.flags[box.dataset.dbg] = box.checked;
        if (box.dataset.dbg === "orbit") { d.orbit.enabled = box.checked; d.orbit.target.copy(this.look); if (!box.checked) this.camSnap = false; }
      };
    });
  }

  // Refreshes the debug helpers and readouts.
  updateDebug(dt) {
    const d = this.debug, s = this.S, W = s.width, H = s.height;
    d.fps += (1000 / Math.max(1, dt) - d.fps) * 0.05;
    d.path.visible = !!d.flags.path;
    if (d.path.visible) {
      const a = d.path.geometry.attributes.position, n = Math.min(this.cl.n, 8192);
      for (let i = 0; i < n; i++) a.setXYZ(i, this.cl.x[i] - W / 2, 0.05, this.cl.y[i] - H / 2);
      a.needsUpdate = true;
      d.path.geometry.setDrawRange(0, n);
    }
    d.axes.visible = !!d.flags.axes;
    d.grid.visible = !!d.flags.grid;
    if (d.grid.visible && d.gridKey !== W + "x" + H) {
      d.gridKey = W + "x" + H;
      const pts = [];
      for (let i = 0; i <= W; i++) pts.push(i - W / 2, 0.02, -H / 2, i - W / 2, 0.02, H / 2);
      for (let j = 0; j <= H; j++) pts.push(-W / 2, 0.02, j - H / 2, W / 2, 0.02, j - H / 2);
      d.grid.geometry.dispose();
      d.grid.geometry = new THREE.BufferGeometry().setAttribute("position", new THREE.Float32BufferAttribute(pts, 3));
    }
    const root = this.snake.rig && this.snake.rig.root;
    if (d.flags.bones && root && (!d.bones || d.bonesRoot !== root)) {
      if (d.bones) { this.scene.remove(d.bones); d.bones.dispose(); }
      d.bones = new THREE.SkeletonHelper(root);
      d.bones.material.depthTest = false;
      d.bonesRoot = root;
      this.scene.add(d.bones);
    }
    if (d.bones) d.bones.visible = !!d.flags.bones;
    const q = (id, v) => { const el = d.panel.querySelector("#" + id); if (el && el.textContent !== v) el.textContent = v; };
    q("dbg-fps", d.fps.toFixed(0));
    const c = this.camera.position;
    q("dbg-cam", `${c.x.toFixed(1)}, ${c.y.toFixed(1)}, ${c.z.toFixed(1)}`);
    q("dbg-model", `${this.snake.describe()} · rabbit ${this.rabbits.kind}`);
  }

  // Releases every GPU resource this renderer created.
  destroy() {
    if (!this.renderer) return;
    this.snake.dispose();
    this.rabbits.dispose();
    this.garden.dispose();
    this.post.dispose();
    if (this.debug && this.debug.orbit) this.debug.orbit.dispose();
    this.renderer.dispose();
    this.ready = false;
  }
}