csv.js

import { CSV_LIMITS, SYNTHETIC_CSV_SAMPLE, parseCsv, processCsv, buildDeliverables, decodeUtf8 } from "./csv-core.js";

const PREVIEW_LIMIT = 8;
const elements = {
  input: document.querySelector("#csv-input"),
  file: document.querySelector("#csv-file"),
  fileName: document.querySelector("#file-name"),
  sample: document.querySelector("#sample"),
  heroSample: document.querySelector("#hero-sample"),
  parse: document.querySelector("#parse"),
  parseSummary: document.querySelector("#parse-summary"),
  keyFields: document.querySelector("#key-fields"),
  keyOptions: document.querySelector("#key-options"),
  trim: document.querySelector("#trim-cells"),
  duplicateFieldset: document.querySelector(".duplicate-policy"),
  review: document.querySelector("#review"),
  status: document.querySelector("#status"),
  runState: document.querySelector("#run-state"),
  resultState: document.querySelector("#result-state"),
  resultSummary: document.querySelector("#result-summary"),
  resultDetails: document.querySelector("#result-details"),
  counts: document.querySelector("#counts"),
  conservation: document.querySelector("#conservation"),
  duplicateCount: document.querySelector("#duplicate-count"),
  conflictCount: document.querySelector("#conflict-count"),
  missingCount: document.querySelector("#missing-count"),
  trimCount: document.querySelector("#trim-count"),
  cleanHead: document.querySelector("#clean-head"),
  cleanBody: document.querySelector("#clean-body"),
  cleanNote: document.querySelector("#clean-preview-note"),
  reviewHead: document.querySelector("#review-head"),
  reviewBody: document.querySelector("#review-body"),
  reviewNote: document.querySelector("#review-preview-note"),
  changes: document.querySelector("#change-list"),
  protections: document.querySelector("#protection-list"),
  approval: document.querySelector("#approval"),
  downloadCleaned: document.querySelector("#download-cleaned"),
  downloadReview: document.querySelector("#download-review"),
  downloadReport: document.querySelector("#download-report"),
};

const downloadLinks = [elements.downloadCleaned, elements.downloadReview, elements.downloadReport];
let parsed = null;
let completed = null;
let sourceName = "pasted CSV";
let inputRevision = 0;
let objectUrls = [];

function setStatus(message, kind = "") {
  elements.status.textContent = message;
  elements.status.className = `status${kind ? ` ${kind}` : ""}`;
}

function setState(element, label, kind) {
  element.textContent = label;
  element.className = `state ${kind}`;
}

function revokeDownloads() {
  for (const url of objectUrls) URL.revokeObjectURL(url);
  objectUrls = [];
  for (const link of downloadLinks) {
    link.removeAttribute("href");
    link.setAttribute("aria-disabled", "true");
    link.tabIndex = -1;
  }
  elements.approval.checked = false;
  elements.approval.disabled = true;
}

function resetCountCards() {
  elements.counts.querySelectorAll("strong").forEach((node) => { node.textContent = "—"; });
}

function invalidateResult(message = "Cleanup is pending. Review the current policy, then run it again.") {
  completed = null;
  revokeDownloads();
  elements.resultDetails.hidden = true;
  elements.resultSummary.textContent = message;
  setState(elements.resultState, "PENDING", "pending");
  resetCountCards();
}

function clearParsed(message) {
  parsed = null;
  elements.keyFields.disabled = true;
  elements.trim.disabled = true;
  elements.duplicateFieldset.disabled = true;
  elements.review.disabled = true;
  elements.keyOptions.replaceChildren(Object.assign(document.createElement("p"), { textContent: "Parse CSV to list headers." }));
  elements.parseSummary.textContent = "Not parsed.";
  setState(elements.runState, "PENDING", "pending");
  invalidateResult("Input changed. Parse the current CSV before reviewing cleanup.");
  if (message) setStatus(message);
}

