"use strict";

const els = {
  slip: document.getElementById("slip"),
  title: document.getElementById("title"),
  meta: document.getElementById("meta"),
  dropzone: document.getElementById("dropzone"),
  fileInput: document.getElementById("fileInput"),
  spectro: document.getElementById("spectro"),
  spectroImg: document.getElementById("spectroImg"),
  status: document.getElementById("status"),
  statusText: document.getElementById("statusText"),
  foot: document.getElementById("foot"),
  totals: document.getElementById("totals"),
  controls: document.getElementById("controls"),
  printBtn: document.getElementById("printBtn"),
};

// State of the most recently rendered slip.
let currentImageUrl = null;
let currentData = null;

// --- receipt date line ------------------------------------------------------
(function stampMeta() {
  const now = new Date();
  const d = now.toLocaleDateString(undefined, {
    year: "numeric", month: "2-digit", day: "2-digit",
  });
  const t = now.toLocaleTimeString(undefined, {
    hour: "2-digit", minute: "2-digit",
  });
  els.meta.textContent = `${d}  ${t}`;
})();

// --- upload flow ------------------------------------------------------------
els.dropzone.addEventListener("click", () => els.fileInput.click());

els.fileInput.addEventListener("change", () => {
  const file = els.fileInput.files && els.fileInput.files[0];
  if (file) render(file);
});

// "Print" = download the ENTIRE slip (title, meta, rules, spectrogram, totals)
// composited as one PNG.
els.printBtn.addEventListener("click", async () => {
  if (!currentData) return;
  const name = slugify(els.title.textContent) || "slip";
  try {
    const blob = await buildSlipPng();
    const href = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = href;
    a.download = `${name}.png`;
    document.body.appendChild(a);
    a.click();
    a.remove();
    URL.revokeObjectURL(href);
  } catch (err) {
    // Fallback: open the raw spectrogram so the user can at least save it.
    window.open(currentImageUrl, "_blank");
  }
});

function slugify(s) {
  return (s || "")
    .trim()
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, "-")
    .replace(/^-+|-+$/g, "");
}

function show(el, visible) { el.hidden = !visible; }

function setStatus(text, isError) {
  els.status.classList.toggle("is-error", !!isError);
  els.statusText.textContent = text;
  show(els.status, true);
}

function fmtDuration(sec) {
  const m = Math.floor(sec / 60);
  const s = Math.round(sec % 60);
  return `${m}:${String(s).padStart(2, "0")}`;
}

async function render(file) {
  // Enter "printing" state: hide placeholder + previous output, show spinner.
  show(els.dropzone, false);
  show(els.spectro, false);
  show(els.foot, false);
  show(els.controls, false);
  setStatus("GENERATING…", false);

  const q = document.getElementById("quality");
  const mode = q ? q.value : "gray";
  try {
    const { mono, sr } = await decodeAudioFile(file);    // in-browser audio decode
    const data = buildSlip(mono, sr, mode);              // in-browser slip render
    await swapInImage(data);
  } catch (err) {
    setStatus(String(err.message || err).toUpperCase(), true);
    // Let the user try again.
    show(els.dropzone, true);
  }
}

// --- in-browser generator (replaces the Python /api/render) ----------------
async function decodeAudioFile(file) {
  const AC = window.AudioContext || window.webkitAudioContext;
  const ctx = new AC();
  const buf = await ctx.decodeAudioData(await file.arrayBuffer());
  const n = buf.length, chs = buf.numberOfChannels;
  const mono = new Float32Array(n);
  for (let c = 0; c < chs; c++) {
    const d = buf.getChannelData(c);
    for (let i = 0; i < n; i++) mono[i] += d[i];
  }
  if (chs > 1) for (let i = 0; i < n; i++) mono[i] /= chs;
  const sr = buf.sampleRate;
  try { ctx.close(); } catch (_) {}
  return { mono, sr };
}

