import { generateTritonConfig, summarizeReport } from "./core.mjs";

let latestConfig = "";
const $ = (selector) => document.querySelector(selector);

function activateTab(name, shouldScroll = true) {
  const selectedTab = document.querySelector(`.tab[data-tab="${name}"]`);
  if (!selectedTab) return;
  document.querySelectorAll(".tab").forEach((tab) => {
    const selected = tab === selectedTab;
    tab.classList.toggle("active", selected);
    tab.setAttribute("aria-selected", String(selected));
  });
  document.querySelectorAll(".tool-panel").forEach((panel) => {
    const selected = panel.id === `panel-${name}`;
    panel.classList.toggle("active", selected);
    panel.hidden = !selected;
  });
  if (shouldScroll) document.querySelector(`#panel-${name}`).scrollIntoView({ behavior: "smooth", block: "start" });
}

document.querySelectorAll(".tab").forEach((button) => {
  button.addEventListener("click", () => activateTab(button.dataset.tab, false));
});

document.querySelectorAll("[data-open-tab]").forEach((button) => {
  button.addEventListener("click", async () => {
    if (button.dataset.loadSample === "true") {
      await loadSampleReport();
    } else {
      activateTab(button.dataset.openTab);
    }
  });
});

$("#start-tour").addEventListener("click", () => activateTab("config"));
$("#load-sample-hero").addEventListener("click", () => loadSampleReport());

function updateBatchExplainer() {
  const maxBatch = Number($("input[name='max_batch_size']").value);
  const dims = $("input[name='input_dims']").value
    .replace(/[\[\]]/g, "")
    .split(",")
    .map((value) => value.trim())
    .filter(Boolean);
  const explainer = $("#batch-explainer");
  if (!Number.isInteger(maxBatch) || maxBatch < 0 || !dims.length) {
    explainer.textContent = "Enter valid dimensions and a non-negative max batch size to preview the tensor shape.";
    return;
  }
  if (maxBatch === 0) {
    explainer.textContent = `Batching is disabled. The model dimensions [${dims.join(", ")}] describe the complete input tensor; Triton will omit dynamic_batching.`;
    return;
  }
  const exampleBatch = Math.min(8, maxBatch);
  explainer.textContent = `For max_batch_size ${maxBatch}, these are per-sample dimensions. Example request: [${exampleBatch}, ${dims.join(", ")}]. Triton adds the leading batch axis.`;
}

$("input[name='max_batch_size']").addEventListener("input", updateBatchExplainer);
$("input[name='input_dims']").addEventListener("input", updateBatchExplainer);

$("#config-form").addEventListener("submit", (event) => {
  event.preventDefault();
  const payload = Object.fromEntries(new FormData(event.currentTarget).entries());
  const state = $("#config-state");
  try {
    latestConfig = generateTritonConfig(payload);
    $("#config-output code").textContent = latestConfig;
    $("#copy-config").disabled = false;
    $("#download-config").disabled = false;
    state.textContent = "CONFIG READY";
    updateBatchExplainer();
  } catch (error) {
    latestConfig = "";
    $("#config-output code").textContent = error.message;
    $("#copy-config").disabled = true;
    $("#download-config").disabled = true;
    state.textContent = "CHECK INPUT";
  }
});

$("#copy-config").addEventListener("click", async () => {
  if (!latestConfig) return;
  try {
    await navigator.clipboard.writeText(latestConfig);
    const button = $("#copy-config");
    button.textContent = "COPIED";
    setTimeout(() => { button.textContent = "COPY"; }, 1200);
  } catch {
    $("#config-state").textContent = "SELECT AND COPY CONFIG";
  }
});

$("#download-config").addEventListener("click", () => {
  if (!latestConfig) return;
  const name = $("input[name='model_name']").value.trim() || "model";
  const blob = new Blob([latestConfig], { type: "text/plain;charset=utf-8" });
  const link = document.createElement("a");
  link.href = URL.createObjectURL(blob);
  link.download = `${name}-config.pbtxt`;
  link.click();
  setTimeout(() => URL.revokeObjectURL(link.href), 0);
});

function clearReportResults() {
  $("#report-results").replaceChildren();
  $("#report-results").classList.add("hidden");
}

