(() => {
  const templatesData = JSON.parse(document.getElementById("templates-data").textContent);
  const templateFileByName = {};
  templatesData.forEach(t => { templateFileByName[t.name] = t.filename; });

  const fileInput = document.getElementById("file-input");
  const dropzone = document.getElementById("dropzone");
  const dropzoneEmpty = document.getElementById("dropzone-empty");
  const previewImg = document.getElementById("preview-img");
  const submitBtn = document.getElementById("submit-btn");
  const clearBtn = document.getElementById("clear-btn");
  const errorMsg = document.getElementById("error-msg");
  const loading = document.getElementById("loading");
  const loadingText = document.getElementById("loading-text");
  const resultsSection = document.getElementById("results");
  const totalTimeEl = document.getElementById("total-time");
  const overallCard = document.getElementById("overall-card");
  const queryRow = document.getElementById("query-row");
  const methodGrid = document.getElementById("method-grid");
  const inputPalette = document.getElementById("input-palette");
  const colorGrid = document.getElementById("color-grid");
  const shapeGrid = document.getElementById("shape-grid");
  const shapeVisual = document.getElementById("shape-visual");
  const shapeOverall = document.getElementById("shape-overall");
  const shapeVisualRow = document.getElementById("shape-visual-row");
  const textureGrid = document.getElementById("texture-grid");
  const textureVisual = document.getElementById("texture-visual");
  const textureOverall = document.getElementById("texture-overall");
  const textureVisualRow = document.getElementById("texture-visual-row");
  const textureGlcmTable = document.getElementById("texture-glcm-table");
  const weightedSub = document.getElementById("weighted-sub");
  const weightedCard = document.getElementById("weighted-card");
  const weightedRanked = document.getElementById("weighted-ranked");
  const weightedFlowerCheck = document.getElementById("weighted-flower-check");
  const weightedFlowerCheckLoading = document.getElementById("weighted-flower-check-loading");
  const weightedFlowerCheckBody = document.getElementById("weighted-flower-check-body");
  const weightedFlowerCheckError = document.getElementById("weighted-flower-check-error");
  const wfcCountValue = document.getElementById("wfc-count-value");
  const wfcClipValue = document.getElementById("wfc-clip-value");
  const familyGridSection = document.getElementById("family-grid-section");
  const familyGridTemplateName = document.getElementById("family-grid-template-name");
  const familyGridOverall = document.getElementById("family-grid-overall");
  const familyGridRow = document.getElementById("family-grid-row");
  const familyGridMatches = document.getElementById("family-grid-matches");
  const verifySection = document.getElementById("verify-section");
  const verifyTemplateName = document.getElementById("verify-template-name");
  const verifyGlass = document.getElementById("verify-glass");
  const countFlowersBtn = document.getElementById("count-flowers-btn");
  const flowerCountLoading = document.getElementById("flower-count-loading");
  const flowerCountError = document.getElementById("flower-count-error");
  const flowerCountResult = document.getElementById("flower-count-result");
  const flowerCountImage = document.getElementById("flower-count-image");
  const flowerCountTotal = document.getElementById("flower-count-total");
  const flowerCountClusters = document.getElementById("flower-count-clusters");
  const flowerCountTime = document.getElementById("flower-count-time");
  const yoloCountImage = document.getElementById("yolo-count-image");
  const yoloCountTotal = document.getElementById("yolo-count-total");
  const vaseCompare = document.getElementById("vase-compare");
  const vaseCompareError = document.getElementById("vase-compare-error");
  const vaseCompareBody = document.getElementById("vase-compare-body");
  const vaseCropInput = document.getElementById("vase-crop-input");
  const vaseCropTemplate = document.getElementById("vase-crop-template");
  const vaseCropTemplateName = document.getElementById("vase-crop-template-name");
  const vaseVerdictPill = document.getElementById("vase-verdict-pill");
  const vaseDinoBar = document.getElementById("vase-dino-bar");
  const vaseDinoValue = document.getElementById("vase-dino-value");
  const vaseClipBar = document.getElementById("vase-clip-bar");
  const vaseClipValue = document.getElementById("vase-clip-value");
  const vaseCombinedBar = document.getElementById("vase-combined-bar");
  const vaseCombinedValue = document.getElementById("vase-combined-value");
  const flowerCountMismatch = document.getElementById("flower-count-mismatch");
  const flowerCountMismatchText = document.getElementById("flower-count-mismatch-text");

  let selectedFile = null;
  let currentRequestId = null;
  let currentWeightedBest = null;

  function showError(msg) {
    errorMsg.textContent = msg;
    errorMsg.hidden = !msg;
  }

  function setSelectedFile(file) {
    if (!file) return;
    if (!file.type.startsWith("image/")) {
      showError("Please choose an image file.");
      return;
    }
    showError("");
    selectedFile = file;

    const reader = new FileReader();
    reader.onload = e => {
      previewImg.src = e.target.result;
      previewImg.hidden = false;
      dropzoneEmpty.hidden = true;
    };
    reader.readAsDataURL(file);

    submitBtn.disabled = false;
    clearBtn.hidden = false;
  }

  fileInput.addEventListener("change", () => setSelectedFile(fileInput.files[0]));

  ["dragover", "dragenter"].forEach(evt =>
    dropzone.addEventListener(evt, e => {
      e.preventDefault();
      dropzone.classList.add("dragover");
    })
  );
  ["dragleave", "drop"].forEach(evt =>
    dropzone.addEventListener(evt, e => {
      e.preventDefault();
      dropzone.classList.remove("dragover");
    })
  );
  dropzone.addEventListener("drop", e => {
    const file = e.dataTransfer.files[0];
    if (file) setSelectedFile(file);
  });

  clearBtn.addEventListener("click", e => {
    e.preventDefault();
    selectedFile = null;
    fileInput.value = "";
    previewImg.hidden = true;
    dropzoneEmpty.hidden = false;
    submitBtn.disabled = true;
    clearBtn.hidden = true;
    showError("");
    resultsSection.hidden = true;
  });

  const LOADING_MESSAGES = [
    "Removing background…",
    "Extracting SIFT & ORB keypoints…",
    "Running SuperPoint + LightGlue…",
    "Running LoFTR…",
    "Scoring templates…",
  ];

  function cycleLoadingMessages() {
    let i = 0;
    loadingText.textContent = LOADING_MESSAGES[0];
    return setInterval(() => {
      i = (i + 1) % LOADING_MESSAGES.length;
      loadingText.textContent = LOADING_MESSAGES[i];
    }, 1400);
  }

  submitBtn.addEventListener("click", async () => {
    if (!selectedFile) return;
    showError("");
    submitBtn.disabled = true;
    resultsSection.hidden = true;
    loading.hidden = false;
    const msgTimer = cycleLoadingMessages();

    try {
      const form = new FormData();
      form.append("image", selectedFile);

      const res = await fetch("/api/match", { method: "POST", body: form });
      const data = await res.json();

      if (!res.ok) {
        throw new Error(data.error || "Something went wrong.");
      }

      renderResults(data);
    } catch (err) {
      showError(err.message || String(err));
    } finally {
      clearInterval(msgTimer);
      loading.hidden = true;
      submitBtn.disabled = false;
    }
  });

  function el(tag, className, text) {
    const node = document.createElement(tag);
    if (className) node.className = className;
    if (text !== undefined) node.textContent = text;
    return node;
  }

  function uploadUrl(requestId, filename) {
    return `/uploads/${requestId}/${filename}`;
  }

  function renderResults(data) {
    currentRequestId = data.request_id;
    currentWeightedBest = data.weighted_best;
    flowerCountResult.hidden = true;
    flowerCountError.hidden = true;
    flowerCountLoading.hidden = true;
    vaseCompare.hidden = true;
    flowerCountMismatch.hidden = true;
    weightedFlowerCheck.hidden = true;
    countFlowersBtn.disabled = false;
    countFlowersBtn.textContent = "Count flowers";

    totalTimeEl.textContent =
      `Total processing time: ${data.total_time_sec.toFixed(2)}s ` +
      `(background removal: ${data.bg_removal_time_sec.toFixed(2)}s)`;

    // --- weighted final match (rendered first -- it now leads #results so
    // the final verdict is visible without scrolling past every card) ---
    renderWeighted(data);

    // --- overall best ---
    overallCard.innerHTML = "";
    if (data.overall_best) {
      const filename = templateFileByName[data.overall_best];
      if (filename) {
        const img = el("img", "overall-thumb");
        img.src = `/template_image/${encodeURIComponent(filename)}`;
        img.alt = data.overall_best;
        overallCard.appendChild(img);
      }
      const textWrap = el("div", "overall-text");
      textWrap.appendChild(el("p", "label", "Overall best match"));
      textWrap.appendChild(el("h3", null, data.overall_best));
      overallCard.appendChild(textWrap);
    } else {
      overallCard.appendChild(el("p", null, "No confident match found across any method."));
    }

    // --- query row: original + background removed ---
    queryRow.innerHTML = "";
    queryRow.appendChild(buildQueryTile(
      uploadUrl(data.request_id, data.upload_original_file), "Your upload"
    ));
    queryRow.appendChild(buildQueryTile(
      uploadUrl(data.request_id, data.upload_nobg_file), "Background removed"
    ));

    // --- per-method cards (Color is excluded here -- it has its own
    // dedicated section below and only participates in the weighted
    // verdict, not this grid) ---
    methodGrid.innerHTML = "";
    Object.entries(data.methods).forEach(([methodKey, m]) => {
      if (methodKey === "Color") return;
      methodGrid.appendChild(buildMethodCard(data.request_id, methodKey, m));
    });

    // --- color space section (own display; also weighted into the verdict) ---
    renderColorAnalysis(data);

    // --- shape matching + texture matching (independent sections, no
    // score/verdict involvement at all) ---
    renderShapeAnalysis(data);
    renderTextureAnalysis(data);

    // --- color family grid (visual, tied to the weighted-best template) ---
    renderFamilyGrid(data);

    resultsSection.hidden = false;
    resultsSection.scrollIntoView({ behavior: "smooth", block: "start" });

    // --- AI verification (fires after everything above is already on
    // screen; a slow or unreachable external endpoint should never block
    // or affect the core match results) ---
    if (data.weighted_best) {
      runVerification(data, data.weighted_best);
      runFlowerSummary(data.request_id, data.weighted_best);
    }
  }

  async function runFlowerSummary(requestId, template) {
    weightedFlowerCheck.hidden = false;
    weightedFlowerCheckLoading.hidden = false;
    weightedFlowerCheckBody.hidden = true;
    weightedFlowerCheckError.hidden = true;

    try {
      const res = await fetch("/api/flower_summary", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ request_id: requestId, template }),
      });
      const data = await res.json();

      if (!res.ok) {
        throw new Error(data.error || "Flower check failed.");
      }
      if (data.error) {
        throw new Error(data.error);
      }

      const fc = data.flower_count_comparison;
      wfcCountValue.textContent = fc ? `${fc.input_count} vs ${fc.template_count}` : "n/a";
      wfcCountValue.title = fc ? fc.message : "";
      wfcClipValue.textContent = data.flower_clip_similarity_pct != null
        ? `${data.flower_clip_similarity_pct}%` : "n/a";

      weightedFlowerCheckLoading.hidden = true;
      weightedFlowerCheckBody.hidden = false;
    } catch (err) {
      weightedFlowerCheckLoading.hidden = true;
      weightedFlowerCheckError.textContent = err.message || String(err);
      weightedFlowerCheckError.hidden = false;
    }
  }

  async function runVerification(matchData, template) {
    verifySection.hidden = false;
    verifyTemplateName.textContent = template;

    verifyGlass.innerHTML = "";
    const loadingWrap = el("div", "verify-loading");
    loadingWrap.appendChild(el("div", "spinner"));
    loadingWrap.appendChild(el("p", null, "Cross-checking with an AI vision model…"));
    verifyGlass.appendChild(loadingWrap);

    try {
      const res = await fetch("/api/verify", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ request_id: matchData.request_id, template }),
      });
      const data = await res.json();

      if (!res.ok) {
        throw new Error(data.error || "Verification failed.");
      }

      renderVerification(matchData, template, data);
    } catch (err) {
      verifyGlass.innerHTML = "";
      verifyGlass.appendChild(el("p", "verify-error",
        `AI verification is unavailable right now (${err.message || err}).`));
    }
  }

  const DESCRIPTION_PREVIEW_LEN = 220;

  function combinedDescription(data) {
    const hasDiscrepancies = data.discrepancies && data.discrepancies.toLowerCase() !== "none";
    if (data.description && hasDiscrepancies) {
      return `${data.description} Discrepancies: ${data.discrepancies}`;
    }
    if (data.description) return data.description;
    if (hasDiscrepancies) return `Discrepancies: ${data.discrepancies}`;
    return "No discrepancies were found between the two images.";
  }

  function renderVerification(matchData, template, data) {
    verifyGlass.innerHTML = "";

    // --- the two photos being compared ---
    const imagesRow = el("div", "verify-images");
    const uploadTile = el("div", "verify-image-tile");
    const uploadImg = el("img");
    uploadImg.src = uploadUrl(matchData.request_id, matchData.upload_original_file);
    uploadImg.alt = "Your upload";
    uploadTile.appendChild(uploadImg);
    uploadTile.appendChild(el("span", null, "Your upload"));
    imagesRow.appendChild(uploadTile);

    imagesRow.appendChild(el("span", "verify-vs", "vs"));

    const templateTile = el("div", "verify-image-tile");
    const templateFilename = templateFileByName[template];
    if (templateFilename) {
      const templateImg = el("img");
      templateImg.src = `/template_image/${encodeURIComponent(templateFilename)}`;
      templateImg.alt = template;
      templateTile.appendChild(templateImg);
    }
    templateTile.appendChild(el("span", null, template));
    imagesRow.appendChild(templateTile);

    verifyGlass.appendChild(imagesRow);

    // --- Match: Yes/No/Partial ---
    const matchKey = (data.match || "unknown").toLowerCase();
    const matchValue = { yes: "Yes", no: "No", partial: "Partial" }[matchKey] || "Unclear";
    const matchLine = el("p", `verify-match-line ${matchKey}`);
    matchLine.appendChild(el("span", "match-label", "Match: "));
    matchLine.appendChild(el("span", "match-value", matchValue));
    if (data.confidence) {
      matchLine.appendChild(el("span", "verify-confidence", `Confidence: ${data.confidence}`));
    }
    verifyGlass.appendChild(matchLine);

    // --- Description: truncated, with a Read more / Show less toggle ---
    const fullText = combinedDescription(data);
    const descWrap = el("p", "verify-description");
    const label = el("span", "match-label", "Description: ");
    const textSpan = el("span", "verify-description-text");
    descWrap.appendChild(label);
    descWrap.appendChild(textSpan);
    verifyGlass.appendChild(descWrap);

    if (fullText.length <= DESCRIPTION_PREVIEW_LEN) {
      textSpan.textContent = fullText;
    } else {
      let expanded = false;
      const toggle = el("a", "read-more-toggle", "Read more");
      toggle.href = "#";
      const renderText = () => {
        textSpan.textContent = expanded
          ? fullText + " "
          : fullText.slice(0, DESCRIPTION_PREVIEW_LEN).trim() + "… ";
        toggle.textContent = expanded ? "Show less" : "Read more";
      };
      toggle.addEventListener("click", e => {
        e.preventDefault();
        expanded = !expanded;
        renderText();
      });
      renderText();
      descWrap.appendChild(toggle);
    }

    if (data.pixel_precheck) {
      const { hash_distance, verdict } = data.pixel_precheck;
      verifyGlass.appendChild(el("p", "verify-footnote",
        `Pixel pre-check: ${verdict} (hash distance ${hash_distance})`));
    }
  }

  countFlowersBtn.addEventListener("click", async () => {
    if (!currentRequestId) return;
    countFlowersBtn.disabled = true;
    flowerCountError.hidden = true;
    flowerCountResult.hidden = true;
    flowerCountLoading.hidden = false;

    try {
      const res = await fetch("/api/count_flowers", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ request_id: currentRequestId, template: currentWeightedBest }),
      });
      const data = await res.json();

      if (!res.ok) {
        throw new Error(data.error || "Flower counting failed.");
      }

      renderFlowerCount(data);
    } catch (err) {
      flowerCountError.textContent = err.message || String(err);
      flowerCountError.hidden = false;
    } finally {
      flowerCountLoading.hidden = true;
      countFlowersBtn.disabled = false;
      countFlowersBtn.textContent = "Recount";
    }
  });

  function renderFlowerCount(data) {
    const sam = data.sam || {};
    const yolo = data.yolo || {};

    if (sam.error && yolo.error) {
      flowerCountError.textContent = sam.error || yolo.error;
      flowerCountError.hidden = false;
      return;
    }

    if (!sam.error) {
      flowerCountImage.hidden = false;
      flowerCountImage.src = `${uploadUrl(data.request_id, sam.visual_file)}?t=${Date.now()}`;
      flowerCountTotal.textContent = `${sam.total_count} flower${sam.total_count === 1 ? "" : "s"} detected`;

      flowerCountClusters.innerHTML = "";
      (sam.clusters || []).forEach(c => {
        const chip = el("span", "flower-cluster-chip");
        const swatch = el("span", "swatch");
        swatch.style.background = rgbCss(c.color_rgb);
        chip.appendChild(swatch);
        chip.appendChild(el("span", null, `${c.count}`));
        flowerCountClusters.appendChild(chip);
      });
      if ((sam.clusters || []).length > 1) {
        flowerCountClusters.appendChild(
          el("span", "flower-cluster-hint", `~${sam.clusters.length} distinct kinds (by color)`)
        );
      }
    } else {
      flowerCountImage.hidden = true;
      flowerCountTotal.textContent = `SAM unavailable: ${sam.error}`;
      flowerCountClusters.innerHTML = "";
    }

    if (!yolo.error) {
      yoloCountImage.hidden = false;
      yoloCountImage.src = `${uploadUrl(data.request_id, yolo.visual_file)}?t=${Date.now()}`;
      const parts = [`${yolo.flower_count} flower region${yolo.flower_count === 1 ? "" : "s"}`];
      if (yolo.vase_count) parts.push(`${yolo.vase_count} vase`);
      if (yolo.ribbon_count) parts.push(`${yolo.ribbon_count} ribbon/bow`);
      yoloCountTotal.textContent = parts.join(" · ");
    } else {
      yoloCountImage.hidden = true;
      yoloCountTotal.textContent = `YOLO-World unavailable: ${yolo.error}`;
    }

    flowerCountTime.hidden = false;
    flowerCountTime.textContent = `Processed in ${data.time_sec.toFixed(2)}s`;
    flowerCountResult.hidden = false;

    renderFlowerCountMismatch(data.flower_count_comparison);
    renderVaseComparison(data.vase_comparison);
  }

  function renderFlowerCountMismatch(fc) {
    if (!fc) {
      flowerCountMismatch.hidden = true;
      return;
    }
    flowerCountMismatch.hidden = false;
    flowerCountMismatchText.textContent = fc.error
      ? `Flower-count comparison unavailable: ${fc.error}`
      : fc.message;
    flowerCountMismatch.classList.toggle("is-mismatch", !fc.error && fc.diff !== 0);
  }

  function renderVaseComparison(vc) {
    if (!vc) {
      vaseCompare.hidden = true;
      return;
    }
    vaseCompare.hidden = false;

    if (vc.error) {
      vaseCompareError.textContent = vc.error;
      vaseCompareError.hidden = false;
      vaseCompareBody.hidden = true;
      return;
    }
    vaseCompareError.hidden = true;
    vaseCompareBody.hidden = false;

    vaseCropInput.src = `${uploadUrl(currentRequestId, vc.input_crop_file)}?t=${Date.now()}`;
    vaseCropTemplate.src = `${uploadUrl(currentRequestId, vc.template_crop_file)}?t=${Date.now()}`;
    vaseCropTemplateName.textContent = vc.template;

    const verdictLabel = { same: "Same vase", uncertain: "Uncertain", different: "Different vase" }[vc.verdict]
      || vc.verdict;
    vaseVerdictPill.textContent = `${verdictLabel} — ${vc.combined_pct}% combined similarity`;
    vaseVerdictPill.className = `vase-verdict-pill ${vc.verdict}`;

    vaseDinoBar.style.width = `${vc.dino_similarity_pct}%`;
    vaseDinoValue.textContent = `${vc.dino_similarity_pct}%`;
    vaseClipBar.style.width = `${vc.clip_similarity_pct}%`;
    vaseClipValue.textContent = `${vc.clip_similarity_pct}%`;
    vaseCombinedBar.style.width = `${vc.combined_pct}%`;
    vaseCombinedValue.textContent = `${vc.combined_pct}%`;
  }

  function rgbCss(rgb) {
    return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
  }

  function renderColorAnalysis(data) {
    const analysis = data.color_analysis || { input_dominant_colors: [], templates: [] };

    inputPalette.innerHTML = "";
    if (analysis.input_dominant_colors.length) {
      inputPalette.appendChild(el("span", "palette-label", "Your photo's colors:"));
      analysis.input_dominant_colors.forEach(c => {
        const chip = el("span", "swatch-chip");
        const swatch = el("span", "swatch");
        swatch.style.background = rgbCss(c.rgb);
        chip.appendChild(swatch);
        chip.appendChild(document.createTextNode(`${c.pct}%`));
        inputPalette.appendChild(chip);
      });
    } else if (data.color_analysis_error) {
      inputPalette.appendChild(el("p", "verify-error",
        `Color analysis unavailable (${data.color_analysis_error}).`));
    }

    colorGrid.innerHTML = "";
    analysis.templates.forEach(t => {
      colorGrid.appendChild(buildColorCard(t));
    });
  }

  function buildColorCard(t) {
    const card = el("div", "color-card");

    const head = el("div", "color-card-head");
    const filename = templateFileByName[t.template];
    if (filename) {
      const img = el("img");
      img.src = `/template_image/${encodeURIComponent(filename)}`;
      img.alt = t.template;
      head.appendChild(img);
    }
    head.appendChild(el("span", "name", t.template));
    card.appendChild(head);

    const matchRow = el("div", "color-match-row");
    const track = el("div", "score-bar-track");
    const fill = el("div", "score-bar-fill");
    fill.style.width = `${Math.max(2, t.match_pct)}%`;
    track.appendChild(fill);
    matchRow.appendChild(track);
    matchRow.appendChild(el("span", "match-pct", `${t.match_pct}% match`));
    card.appendChild(matchRow);

    const pairs = el("div", "color-pairs");
    t.color_pairs.forEach(p => {
      const pair = el("div", "color-pair");
      const swatches = el("div", "pair-swatches");

      const inputSwatch = el("span", "swatch");
      inputSwatch.style.background = rgbCss(p.input_rgb);
      inputSwatch.title = `Your photo — ${p.input_pct}%`;
      swatches.appendChild(inputSwatch);

      swatches.appendChild(el("span", "pair-arrow", "→"));

      const templateSwatch = el("span", "swatch");
      templateSwatch.style.background = rgbCss(p.template_rgb);
      templateSwatch.title = `${t.template} — ${p.template_pct}%`;
      swatches.appendChild(templateSwatch);

      pair.appendChild(swatches);
      pair.appendChild(el("span", "pair-similarity", `${p.similarity}% alike`));
      pairs.appendChild(pair);
    });
    card.appendChild(pairs);

    return card;
  }

  function renderShapeAnalysis(data) {
    const analysis = data.shape_analysis || { results: [], visuals: null, error: null };

    shapeGrid.innerHTML = "";
    if (!analysis.results.length && analysis.error) {
      shapeGrid.appendChild(el("p", "verify-error", `Shape analysis unavailable (${analysis.error}).`));
    } else {
      analysis.results.forEach(t => shapeGrid.appendChild(buildShapeCard(t)));
    }

    const best = analysis.results[0];
    if (analysis.visuals && best && data.weighted_best) {
      shapeVisual.hidden = false;
      shapeOverall.innerHTML = "";
      const wrap = el("div");
      const bestForWeighted = analysis.results.find(r => r.template === data.weighted_best) || best;
      wrap.appendChild(el("span", "big-pct", `${bestForWeighted.match_pct}%`));
      wrap.appendChild(el("span", "big-pct-label", `Overall shape match vs ${data.weighted_best}`));
      shapeOverall.appendChild(wrap);

      shapeVisualRow.innerHTML = "";
      shapeVisualRow.appendChild(buildGridTile(
        uploadUrl(data.request_id, analysis.visuals.input_file), "Your upload"));
      shapeVisualRow.appendChild(buildGridTile(
        uploadUrl(data.request_id, analysis.visuals.template_file), data.weighted_best));
      shapeVisualRow.appendChild(buildGridTile(
        uploadUrl(data.request_id, analysis.visuals.overlay_file), "Overlap"));
    } else {
      shapeVisual.hidden = true;
    }
  }

  function buildShapeCard(t) {
    const card = el("div", "shape-card");

    const head = el("div", "shape-card-head");
    const filename = templateFileByName[t.template];
    if (filename) {
      const img = el("img");
      img.src = `/template_image/${encodeURIComponent(filename)}`;
      img.alt = t.template;
      head.appendChild(img);
    }
    head.appendChild(el("span", "name", t.template));
    card.appendChild(head);

    const matchRow = el("div", "shape-match-row");
    const track = el("div", "score-bar-track");
    const fill = el("div", "score-bar-fill");
    fill.style.width = `${Math.max(2, t.match_pct)}%`;
    track.appendChild(fill);
    matchRow.appendChild(track);
    matchRow.appendChild(el("span", "match-pct", `${t.match_pct}% match`));
    card.appendChild(matchRow);

    card.appendChild(el("p", "shape-subscores",
      `Hu-moment similarity ${t.hu_similarity_pct}% · silhouette overlap ${t.iou_pct}%`));

    return card;
  }

  function renderTextureAnalysis(data) {
    const analysis = data.texture_analysis || { results: [], visuals: null, error: null };

    textureGrid.innerHTML = "";
    if (!analysis.results.length && analysis.error) {
      textureGrid.appendChild(el("p", "verify-error", `Texture analysis unavailable (${analysis.error}).`));
    } else {
      analysis.results.forEach(t => textureGrid.appendChild(buildTextureCard(t)));
    }

    const best = analysis.results[0];
    const bestForWeighted = data.weighted_best
      ? analysis.results.find(r => r.template === data.weighted_best)
      : null;

    if (analysis.visuals && best && bestForWeighted) {
      textureVisual.hidden = false;
      textureOverall.innerHTML = "";
      const wrap = el("div");
      wrap.appendChild(el("span", "big-pct", `${bestForWeighted.match_pct}%`));
      wrap.appendChild(el("span", "big-pct-label", `Overall texture match vs ${data.weighted_best}`));
      textureOverall.appendChild(wrap);

      textureVisualRow.innerHTML = "";
      textureVisualRow.appendChild(buildGridTile(
        uploadUrl(data.request_id, analysis.visuals.input_file), "Your upload (LBP)"));
      textureVisualRow.appendChild(buildGridTile(
        uploadUrl(data.request_id, analysis.visuals.template_file), `${data.weighted_best} (LBP)`));

      textureGlcmTable.innerHTML = "";
      const head = el("div", "row head");
      head.appendChild(el("span", "prop-name", "GLCM property"));
      head.appendChild(el("span", "value", "Yours"));
      head.appendChild(el("span", "value", data.weighted_best));
      head.appendChild(el("span", "value", "Alike"));
      textureGlcmTable.appendChild(head);

      Object.keys(bestForWeighted.input_glcm_features).forEach(prop => {
        const a = bestForWeighted.input_glcm_features[prop];
        const b = bestForWeighted.template_glcm_features[prop];
        const scale = Math.max(Math.abs(a), Math.abs(b), 1e-9);
        const alike = Math.max(0, 100 * (1 - Math.abs(a - b) / scale));
        const row = el("div", "row");
        row.appendChild(el("span", "prop-name", prop));
        row.appendChild(el("span", "value", String(a)));
        row.appendChild(el("span", "value", String(b)));
        row.appendChild(el("span", "value", `${alike.toFixed(1)}%`));
        textureGlcmTable.appendChild(row);
      });
    } else {
      textureVisual.hidden = true;
    }
  }

  function buildTextureCard(t) {
    const card = el("div", "texture-card");

    const head = el("div", "texture-card-head");
    const filename = templateFileByName[t.template];
    if (filename) {
      const img = el("img");
      img.src = `/template_image/${encodeURIComponent(filename)}`;
      img.alt = t.template;
      head.appendChild(img);
    }
    head.appendChild(el("span", "name", t.template));
    card.appendChild(head);

    const matchRow = el("div", "texture-match-row");
    const track = el("div", "score-bar-track");
    const fill = el("div", "score-bar-fill");
    fill.style.width = `${Math.max(2, t.match_pct)}%`;
    track.appendChild(fill);
    matchRow.appendChild(track);
    matchRow.appendChild(el("span", "match-pct", `${t.match_pct}% match`));
    card.appendChild(matchRow);

    card.appendChild(el("p", "texture-subscores",
      `LBP pattern ${t.lbp_similarity_pct}% · GLCM statistics ${t.glcm_similarity_pct}%`));

    return card;
  }

  function buildGridTile(src, label) {
    const tile = el("div", "grid-tile");
    const img = el("img");
    img.src = src;
    img.alt = label;
    tile.appendChild(img);
    tile.appendChild(el("div", "tile-label", label));
    return tile;
  }

  function renderFamilyGrid(data) {
    const fg = data.family_grid;
    if (!fg || fg.error || !fg.input_grid_file) {
      familyGridSection.hidden = true;
      return;
    }

    familyGridSection.hidden = false;
    familyGridTemplateName.textContent = fg.template;

    familyGridOverall.innerHTML = "";
    if (fg.overall_area_match_pct != null) {
      const wrap = el("div");
      wrap.appendChild(el("span", "big-pct", `${fg.overall_area_match_pct}%`));
      wrap.appendChild(el("span", "big-pct-label", "Overall area match"));
      familyGridOverall.appendChild(wrap);
    }

    familyGridRow.innerHTML = "";
    familyGridRow.appendChild(
      buildGridTile(uploadUrl(data.request_id, fg.input_grid_file), "Your upload")
    );
    familyGridRow.appendChild(
      buildGridTile(uploadUrl(data.request_id, fg.template_grid_file), fg.template)
    );

    familyGridMatches.innerHTML = "";
    (fg.matches || []).forEach(m => {
      const chip = el("div", "family-match");
      chip.appendChild(el("span", "rank", `Region #${m.rank}`));

      const swatches = el("div", "pair-swatches");
      const inputSwatch = el("span", "swatch");
      inputSwatch.style.background = rgbCss(m.input_rgb);
      const templateSwatch = el("span", "swatch");
      templateSwatch.style.background = rgbCss(m.template_rgb);
      swatches.appendChild(inputSwatch);
      swatches.appendChild(el("span", "pair-arrow", "→"));
      swatches.appendChild(templateSwatch);
      chip.appendChild(swatches);

      chip.appendChild(el("span", "area-pct", `${m.area_match_pct}% area match`));
      chip.appendChild(el("span", "sub-pct", `${m.input_pct}% vs ${m.template_pct}%`));
      familyGridMatches.appendChild(chip);
    });
  }

  function renderWeighted(data) {
    const weights = data.method_weights || {};
    const labelFor = method => (data.methods[method] && data.methods[method].label) || method;

    weightedSub.textContent = "Weights — " + Object.entries(weights)
      .map(([method, w]) => `${labelFor(method)} ${Math.round(w * 100)}%`)
      .join(" · ");

    weightedCard.innerHTML = "";
    const ranked = data.weighted_scores || [];
    if (data.weighted_best && ranked.length) {
      const top = ranked[0];

      // Input vs. matched template, side by side -- purely a display
      // addition, doesn't touch which template won.
      const thumbs = el("div", "weighted-thumbs");
      const inputImg = el("img");
      inputImg.src = uploadUrl(data.request_id, data.upload_nobg_file);
      inputImg.alt = "Your upload";
      thumbs.appendChild(inputImg);
      thumbs.appendChild(el("span", "arrow", "→"));
      const filename = templateFileByName[data.weighted_best];
      if (filename) {
        const templateImg = el("img");
        templateImg.src = `/template_image/${encodeURIComponent(filename)}`;
        templateImg.alt = data.weighted_best;
        thumbs.appendChild(templateImg);
      }
      weightedCard.appendChild(thumbs);

      const textWrap = el("div", "weighted-text");
      textWrap.appendChild(el("p", "label", "Weighted final match"));
      textWrap.appendChild(el("h4", null, data.weighted_best));
      textWrap.appendChild(el("p", "weighted-total", `Total weighted score: ${top.weighted_score}`));

      // Shape/texture are informational only here too -- reusing the
      // scores already computed for their own sections, not recomputed
      // and not fed back into the weighting.
      const shapeBest = ((data.shape_analysis && data.shape_analysis.results) || [])
        .find(r => r.template === data.weighted_best);
      const textureBest = ((data.texture_analysis && data.texture_analysis.results) || [])
        .find(r => r.template === data.weighted_best);
      if (shapeBest || textureBest) {
        const parts = [];
        if (shapeBest) parts.push(`Shape ${shapeBest.match_pct}%`);
        if (textureBest) parts.push(`Texture ${textureBest.match_pct}%`);
        textWrap.appendChild(el("p", "weighted-supporting", parts.join(" · ")));
      }

      // Normalized confidence: how decisively the winner beat the
      // runner-up, as a % of the winner's own score -- a display-only
      // derivation from the already-final ranked list. It cannot change
      // weighted_best; it only labels how strong/weak that result is.
      const runnerUp = ranked.length > 1 ? ranked[1].weighted_score : 0;
      const marginPct = top.weighted_score > 0
        ? Math.max(0, Math.min(100, Math.round(((top.weighted_score - runnerUp) / top.weighted_score) * 100)))
        : 0;
      const verdict = marginPct >= 50 ? "Strong match"
        : marginPct >= 20 ? "Moderate match"
        : "Weak match";
      textWrap.appendChild(el("span", "verdict-pill", `${verdict} — ${marginPct}% confidence`));

      weightedCard.appendChild(textWrap);

      const breakdown = el("div", "weighted-breakdown");
      Object.entries(top.breakdown).forEach(([method, contribution]) => {
        const methodResults = (data.methods[method] && data.methods[method].results) || [];
        const rawRow = methodResults.find(r => r.template === data.weighted_best);
        const rawScore = rawRow ? rawRow.score : 0;
        const row = el("div", "row");
        row.appendChild(el("span", null, labelFor(method)));
        row.appendChild(el("span", null,
          `${Math.round((weights[method] || 0) * 100)}% × ${rawScore} = ${contribution}`));
        breakdown.appendChild(row);
      });
      weightedCard.appendChild(breakdown);
    } else {
      weightedCard.appendChild(el("p", null, "No scores to weight yet."));
    }

    weightedRanked.innerHTML = "";
    const maxScore = Math.max(1, ...ranked.map(r => r.weighted_score));
    ranked.forEach((r, idx) => {
      const row = el("div", `score-bar-row${idx === 0 ? " top" : ""}`);
      row.appendChild(el("span", "name", r.template));
      const track = el("div", "score-bar-track");
      const fill = el("div", "score-bar-fill");
      fill.style.width = `${Math.max(2, (r.weighted_score / maxScore) * 100)}%`;
      track.appendChild(fill);
      row.appendChild(track);
      row.appendChild(el("span", "value", String(r.weighted_score)));
      weightedRanked.appendChild(row);
    });
  }

  function buildQueryTile(src, label) {
    const tile = el("div", "query-tile");
    const img = el("img");
    img.src = src;
    img.alt = label;
    tile.appendChild(img);
    tile.appendChild(el("div", "tile-label", label));
    return tile;
  }

  function buildMethodCard(requestId, methodKey, m) {
    const card = el("div", "method-card");

    const head = el("div", "method-card-head");
    head.appendChild(el("h4", null, m.label));
    head.appendChild(el("span", "time-badge", `${m.time_sec.toFixed(2)}s`));
    card.appendChild(head);

    if (m.best) {
      const bestRow = el("div", "best-row");
      if (m.best_image_file) {
        const img = el("img");
        img.src = uploadUrl(requestId, m.best_image_file);
        img.alt = m.best.template;
        bestRow.appendChild(img);
      }
      const info = el("div");
      info.appendChild(el("div", "best-name", m.best.template));
      info.appendChild(el("div", "best-score",
        `Score ${m.best.score} · ${m.best.confidence}% inliers`));
      const pill = el("span",
        `confidence-pill ${m.is_confident ? "confident" : "weak"}`,
        m.is_confident ? "Confident match" : "Weak match");
      info.appendChild(pill);
      bestRow.appendChild(info);
      card.appendChild(bestRow);
    } else if (m.error) {
      card.appendChild(el("p", "error-msg", `This method failed: ${m.error}`));
    } else {
      card.appendChild(el("p", "best-score", "No match found."));
    }

    const bars = el("div", "score-bars");
    const maxScore = Math.max(1, ...m.results.map(r => r.score));
    m.results.forEach((r, idx) => {
      const row = el("div", `score-bar-row${idx === 0 ? " top" : ""}`);
      row.appendChild(el("span", "name", r.template));
      const track = el("div", "score-bar-track");
      const fill = el("div", "score-bar-fill");
      fill.style.width = `${Math.max(2, (r.score / maxScore) * 100)}%`;
      track.appendChild(fill);
      row.appendChild(track);
      row.appendChild(el("span", "value", String(r.score)));
      bars.appendChild(row);
    });
    card.appendChild(bars);

    return card;
  }
})();