import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { RENDER_OPTIONS } from "@config/config_frontend";
import type { SurfacePointCloudSampleResponse } from "./B04_wf1_Surface_Api_Fetch";

export interface SurfacePointCloudViewer {
  root: HTMLElement;
  controlsGroup: HTMLElement;
  optionsGroup: HTMLElement;
  statusSpan: HTMLElement;
  render: (data: SurfacePointCloudSampleResponse | null) => void;
  dispose: () => void;
}

export function createSurfacePointCloudViewer(): SurfacePointCloudViewer {
  const root = document.createElement("div");
  root.className = "point-viewer";

  const statusSpan = document.createElement("span");
  statusSpan.className = "b04-surface__status-info";
  statusSpan.style.color = "var(--color-text-secondary)";
  statusSpan.style.fontSize = "var(--text-caption)";
  statusSpan.textContent = "포인트 데이터 로딩 중...";

  const controlsDiv = document.createElement("div");
  controlsDiv.className = "viewer-controls";

  const btnIso = document.createElement("button");
  btnIso.type = "button";
  btnIso.innerHTML = "🔍 사시도";

  const btnTop = document.createElement("button");
  btnTop.type = "button";
  btnTop.textContent = "상단";

  const btnFront = document.createElement("button");
  btnFront.type = "button";
  btnFront.textContent = "정면";

  const btnSide = document.createElement("button");
  btnSide.type = "button";
  btnSide.textContent = "측면";

  const btnReset = document.createElement("button");
  btnReset.type = "button";
  btnReset.innerHTML = "🔄 리셋";

  const toggleLabel = document.createElement("label");
  toggleLabel.className = "toggle-label";
  const axesCheck = document.createElement("input");
  axesCheck.type = "checkbox";
  axesCheck.checked = true;
  toggleLabel.append(axesCheck, document.createTextNode(" 축"));

  controlsDiv.append(btnIso, btnTop, btnFront, btnSide, btnReset, toggleLabel);

  const controlsGroup = document.createElement("section");
  controlsGroup.className = "b04-surface__group";
  const controlsTitle = document.createElement("h3");
  controlsTitle.className = "b04-surface__panel-title";
  controlsTitle.textContent = "뷰어 시점 제어";
  controlsGroup.append(controlsTitle, controlsDiv);

  // 2. Options Sliders
  const optionsDiv = document.createElement("div");
  optionsDiv.className = "viewer-options";

  const sizeLabel = document.createElement("label");
  sizeLabel.textContent = "점 크기 ";
  const sizeInput = document.createElement("input");
  sizeInput.type = "range";
  sizeInput.min = "0.1";
  sizeInput.max = "2.5";
  sizeInput.step = "0.01";
  sizeInput.value = "0.42";
  sizeLabel.append(sizeInput);

  const densityLabel = document.createElement("label");
  densityLabel.innerHTML = '밀도&nbsp;<span class="viewer-option-val">100%</span>';
  const densityInput = document.createElement("input");
  densityInput.type = "range";
  densityInput.min = "1";
  densityInput.max = "10";
  densityInput.step = "1";
  densityInput.value = "10";
  densityLabel.append(densityInput);

  optionsDiv.append(sizeLabel, densityLabel);

  const optionsGroup = document.createElement("section");
  optionsGroup.className = "b04-surface__group";
  const optionsTitle = document.createElement("h3");
  optionsTitle.className = "b04-surface__panel-title";
  optionsTitle.textContent = "표시 옵션";
  optionsGroup.append(optionsTitle, optionsDiv);

  // 4. Viewer Area & Canvas
  const viewerArea = document.createElement("div");
  viewerArea.className = "three-viewer";
  viewerArea.style.height = "520px";

  const canvas = document.createElement("canvas");
  canvas.className = "b04-surface-viewer__canvas";
  viewerArea.append(canvas);
  root.append(viewerArea);

  // 5. Scale Bar Overlay
  const scaleBar = document.createElement("div");
  scaleBar.style.position = "absolute";
  scaleBar.style.bottom = "16px";
  scaleBar.style.left = "16px";
  scaleBar.style.background = "rgba(255, 255, 255, 0.9)";
  scaleBar.style.border = "1.5px solid #1e293b";
  scaleBar.style.borderTop = "none";
  scaleBar.style.height = "8px";
  scaleBar.style.zIndex = "10";
  scaleBar.style.display = "none";
  scaleBar.style.flexDirection = "column";
  scaleBar.style.alignItems = "center";
  scaleBar.style.justifyContent = "flex-end";
  scaleBar.style.pointerEvents = "none";

  const scaleText = document.createElement("span");
  scaleText.style.fontSize = "10px";
  scaleText.style.fontWeight = "bold";
  scaleText.style.color = "#1e293b";
  scaleText.style.position = "absolute";
  scaleText.style.bottom = "10px";
  scaleText.style.whiteSpace = "nowrap";
  scaleBar.append(scaleText);
  viewerArea.append(scaleBar);

  // 6. ThreeJS Setup
  const renderer = new THREE.WebGLRenderer({
    canvas,
    antialias: RENDER_OPTIONS.antialias,
  });
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, RENDER_OPTIONS.maxPixelRatio));

  const scene = new THREE.Scene();
  scene.background = new THREE.Color(0xf5f7f9);

  const camera = new THREE.PerspectiveCamera(55, 1, 0.1, 22000);
  const controls = new OrbitControls(camera, canvas);
  controls.enableDamping = true;
  controls.dampingFactor = 0.08;
  controls.screenSpacePanning = true;

  const axes = new THREE.AxesHelper(45);
  axes.visible = axesCheck.checked;
  scene.add(axes);

  let pointsObject: THREE.Points | null = null;
  let animationFrame = 0;
  let currentData: SurfacePointCloudSampleResponse | null = null;

  function resize(): void {
    const rect = viewerArea.getBoundingClientRect();
    const width = Math.max(1, Math.floor(rect.width));
    const height = Math.max(1, Math.floor(rect.height));
    renderer.setSize(width, height, false);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
  }

  function setCameraView(view: "iso" | "top" | "front" | "side"): void {
    const positions: Record<string, [number, number, number]> = {
      iso: [120, 95, 135],
      top: [0, 190, 0.001],
      front: [0, 60, 240],
      side: [240, 60, 0],
    };
    camera.position.set(...positions[view]);
    camera.lookAt(0, 0, 0);
    controls.target.set(0, 0, 0);
    controls.update();
  }

  function animate(): void {
    if (!root.isConnected) {
      cancelAnimationFrame(animationFrame);
      clearPoints();
      controls.dispose();
      renderer.dispose();
      return;
    }
    resize();
    controls.update();
    renderer.render(scene, camera);

    // Update scale bar overlay
    if (currentData) {
      const bounds = currentData.bounds;
      const xMin = bounds.x_min ?? 0;
      const xMax = bounds.x_max ?? 0;
      const yMin = bounds.y_min ?? 0;
      const yMax = bounds.y_max ?? 0;
      const zMin = bounds.z_min ?? 0;
      const zMax = bounds.z_max ?? 0;
      const xSpan = xMax - xMin;
      const ySpan = yMax - yMin;
      const zSpan = zMax - zMin;
      const maxSpan = Math.max(xSpan, ySpan, zSpan);
      const internalScale = 180 / maxSpan;

      const dist = camera.position.distanceTo(controls.target);
      const rect = viewerArea.getBoundingClientRect();
      const clientWidth = rect.width || 1200;
      const sceneUnitsPerPixel = (2 * Math.tan((camera.fov * Math.PI) / 360) * dist) / clientWidth;
      const metersPerPixel = sceneUnitsPerPixel / internalScale;

      const roughMeters = 100 * metersPerPixel;
      const prettyMeters =
        roughMeters < 5
          ? 2
          : roughMeters < 15
            ? 10
            : roughMeters < 35
              ? 20
              : roughMeters < 75
                ? 50
                : roughMeters < 150
                  ? 100
                  : roughMeters < 350
                    ? 200
                    : roughMeters < 750
                      ? 500
                      : roughMeters < 1500
                        ? 1000
                        : roughMeters < 3500
                          ? 2000
                          : roughMeters < 7500
                            ? 5000
                            : 10000;

      const pixels = (prettyMeters * internalScale) / sceneUnitsPerPixel;
      scaleBar.style.display = "flex";
      scaleBar.style.width = `${pixels}px`;
      scaleText.textContent =
        prettyMeters >= 1000 ? `${(prettyMeters / 1000).toFixed(0)} km` : `${prettyMeters} m`;
    } else {
      scaleBar.style.display = "none";
    }

    animationFrame = requestAnimationFrame(animate);
  }

  function clearPoints(): void {
    if (!pointsObject) return;
    pointsObject.geometry.dispose();
    const material = pointsObject.material;
    if (Array.isArray(material)) material.forEach((item) => item.dispose());
    else material.dispose();
    scene.remove(pointsObject);
    pointsObject = null;
  }

  function renderPointCloudInternal(data: SurfacePointCloudSampleResponse): void {
    clearPoints();
    if (data.points.length === 0) return;

    const bounds = data.bounds;
    const xMin = bounds.x_min ?? 0;
    const xMax = bounds.x_max ?? 0;
    const yMin = bounds.y_min ?? 0;
    const yMax = bounds.y_max ?? 0;
    const zMin = bounds.z_min ?? 0;
    const zMax = bounds.z_max ?? 0;

    const xMid = (xMin + xMax) / 2;
    const yMid = (yMin + yMax) / 2;
    const zMid = (zMin + zMax) / 2;

    const xSpan = Math.max(xMax - xMin, 1e-9);
    const ySpan = Math.max(yMax - yMin, 1e-9);
    const zSpan = Math.max(zMax - zMin, 1e-9);
    const scale = 180 / Math.max(xSpan, ySpan, zSpan);

    const hasRgb = data.rgb && data.rgb.length === data.points.length;
    const densityVal = parseInt(densityInput.value, 10);
    const step = Math.max(1, Math.ceil(10 / densityVal));
    const renderPoints: typeof data.points = [];
    const renderRgb: [number, number, number][] = [];
    for (let i = 0; i < data.points.length; i += step) {
      renderPoints.push(data.points[i]);
      if (hasRgb && data.rgb) {
        renderRgb.push(data.rgb[i]);
      }
    }

    const positions = new Float32Array(renderPoints.length * 3);
    const colors = new Float32Array(renderPoints.length * 3);

    renderPoints.forEach((point, index) => {
      const x = point[0];
      const y = point[1];
      const z = point[2];

      positions[index * 3] = (x - xMid) * scale;
      positions[index * 3 + 1] = (z - zMid) * scale;
      positions[index * 3 + 2] = -(y - yMid) * scale;

      let r = 0;
      let g = 0;
      let b = 0;
      if (hasRgb && renderRgb[index]) {
        const rgbPoint = renderRgb[index];
        const maxVal = Math.max(rgbPoint[0], rgbPoint[1], rgbPoint[2]);
        const divisor = maxVal > 255 ? 65535 : 255;
        r = rgbPoint[0] / divisor;
        g = rgbPoint[1] / divisor;
        b = rgbPoint[2] / divisor;
      } else {
        const t = Math.max(0, Math.min(1, (z - zMin) / zSpan));
        r = (36 + t * 190) / 255;
        g = (86 + Math.sin(t * Math.PI) * 95) / 255;
        b = (128 - t * 80) / 255;
      }

      colors[index * 3] = r;
      colors[index * 3 + 1] = g;
      colors[index * 3 + 2] = b;
    });

    const geometry = new THREE.BufferGeometry();
    geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));
    geometry.setAttribute("color", new THREE.BufferAttribute(colors, 3));
    geometry.computeBoundingSphere();

    const sizeVal = parseFloat(sizeInput.value);
    const material = new THREE.PointsMaterial({
      size: sizeVal,
      vertexColors: true,
      sizeAttenuation: true,
    });

    pointsObject = new THREE.Points(geometry, material);
    scene.add(pointsObject);

    // Update status text
    const nearestMin10 = Math.round(zMin / 10) * 10;
    const nearestMax10 = Math.round(zMax / 10) * 10;
    statusSpan.textContent = ` ${renderPoints.length.toLocaleString()}개 점 표시 중 [높이범위: ~${nearestMin10}m ... ${nearestMax10}m~]`;
  }

  function render(data: SurfacePointCloudSampleResponse | null): void {
    currentData = data;
    clearPoints();
    if (!data) {
      statusSpan.textContent = "데이터가 존재하지 않습니다.";
      return;
    }
    renderPointCloudInternal(data);
    setCameraView("top");
  }

  // Event Listeners
  btnIso.addEventListener("click", () => setCameraView("iso"));
  btnTop.addEventListener("click", () => setCameraView("top"));
  btnFront.addEventListener("click", () => setCameraView("front"));
  btnSide.addEventListener("click", () => setCameraView("side"));
  btnReset.addEventListener("click", () => setCameraView("iso"));

  axesCheck.addEventListener("change", () => {
    axes.visible = axesCheck.checked;
  });

  sizeInput.addEventListener("input", () => {
    if (pointsObject) {
      (pointsObject.material as THREE.PointsMaterial).size = parseFloat(sizeInput.value);
    }
  });

  densityInput.addEventListener("input", () => {
    const val = parseInt(densityInput.value, 10);
    const valSpan = densityLabel.querySelector(".viewer-option-val");
    if (valSpan) valSpan.textContent = `${val * 10}%`;
    if (currentData) {
      renderPointCloudInternal(currentData);
    }
  });

  animationFrame = requestAnimationFrame(animate);

  return {
    root,
    controlsGroup,
    optionsGroup,
    statusSpan,
    render,
    dispose: () => {
      cancelAnimationFrame(animationFrame);
      clearPoints();
      controls.dispose();
      renderer.dispose();
    },
  };
}