function replaceInput(text, name) {
  inputRevision++;
  elements.input.value = text;
  sourceName = name;
  elements.file.value = "";
  elements.fileName.textContent = name;
  clearParsed("Sample loaded. Choose Parse CSV to inspect its real headers and rows.");
  elements.input.focus();
}

function loadSample() {
  replaceInput(SYNTHETIC_CSV_SAMPLE, "synthetic-messy-contacts.csv (14 rows)");
  document.querySelector("#workspace").scrollIntoView({ behavior: "smooth", block: "start" });
}

function renderKeyOptions(headers) {
  const fragment = document.createDocumentFragment();
  headers.forEach((header, index) => {
    const label = document.createElement("label");
    const input = document.createElement("input");
    input.type = "checkbox";
    input.name = "key-column";
    input.value = header;
    input.checked = header === "email" || (!headers.includes("email") && index === 0);
    input.addEventListener("change", () => {
      invalidateResult("Key selection changed. Run Review cleanup again.");
      setStatus("Key selection changed. Previous results and downloads were invalidated.");
    });
    label.append(input, document.createTextNode(header));
    fragment.append(label);
  });
  elements.keyOptions.replaceChildren(fragment);
}

function parseCurrentInput() {
  try {
    parsed = parseCsv(elements.input.value);
    renderKeyOptions(parsed.headers);
    elements.keyFields.disabled = false;
    elements.trim.disabled = false;
    elements.duplicateFieldset.disabled = false;
    elements.review.disabled = false;
    elements.parseSummary.textContent = `${parsed.rows.length.toLocaleString()} data rows, ${parsed.headers.length} columns, ${parsed.inputBytes.toLocaleString()} UTF-8 bytes.`;
    setState(elements.runState, "PARSED", "ready");
    invalidateResult("CSV parsed. Choose key columns and cleanup policy, then run Review cleanup.");
    setStatus(`Parsed ${parsed.rows.length} data rows. Select at least one exact key column, then review cleanup.`, "success");
  } catch (error) {
    clearParsed();
    setState(elements.runState, "ERROR", "invalid");
    setStatus(error instanceof Error ? error.message : "CSV parsing failed.", "error");
  }
}

function currentOptions() {
  return {
    keyColumns: [...document.querySelectorAll('input[name="key-column"]:checked')].map((input) => input.value),
    trimCells: elements.trim.checked,
    duplicatePolicy: document.querySelector('input[name="duplicate-policy"]:checked').value,
  };
}

function cell(value, className = "") {
  const node = document.createElement("td");
  node.textContent = value;
  if (className) node.className = className;
  node.title = value;
  return node;
}

function renderTable(head, body, headers, rows) {
  const headRow = document.createElement("tr");
  headers.forEach((header) => {
    const node = document.createElement("th");
    node.scope = "col";
    node.textContent = header;
    headRow.append(node);
  });
  head.replaceChildren(headRow);
  const fragment = document.createDocumentFragment();
  rows.forEach((values) => {
    const row = document.createElement("tr");
    values.forEach((value) => row.append(cell(String(value))));
    fragment.append(row);
  });
  body.replaceChildren(fragment);
}

function appendListMessage(list, text) {
  const item = document.createElement("li");
  item.textContent = text;
  list.append(item);
}

function showValue(value) {
  return JSON.stringify(value);
}

function renderAudit(processed, report) {
  elements.changes.replaceChildren();
  for (const row of processed.rowReports) {
    for (const change of row.changes) {
      appendListMessage(elements.changes, `Source row ${row.sourceRow}, ${change.column}: ${showValue(change.before)} → ${showValue(change.after)}`);
    }
  }
  if (!elements.changes.children.length) appendListMessage(elements.changes, "No processed cell values changed.");

  elements.protections.replaceChildren();
  const protections = [...report.exports.cleaned.protections, ...report.exports.reviewNeeded.protections];
  for (const item of protections) {
    const location = item.location === "header" ? `Header ${showValue(item.column)}` : `Source row ${item.sourceRow}, ${item.column}`;
    appendListMessage(elements.protections, `${location}: ${showValue(item.processedValue)} → ${showValue(item.exportedValue)}`);
  }
  if (!protections.length) appendListMessage(elements.protections, "No export-only prefixes were needed.");
}

