'use strict';

(() => {
  const $ = (id) => document.getElementById(id);
  const LABELS = ['bug', 'feature', 'documentation', 'question'];
  const state = {
    currentIssues: [], run: null, selected: new Set(), decisions: new Map(),
    applied: new Map(), revisions: [], filter: 'all', busy: false, inputDirty: false,
  };

  function node(tag, className, text) {
    const element = document.createElement(tag);
    if (className) element.className = className;
    if (text !== undefined) element.textContent = String(text);
    return element;
  }
  function notify(message, kind = '') {
    const notice = $('notice');
    notice.textContent = message;
    notice.className = `notice ${kind}`.trim();
    notice.hidden = !message;
  }
  function formatScore(value) {
    return Number.isFinite(value) ? value.toFixed(3) : 'Unavailable';
  }
  function count(value) { return Number.isFinite(value) ? String(value) : '—'; }
  function isDuplicate(item) { return item.duplicateOf !== null && item.duplicateOf !== undefined; }

  async function api(path, payload) {
    const response = await fetch(path, {
      method: payload === undefined ? 'GET' : 'POST',
      headers: payload === undefined ? { Accept: 'application/json' } : { 'Content-Type': 'application/json', Accept: 'application/json' },
      ...(payload === undefined ? {} : { body: JSON.stringify(payload) }),
      credentials: 'same-origin',
    });
    let data;
    try { data = await response.json(); }
    catch (_) { throw new Error(`The local server returned an unreadable response (${response.status}).`); }
    if (!response.ok) {
      const detail = typeof data.error === 'string' ? data.error : typeof data.message === 'string' ? data.message : `Local request failed (${response.status}).`;
      throw new Error(detail);
    }
    return data;
  }

  function validateIssues(value) {
    const raw = Array.isArray(value) ? value : value?.issues;
    if (!Array.isArray(raw) || raw.length === 0 || raw.length > 100) throw new Error('Provide between 1 and 100 synthetic issues.');
    const seen = new Set();
    const issues = raw.map((item) => {
      if (!item || typeof item !== 'object' || Array.isArray(item)) throw new Error('Each issue must be an object.');
      const id = item.id ?? item.number;
      if (!Number.isSafeInteger(id) || id < 1 || seen.has(id)) throw new Error('Issue IDs must be unique positive safe integers. You can use “id” or “number”.');
      seen.add(id);
      if (typeof item.title !== 'string' || !item.title.trim() || item.title.length > 300) throw new Error('Every issue needs a title of 1–300 characters.');
      if (item.body != null && typeof item.body !== 'string') throw new Error('Issue bodies must be text or null.');
      const body = item.body ?? '';
      if (body.length > 12000) throw new Error('Issue bodies must be at most 12,000 characters.');
      if (item.labels != null && !Array.isArray(item.labels)) throw new Error('Labels must be an array.');
      const labels = (item.labels ?? []).map((label) => typeof label === 'string' ? label : label?.name);
      if (labels.length > 30 || labels.some((label) => typeof label !== 'string' || label.length > 100)) throw new Error('Use up to 30 labels, each at most 100 characters. Labels may be strings or objects with a name.');
      return { id, title: item.title.trim(), body, labels: [...new Set(labels)] };
    });
    if (JSON.stringify(issues).length > 256000) throw new Error('The normalized issue export must be at most 256,000 characters.');
    return issues;
  }
  function readInput() {
    let parsed;
    try { parsed = JSON.parse($('json-input').value); }
    catch (_) { throw new Error('The JSON isn’t valid yet. Check for missing quotes, commas, or brackets.'); }
    return validateIssues(parsed);
  }
  function writeInput(issues) {
    $('json-input').value = JSON.stringify({ issues }, null, 2);
    $('input-count').textContent = `${issues.length} ${issues.length === 1 ? 'ISSUE' : 'ISSUES'}`;
    state.inputDirty = false;
  }
  function resetWithIssues(issues) {
    state.currentIssues = issues;
    state.run = null;
    state.selected.clear();
    state.decisions.clear();
    state.applied.clear();
    state.revisions = [];
    state.filter = 'all';
    writeInput(issues);
    render();
  }
  function setBusy(busy) {
    state.busy = busy;
    $('json-input').readOnly = busy;
    $('sample-button').disabled = busy;
    $('empty-sample').disabled = busy;
    $('file-button').disabled = busy;
    $('run-button').disabled = busy;
    $('file-input').disabled = busy;
    $('run-button-label').textContent = busy ? 'Working locally…' : 'Run local triage';
    $('workspace').setAttribute('aria-busy', String(busy));
    document.querySelectorAll('.issue-checkbox, .label-select').forEach((element) => { element.disabled = busy || state.inputDirty; });
    updateControls();
  }
  function updateControls() {
    const selected = state.selected.size;
    $('selected-count').textContent = `${selected} ${selected === 1 ? 'issue' : 'issues'} selected`;
    $('apply-button').disabled = !selected || !state.run || state.busy || state.inputDirty;
    $('undo-button').disabled = !state.revisions.length || state.busy || state.inputDirty;
    $('export-button').disabled = !state.currentIssues.length || state.busy;
    $('csv-button').disabled = !state.currentIssues.length || state.busy;
    $('run-pill').textContent = state.inputDirty && state.run ? 'Input edited' : state.run ? 'Review before applying' : 'Awaiting a run';
    const last = state.revisions[state.revisions.length - 1];
    $('version-status').textContent = last
      ? `${last.count} ${last.count === 1 ? 'annotation' : 'annotations'} in the last apply. Undo restores the previous local version.`
      : 'Selections update this local copy. Your GitHub repository is never touched.';
  }

  async function loadSample() {
    if (state.busy) return;
    setBusy(true);
    notify('Loading the synthetic sample from your local server…', 'busy');
    try {
      const data = await api('/api/sample');
      resetWithIssues(validateIssues(data));
      notify(`Loaded ${state.currentIssues.length} synthetic issues. Run local triage when you’re ready.`, 'success');
    } catch (error) { notify(error.message, 'error'); }
    finally { setBusy(false); }
  }

  async function runTriage() {
    if (state.busy) return;
    let issues;
    try { issues = readInput(); }
    catch (error) { notify(error.message, 'error'); $('json-input').focus(); return; }
    setBusy(true);
    notify('The local model is comparing your issues with reference examples. A first run may take a little longer.', 'busy');
    try {
      const result = await api('/api/triage', { issues });
      if (!result.runId || !Array.isArray(result.items)) throw new Error('The local server did not return a complete triage result.');
      const inputIds = new Set(issues.map((issue) => String(issue.id)));
      const resultIds = result.items.map((item) => String(item.id));
      if (result.items.length !== issues.length || new Set(resultIds).size !== resultIds.length || resultIds.some((id) => !inputIds.has(id))) throw new Error('The returned issue IDs did not match this queue. No changes were applied.');
      if (result.items.some((item) => !LABELS.includes(item.suggestedLabel))) throw new Error('The server returned an unsupported label. No changes were applied.');
      const normalizedResult = validateIssues(result.items);
      state.run = result;
      state.currentIssues = normalizedResult;
      state.selected.clear();
      state.decisions = new Map(result.items.map((item) => [String(item.id), item.suggestedLabel]));
      state.applied.clear();
      state.revisions = [];
      state.filter = 'all';
      writeInput(state.currentIssues);
      render();
      notify('Your first pass is ready. Read the evidence, adjust any labels, and check the issues you want to annotate. Nothing has been applied.', 'success');
    } catch (error) { notify(error.message, 'error'); }
    finally { setBusy(false); }
  }

  function renderIssue(item, index) {
    const key = String(item.id);
    const card = node('article', `issue-card${state.selected.has(key) ? ' selected' : ''}`);
    const top = node('div', 'issue-top');
    const checkbox = node('input', 'issue-checkbox');
    checkbox.type = 'checkbox';
    checkbox.checked = state.selected.has(key);
    checkbox.disabled = state.busy || state.inputDirty;
    checkbox.setAttribute('aria-label', `Select issue ${item.id}: ${item.title}`);
    checkbox.addEventListener('change', () => {
      if (checkbox.checked) state.selected.add(key); else state.selected.delete(key);
      card.classList.toggle('selected', checkbox.checked);
      updateControls();
    });
    const main = node('div', 'issue-main');
    const heading = node('div', 'issue-heading');
    heading.append(node('span', 'issue-id', `#${item.id}`), node('h4', 'issue-title', item.title));
    main.append(heading);
    const body = String(item.body || '');
    if (body) main.append(node('p', 'issue-description', body.length > 220 ? `${body.slice(0, 220)}…` : body));
    const current = state.currentIssues.find((issue) => String(issue.id) === key);
    if (current?.labels?.length) {
      const labels = node('div', 'issue-labels');
      labels.setAttribute('aria-label', 'Current local labels');
      current.labels.forEach((label) => labels.append(node('span', 'existing-label', label)));
      main.append(labels);
    }
    top.append(checkbox, main);
    const proposal = node('div', 'issue-proposal');
    const label = node('label', 'suggest-label', 'Suggested label');
    const selectId = `label-choice-${index}`;
    label.htmlFor = selectId;
    const select = node('select', 'label-select');
    select.id = selectId;
    select.setAttribute('aria-label', `Label for issue ${item.id}`);
    select.disabled = state.busy || state.inputDirty;
    LABELS.forEach((labelName) => {
      const option = node('option', '', labelName);
      option.value = labelName;
      select.append(option);
    });
    select.value = state.decisions.get(key);
    select.addEventListener('change', () => { state.decisions.set(key, select.value); });
    proposal.append(label, select);
    if (item.needsReview) proposal.append(node('span', 'review-badge', 'Needs a closer look'));
    else proposal.append(node('span', 'review-badge clear', 'Clearer match'));
    if (isDuplicate(item)) proposal.append(node('span', 'duplicate-badge', `Similar to #${item.duplicateOf}`));
    if (state.applied.has(key)) proposal.append(node('span', 'applied-badge', 'Applied locally'));
    proposal.append(node('span', 'score-row', `Similarity ${formatScore(item.similarity)}`));
    const details = node('details', 'evidence-details');
    details.append(node('summary', '', 'Why this suggestion?'));
    const evidence = node('div', 'evidence-content');
    if (item.evidence && typeof item.evidence === 'object') {
      evidence.append(node('p', '', `Nearest reference: ${item.evidence.title || 'Untitled reference'}`));
      evidence.append(node('p', '', `Reference label: ${item.evidence.label || 'Unavailable'} · similarity ${formatScore(item.evidence.similarity)}`));
    } else evidence.append(node('p', '', 'No reference example was returned for this issue.'));
    evidence.append(node('p', '', `Margin over the next label: ${formatScore(item.margin)}. A smaller margin means competing labels were closer.`));
    if (isDuplicate(item)) evidence.append(node('p', '', `Possible duplicate of #${item.duplicateOf} · similarity ${formatScore(item.duplicateSimilarity)}. Review both issues before deciding; this tool will not merge or close them.`));
    if (body.length > 220) evidence.append(node('p', '', `Full issue description: ${body}`));
    evidence.append(node('p', '', 'Similarity is a comparison score, not a probability. This is a suggestion for a person to review.'));
    details.append(evidence);
    card.append(top, proposal, details);
    return card;
  }

  function render() {
    const run = state.run;
    const items = run?.items || [];
    const summary = run?.summary || {};
    $('metric-total').textContent = count(summary.total);
    $('metric-ready').textContent = count(summary.ready);
    $('metric-review').textContent = count(summary.review);
    $('count-all').textContent = String(items.length);
    $('count-review').textContent = String(items.filter((item) => item.needsReview).length);
    $('count-duplicates').textContent = String(items.filter(isDuplicate).length);
    $('queue-subtitle').textContent = run ? 'Compare the evidence. Choose what to apply.' : 'Your judgment belongs in the loop.';
    document.querySelectorAll('.filter').forEach((button) => {
      const active = button.dataset.filter === state.filter;
      button.classList.toggle('active', active);
      button.setAttribute('aria-pressed', String(active));
    });
    const list = $('issue-list');
    list.replaceChildren();
    $('empty-state').hidden = Boolean(run);
    const filtered = items.filter((item) => state.filter === 'all' || (state.filter === 'review' && item.needsReview) || (state.filter === 'duplicates' && isDuplicate(item)));
    if (run && !filtered.length) list.append(node('div', 'filter-empty', state.filter === 'duplicates' ? 'No duplicate candidates in this run.' : 'No issues need a closer look in this run.'));
    filtered.forEach((item, index) => list.append(renderIssue(item, index)));
    $('run-details').hidden = !run;
    if (run) {
      const modelName = run.model?.name || 'Model name not supplied';
      const duration = Number.isFinite(run.timings?.totalMs) ? ` · ${(run.timings.totalMs / 1000).toFixed(2)} s total` : '';
      const mode = run.model?.offline === true ? ' · offline inference' : '';
      $('model-details').textContent = `${modelName}${mode}${duration}`;
      $('workflow-details').replaceChildren();
      if (Array.isArray(run.workflowSteps)) run.workflowSteps.forEach((step) => $('workflow-details').append(node('li', '', step)));
    }
    updateControls();
  }

  async function applySelected() {
    if (state.busy || state.inputDirty || !state.run || !state.selected.size) return;
    const decisions = state.run.items.filter((item) => state.selected.has(String(item.id))).map((item) => ({ id: item.id, label: state.decisions.get(String(item.id)) }));
    setBusy(true);
    notify('Applying your checked labels to the local copy…', 'busy');
    try {
      const result = await api('/api/apply', { runId: state.run.runId, decisions });
      if (!result.revisionId || !Array.isArray(result.issues)) throw new Error('The server did not return a reversible revision. The apply status is uncertain; inspect the server before retrying.');
      const previousApplied = new Map(state.applied);
      state.currentIssues = validateIssues(result.issues);
      decisions.forEach((decision) => state.applied.set(String(decision.id), decision.label));
      state.revisions.push({ id: result.revisionId, count: result.appliedCount, previousApplied });
      state.selected.clear();
      writeInput(state.currentIssues);
      render();
      notify(`Applied ${count(result.appliedCount)} ${result.appliedCount === 1 ? 'annotation' : 'annotations'} to the local copy. You can export the JSON or undo this revision.`, 'success');
    } catch (error) { notify(error.message, 'error'); }
    finally { setBusy(false); }
  }

  async function undoLast() {
    if (state.busy || state.inputDirty || !state.revisions.length) return;
    const revision = state.revisions[state.revisions.length - 1];
    setBusy(true);
    notify('Restoring the previous local version…', 'busy');
    try {
      const result = await api('/api/undo', { revisionId: revision.id });
      state.currentIssues = validateIssues(result.issues);
      state.revisions.pop();
      state.applied = revision.previousApplied;
      state.selected.clear();
      writeInput(state.currentIssues);
      render();
      notify(`Undid the last apply. ${count(result.restoredCount)} ${result.restoredCount === 1 ? 'issue restored' : 'issues restored'} in your local copy.`, 'success');
    } catch (error) { notify(error.message, 'error'); }
    finally { setBusy(false); }
  }

  function downloadFile(content, type, filename) {
    const blob = new Blob([content], { type });
    const url = URL.createObjectURL(blob);
    const link = node('a', '');
    link.href = url;
    link.download = filename;
    document.body.append(link);
    link.click();
    link.remove();
    setTimeout(() => URL.revokeObjectURL(url), 1500);
  }

  function exportCSV() {
    if (state.busy || !state.currentIssues.length) return;
    const cell = (value) => {
      let text = String(value ?? '');
      if (/^[=+\-@\t\r]/.test(text) || /^\s*[=+\-@]/.test(text)) text = "'" + text;
      return '"' + text.replace(/"/g, '""') + '"';
    };
    const rows = [['id', 'title', 'body', 'labels'], ...state.currentIssues.map((issue) => [issue.id, issue.title, issue.body, JSON.stringify(issue.labels)])];
    downloadFile(rows.map((row) => row.map(cell).join(',')).join('\r\n') + '\r\n', 'text/csv;charset=utf-8', 'slow-triage-issues.csv');
    notify('Exported the current local version as CSV. Formula-like cells are prefixed for spreadsheet safety.' + (state.inputDirty ? ' Unrun editor changes are not included.' : ''), 'success');
  }

  function exportCurrent() {
    if (state.busy || !state.currentIssues.length) return;
    downloadFile(JSON.stringify({ issues: state.currentIssues }, null, 2) + '\n', 'application/json', 'slow-triage-issues.json');
    notify(state.inputDirty ? 'Exported the current local version. Unrun edits in the input editor are not included.' : 'Exported the current local version as slow-triage-issues.json.', 'success');
  }

  async function loadEvaluation() {
    try {
      const data = await api('/api/evaluation');
      if (data.available === false) {
        $('benchmark-status').textContent = 'No saved evaluation is available yet. Run the local benchmark to measure this build.';
        return;
      }
      $('benchmark-status').textContent = 'Developer synthetic evaluation. Compare label-or-abstain results with the keyword baseline; inspect the full test conditions below.';
      $('benchmark-details').textContent = JSON.stringify(data, null, 2);
      $('benchmark-toggle').hidden = false;
      $('benchmark-toggle').setAttribute('aria-expanded', 'false');
      $('benchmark-toggle').setAttribute('aria-controls', 'benchmark-details');
      // Display only recognized, explicitly returned metrics; never estimate missing results.
      const candidates = [
        ['Label / abstain accuracy', data.classification?.accuracy ?? data.accuracy, true],
        ['Keyword baseline accuracy', data.classification?.baselineAccuracy, true],
        ['Coverage (not abstained)', data.classification?.coverage, true],
        ['Accuracy on covered cases', data.classification?.selectiveAccuracy, true],
        ['Duplicate precision', data.duplicates?.precision, true],
        ['Duplicate recall', data.duplicates?.recall, true],
      ];
      for (const [label, value, percentage] of candidates) {
        if (!Number.isFinite(value)) continue;
        const metric = node('div', 'benchmark-metric');
        const text = percentage && value >= 0 && value <= 1 ? `${(value * 100).toFixed(1)}%` : Number.isInteger(value) ? String(value) : value.toFixed(3);
        metric.append(node('strong', '', text), node('span', '', label));
        $('benchmark-data').append(metric);
      }
      $('benchmark-data').hidden = !$('benchmark-data').childElementCount;
    } catch (_) { $('benchmark-status').textContent = 'Could not load the saved evaluation. Triage remains available if the local model is ready.'; }
  }

  $('sample-button').addEventListener('click', loadSample);
  $('empty-sample').addEventListener('click', loadSample);
  $('run-button').addEventListener('click', runTriage);
  $('apply-button').addEventListener('click', applySelected);
  $('undo-button').addEventListener('click', undoLast);
  $('export-button').addEventListener('click', exportCurrent);
  $('csv-button').addEventListener('click', exportCSV);
  $('file-button').addEventListener('click', () => $('file-input').click());
  $('file-input').addEventListener('change', async (event) => {
    const file = event.target.files?.[0];
    if (!file || state.busy) return;
    try {
      if (file.size > 2 * 1024 * 1024) throw new Error('Use a JSON file smaller than 2 MB for this small-queue prototype.');
      let data;
      try { data = JSON.parse(await file.text()); }
      catch (_) { throw new Error('That file could not be read as JSON. Check its contents and try again.'); }
      resetWithIssues(validateIssues(data));
      notify(`Opened ${file.name} locally with ${state.currentIssues.length} issues. Run triage to review the suggestions.`, 'success');
    } catch (error) { notify(error.message, 'error'); }
    finally { event.target.value = ''; }
  });
  $('json-input').addEventListener('input', () => {
    state.inputDirty = true;
    $('input-count').textContent = 'EDITED';
    state.selected.clear();
    if (state.run) {
      document.querySelectorAll('.issue-checkbox, .label-select').forEach((element) => { element.disabled = true; });
      document.querySelectorAll('.issue-checkbox').forEach((element) => { element.checked = false; });
      document.querySelectorAll('.issue-card').forEach((element) => element.classList.remove('selected'));
      $('queue-subtitle').textContent = 'Input changed. Run triage again before applying.';
    }
    updateControls();
  });
  document.querySelectorAll('.filter').forEach((button) => button.addEventListener('click', () => {
    state.filter = button.dataset.filter;
    render();
  }));
  $('benchmark-toggle').addEventListener('click', () => {
    const show = $('benchmark-details').hidden;
    $('benchmark-details').hidden = !show;
    $('benchmark-toggle').textContent = show ? 'Hide evaluation details ↗' : 'View evaluation details ↗';
    $('benchmark-toggle').setAttribute('aria-expanded', String(show));
  });
  render();
  loadEvaluation();
})();