/* =============================================================================
 * E04_Stab3D_UI_Map.ts
 * E04 가운데 평면 지도(PLAN 533-3) — 셀별 최소 안전율 · 임계 체적 색 지도 · 임계 활동면 평면 윤곽 ·
 *   최소 위치 · 노선 · 측점 · 고른 구간 · 방위 · 축척 · 셀 툴팁. 휠 = 확대 · 끌기 = 옮김 · 두 번 누름 = 맞춤.
 *   색 · 범례 · 셀 찾기 = logic/E04_Stab3D_Raster · 윤곽 셀 = logic/E04_Stab3D_Mesh(cutCells).
 * ========================================================================== */

import { el } from "@ui/ui_template_elements";
import { t } from "@ui/ui_template_locale";
import { cutCells, footprintCenter } from "./logic/E04_Stab3D_Mesh";
import {
  FS_STEPS,
  VOLUME_STEPS,
  cellAt,
  rasterRgba,
  type Result3d,
} from "./logic/E04_Stab3D_Raster";

export type MapLayer = "fs" | "volume";

export interface StationPoint {
  chainage_m: number;
  label: string | null;
  x: number;
  y: number;
}

export interface PlanMap {
  root: HTMLElement;
  setRoute: (line: number[][], stations: StationPoint[]) => void;
  setRange: (start: number, end: number) => void;
  setResult: (result: Result3d | null) => void;
  setLayer: (layer: MapLayer) => void;
  dispose: () => void;
}

interface View {
  cx: number;
  cy: number;
  scale: number; // px / m
}

const RANGE_COLOR = "#2563eb"; // 고른 구간 — 3D 노선 관과 같은 색 · 안전율 색 단계와 겹치지 않음

const shortLabel = (label: string): string => label.replace(/^STA\./, "").replace(/\.0+$/, "");

const css = (name: string, fallback: string): string =>
  getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;