$("#report-file").addEventListener("change", async (event) => {
  const file = event.target.files?.[0];
  if (!file) return;
  if (file.size > 2 * 1024 * 1024) {
    $("#report-error").textContent = "Please choose a JSON file no larger than 2 MiB.";
    $("#report-file").value = "";
    clearReportResults();
    return;
  }
  clearReportResults();
  $("#report-json").value = await file.text();
  $("#report-error").textContent = "";
});

$("#analyze-report").addEventListener("click", analyzeReportInput);
$("#load-sample-report").addEventListener("click", () => loadSampleReport({ shouldScroll: false }));
$("#load-llm-sample").addEventListener("click", () => loadLlmSampleReport());

async function loadSampleReport({ shouldScroll = true } = {}) {
  activateTab("report", false);
  $("#report-error").textContent = "";
  clearReportResults();
  try {
    const response = await fetch("./sample-report-b1.json", { cache: "no-store" });
    if (!response.ok) throw new Error(`Sample report unavailable (${response.status}).`);
    const payload = await response.json();
    $("#report-json").value = JSON.stringify(payload, null, 2);
    renderReport(summarizeReport(payload));
    if (shouldScroll) $("#panel-report").scrollIntoView({ behavior: "smooth", block: "start" });
  } catch (error) {
    $("#report-error").textContent = `${error.message} You can also paste or load a report JSON file.`;
  }
}

async function loadLlmSampleReport() {
  activateTab("report", false);
  $("#report-error").textContent = "";
  clearReportResults();
  try {
    const response = await fetch("./sample-llm-report.json", { cache: "no-store" });
    if (!response.ok) throw new Error(`LLM schema example unavailable (${response.status}).`);
    const payload = await response.json();
    $("#report-json").value = JSON.stringify(payload, null, 2);
    renderReport(summarizeReport(payload));
    $("#panel-report").scrollIntoView({ behavior: "smooth", block: "start" });
  } catch (error) {
    $("#report-error").textContent = `${error.message} You can also paste or load a report JSON file.`;
  }
}

function analyzeReportInput() {
  const raw = $("#report-json").value.trim();
  $("#report-error").textContent = "";
  clearReportResults();
  if (!raw) {
    $("#report-error").textContent = "Paste or load a benchmark JSON report first.";
    return;
  }
  if (new Blob([raw]).size > 2 * 1024 * 1024) {
    $("#report-error").textContent = "Please keep the JSON report at or below 2 MiB.";
    return;
  }
  try {
    renderReport(summarizeReport(JSON.parse(raw)));
  } catch (error) {
    $("#report-error").textContent = error instanceof SyntaxError
      ? "Invalid JSON. Check the report syntax and try again."
      : error.message;
  }
}

$("#clear-report").addEventListener("click", () => {
  $("#report-json").value = "";
  $("#report-file").value = "";
  $("#report-error").textContent = "";
  clearReportResults();
});

function displayNumber(value, digits = 2) {
  if (typeof value !== "number" || !Number.isFinite(value)) return "—";
  return value.toLocaleString(undefined, { maximumFractionDigits: digits });
}

function formatLatencyGroup(group) {
  return [group.mean_ms, group.p50_ms, group.p99_ms].map((value) => displayNumber(value)).join(" / ");
}

function buildTable(headers, rows, className) {
  const table = document.createElement("table");
  table.className = className;
  const thead = document.createElement("thead");
  const heading = document.createElement("tr");
  for (const label of headers) {
    const th = document.createElement("th");
    th.textContent = label;
    heading.append(th);
  }
  thead.append(heading);
  const tbody = document.createElement("tbody");
  for (const row of rows) {
    const tr = document.createElement("tr");
    for (const value of row) {
      const td = document.createElement("td");
      td.textContent = String(value);
      tr.append(td);
    }
    tbody.append(tr);
  }
  table.append(thead, tbody);
  return table;
}