function createDownload(link, contents, type) {
  const url = URL.createObjectURL(new Blob([contents], { type }));
  objectUrls.push(url);
  link.href = url;
  link.setAttribute("aria-disabled", "true");
  link.tabIndex = -1;
}

function renderResult(result) {
  const { parsed: currentParsed, processed, deliverables } = result;
  const counts = processed.counts;
  [...elements.counts.querySelectorAll("strong")].forEach((node, index) => {
    node.textContent = [counts.inputRows, counts.cleanedRows, counts.quarantinedRows, counts.collapsedRows][index].toLocaleString();
  });
  elements.resultSummary.textContent = `${counts.cleanedRows} rows are ready, ${counts.quarantinedRows} need human review, and ${counts.collapsedRows} exact duplicate rows were collapsed.`;
  elements.conservation.textContent = `${counts.inputRows} input = ${counts.cleanedRows} cleaned + ${counts.quarantinedRows} quarantined + ${counts.collapsedRows} collapsed ✓`;
  elements.duplicateCount.textContent = `${counts.exactDuplicateGroups} groups, ${counts.exactDuplicateRows} participating rows. Participating rows includes every copy, not just collapsed extras.`;
  elements.conflictCount.textContent = `${counts.conflictGroups} groups, ${counts.conflictRows} rows. Every row in a conflicting key group is quarantined before any duplicate collapse.`;
  elements.missingCount.textContent = `${counts.missingKeyRows} rows. Any empty selected key sends the row to review-needed.csv.`;
  elements.trimCount.textContent = `${counts.trimmedCells} cells. Only leading and trailing whitespace changed.`;

  const cleanRows = processed.cleaned.slice(0, PREVIEW_LIMIT).map((row) => [row.sourceRow, ...row.values]);
  renderTable(elements.cleanHead, elements.cleanBody, ["source row", ...currentParsed.headers], cleanRows);
  elements.cleanNote.textContent = `Showing ${cleanRows.length} of ${counts.cleanedRows} cleaned rows. Original source order is preserved.`;

  const reviewRows = processed.quarantined.slice(0, PREVIEW_LIMIT).map((row) => [row.sourceRow, row.reason, ...row.values]);
  renderTable(elements.reviewHead, elements.reviewBody, ["source row", "reason", ...currentParsed.headers], reviewRows);
  elements.reviewBody.querySelectorAll("tr").forEach((row, index) => {
    const reasonCell = row.children[1];
    reasonCell.className = processed.quarantined[index].reason.startsWith("conflict") ? "reason-conflict" : "reason-missing";
  });
  elements.reviewNote.textContent = reviewRows.length
    ? `Showing ${reviewRows.length} of ${counts.quarantinedRows} rows. review-needed.csv includes all of them with source row and reason.`
    : "No rows require review for this policy.";

  renderAudit(processed, deliverables.report);
  revokeDownloads();
  createDownload(elements.downloadCleaned, deliverables.cleanedCsv, "text/csv;charset=utf-8");
  createDownload(elements.downloadReview, deliverables.reviewCsv, "text/csv;charset=utf-8");
  createDownload(elements.downloadReport, deliverables.reportJson, "application/json;charset=utf-8");
  elements.approval.disabled = false;
  elements.resultDetails.hidden = false;
  setState(elements.resultState, "COMPLETE", "ready");
  setState(elements.runState, "COMPLETE", "ready");
}