export function createPlanMap(): PlanMap {
  const root = el("div", { className: "e04-map" });
  const canvas = el("canvas", { className: "e04-map__canvas" });
  const tip = el("div", { className: "e04-map__tip" });
  const empty = el("p", { className: "e04-map__empty", text: t("E04_Map_Empty") });
  tip.hidden = true;
  root.append(canvas, tip, empty);
  const ctx = canvas.getContext("2d")!;

  let line: number[][] = [];
  let stations: StationPoint[] = [];
  let range: [number, number] | null = null;
  let result: Result3d | null = null;
  let layer: MapLayer = "fs";
  let image: HTMLCanvasElement | null = null;
  let outline: Set<number> = new Set();
  let marker: { x: number; y: number } | null = null;
  let view: View = { cx: 0, cy: 0, scale: 1 };
  let width = 0;
  let height = 0;

  const toScreen = (x: number, y: number): [number, number] => [
    width / 2 + (x - view.cx) * view.scale,
    height / 2 - (y - view.cy) * view.scale,
  ];
  const toModel = (px: number, py: number): [number, number] => [
    view.cx + (px - width / 2) / view.scale,
    view.cy - (py - height / 2) / view.scale,
  ];

  function buildImage(): void {
    image = null;
    if (!result) return;
    const { grid } = result;
    const values = layer === "fs" ? result.f : result.v;
    const steps = layer === "fs" ? FS_STEPS : VOLUME_STEPS;
    const off = document.createElement("canvas");
    off.width = grid.nx;
    off.height = grid.ny;
    const rgba = rasterRgba(grid, values, steps);
    off.getContext("2d")!.putImageData(new ImageData(rgba, grid.nx, grid.ny), 0, 0);
    image = off;
  }

  /** 맞춤 — 결과 격자 · 없으면 고른 구간 노선 · 없으면 노선 전체 */
  function fit(): void {
    let xs: number[] = [];
    let ys: number[] = [];
    if (result) {
      const g = result.grid;
      xs = [g.x0 - g.dx / 2, g.x0 + (g.nx - 0.5) * g.dx];
      ys = [g.y0 - g.dx / 2, g.y0 + (g.ny - 0.5) * g.dx];
    } else {
      const picked = range
        ? line.filter((p) => p[2] >= range![0] - 1e-6 && p[2] <= range![1] + 1e-6)
        : line;
      const use = picked.length >= 2 ? picked : line;
      xs = use.map((p) => p[0]);
      ys = use.map((p) => p[1]);
      if (range && picked.length >= 2) {
        xs.push(Math.min(...xs) - 40, Math.max(...xs) + 40);
        ys.push(Math.min(...ys) - 40, Math.max(...ys) + 40);
      }
    }
    if (!xs.length || !width || !height) return;
    const [x0, x1, y0, y1] = [Math.min(...xs), Math.max(...xs), Math.min(...ys), Math.max(...ys)];
    const scale = Math.min(width / Math.max(x1 - x0, 1), height / Math.max(y1 - y0, 1)) * 0.9;
    view = { cx: (x0 + x1) / 2, cy: (y0 + y1) / 2, scale };
  }

  function drawRoute(text: string, accent: string): void {
    if (line.length < 2) return;
    ctx.lineJoin = ctx.lineCap = "round";
    ctx.strokeStyle = text;
    ctx.lineWidth = 1.5;
    ctx.beginPath();
    line.forEach((p, i) =>
      i ? ctx.lineTo(...toScreen(p[0], p[1])) : ctx.moveTo(...toScreen(p[0], p[1])),
    );
    ctx.stroke();
    if (range) {
      const part = line.filter((p) => p[2] >= range![0] - 1e-6 && p[2] <= range![1] + 1e-6);
      ctx.strokeStyle = accent;
      ctx.lineWidth = 5;
      ctx.beginPath();
      part.forEach((p, i) =>
        i ? ctx.lineTo(...toScreen(p[0], p[1])) : ctx.moveTo(...toScreen(p[0], p[1])),
      );
      ctx.stroke();
    }
    // 측점 — 화면 간격이 좁으면 다섯 개마다 이름
    // 이름 = "STA.0+020.000" → "0+020" · 이름끼리 70 px 이상 떨어지게 1 · 2 · 5 · 10 … 개마다
    const gap = stations.length > 1 ? 20 * view.scale : 999;
    const every = [1, 2, 5, 10, 25, 50, 100].find((n) => n * gap >= 70) ?? 100;
    ctx.font = "11px sans-serif";
    ctx.textBaseline = "middle";
    stations.forEach((s, i) => {
      const [px, py] = toScreen(s.x, s.y);
      if (px < -50 || py < -50 || px > width + 50 || py > height + 50) return;
      ctx.fillStyle = text;
      ctx.beginPath();
      ctx.arc(px, py, i % every === 0 ? 3 : 1.5, 0, Math.PI * 2);
      ctx.fill();
      if (i % every === 0 && s.label) ctx.fillText(shortLabel(s.label), px + 6, py - 8);
    });
  }

  /** 임계 활동면 평면 윤곽 — 잘린 셀 무리의 바깥 변 */
  function drawOutline(color: string): void {
    if (!result || !outline.size) return;
    const { grid } = result;
    const h = grid.dx / 2;
    ctx.strokeStyle = color;
    ctx.lineWidth = 2;
    ctx.setLineDash([6, 4]);
    ctx.beginPath();
    for (const index of outline) {
      const ix = index % grid.nx;
      const iy = Math.floor(index / grid.nx);
      const x = grid.x0 + ix * grid.dx;
      const y = grid.y0 + iy * grid.dx;
      const edges: [number, number, number, number, number][] = [
        [index - 1, x - h, y - h, x - h, y + h],
        [index + 1, x + h, y - h, x + h, y + h],
        [index - grid.nx, x - h, y - h, x + h, y - h],
        [index + grid.nx, x - h, y + h, x + h, y + h],
      ];
      for (const [next, ax, ay, bx, by] of edges) {
        const sameRow =
          next === index - 1 || next === index + 1 ? Math.floor(next / grid.nx) === iy : true;
        if (sameRow && outline.has(next)) continue;
        ctx.moveTo(...toScreen(ax, ay));
        ctx.lineTo(...toScreen(bx, by));
      }
    }
    ctx.stroke();
    ctx.setLineDash([]);
  }

  function drawMarker(text: string): void {
    if (!result || !marker) return;
    const { best } = result;
    const [px, py] = toScreen(marker.x, marker.y);
    ctx.lineWidth = 2;
    ctx.strokeStyle = "#ffffff";
    ctx.beginPath();
    ctx.arc(px, py, 9, 0, Math.PI * 2);
    ctx.stroke();
    ctx.strokeStyle = "#000000";
    ctx.beginPath();
    ctx.arc(px, py, 11, 0, Math.PI * 2);
    ctx.stroke();
    ctx.font = "bold 12px sans-serif";
    ctx.fillStyle = text;
    ctx.fillText(`Fs ${best.f.toFixed(3)}`, px + 14, py);
  }

  function drawFurniture(text: string): void {
    // 방위(오른쪽 위)
    ctx.fillStyle = text;
    ctx.strokeStyle = text;
    ctx.beginPath();
    ctx.moveTo(width - 24, 14);
    ctx.lineTo(width - 30, 34);
    ctx.lineTo(width - 18, 34);
    ctx.closePath();
    ctx.fill();
    ctx.font = "bold 12px sans-serif";
    ctx.textAlign = "center";
    ctx.fillText("N", width - 24, 46);
    // 축척(오른쪽 아래) — 1 · 2 · 5 × 10ⁿ m
    const target = 100 / view.scale;
    const pow = 10 ** Math.floor(Math.log10(target));
    const meters = [1, 2, 5, 10].map((k) => k * pow).find((m) => m >= target) ?? target;
    const px = meters * view.scale;
    ctx.fillStyle = css("--color-surface", "#ffffff");
    ctx.globalAlpha = 0.85;
    ctx.fillRect(width - 24 - px, height - 42, px + 16, 34);
    ctx.globalAlpha = 1;
    ctx.fillStyle = text;
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(width - 16 - px, height - 16);
    ctx.lineTo(width - 16, height - 16);
    ctx.stroke();
    ctx.fillText(`${meters} m`, width - 16 - px / 2, height - 26);
    ctx.textAlign = "start";
  }

  function draw(): void {
    const dpr = window.devicePixelRatio || 1;
    width = root.clientWidth;
    height = root.clientHeight;
    if (!width || !height) return;
    if (canvas.width !== Math.round(width * dpr) || canvas.height !== Math.round(height * dpr)) {
      canvas.width = Math.round(width * dpr);
      canvas.height = Math.round(height * dpr);
    }
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    ctx.clearRect(0, 0, width, height);
    const text = css("--color-text", "#1f2937");
    const accent = RANGE_COLOR;
    if (result && image) {
      const g = result.grid;
      const [left, top] = toScreen(g.x0 - g.dx / 2, g.y0 + (g.ny - 0.5) * g.dx);
      ctx.imageSmoothingEnabled = false;
      ctx.drawImage(image, left, top, g.nx * g.dx * view.scale, g.ny * g.dx * view.scale);
    }
    drawRoute(text, accent);
    drawOutline(text);
    drawMarker(text);
    drawFurniture(text);
    empty.hidden = Boolean(result);
  }

  // 조작 — 휠 확대(커서 자리 고정) · 끌기 옮김 · 두 번 누름 맞춤 · 셀 툴팁
  let drag: { x: number; y: number; view: View } | null = null;
  canvas.addEventListener("wheel", (event) => {
    event.preventDefault();
    const rect = canvas.getBoundingClientRect();
    const [mx, my] = toModel(event.clientX - rect.left, event.clientY - rect.top);
    const k = Math.exp(-event.deltaY * 0.0015);
    view = { scale: view.scale * k, cx: mx - (mx - view.cx) / k, cy: my - (my - view.cy) / k };
    draw();
  });
  canvas.addEventListener("pointerdown", (event) => {
    drag = { x: event.clientX, y: event.clientY, view: { ...view } };
    canvas.setPointerCapture(event.pointerId);
  });
  canvas.addEventListener("pointerup", () => (drag = null));
  canvas.addEventListener("dblclick", () => {
    fit();
    draw();
  });
  canvas.addEventListener("pointerleave", () => (tip.hidden = true));
  canvas.addEventListener("pointermove", (event) => {
    if (drag) {
      view = {
        ...drag.view,
        cx: drag.view.cx - (event.clientX - drag.x) / view.scale,
        cy: drag.view.cy + (event.clientY - drag.y) / view.scale,
      };
      draw();
      return;
    }
    const rect = canvas.getBoundingClientRect();
    const [mx, my] = toModel(event.clientX - rect.left, event.clientY - rect.top);
    const cell = result ? cellAt(result.grid, mx, my) : null;
    const index = cell && result ? cell.iy * result.grid.nx + cell.ix : -1;
    const f = index >= 0 ? result!.f[index] : null;
    if (f === null) return void (tip.hidden = true);
    const v = result!.v[index];
    const near = stations.reduce<StationPoint | null>(
      (best, s) =>
        !best || (s.x - mx) ** 2 + (s.y - my) ** 2 < (best.x - mx) ** 2 + (best.y - my) ** 2
          ? s
          : best,
      null,
    );
    tip.textContent = [
      `${t("E04_Layer_FS")} ${f.toFixed(3)}`,
      `${t("E04_Layer_Volume")} ${v === null ? "-" : `${Math.round(v).toLocaleString()} m³`}`,
      near ? `${t("E04_Tip_Station")} ${near.label ?? near.chainage_m.toFixed(1)}` : "",
    ]
      .filter(Boolean)
      .join("\n");
    tip.style.left = `${event.clientX - rect.left + 14}px`;
    tip.style.top = `${event.clientY - rect.top + 14}px`;
    tip.hidden = false;
  });

  const resize = new ResizeObserver(() => {
    const first = !width;
    draw();
    if (first) {
      fit();
      draw();
    }
  });
  resize.observe(root);
  const theme = new MutationObserver(draw);
  theme.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] });

  // 검증 창구 — 모델 좌표 → 화면(client) 좌표 · 지금 결과
  const probe = {
    project: (x: number, y: number) => {
      const rect = canvas.getBoundingClientRect();
      const [px, py] = toScreen(x, y);
      return { x: rect.left + px, y: rect.top + py };
    },
    result: () => result,
    marker: () => marker,
    outline: () => [...outline],
    layer: () => layer,
  };
  (window as unknown as { __e04Map?: typeof probe }).__e04Map = probe;

  return {
    root,
    setRoute(nextLine, nextStations) {
      line = nextLine;
      stations = nextStations;
      fit();
      draw();
    },
    setRange(start, end) {
      range = [start, end];
      if (!result) fit();
      draw();
    },
    setResult(next) {
      result = next;
      const cut = next ? cutCells(next.grid, next.z, next.best) : new Map<number, number>();
      outline = new Set(cut.keys());
      marker = next ? footprintCenter(next.grid, cut, next.best) : null;
      buildImage();
      fit();
      draw();
    },
    setLayer(next) {
      layer = next;
      buildImage();
      draw();
    },
    dispose() {
      resize.disconnect();
      theme.disconnect();
      if ((window as unknown as { __e04Map?: unknown }).__e04Map === probe)
        delete (window as unknown as { __e04Map?: unknown }).__e04Map;
    },
  };
}