const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
const VIEWBOX_SIZE = 640;
const CENTER = VIEWBOX_SIZE / 2;
const PLOT_RADIUS = 244;

let viewSequence = 0;

function setAttributes(element, attributes) {
  for (const [name, value] of Object.entries(attributes)) {
    element.setAttribute(name, String(value));
  }
  return element;
}

function isNumericSequence(value) {
  return Array.isArray(value) || ArrayBuffer.isView(value);
}

function formatDb(value) {
  const rounded = Math.round(value * 10) / 10;
  return `${Number.isInteger(rounded) ? rounded : rounded.toFixed(1)} dB`;
}

function normalizeCut(cut) {
  const normalized = String(cut ?? "").trim().toUpperCase();
  if (normalized !== "XY" && normalized !== "XZ" && normalized !== "YZ") {
    throw new TypeError("cut은 XY, XZ 또는 YZ여야 합니다.");
  }
  return normalized;
}

function getAxisLabels(cut) {
  if (cut === "XY") {
    return { right: "+X", top: "+Y", left: "−X", bottom: "−Y" };
  }
  if (cut === "XZ") {
    return { right: "+Z", top: "+X", left: "−Z", bottom: "−X" };
  }
  return { right: "+Z", top: "+Y", left: "−Z", bottom: "−Y" };
}

function polarPoint(angleDeg, radius) {
  const radians = (angleDeg * Math.PI) / 180;
  return {
    x: CENTER + radius * Math.cos(radians),
    y: CENTER - radius * Math.sin(radians),
  };
}

function validatePattern(pattern) {
  if (!pattern || typeof pattern !== "object") {
    throw new TypeError("빔 패턴 결과가 없습니다.");
  }

  const { displayDb, anglesDeg } = pattern;
  if (!isNumericSequence(displayDb) || !isNumericSequence(anglesDeg)) {
    throw new TypeError("displayDb와 anglesDeg는 수치 배열이어야 합니다.");
  }
  if (displayDb.length === 0 || displayDb.length !== anglesDeg.length) {
    throw new RangeError("displayDb와 anglesDeg는 같은 길이의 비어 있지 않은 배열이어야 합니다.");
  }

  const dbFloor = Number(pattern.dbFloor);
  const steeringAngleDeg = Number(pattern.steeringAngleDeg);
  if (!Number.isFinite(dbFloor) || dbFloor >= 0) {
    throw new RangeError("dbFloor는 0보다 작은 유한한 값이어야 합니다.");
  }
  if (!Number.isFinite(steeringAngleDeg)) {
    throw new RangeError("steeringAngleDeg는 유한한 값이어야 합니다.");
  }

  for (let index = 0; index < displayDb.length; index += 1) {
    if (!Number.isFinite(Number(displayDb[index])) || !Number.isFinite(Number(anglesDeg[index]))) {
      throw new RangeError("빔 패턴 표본에는 유한한 수치만 사용할 수 있습니다.");
    }
  }

  return {
    displayDb,
    anglesDeg,
    dbFloor,
    steeringAngleDeg,
    cut: normalizeCut(pattern.cut),
  };
}

/**
 * Core 수신 빔 패턴 결과를 log-dB polar SVG로 표시한다.
 * 입력 표본은 재정렬, 평활화 또는 peak 정규화하지 않는다.
 */
