(* HTML Test Report Generator - Standalone HTML reports for test results *)

type test_result = {
  test_num : int;
  description : string;
  input : string;
  expected : string;
  actual : string;
  success : bool;
  details : (string * string) list;  (* Additional key-value pairs *)
  raw_test_data : string option;  (* Original test file content for context *)
}

type file_result = {
  filename : string;
  test_type : string;
  passed_count : int;
  failed_count : int;
  tests : test_result list;
}

type match_quality_stats = {
  exact_matches : int;
  code_matches : int;
  message_matches : int;
  substring_matches : int;
  severity_mismatches : int;
  no_matches : int;
  not_applicable : int;
}

type test_type_stats = {
  isvalid_passed : int;
  isvalid_total : int;
  novalid_passed : int;
  novalid_total : int;
  haswarn_passed : int;
  haswarn_total : int;
}

type report = {
  title : string;
  test_type : string;
  description : string;
  files : file_result list;
  total_passed : int;
  total_failed : int;
  match_quality : match_quality_stats option;
  test_type_breakdown : test_type_stats option;
  strictness_mode : string option;
  run_timestamp : string option;
}

let html_escape s =
  let buf = Buffer.create (String.length s * 2) in
  String.iter (fun c ->
    match c with
    | '&' -> Buffer.add_string buf "&"
    | '<' -> Buffer.add_string buf "&lt;"
    | '>' -> Buffer.add_string buf "&gt;"
    | '"' -> Buffer.add_string buf "&quot;"
    | '\'' -> Buffer.add_string buf "&#x27;"
    | c -> Buffer.add_char buf c
  ) s;
  Buffer.contents buf

let truncate_string ?(max_len=10000) s =
  if String.length s <= max_len then s
  else String.sub s 0 max_len ^ "\n... (truncated at " ^ string_of_int max_len ^ " chars)"

