spread

// Spread — frontend glue. Sends an uploaded BOM to /api/analyze and renders

// the returned line-by-line re-quote into the example table.

(function () {

  "use strict";

  var fileInput = document.getElementById("file-input");

  var dropzone = document.getElementById("dropzone");

  var wrapper = document.getElementById("bom-wrapper");

  var body = document.getElementById("bom-body");

  var title = document.getElementById("bom-title");

  var meta = document.getElementById("bom-meta");

  var errorBanner = document.getElementById("error-banner");

  var els = {

    savings: document.getElementById("t-savings"),

    cut: document.getElementById("t-cut"),

    net: document.getElementById("t-net"),

  };

  function money(n, digits) {

    return "$" + Number(n).toLocaleString("en-US", {

      minimumFractionDigits: digits,

      maximumFractionDigits: digits,

    });

  }

  function qty(n) {

    return Number(n).toLocaleString("en-US");

  }

  function esc(s) {

    var d = document.createElement("div");

    d.textContent = s == null ? "" : String(s);

    return d.innerHTML;

  }

  function showError(msg) {

    errorBanner.textContent = msg;

    errorBanner.classList.add("error");

  }

  function clearError() {

    errorBanner.textContent = "";

    errorBanner.classList.remove("error");

  }

  function render(report) {

    var lines = report.lines || [];

    var rows = lines.map(function (l) {

      var pn = l.part_number || "";

      var estTag = l.matched ? "" : ' <span class="est">· est.</span>';

      var saveClass = l.line_saving > 0 ? "save" : "save zero";

      return (

        "<tr>" +

        '<td class="part">' + esc(l.description) +

          '<span class="pn">' + esc(pn) + estTag + "</span></td>" +

        '<td class="num">' + qty(l.quantity) + "</td>" +

        '<td class="num market">' + money(l.unit_price, 4) + "</td>" +

        '<td class="num ours">' + money(l.spread_price, 4) + "</td>" +

        '<td class="num ' + saveClass + '">' + money(l.line_saving, 2) + "</td>" +

        "</tr>"

      );

    });

    body.innerHTML = rows.join("") ||

      '<tr><td class="part" colspan="5" style="color:var(--text-tertiary)">No line items found.</td></tr>';

    var t = report.totals || {};

    els.savings.textContent = money(t.savings || 0, 2);

    els.cut.textContent = money(t.our_cut || 0, 2);

    els.net.textContent = money(t.net_savings || 0, 2);

    var partWord = (t.lines === 1) ? "part" : "parts";

    title.innerHTML = esc(report.bom_ref || "BOM") +

      ' &nbsp;<span class="dim">· ' + (t.lines || 0) + " " + partWord + "</span>";

    meta.textContent = "analysis complete";

  }

  function analyze(file) {

    clearError();

    wrapper.classList.add("busy");

    meta.textContent = "re-quoting…";

    var fd = new FormData();

    fd.append("bom", file, file.name);

    fetch("/api/analyze", { method: "POST", body: fd })

      .then(function (res) {

        return res.json().then(function (data) {

          if (!res.ok) throw new Error(data.error || "Analysis failed (" + res.status + ")");

          return data;

        });

      })

      .then(function (report) {

        render(report);

      })

      .catch(function (err) {

        showError(err.message || "Something went wrong parsing that file.");

        meta.textContent = "upload failed";

      })

      .finally(function () {

        wrapper.classList.remove("busy");

      });

  }

  function loadExample() {

    clearError();

    wrapper.classList.add("busy");

    meta.textContent = "re-quoting…";

    fetch("/example-bom.csv")

      .then(function (res) {

        if (!res.ok) throw new Error("could not load example");

        return res.blob();

      })

      .then(function (blob) {

        analyze(new File([blob], "example-bom.csv", { type: "text/csv" }));

      })

      .catch(function (err) {

        showError(err.message);

        wrapper.classList.remove("busy");

      });

  }

  // Wire the upload buttons.

  Array.prototype.forEach.call(document.querySelectorAll("[data-upload]"), function (btn) {

    btn.addEventListener("click", function () { fileInput.click(); });

  });

  Array.prototype.forEach.call(document.querySelectorAll("[data-example]"), function (btn) {

    btn.addEventListener("click", function (e) {

      e.preventDefault();

      document.getElementById("example").scrollIntoView({ behavior: "smooth" });

      loadExample();

    });

  });

  fileInput.addEventListener("change", function () {

    if (fileInput.files && fileInput.files[0]) analyze(fileInput.files[0]);

    fileInput.value = "";

  });

  // Drag and drop.

  ["dragenter", "dragover"].forEach(function (ev) {

    dropzone.addEventListener(ev, function (e) {

      e.preventDefault();

      dropzone.classList.add("drag");

    });

  });

  ["dragleave", "drop"].forEach(function (ev) {

    dropzone.addEventListener(ev, function (e) {

      e.preventDefault();

      if (ev === "dragleave" && dropzone.contains(e.relatedTarget)) return;

      dropzone.classList.remove("drag");

    });

  });

  dropzone.addEventListener("drop", function (e) {

    if (e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files[0]) {

      analyze(e.dataTransfer.files[0]);

    }

  });

  // Load the example on first paint so the section is never empty.

  loadExample();

})();