export function createReceiveBeamPatternView(svg) {
  if (
    !svg ||
    String(svg.localName).toLowerCase() !== "svg" ||
    typeof svg.replaceChildren !== "function" ||
    !svg.ownerDocument
  ) {
    throw new TypeError("createReceiveBeamPatternView에는 SVG 요소가 필요합니다.");
  }

  const document = svg.ownerDocument;
  const idPrefix = `receive-beam-pattern-${++viewSequence}`;
  const titleId = `${idPrefix}-title`;
  const descriptionId = `${idPrefix}-description`;
  let destroyed = false;

  svg.setAttribute("viewBox", `0 0 ${VIEWBOX_SIZE} ${VIEWBOX_SIZE}`);
  svg.setAttribute("preserveAspectRatio", "xMidYMid meet");
  svg.setAttribute("role", "img");
  svg.setAttribute("aria-labelledby", `${titleId} ${descriptionId}`);

  function createElement(name, attributes = {}) {
    return setAttributes(document.createElementNS(SVG_NAMESPACE, name), attributes);
  }

  function createAccessibilityNodes(titleText, descriptionText) {
    const title = createElement("title", { id: titleId });
    title.textContent = titleText;
    const description = createElement("desc", { id: descriptionId });
    description.textContent = descriptionText;
    return [title, description];
  }

  function createText(text, attributes = {}) {
    const node = createElement("text", attributes);
    node.textContent = text;
    return node;
  }

  function renderError(message) {
    if (destroyed) return;

    const errorMessage = String(message || "빔 패턴을 표시할 수 없습니다.");
    const [title, description] = createAccessibilityNodes(
      "수신 빔 패턴을 표시할 수 없음",
      errorMessage,
    );
    const errorText = createText(errorMessage, {
      x: CENTER,
      y: CENTER,
      class: "beam-pattern-error",
      "text-anchor": "middle",
      "dominant-baseline": "middle",
      fill: "currentColor",
    });
    svg.replaceChildren(title, description, errorText);
  }

  function render(pattern) {
    if (destroyed) return;

    let validated;
    try {
      validated = validatePattern(pattern);
    } catch (error) {
      renderError(error instanceof Error ? error.message : String(error));
      return;
    }

    const { displayDb, anglesDeg, dbFloor, steeringAngleDeg, cut } = validated;
    const [title, description] = createAccessibilityNodes(
      `${cut} 수신 빔 패턴`,
      `${cut} 평면, ${displayDb.length}개 원시 각도 표본, 표시 하한 ${formatDb(dbFloor)}, 조향각 ${steeringAngleDeg}도. 0도는 오른쪽, 양의 90도는 위쪽입니다.`,
    );
    const plot = createElement("g", { class: "beam-pattern-plot" });
    const grid = createElement("g", {
      class: "beam-pattern-grid",
      fill: "none",
      stroke: "currentColor",
      "stroke-opacity": "0.24",
    });

    for (let index = 1; index <= 4; index += 1) {
      const fraction = index / 5;
      const radius = PLOT_RADIUS * fraction;
      const level = dbFloor + (0 - dbFloor) * fraction;
      grid.append(
        createElement("circle", {
          cx: CENTER,
          cy: CENTER,
          r: radius,
          class: "beam-pattern-ring",
          "vector-effect": "non-scaling-stroke",
        }),
        createText(formatDb(level), {
          x: CENTER + 6,
          y: CENTER - radius + 16,
          class: "beam-pattern-ring-label",
          fill: "currentColor",
          "fill-opacity": "0.68",
          stroke: "none",
          "font-size": "13",
        }),
      );
    }

    grid.append(
      createElement("circle", {
        cx: CENTER,
        cy: CENTER,
        r: PLOT_RADIUS,
        class: "beam-pattern-ring beam-pattern-ring-outer",
        "vector-effect": "non-scaling-stroke",
      }),
      createElement("line", {
        x1: CENTER - PLOT_RADIUS,
        y1: CENTER,
        x2: CENTER + PLOT_RADIUS,
        y2: CENTER,
        class: "beam-pattern-axis",
        "vector-effect": "non-scaling-stroke",
      }),
      createElement("line", {
        x1: CENTER,
        y1: CENTER - PLOT_RADIUS,
        x2: CENTER,
        y2: CENTER + PLOT_RADIUS,
        class: "beam-pattern-axis",
        "vector-effect": "non-scaling-stroke",
      }),
      createText("0 dB", {
        x: CENTER + 6,
        y: CENTER - PLOT_RADIUS + 16,
        class: "beam-pattern-ring-label beam-pattern-ring-label-outer",
        fill: "currentColor",
        "fill-opacity": "0.8",
        stroke: "none",
        "font-size": "13",
      }),
    );
    plot.append(grid);

    const labels = getAxisLabels(cut);
    const axisLabels = createElement("g", {
      class: "beam-pattern-axis-labels",
      fill: "currentColor",
      "font-size": "17",
      "font-weight": "600",
    });
    axisLabels.append(
      createText(labels.right, {
        x: CENTER + PLOT_RADIUS + 20,
        y: CENTER,
        "text-anchor": "start",
        "dominant-baseline": "middle",
      }),
      createText(labels.top, {
        x: CENTER,
        y: CENTER - PLOT_RADIUS - 20,
        "text-anchor": "middle",
        "dominant-baseline": "auto",
      }),
      createText(labels.left, {
        x: CENTER - PLOT_RADIUS - 20,
        y: CENTER,
        "text-anchor": "end",
        "dominant-baseline": "middle",
      }),
      createText(labels.bottom, {
        x: CENTER,
        y: CENTER + PLOT_RADIUS + 28,
        "text-anchor": "middle",
        "dominant-baseline": "hanging",
      }),
    );
    plot.append(axisLabels);

    const steeringEnd = polarPoint(steeringAngleDeg, PLOT_RADIUS);
    const steering = createElement("g", { class: "beam-pattern-steering" });
    steering.append(
      createElement("line", {
        x1: CENTER,
        y1: CENTER,
        x2: steeringEnd.x,
        y2: steeringEnd.y,
        class: "beam-pattern-steering-ray",
        stroke: "currentColor",
        "stroke-opacity": "0.72",
        "stroke-dasharray": "8 6",
        "vector-effect": "non-scaling-stroke",
      }),
      createElement("circle", {
        cx: steeringEnd.x,
        cy: steeringEnd.y,
        r: 5,
        class: "beam-pattern-steering-point",
        fill: "currentColor",
      }),
    );
    plot.append(steering);

    const pathCommands = [];
    for (let index = 0; index < displayDb.length; index += 1) {
      const radius = PLOT_RADIUS * ((Number(displayDb[index]) - dbFloor) / (0 - dbFloor));
      const point = polarPoint(Number(anglesDeg[index]), radius);
      pathCommands.push(`${index === 0 ? "M" : "L"}${point.x} ${point.y}`);
    }
    pathCommands.push("Z");

    plot.append(
      createElement("path", {
        d: pathCommands.join(" "),
        class: "beam-pattern-response",
        fill: "currentColor",
        "fill-opacity": "0.12",
        stroke: "currentColor",
        "stroke-width": "2.25",
        "stroke-linejoin": "round",
        "vector-effect": "non-scaling-stroke",
      }),
    );

    svg.replaceChildren(title, description, plot);
  }

  function destroy() {
    if (destroyed) return;
    destroyed = true;
    svg.replaceChildren();
    if (svg.getAttribute("aria-labelledby") === `${titleId} ${descriptionId}`) {
      svg.removeAttribute("aria-labelledby");
    }
  }

  return { render, renderError, destroy };
}