function reviewCleanup() {
  if (!parsed) {
    setStatus("Parse the current CSV before running cleanup.", "error");
    return;
  }
  try {
    const options = currentOptions();
    const processed = processCsv(parsed, options);
    const deliverables = buildDeliverables(parsed, processed, options, { sourceName });
    completed = { parsed, processed, deliverables };
    renderResult(completed);
    setStatus("Cleanup complete. Review the previews, changes, and protections before enabling downloads.", "success");
    document.querySelector(".results").scrollIntoView({ behavior: "smooth", block: "start" });
  } catch (error) {
    invalidateResult("Cleanup failed. Correct the policy and run it again.");
    setState(elements.resultState, "ERROR", "invalid");
    setStatus(error instanceof Error ? error.message : "Cleanup failed.", "error");
  }
}

async function readFile(file) {
  const revision = ++inputRevision;
  clearParsed("Reading the selected file…");
  elements.fileName.textContent = file.name;
  try {
    if (!/\.csv$/iu.test(file.name)) throw new Error("Choose a file with the .csv extension.");
    if (file.size > CSV_LIMITS.maxBytes) throw new Error("CSV exceeds the 1 MiB UTF-8 input limit.");
    const bytes = await file.arrayBuffer();
    if (revision !== inputRevision) return;
    const text = decodeUtf8(bytes);
    if (revision !== inputRevision) return;
    elements.input.value = text;
    sourceName = file.name;
    clearParsed("File loaded in memory. Choose Parse CSV to validate it.");
  } catch (error) {
    if (revision !== inputRevision) return;
    elements.input.value = "";
    sourceName = "pasted CSV";
    clearParsed();
    setState(elements.runState, "ERROR", "invalid");
    setStatus(error instanceof Error ? error.message : "The file could not be read.", "error");
  }
}

async function copyBrief(button) {
  const text = document.getElementById(button.dataset.copy).textContent;
  const original = button.textContent;
  try {
    await navigator.clipboard.writeText(text);
    button.textContent = "Copied";
  } catch {
    const helper = document.createElement("textarea");
    helper.value = text;
    helper.style.position = "fixed";
    helper.style.opacity = "0";
    document.body.append(helper);
    helper.select();
    const copied = document.execCommand("copy");
    helper.remove();
    button.textContent = copied ? "Copied" : "Copy failed";
  }
  window.setTimeout(() => { button.textContent = original; }, 1600);
}

elements.sample.addEventListener("click", loadSample);
elements.heroSample.addEventListener("click", loadSample);
elements.parse.addEventListener("click", parseCurrentInput);
elements.review.addEventListener("click", reviewCleanup);
elements.input.addEventListener("input", () => {
  inputRevision++;
  sourceName = "pasted CSV";
  elements.file.value = "";
  elements.fileName.textContent = "Edited or pasted CSV";
  clearParsed("Input changed. Parse the current CSV again.");
});
elements.file.addEventListener("change", () => {
  const [file] = elements.file.files;
  if (file) readFile(file);
});
elements.trim.addEventListener("change", () => {
  invalidateResult("Trim policy changed. Run Review cleanup again.");
  setStatus("Trim policy changed. Previous results and downloads were invalidated.");
});
elements.duplicateFieldset.addEventListener("change", () => {
  invalidateResult("Duplicate policy changed. Run Review cleanup again.");
  setStatus("Duplicate policy changed. Previous results and downloads were invalidated.");
});
elements.approval.addEventListener("change", () => {
  const enabled = elements.approval.checked && completed !== null;
  for (const link of downloadLinks) {
    link.setAttribute("aria-disabled", String(!enabled));
    link.tabIndex = enabled ? 0 : -1;
  }
  setStatus(enabled ? "Downloads enabled for the reviewed result." : "Downloads disabled until review confirmation.", enabled ? "success" : "");
});
downloadLinks.forEach((link) => link.addEventListener("click", (event) => {
  if (link.getAttribute("aria-disabled") === "true") event.preventDefault();
}));
document.querySelectorAll("[data-copy]").forEach((button) => button.addEventListener("click", () => copyBrief(button)));
window.addEventListener("beforeunload", revokeDownloads);

revokeDownloads();