/**
 * Pulpie WebUI - UI Renderer
 *
 * Renders extraction results, stats, Markdown, Reader preview, and block inspection elements.
 */

import { marked } from 'marked';
import DOMPurify from 'dompurify';

/**
 * Display extraction results and statistics in the UI.
 *
 * @param {Object} data - Extraction results payload
 * @param {Object} elements - References to DOM elements
 */
export function displayResults(data, elements) {
  elements.resultsCard.style.display = 'block';

  elements.pageTitleDisplay.textContent = data.title;
  elements.sourceUrlDisplay.textContent = data.sourceUrl ? `Source: ${data.sourceUrl}` : '';

  // Calculate statistics
  const totalBlocks = data.blocks.length;
  const keptCount = data.rawPredictions.filter((p) => p === 1).length;
  const retentionPct = totalBlocks > 0 ? ((keptCount / totalBlocks) * 100).toFixed(1) : 0;

  elements.statKeptBlocks.textContent = `${keptCount} / ${totalBlocks}`;
  elements.statRetention.textContent = `${retentionPct}%`;
  elements.statTokens.textContent = data.totalTokens.toLocaleString();
  if (elements.statTimeLabel) {
    elements.statTimeLabel.textContent = data.provider === 'wasm' ? 'WASM Time' : 'WebGPU Time';
  }
  elements.statGpuTime.textContent = `${data.inferenceTimeMs} ms`;

  // Reader View (Sanitized HTML)
  const renderedHtml = DOMPurify.sanitize(marked.parse(data.markdown));
  elements.readerContent.innerHTML = renderedHtml;

  // Raw Markdown & Clean HTML
  elements.markdownContent.textContent = data.markdown;
  elements.htmlContent.textContent = data.cleanHtml;

  // Render individual inspected blocks
  renderBlockInspector(data.blocks, data.itemIds, data.labels, elements.blockInspectorList);

  // Smooth scroll
  elements.resultsCard.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

/**
 * Populate individual block inspection cards in the Block Inspector tab.
 *
 * @param {string[]} blocks - Raw block HTML snippets
 * @param {string[]} itemIds - Array of _item_id strings
 * @param {Record<string, 'main' | 'other'>} labels - Mapping of item_id -> predicted label
 * @param {HTMLElement} container - DOM container for block items
 */
export function renderBlockInspector(blocks, itemIds, labels, container) {
  container.innerHTML = '';
  for (let i = 0; i < blocks.length; i++) {
    const id = itemIds[i];
    const isMain = labels[id] === 'main';

    const itemEl = document.createElement('div');
    itemEl.className = `inspector-item ${isMain ? 'is-main' : 'is-other'}`;

    const header = document.createElement('div');
    header.className = 'inspector-header';
    header.innerHTML = `
      <span>Block #${id}</span>
      <span class="inspector-badge ${isMain ? 'badge-main' : 'badge-other'}">
        ${isMain ? 'MAIN CONTENT' : 'BOILERPLATE'}
      </span>
    `;

    const code = document.createElement('div');
    code.className = 'inspector-code';
    code.textContent = blocks[i].slice(0, 300) + (blocks[i].length > 300 ? '...' : '');

    itemEl.appendChild(header);
    itemEl.appendChild(code);
    container.appendChild(itemEl);
  }
}