function renderReport(report) {
  const container = $("#report-results");
  container.replaceChildren();
  const availableCount = report.rows.filter((row) => row.available).length;
  const summary = document.createElement("div");
  summary.className = "result-takeaway";
  const summaryTitle = document.createElement("strong");
  summaryTitle.textContent = report.schemaDemo ? "SCHEMA DEMO" : "HOST-SPECIFIC SNAPSHOT";
  const summaryText = document.createElement("span");
  summaryText.textContent = report.schemaDemo
    ? "Illustrative values demonstrate accepted fields only. This is not a benchmark and does not indicate backend availability."
    : `${availableCount} of ${report.rows.length} backends available on this recorded host. Unavailable means not runnable here—not zero performance.`;
  summary.append(summaryTitle, summaryText);
  container.append(summary);

  const meta = document.createElement("div");
  meta.className = "report-meta";
  const host = [report.host?.machine, report.host?.processor, report.host?.platform].filter(Boolean).join(" · ") || "Host not recorded";
  const values = [["FORMAT", report.format], ["MODEL", report.model], ["HOST", host], ["BATCH", report.batch ?? "—"], ["ITERATIONS", report.iterations ?? "—"], ["WARM-UP", report.warmup ?? "—"], ["REFERENCE", report.reference]];
  for (const [key, value] of values) {
    const item = document.createElement("span");
    const strong = document.createElement("strong");
    strong.textContent = `${key}: `;
    item.append(strong, document.createTextNode(String(value)));
    meta.append(item);
  }
  container.append(meta);

  const resultRows = report.rows.map((row) => [
    row.backend,
    report.schemaDemo ? "SCHEMA DEMO" : (row.available ? "AVAILABLE" : "UNAVAILABLE"),
    displayNumber(row.p50_ms),
    displayNumber(row.p99_ms),
    displayNumber(row.throughput_ips, 1),
    report.schemaDemo ? "Illustrative only; not measured" : (row.reason || (row.available ? "Measured" : "No detail recorded")),
  ]);
  container.append(buildTable(["BACKEND", "STATUS", "P50 MS", "P99 MS", "INF/S", "DETAIL"], resultRows, "report-table"));

  if (report.hasLlmMetrics) {
    const llmSection = document.createElement("section");
    llmSection.className = "llm-metrics";
    const title = document.createElement("h3");
    title.textContent = "LLM serving metrics";
    const note = document.createElement("p");
    note.textContent = "Latency cells show mean / p50 / p99 in milliseconds. Throughput and token totals retain the source report's units.";
    const llmRows = report.rows.map((row) => [
      row.backend,
      formatLatencyGroup(row.llm.ttft),
      formatLatencyGroup(row.llm.tpot),
      formatLatencyGroup(row.llm.itl),
      formatLatencyGroup(row.llm.request_latency),
      displayNumber(row.llm.request_throughput_rps, 2),
      displayNumber(row.llm.output_token_throughput_tps, 2),
      displayNumber(row.llm.total_input_tokens, 0),
      displayNumber(row.llm.total_output_tokens, 0),
    ]);
    llmSection.append(title, note, buildTable(
      ["BACKEND", "TTFT AVG / P50 / P99 MS", "TPOT AVG / P50 / P99 MS", "ITL AVG / P50 / P99 MS", "REQUEST LATENCY AVG / P50 / P99 MS", "REQ/S", "OUTPUT TOK/S", "INPUT TOKENS", "OUTPUT TOKENS"],
      llmRows,
      "report-table llm-report-table",
    ));
    container.append(llmSection);
  }

  if (report.accuracyRows.length) {
    const accuracy = document.createElement("section");
    accuracy.className = "accuracy-card";
    const title = document.createElement("h3");
    title.textContent = "Accuracy check: speed is only useful if the answer still agrees";
    const description = document.createElement("p");
    description.textContent = "Numerical drift and top-1 agreement are reported alongside latency. A result is specific to this model, host, and sample set—not a universal guarantee.";
    const accuracyRows = report.accuracyRows.map((row) => [
      row.backend,
      row.reference,
      row.samples ?? "—",
      displayNumber(row.max_abs_diff, 7),
      displayNumber(row.mean_abs_diff, 7),
      row.top1_agreement === null ? "—" : `${displayNumber(row.top1_agreement * 100, 1)}%`,
    ]);
    accuracy.append(title, description, buildTable(["BACKEND", "REFERENCE", "SAMPLES", "MAX ABS DIFF", "MEAN ABS DIFF", "TOP-1 AGREEMENT"], accuracyRows, "report-table accuracy-table"));
    container.append(accuracy);
  }

  const source = document.createElement("p");
  source.className = "report-source";
  source.textContent = report.source;
  container.append(source);
  container.classList.remove("hidden");
}

updateBatchExplainer();
$("#config-form").requestSubmit();