// One RBJ biquad low-pass (band-limits thermal before 1-bit dithering).
function lowpass(x, sr, fc) {
  const w0 = 2 * Math.PI * fc / sr, cs = Math.cos(w0), sn = Math.sin(w0);
  const alpha = sn / (2 * 0.707), a0 = 1 + alpha;
  const B0 = (1 - cs) / 2 / a0, B1 = (1 - cs) / a0, B2 = (1 - cs) / 2 / a0;
  const A1 = -2 * cs / a0, A2 = (1 - alpha) / a0;
  const y = new Float32Array(x.length);
  let x1 = 0, x2 = 0, y1 = 0, y2 = 0;
  for (let i = 0; i < x.length; i++) {
    const xi = x[i], yi = B0 * xi + B1 * x1 + B2 * x2 - A1 * y1 - A2 * y2;
    x2 = x1; x1 = xi; y2 = y1; y1 = yi; y[i] = yi;
  }
  return y;
}

const WAVEFORM_W = 512, PEAK_TARGET = 0.9, THERMAL_FC = 2500;

// mono Float32 -> waveform-raster slip PNG (data URL) + stats. Mirrors render.py.
function buildSlip(mono, sr, mode) {
  let peak = 1e-9;
  for (let i = 0; i < mono.length; i++) { const a = Math.abs(mono[i]); if (a > peak) peak = a; }
  const g = PEAK_TARGET / peak;
  let y = new Float32Array(mono.length);
  for (let i = 0; i < mono.length; i++) y[i] = mono[i] * g;
  if (mode === "thermal") y = lowpass(y, sr, THERMAL_FC);

  const W = WAVEFORM_W, N = y.length, H = Math.max(1, Math.ceil(N / W));
  const cv = document.createElement("canvas"); cv.width = W; cv.height = H;
  const cx = cv.getContext("2d");
  const img = cx.createImageData(W, H), px = img.data;

  if (mode === "digital") {                // 16-bit packed R(hi)/G(lo)
    for (let i = 0; i < W * H; i++) {
      const s = i < N ? y[i] : 0;
      const v = Math.max(0, Math.min(65535, Math.round((s * 0.5 + 0.5) * 65535)));
      const j = i * 4; px[j] = v >> 8; px[j + 1] = v & 255; px[j + 2] = 0; px[j + 3] = 255;
    }
  } else if (mode === "thermal") {         // 1-bit error diffusion along each row
    for (let row = 0; row < H; row++) {
      let err = 0;
      for (let x = 0; x < W; x++) {
        const i = row * W + x, s = i < N ? y[i] : 0;
        const v = (s * 0.5 + 0.5) * 255 + err, o = v >= 127.5 ? 255 : 0;
        err = v - o;
        const j = i * 4; px[j] = px[j + 1] = px[j + 2] = o; px[j + 3] = 255;
      }
    }
  } else {                                 // 8-bit grayscale
    for (let i = 0; i < W * H; i++) {
      const s = i < N ? y[i] : 0;
      const v = Math.max(0, Math.min(255, Math.round((s * 0.5 + 0.5) * 255)));
      const j = i * 4; px[j] = px[j + 1] = px[j + 2] = v; px[j + 3] = 255;
    }
  }
  cx.putImageData(img, 0, 0);
  return {
    image_url: cv.toDataURL("image/png"),
    width_px: W, height_px: H, duration_sec: N / sr, sample_rate: sr, mode,
    title: (els.title.textContent || "").trim(),
  };
}

function swapInImage(data) {
  return new Promise((resolve) => {
    els.spectroImg.onload = () => {
      show(els.status, false);
      show(els.spectro, true);
      renderTotals(data);
      show(els.foot, true);
      currentData = data;
      show(els.controls, true);
      resolve();
    };
    els.spectroImg.onerror = () => {
      setStatus("IMAGE LOAD FAILED", true);
      show(els.dropzone, true);
      resolve();
    };
    // cache-bust not needed: filenames are unique per render
    currentImageUrl = data.image_url;
    els.spectroImg.src = data.image_url;
  });
}

function totalsRows(data) {
  return [
    ["DURATION", fmtDuration(data.duration_sec)],
    ["SAMPLE RATE", `${data.sample_rate} Hz`],
    ["QUALITY", (data.mode || "gray").toUpperCase()],
    ["SIZE", `${data.width_px} × ${data.height_px} px`],
  ];
}

function renderTotals(data) {
  els.totals.innerHTML = totalsRows(data)
    .map(
      ([k, v]) =>
        `<div class="totals__row"><span>${k}</span><span>${v}</span></div>`
    )
    .join("");
}