let css = {|
:root {
  --bg-primary: #1a1a2e;
  --bg-secondary: #16213e;
  --bg-tertiary: #0f3460;
  --text-primary: #eee;
  --text-secondary: #aaa;
  --text-muted: #666;
  --accent: #e94560;
  --accent-light: #ff6b8a;
  --success: #4ade80;
  --success-dim: rgba(74, 222, 128, 0.2);
  --failure: #f87171;
  --failure-dim: rgba(248, 113, 113, 0.2);
  --warning: #fbbf24;
  --info: #60a5fa;
  --border: #333;
  --code-bg: #0d1117;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
}

.container { max-width: 1600px; margin: 0 auto; padding: 20px; }

/* Hero Header */
.hero {
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
  padding: 40px;
  border-radius: 12px;
  margin-bottom: 30px;
  border: 1px solid var(--border);
}

.hero h1 {
  font-size: 2rem;
  margin-bottom: 15px;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 15px;
}

.hero h1::before {
  content: "🧪";
  font-size: 1.5rem;
}

.hero-description {
  color: var(--text-secondary);
  max-width: 900px;
  margin-bottom: 20px;
  font-size: 1.05rem;
}

.hero-meta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.hero-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Summary Cards */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.summary-card {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 24px;
  border: 1px solid var(--border);
  text-align: center;
}

.summary-card.large {
  grid-column: span 2;
}

.summary-card h3 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.summary-card .value {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.summary-card .value.success { color: var(--success); }
.summary-card .value.failure { color: var(--failure); }
.summary-card .value.neutral { color: var(--text-primary); }

.summary-card .subtext {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 5px;
}

/* Progress Bar */
.progress-bar {
  height: 12px;
  background: var(--failure-dim);
  border-radius: 6px;
  overflow: hidden;
  margin-top: 15px;
}

.progress-fill {
  height: 100%;
  background: var(--success);
  border-radius: 6px;
  transition: width 0.5s ease;
}

/* Stats Breakdown */
.stats-section {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 30px;
  border: 1px solid var(--border);
}

.stats-section h2 {
  font-size: 1.2rem;
  margin-bottom: 20px;
  color: var(--accent-light);
  display: flex;
  align-items: center;
  gap: 10px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 15px;
}

.stat-item {
  background: var(--bg-primary);
  padding: 16px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-item .label {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.stat-item .count {
  font-size: 1.4rem;
  font-weight: 600;
}

.stat-item.success .count { color: var(--success); }
.stat-item.failure .count { color: var(--failure); }
.stat-item.warning .count { color: var(--warning); }
.stat-item.info .count { color: var(--info); }

/* Controls */
.controls {
  display: flex;
  gap: 12px;
  margin-bottom: 25px;
  flex-wrap: wrap;
  align-items: center;
}

input[type="search"], select {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 14px;
}

input[type="search"] { width: 300px; }
input[type="search"]:focus, select:focus {
  outline: none;
  border-color: var(--accent);
}

button {
  padding: 10px 18px;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: white;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
}

button:hover { background: var(--accent-light); }
button.secondary {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
}
button.secondary:hover { background: var(--bg-secondary); }

/* Sidebar */
.layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 30px;
}

.sidebar {
  position: sticky;
  top: 20px;
  height: fit-content;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid var(--border);
}

.sidebar h3 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 12px;
  padding: 0 8px;
}

.sidebar-item {
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  font-size: 14px;
  transition: all 0.2s;
}

.sidebar-item:hover { background: var(--bg-tertiary); }
.sidebar-item.active { background: var(--accent); }

.sidebar-item .name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.sidebar-item .badge {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 12px;
  background: var(--bg-primary);
  font-weight: 600;
}

.sidebar-item .badge.all-passed { color: var(--success); }
.sidebar-item .badge.has-failed { color: var(--failure); }

/* File Sections */
.file-section {
  margin-bottom: 24px;
  background: var(--bg-secondary);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.file-header {
  padding: 18px 24px;
  background: var(--bg-tertiary);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.2s;
}

.file-header:hover { background: #1a4a7a; }

.file-header h2 {
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 12px;
}

.file-header .toggle {
  font-size: 1rem;
  transition: transform 0.3s;
  color: var(--text-secondary);
}

.file-header.collapsed .toggle { transform: rotate(-90deg); }

.file-stats {
  display: flex;
  gap: 20px;
  font-size: 14px;
}

.file-stats .passed { color: var(--success); font-weight: 500; }
.file-stats .failed { color: var(--failure); font-weight: 500; }

.tests-container { padding: 12px; }
.tests-container.hidden { display: none; }

/* Test Items */
.test-item {
  margin: 8px 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.test-item:hover { border-color: var(--text-muted); }

.test-header {
  padding: 12px 16px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-primary);
  transition: background 0.2s;
}

.test-header:hover { background: rgba(255,255,255,0.03); }

.test-header .status {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 12px;
  flex-shrink: 0;
}

.test-header .status.passed { background: var(--success); }
.test-header .status.failed { background: var(--failure); }

.test-header .test-info {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}

.test-header .test-num {
  font-weight: 600;
  margin-right: 12px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.test-header .test-desc {
  font-size: 14px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.test-header .expand-icon {
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* Test Details */
.test-details {
  padding: 20px;
  background: var(--code-bg);
  border-top: 1px solid var(--border);
  display: none;
}

.test-details.visible { display: block; }

.detail-section {
  margin-bottom: 20px;
}

.detail-section:last-child { margin-bottom: 0; }

.detail-section h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-section pre {
  background: var(--bg-secondary);
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
  font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
  font-size: 13px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 400px;
  overflow-y: auto;
  line-height: 1.5;
  border: 1px solid var(--border);
}

.detail-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.comparison-label {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  margin-left: 8px;
}

.comparison-label.match { background: var(--success-dim); color: var(--success); }
.comparison-label.mismatch { background: var(--failure-dim); color: var(--failure); }

/* Explanation Section */
.explanation {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 30px;
  border: 1px solid var(--border);
}

.explanation h2 {
  font-size: 1.2rem;
  margin-bottom: 16px;
  color: var(--accent-light);
}

.explanation p {
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.explanation ul {
  list-style: none;
  padding-left: 0;
}

.explanation li {
  padding: 8px 0;
  padding-left: 24px;
  position: relative;
  color: var(--text-secondary);
}

.explanation li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent);
}

.explanation code {
  background: var(--bg-primary);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.9em;
  color: var(--accent-light);
}

@media (max-width: 1000px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .detail-row { grid-template-columns: 1fr; }
  .summary-card.large { grid-column: span 1; }
}
|}

let js = {|
document.addEventListener('DOMContentLoaded', function() {
  // File section toggling
  document.querySelectorAll('.file-header').forEach(header => {
    header.addEventListener('click', function() {
      this.classList.toggle('collapsed');
      const container = this.nextElementSibling;
      container.classList.toggle('hidden');
    });
  });

  // Test details toggling
  document.querySelectorAll('.test-header').forEach(header => {
    header.addEventListener('click', function(e) {
      e.stopPropagation();
      const details = this.nextElementSibling;
      details.classList.toggle('visible');
      const icon = this.querySelector('.expand-icon');
      if (icon) icon.textContent = details.classList.contains('visible') ? '▲' : '▼';
    });
  });

  // Sidebar navigation
  document.querySelectorAll('.sidebar-item').forEach(item => {
    item.addEventListener('click', function() {
      const fileId = this.dataset.file;
      const section = document.getElementById(fileId);
      if (section) {
        section.scrollIntoView({ behavior: 'smooth', block: 'start' });
        const header = section.querySelector('.file-header');
        if (header && header.classList.contains('collapsed')) {
          header.click();
        }
      }
      document.querySelectorAll('.sidebar-item').forEach(i => i.classList.remove('active'));
      this.classList.add('active');
    });
  });

  // Search functionality
  const searchInput = document.getElementById('search');
  if (searchInput) {
    searchInput.addEventListener('input', function() {
      const query = this.value.toLowerCase();
      document.querySelectorAll('.test-item').forEach(item => {
        const text = item.textContent.toLowerCase();
        item.style.display = text.includes(query) ? '' : 'none';
      });
      // Update counts
      document.querySelectorAll('.file-section').forEach(section => {
        const visible = section.querySelectorAll('.test-item:not([style*="display: none"])').length;
        const total = section.querySelectorAll('.test-item').length;
        if (visible === 0 && query) {
          section.style.display = 'none';
        } else {
          section.style.display = '';
        }
      });
    });
  }

  // Filter functionality
  const filterSelect = document.getElementById('filter');
  if (filterSelect) {
    filterSelect.addEventListener('change', function() {
      const filter = this.value;
      document.querySelectorAll('.test-item').forEach(item => {
        const passed = item.querySelector('.status.passed') !== null;
        if (filter === 'all') {
          item.style.display = '';
        } else if (filter === 'passed') {
          item.style.display = passed ? '' : 'none';
        } else if (filter === 'failed') {
          item.style.display = passed ? 'none' : '';
        }
      });
    });
  }

  // Expand/Collapse all
  document.getElementById('expand-all')?.addEventListener('click', function() {
    document.querySelectorAll('.file-header.collapsed').forEach(h => h.click());
  });

  document.getElementById('collapse-all')?.addEventListener('click', function() {
    document.querySelectorAll('.file-header:not(.collapsed)').forEach(h => h.click());
  });

  // Show only failed
  document.getElementById('show-failed')?.addEventListener('click', function() {
    document.getElementById('filter').value = 'failed';
    document.getElementById('filter').dispatchEvent(new Event('change'));
  });
});
|}

let generate_test_html test =
  let status_class = if test.success then "passed" else "failed" in
  let desc_escaped = html_escape test.description in
  let input_escaped = html_escape (truncate_string test.input) in
  let expected_escaped = html_escape (truncate_string test.expected) in
  let actual_escaped = html_escape (truncate_string test.actual) in

  let details_html = String.concat "" (List.map (fun (key, value) ->
    Printf.sprintf {|
      <div class="detail-section">
        <h4>%s</h4>
        <pre>%s</pre>
      </div>
    |} (html_escape key) (html_escape value)
  ) test.details) in

  let raw_data_html = match test.raw_test_data with
    | Some data ->
      Printf.sprintf {|
        <div class="detail-section">
          <h4>📄 Source HTML</h4>
          <pre>%s</pre>
        </div>
      |} (html_escape (truncate_string data))
    | None -> ""
  in

  let comparison_label = if test.success then
    {|<span class="comparison-label match">MATCH</span>|}
  else
    {|<span class="comparison-label mismatch">MISMATCH</span>|}
  in

  Printf.sprintf {|
    <div class="test-item" data-passed="%b">
      <div class="test-header">
        <div class="test-info">
          <span class="status %s"></span>
          <span class="test-num">#%d</span>
          <span class="test-desc">%s</span>
        </div>
        <span class="expand-icon">▼</span>
      </div>
      <div class="test-details">
        %s
        <div class="detail-section">
          <h4>📥 Input File</h4>
          <pre>%s</pre>
        </div>
        <div class="detail-row">
          <div class="detail-section">
            <h4>✓ Expected Output</h4>
            <pre>%s</pre>
          </div>
          <div class="detail-section">
            <h4>⚡ Actual Output %s</h4>
            <pre>%s</pre>
          </div>
        </div>
        %s
      </div>
    </div>
  |} test.success status_class test.test_num desc_escaped
     raw_data_html input_escaped expected_escaped comparison_label actual_escaped details_html

let generate_file_html file =
  let file_id = String.map (fun c -> if c = '/' || c = '.' then '-' else c) file.filename in
  let tests_html = String.concat "\n" (List.map generate_test_html file.tests) in
  let collapsed = if file.failed_count = 0 then "collapsed" else "" in
  let hidden = if file.failed_count = 0 then "hidden" else "" in
  let escaped_full = html_escape file.filename in

  Printf.sprintf {|
    <div class="file-section" id="file-%s">
      <div class="file-header %s">
        <h2 title="%s">
          <span class="toggle">▼</span>
          📁 %s
        </h2>
        <div class="file-stats">
          <span class="passed">✓ %d passed</span>
          <span class="failed">✗ %d failed</span>
        </div>
      </div>
      <div class="tests-container %s">
        %s
      </div>
    </div>
  |} file_id collapsed escaped_full file.filename file.passed_count file.failed_count hidden tests_html

let shorten_filename name =
  (* Shorten common prefixes for display, keep full name for tooltip *)
  let short =
    if String.length name > 10 && String.sub name 0 10 = "HTML5lib /" then
      "H5:" ^ String.sub name 10 (String.length name - 10)
    else if String.length name > 12 && String.sub name 0 12 = "Validator / " then
      "VA:" ^ String.sub name 12 (String.length name - 12)
    else name
  in
  String.trim short

let generate_sidebar_html files =
  String.concat "\n" (List.map (fun file ->
    let file_id = String.map (fun c -> if c = '/' || c = '.' then '-' else c) file.filename in
    let badge_class = if file.failed_count = 0 then "all-passed" else "has-failed" in
    let short_name = shorten_filename file.filename in
    let escaped_full = html_escape file.filename in
    Printf.sprintf {|
      <div class="sidebar-item" data-file="file-%s" title="%s">
        <span class="name">%s</span>
        <span class="badge %s">%d/%d</span>
      </div>
    |} file_id escaped_full short_name badge_class file.passed_count (file.passed_count + file.failed_count)
  ) files)

let generate_match_quality_html stats =
  Printf.sprintf {|
    <div class="stats-section">
      <h2>📊 Match Quality Breakdown</h2>
      <div class="stats-grid">
        <div class="stat-item success">
          <span class="label">Exact Matches</span>
          <span class="count">%d</span>
        </div>
        <div class="stat-item success">
          <span class="label">Code Matches</span>
          <span class="count">%d</span>
        </div>
        <div class="stat-item info">
          <span class="label">Message Matches</span>
          <span class="count">%d</span>
        </div>
        <div class="stat-item warning">
          <span class="label">Substring Matches</span>
          <span class="count">%d</span>
        </div>
        <div class="stat-item warning">
          <span class="label">Severity Mismatches</span>
          <span class="count">%d</span>
        </div>
        <div class="stat-item failure">
          <span class="label">No Matches</span>
          <span class="count">%d</span>
        </div>
        <div class="stat-item">
          <span class="label">N/A (isvalid tests)</span>
          <span class="count">%d</span>
        </div>
      </div>
    </div>
  |} stats.exact_matches stats.code_matches stats.message_matches
     stats.substring_matches stats.severity_mismatches stats.no_matches stats.not_applicable

let generate_test_type_html stats =
  let pct a b = if b = 0 then 0.0 else 100.0 *. float_of_int a /. float_of_int b in
  Printf.sprintf {|
    <div class="stats-section">
      <h2>📋 Results by Test Type</h2>
      <div class="stats-grid">
        <div class="stat-item %s">
          <span class="label">isvalid (no errors expected)</span>
          <span class="count">%d/%d (%.1f%%)</span>
        </div>
        <div class="stat-item %s">
          <span class="label">novalid (errors expected)</span>
          <span class="count">%d/%d (%.1f%%)</span>
        </div>
        <div class="stat-item %s">
          <span class="label">haswarn (warnings expected)</span>
          <span class="count">%d/%d (%.1f%%)</span>
        </div>
      </div>
    </div>
  |}
    (if stats.isvalid_passed = stats.isvalid_total then "success" else "failure")
    stats.isvalid_passed stats.isvalid_total (pct stats.isvalid_passed stats.isvalid_total)
    (if stats.novalid_passed = stats.novalid_total then "success" else "failure")
    stats.novalid_passed stats.novalid_total (pct stats.novalid_passed stats.novalid_total)
    (if stats.haswarn_passed = stats.haswarn_total then "success" else "failure")
    stats.haswarn_passed stats.haswarn_total (pct stats.haswarn_passed stats.haswarn_total)

let generate_report report output_path =
  let files_html = String.concat "\n" (List.map generate_file_html report.files) in
  let sidebar_html = generate_sidebar_html report.files in
  let total = report.total_passed + report.total_failed in
  let pass_rate = if total = 0 then 0.0 else 100.0 *. float_of_int report.total_passed /. float_of_int total in

  let match_quality_html = match report.match_quality with
    | Some stats -> generate_match_quality_html stats
    | None -> ""
  in

  let test_type_html = match report.test_type_breakdown with
    | Some stats -> generate_test_type_html stats
    | None -> ""
  in

  let mode_text = match report.strictness_mode with
    | Some m -> Printf.sprintf " (Mode: %s)" m
    | None -> ""
  in

  let timestamp_text = match report.run_timestamp with
    | Some t -> Printf.sprintf "<span>🕐 %s</span>" (html_escape t)
    | None -> ""
  in

  let html = Printf.sprintf {|<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>%s - Test Report</title>
  <style>%s</style>
</head>
<body>
  <div class="container">
    <div class="hero">
      <h1>%s</h1>
      <p class="hero-description">%s</p>
      <div class="hero-meta">
        <span>📊 %d total tests</span>
        <span>✓ %d passed</span>
        <span>✗ %d failed</span>
        %s
      </div>
    </div>

    <div class="summary-grid">
      <div class="summary-card large">
        <h3>Overall Pass Rate%s</h3>
        <div class="value %s">%.1f%%</div>
        <div class="progress-bar">
          <div class="progress-fill" style="width: %.1f%%"></div>
        </div>
      </div>
      <div class="summary-card">
        <h3>Tests Passed</h3>
        <div class="value success">%d</div>
        <div class="subtext">out of %d tests</div>
      </div>
      <div class="summary-card">
        <h3>Tests Failed</h3>
        <div class="value %s">%d</div>
        <div class="subtext">%s</div>
      </div>
      <div class="summary-card">
        <h3>Categories</h3>
        <div class="value neutral">%d</div>
        <div class="subtext">test categories</div>
      </div>
    </div>

    %s
    %s

    <div class="explanation">
      <h2>📖 About This Test Run</h2>
      <p>This report shows the results of running the <strong>%s</strong> test suite against the HTML5 validator implementation.</p>
      <p>Tests are organized by category and classified by their expected outcome:</p>
      <ul>
        <li><code>-isvalid.html</code> — Valid HTML that should produce <strong>no errors or warnings</strong></li>
        <li><code>-novalid.html</code> — Invalid HTML that should produce <strong>at least one error</strong></li>
        <li><code>-haswarn.html</code> — HTML that should produce <strong>at least one warning</strong></li>
      </ul>
      <p>Click on any test to expand its details and see the input HTML, expected output, and actual validator messages.</p>
    </div>

    <div class="controls">
      <input type="search" id="search" placeholder="🔍 Search tests by name or content...">
      <select id="filter">
        <option value="all">All tests</option>
        <option value="passed">Passed only</option>
        <option value="failed">Failed only</option>
      </select>
      <button id="show-failed" class="secondary">Show Failed Only</button>
      <button id="expand-all" class="secondary">Expand All</button>
      <button id="collapse-all" class="secondary">Collapse All</button>
    </div>

    <div class="layout">
      <div class="sidebar">
        <h3>Categories</h3>
        %s
      </div>
      <div class="main-content">
        %s
      </div>
    </div>
  </div>

  <script>%s</script>
</body>
</html>
|} report.title css
   report.title report.description  (* description may contain HTML *)
   total report.total_passed report.total_failed timestamp_text
   mode_text
   (if pass_rate >= 99.0 then "success" else if pass_rate >= 90.0 then "neutral" else "failure")
   pass_rate pass_rate
   report.total_passed total
   (if report.total_failed = 0 then "success" else "failure")
   report.total_failed
   (if report.total_failed = 0 then "Perfect score!" else "needs attention")
   (List.length report.files)
   test_type_html match_quality_html
   report.title
   sidebar_html files_html js
  in

  let oc = open_out output_path in
  output_string oc html;
  close_out oc;
  Printf.printf "HTML report written to: %s\n" output_path