// --- full-slip compositor (for the Print download) --------------------------
const PAPER = "#fbfbf7";
const INK = "#111";
const MONO = '"SFMono-Regular", ui-monospace, Menlo, Consolas, monospace';

function wrapText(ctx, text, maxWidth) {
  if (!text) return [""];
  const words = text.split(/\s+/);
  const lines = [];
  let line = "";
  for (const w of words) {
    const test = line ? `${line} ${w}` : w;
    if (ctx.measureText(test).width > maxWidth && line) {
      lines.push(line);
      line = w;
    } else {
      line = test;
    }
  }
  if (line) lines.push(line);
  return lines;
}

function dashedLine(ctx, x1, x2, y, W) {
  ctx.save();
  ctx.strokeStyle = "#000";
  ctx.globalAlpha = 0.6;
  ctx.lineWidth = Math.max(1, Math.round(W * 0.002));
  ctx.setLineDash([W * 0.012, W * 0.012]);
  ctx.beginPath();
  ctx.moveTo(x1, y);
  ctx.lineTo(x2, y);
  ctx.stroke();
  ctx.restore();
}

function buildSlipPng() {
  const img = els.spectroImg;
  const specW = img.naturalWidth;
  const specH = img.naturalHeight;

  const MX = Math.round(specW * 0.06);     // paper side margin
  const W = specW + MX * 2;                 // full paper width
  const innerW = W - MX * 2;

  const titleSize = Math.round(W * 0.055);
  const metaSize = Math.round(W * 0.026);
  const totalsSize = Math.round(W * 0.03);
  const thanksSize = Math.round(W * 0.026);
  const gap = Math.round(W * 0.035);
  const padY = Math.round(W * 0.05);
  const titleLineH = Math.round(titleSize * 1.25);
  const rowH = Math.round(totalsSize * 1.55);

  const meas = document.createElement("canvas").getContext("2d");
  meas.font = `700 ${titleSize}px ${MONO}`;
  const title = (els.title.textContent || "").trim().toUpperCase() || "UNTITLED";
  const titleLines = wrapText(meas, title, innerW);
  const meta = els.meta.textContent || "";
  const rows = totalsRows(currentData);

  // Height budget.
  let h = padY;
  h += titleLines.length * titleLineH + gap;   // title
  h += metaSize + gap;                         // meta
  h += gap;                                    // top rule
  h += specH;                                  // spectrogram
  h += gap;                                    // bottom rule
  h += rows.length * rowH + gap;               // totals
  h += thanksSize;                             // thanks
  h += padY;

  const cv = document.createElement("canvas");
  cv.width = W;
  cv.height = h;
  const ctx = cv.getContext("2d");
  ctx.fillStyle = PAPER;
  ctx.fillRect(0, 0, W, h);
  ctx.fillStyle = INK;
  ctx.textBaseline = "top";

  let y = padY;

  ctx.font = `700 ${titleSize}px ${MONO}`;
  ctx.textAlign = "center";
  for (const line of titleLines) {
    ctx.fillText(line, W / 2, y);
    y += titleLineH;
  }
  y += gap;

  ctx.font = `${metaSize}px ${MONO}`;
  ctx.fillStyle = "#555";
  ctx.fillText(meta, W / 2, y);
  ctx.fillStyle = INK;
  y += metaSize + gap;

  dashedLine(ctx, MX, W - MX, y, W);
  y += gap;

  ctx.drawImage(img, MX, y, specW, specH);
  y += specH + gap;

  dashedLine(ctx, MX, W - MX, y, W);
  y += gap;

  for (const [k, v] of rows) {
    ctx.font = `${totalsSize}px ${MONO}`;
    ctx.textAlign = "left";
    ctx.fillText(k, MX, y);
    ctx.font = `700 ${totalsSize}px ${MONO}`;
    ctx.textAlign = "right";
    ctx.fillText(v, W - MX, y);
    y += rowH;
  }
  y += gap;

  ctx.font = `${thanksSize}px ${MONO}`;
  ctx.fillStyle = "#555";
  ctx.textAlign = "center";
  ctx.fillText("*** SOUND PRINTED AS LIGHT ***", W / 2, y);

  return new Promise((resolve, reject) => {
    cv.toBlob(
      (blob) => (blob ? resolve(blob) : reject(new Error("toBlob failed"))),
      "image/png"
    );
  });
}