@extends('layouts.app')
@section('title', 'BA/PO Issues · QA Dashboard')

@php
    $statusLabels = [
        'done' => 'Done', 'in_progress' => 'In progress', 'blocked' => 'Blocked',
        'overdue' => 'Overdue', 'not_started' => 'Not started', 'unknown' => 'Unknown',
    ];
@endphp

@section('content')
<style>
  /* Bugs grouped by target story: one <tbody> per story, visible aligned columns. */
  /* Fixed layout so columns keep to their widths and the Bug column takes the rest,
     wrapping the title instead of overflowing the page. */
  #baTable { table-layout: fixed; width: 100%; }
  #baTable th { white-space: nowrap; }
  #baTable td { overflow-wrap: anywhere; }
  #baTable td:nth-child(1) { width: auto; }                                   /* Bug (wraps) */
  #baTable td:nth-child(2), #baTable th:nth-child(2) { width: 8rem; }          /* Reporter */
  #baTable td:nth-child(3), #baTable th:nth-child(3) { width: 5.5rem; }        /* Status */
  #baTable td:nth-child(4), #baTable th:nth-child(4) { width: 10rem; }         /* Category */
  #baTable td:nth-child(5), #baTable th:nth-child(5) { width: 8rem; }          /* QA tester */
  /* Override the global "last column nowrap / width:1%" so Remarks keeps its width. */
  #baTable td:nth-child(6), #baTable th:nth-child(6),
  #baTable td:last-child, #baTable th:last-child { width: 13rem; white-space: normal; }
  .ba-remark { width: 100%; padding: .3rem .4rem; font-size: .8rem; font-family: inherit; }
  .ba-reo-pick { padding: .25rem .6rem; font-size: .78rem; }
  /* Colour-coded category select: white text on the category colour (set in JS);
     keep the popped-open option list on the normal surface for readability. */
  .ba-cat { font-family: inherit; font-weight: 600; border: 1px solid var(--line); }
  .ba-cat option { color: var(--ink); background: var(--card); font-weight: 500; }
  #baTable tbody[hidden] { display: none; }
  /* Emphasised target-story header row so it clearly separates the groups. */
  .ba-group-row td { background: var(--primary-soft); border-left: 4px solid var(--primary);
    border-top: 2px solid var(--primary); padding: .5rem .8rem; }
  .ba-group-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
  .ba-group-title { font-weight: 700; font-size: .98rem; }
  .ba-group-title a { color: var(--primary); }
  .ba-group-sub { color: var(--ink); opacity: .6; font-size: .8rem; }
  .ba-group-head .chip { margin-left: auto; }
  .ba-cat { width: 100%; padding: .3rem .4rem; font-size: .82rem; }
  .ba-cat-saved { border-color: #16a34a; box-shadow: 0 0 0 2px rgba(22,163,74,.25); }
  .ba-qa { display: inline-block; background: var(--primary-soft); color: var(--primary);
    border-radius: 6px; padding: .1rem .45rem; font-size: .78rem; font-weight: 600; margin: 0 .2rem .2rem 0; }
  .ba-filter { min-width: 8rem; }
  .ba-cat-chart-wrap { height: 340px; }
  /* QA-effectiveness KPI tiles + report layout. */
  .ba-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem; margin: .25rem 0 1rem; }
  .ba-kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
    padding: .9rem 1.1rem; box-shadow: var(--shadow-sm); }
  .ba-kpi .n { font-size: 1.9rem; font-weight: 700; line-height: 1.05; }
  .ba-kpi .l { font-size: .72rem; color: var(--muted); text-transform: uppercase;
    letter-spacing: .03em; margin-top: .25rem; }
  .ba-kpi.escaped .n { color: #dc2626; }
  .ba-kpi.caught .n { color: #16a34a; }
  .ba-report-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1rem; }
  @media (max-width: 820px) { .ba-report-grid { grid-template-columns: 1fr; } }
  .ba-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; pointer-events: none; text-align: center; }
  .ba-donut-center strong { font-size: 1.8rem; font-weight: 700; color: #dc2626; line-height: 1; }
  .ba-donut-center span { font-size: .68rem; color: var(--muted); text-transform: uppercase;
    letter-spacing: .03em; margin-top: .2rem; }
</style>
<section class="summary">
  <p><a href="/">&larr; Overview</a></p>
  <div style="display:flex;align-items:center;gap:1rem;flex-wrap:wrap">
    <h2 style="margin:0">BA/PO Issues
      <small>· {{ $sel }} targets · bugs filed {{ $rangeStart->format('M j, Y') }} – {{ $rangeEnd->format('M j, Y') }}</small>
    </h2>
    <span style="margin-left:auto">@include('partials.ba-po-export', ['bxQuarter' => $sel])</span>
  </div>
  <p class="muted" style="margin:.25rem 0 0">
    Bugs filed by the BAs (Sherida Joice, Kat Diez, Angella, Bernie) and Automation for Jira
    that are linked to a {{ $sel }} quarter target story, filed while UAT ran through {{ $nextQ }}.
  </p>
  <div class="overall">
    <div class="chart-wrap"><canvas id="baChart"></canvas></div>
    <div class="big-number">
      <strong>{{ $percent }}%</strong>
      <span>resolved ({{ $done }}/{{ $total }})</span>
    </div>
    <x-status-chips :breakdown="['statuses' => $statuses]" />
  </div>
</section>

<section>
  <h2>By reporter</h2>
  <div class="type-cards">
    @foreach ($creators as $name => $count)
    <div class="type-card" style="cursor:default">
      <div class="type-card-head"><strong>{{ $name }}</strong><span class="pct">{{ $count }}</span></div>
      <div class="muted">{{ $count === 1 ? '1 bug filed' : $count . ' bugs filed' }}</div>
    </div>
    @endforeach
  </div>
</section>

<section>
  <h2 style="margin:0 0 .25rem">QA effectiveness</h2>
  <p class="muted" style="margin:0 0 .75rem">UAT bugs filed on the {{ $sel }} target stories, and how many escaped QA versus what QA caught (updates live as you categorise).</p>

  <div class="ba-kpis">
    <div class="ba-kpi">
      <div class="n">{{ $total }}</div>
      <div class="l">UAT bugs filed</div>
    </div>
    <div class="ba-kpi caught">
      <div class="n">{{ $qaCaughtCount }}</div>
      <div class="l">QA-caught (QA effort)</div>
    </div>
    <div class="ba-kpi escaped">
      <div class="n" id="kpiEscaped">0</div>
      <div class="l">Escaped to UAT</div>
    </div>
    <div class="ba-kpi">
      <div class="n" id="kpiEscRate">0%</div>
      <div class="l">Escape rate</div>
    </div>
  </div>

  <div class="ba-report-grid">
    <div class="fb-card" style="padding:1rem">
      <h3 style="margin:0 0 .5rem;font-size:.95rem">Escape rate <small class="muted">· per scorecard tier</small></h3>
      <div style="position:relative;height:240px">
        <canvas id="baEscChart"></canvas>
        <div class="ba-donut-center"><strong id="baEscCenter">0%</strong><span>escape<br>rate</span></div>
      </div>
      <p class="muted" id="baEscNote" style="margin:.5rem 0 0;text-align:center"></p>
    </div>
    <div class="fb-card" style="padding:1rem">
      <div style="display:flex;align-items:baseline;justify-content:space-between;gap:1rem">
        <h3 style="margin:0 0 .5rem;font-size:.95rem">UAT bugs by category</h3>
        <span class="muted" id="baCatNote"></span>
      </div>
      <div class="ba-cat-chart-wrap"><canvas id="baCatChart"></canvas></div>
    </div>
  </div>
</section>

<section>
  <h2>Bugs</h2>
  <div class="toolbar">
    <input type="search" id="baSearch" placeholder="Search bugs…">
    <select id="baStatus" class="ba-filter" aria-label="Status">
      <option value="all">All statuses</option>
      @foreach ($statusOptions as $o)<option value="{{ $o }}">{{ $o }}</option>@endforeach
    </select>
    <select id="baProject" class="ba-filter" aria-label="Project">
      <option value="all">All projects</option>
      @foreach ($projectOptions as $o)<option value="{{ $o }}">{{ $o }}</option>@endforeach
    </select>
    <select id="baReporter" class="ba-filter" aria-label="Reporter">
      <option value="all">All reporters</option>
      @foreach ($creatorOptions as $o)<option value="{{ $o }}">{{ $o }}</option>@endforeach
    </select>
    <button type="button" id="baHideDone" class="toggle-pill" aria-pressed="false">Hide completed</button>
    <span class="count"><span id="baCount">{{ $total }}</span> bugs</span>
  </div>

  {{-- Bugs grouped under their target story (one <tbody> per story so groups can be
       hidden when filtered), with visible aligned columns. --}}
  <table class="grid compact" id="baTable">
    <thead>
      <tr><th>Bug</th><th>Reporter</th><th>Date Created</th><th>Status</th><th>Category</th><th>QA tester</th><th>Remarks</th></tr>
    </thead>
    @forelse ($groups as $g)
      <tbody data-ba-group>
        <tr class="ba-group-row">
          <td colspan="7">
            <div class="ba-group-head">
              <span class="ba-group-title">
                @if ($jiraBase)
                  <a href="{{ $jiraBase }}/browse/{{ $g['story_key'] }}" target="_blank" rel="noopener">{{ $g['story_title'] }}</a>
                @else{{ $g['story_title'] }}@endif
              </span>
              <span class="ba-group-sub">{{ $g['story_key'] }} · {{ $g['project'] }} · {{ $g['quarter'] }}</span>
              <span class="chip" data-ba-group-count>{{ count($g['bugs']) }}</span>
            </div>
          </td>
        </tr>
        @foreach ($g['bugs'] as $r)
          @php
            $sc = \App\Services\StatusService::statusColor($r['status'], $r['canon']);
            $sLabel = $r['status'] ?: ($statusLabels[$r['canon']] ?? 'Unknown');
          @endphp
          <tr class="ba-bug" data-status="{{ $r['status'] ?: '(unknown)' }}" data-project="{{ $r['project'] }}"
              data-creator="{{ $r['creator'] }}" data-done="{{ $r['is_done'] ? '1' : '0' }}">
            <td>
              @if ($jiraBase)
                <a href="{{ $jiraBase }}/browse/{{ $r['key'] }}" target="_blank" rel="noopener" class="story-title">{{ $r['summary'] }}</a>
              @else
                <span class="story-title">{{ $r['summary'] }}</span>
              @endif
              <div class="story-key">{{ $r['key'] }}</div>
            </td>
            <td>{{ $r['creator'] }}</td>
            <td class="nowrap">{{ $r['created']?->format('M j, Y') ?? '—' }}</td>
            <td><span class="badge" style="background:{{ $sc['bg'] }};color:{{ $sc['fg'] }}">{{ $sLabel }}</span></td>
            <td>
              <select class="ba-cat" data-key="{{ $r['key'] }}"
                      data-story="{{ $g['story_key'] }}" data-story-title="{{ $g['story_title'] }}" aria-label="Category">
                <option value="">— Uncategorized —</option>
                @foreach ($bugCategories as $cat)
                  <option value="{{ $cat }}" @selected(($r['category'] ?? '') === $cat)>{{ $cat }}</option>
                @endforeach
              </select>
            </td>
            <td>
              @if (!empty($g['qa']))
                @foreach ($g['qa'] as $qa)<span class="ba-qa">{{ $qa }}</span>@endforeach
              @else
                <span class="muted">—</span>
              @endif
            </td>
            <td>
              <input type="text" class="ba-remark" data-key="{{ $r['key'] }}"
                     value="{{ $r['remarks'] ?? '' }}" placeholder="—" aria-label="Remarks">
            </td>
          </tr>
        @endforeach
      </tbody>
    @empty
      <tbody><tr><td colspan="7" class="empty">No linked bugs for this period (a quarter target dashboard may not be imported yet).</td></tr></tbody>
    @endforelse
  </table>
</section>

{{-- "Reoccurred" helper: lists every bug linked to the target story so the QA can
     see which earlier bug this one reoccurs from. --}}
<div class="wk-modal" id="baReoModal" style="display:none">
  <div class="wk-modal-card" style="width:min(780px,94vw)">
    <div class="wk-modal-head">
      <strong>Reoccurred · related bugs</strong>
      <button type="button" class="wk-modal-close" id="baReoClose">✕</button>
    </div>
    <div class="wk-modal-body" style="display:block">
      <p class="muted" id="baReoSub" style="margin:0 0 .6rem"></p>
      <div style="overflow-x:auto">
        <table class="grid compact">
          <thead><tr><th>QA bug</th><th>QA tester</th><th>Date Created</th><th>Status</th><th></th></tr></thead>
          <tbody id="baReoList"></tbody>
        </table>
      </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script>
  window.baStoryBugs = @json($storyBugs);
  window.baJiraBase = @json($jiraBase);
  window.baQaCaught = @json($qaCaughtCount);

  // Fixed colour per category — shared by the category selects and the summary chart.
  window.baCatColors = {
    'Escaped Bug': '#dc2626',        // red
    'Out of Scope': '#e2e8f0',       // light grey
    'Reoccurred': '#fca5a5',         // light red
    'Not Encountered': '#facc15',    // yellow
    'Not Categorized': '#94a3b8',    // grey
    'Adjustment/Request': '#86efac', // light green
    'Parallel w/ BA': '#7c3aed',     // purple
    'No QA Effort': '#4b5563',       // dark grey
    'Prod Issue': '#f87171',         // light red
    'Quarter Target': '#2563eb',     // blue
    'QA Bug': '#facc15',             // yellow
    'Bypassed': '#374151',           // dark grey
    'Target Moved': '#ea580c',       // orange
  };
  // Readable text colour for a given background (dark text on light fills, white on dark).
  window.baTextOn = function (hex) {
    var c = String(hex).replace('#', '');
    if (c.length !== 6) return '#fff';
    var r = parseInt(c.substr(0, 2), 16), g = parseInt(c.substr(2, 2), 16), b = parseInt(c.substr(4, 2), 16);
    return (0.299 * r + 0.587 * g + 0.114 * b) / 255 > 0.6 ? '#1f2937' : '#ffffff';
  };
  // Paint a category <select> to reflect its current value.
  window.baColorCat = function (sel) {
    var c = window.baCatColors[sel.value];
    if (c) { sel.style.background = c; sel.style.color = window.baTextOn(c); sel.style.borderColor = c; }
    else { sel.style.background = ''; sel.style.color = ''; sel.style.borderColor = ''; }
  };

  // Persist a bug's category and/or remark (kept server-side, survives Jira re-syncs).
  (function () {
    var token = (document.querySelector('meta[name="csrf-token"]') || {}).content || '';
    // fields: { category?, remarks? } — only the given fields are updated. el flashes green.
    window.baSaveMeta = function (jiraKey, fields, el) {
      var body = new URLSearchParams();
      body.set('jira_key', jiraKey);
      if ('category' in fields) body.set('category', fields.category);
      if ('remarks' in fields) body.set('remarks', fields.remarks);
      return fetch('/ba-po-issues/category', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'X-CSRF-TOKEN': token },
        body: body,
      }).then(function (r) {
        if (el) { el.classList.toggle('ba-cat-saved', r.ok);
          if (r.ok) setTimeout(function () { el.classList.remove('ba-cat-saved'); }, 1200); }
        return r;
      });
    };

    document.querySelectorAll('select.ba-cat').forEach(function (sel) {
      window.baColorCat(sel);   // initial colour from the saved value
      sel.addEventListener('change', function () {
        window.baColorCat(sel);
        sel.disabled = true;
        window.baSaveMeta(sel.getAttribute('data-key'), { category: sel.value }, sel)
          .then(function () { if (window.baRefreshCatChart) window.baRefreshCatChart(); })
          .finally(function () { sel.disabled = false; });
      });
    });

    document.querySelectorAll('input.ba-remark').forEach(function (inp) {
      inp.addEventListener('change', function () {
        window.baSaveMeta(inp.getAttribute('data-key'), { remarks: inp.value }, inp);
      });
    });
  })();

  // When a bug is set to "Reoccurred", show the QA-filed bugs linked to its target
  // story; picking one writes it into that bug's Remarks.
  (function () {
    var modal = document.getElementById('baReoModal');
    var listEl = document.getElementById('baReoList');
    var subEl = document.getElementById('baReoSub');
    var closeBtn = document.getElementById('baReoClose');
    var bugs = window.baStoryBugs || {};
    var jira = window.baJiraBase || '';
    var currentKey = null;
    function esc(s) { return String(s == null ? '' : s).replace(/&/g, '&amp;').replace(/</g, '&lt;')
      .replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;'); }
    function close() { modal.style.display = 'none'; }
    function open(storyKey, storyTitle, forKey) {
      currentKey = forKey;
      var arr = (bugs[storyKey] || []).filter(function (b) { return b.qa; });
      subEl.textContent = arr.length
        ? arr.length + ' QA-filed bug' + (arr.length === 1 ? '' : 's') + ' linked to ' + storyTitle + ' (' + storyKey + ') — pick the one this reoccurs from'
        : 'No QA-filed bugs linked to ' + storyTitle + ' (' + storyKey + ').';
      listEl.innerHTML = arr.map(function (b) {
        var link = jira
          ? '<a href="' + jira + '/browse/' + esc(b.key) + '" target="_blank" rel="noopener" class="story-title">' + esc(b.summary) + '</a>'
          : '<span class="story-title">' + esc(b.summary) + '</span>';
        return '<tr><td>' + link + '<div class="story-key">' + esc(b.key) + '</div></td>' +
          '<td>' + esc(b.creator) + '</td>' +
          '<td class="nowrap">' + esc(b.created || '—') + '</td>' +
          '<td><span class="badge" style="background:' + esc(b.bg) + ';color:' + esc(b.fg) + '">' + esc(b.status) + '</span></td>' +
          '<td><button type="button" class="ba-reo-pick" data-rk="' + esc(b.key) + '" data-rs="' + esc(b.summary) + '">Select</button></td></tr>';
      }).join('') || '<tr><td colspan="5" class="empty">No QA-filed bugs to link.</td></tr>';
      modal.style.display = 'flex';
    }
    // Pick a QA bug → write it into the current bug's Remarks input and save.
    listEl.addEventListener('click', function (e) {
      var btn = e.target.closest('.ba-reo-pick');
      if (!btn || !currentKey) return;
      var remark = btn.getAttribute('data-rk') + ' — ' + btn.getAttribute('data-rs');
      var inp = document.querySelector('input.ba-remark[data-key="' + currentKey + '"]');
      if (inp) { inp.value = remark; if (window.baSaveMeta) window.baSaveMeta(currentKey, { remarks: remark }, inp); }
      close();
    });
    if (closeBtn) closeBtn.addEventListener('click', close);
    modal.addEventListener('click', function (e) { if (e.target === modal) close(); });
    document.addEventListener('keydown', function (e) { if (e.key === 'Escape') close(); });
    document.querySelectorAll('select.ba-cat').forEach(function (sel) {
      sel.addEventListener('change', function () {
        if (sel.value === 'Reoccurred') {
          open(sel.getAttribute('data-story'), sel.getAttribute('data-story-title'), sel.getAttribute('data-key'));
        }
      });
    });
  })();

  // "By category" summary chart — built from the live category selects, so it reflects
  // the current tags (and updates immediately when a bug is re-categorized).
  (function () {
    var el = document.getElementById('baCatChart');
    var note = document.getElementById('baCatNote');
    if (!el || !window.Chart) return;
    var PALETTE = ['#2563eb', '#16a34a', '#d97706', '#dc2626', '#7c3aed', '#0e7490',
      '#db2777', '#65a30d', '#ea580c', '#0891b2', '#9333ea', '#ca8a04', '#4f46e5', '#94a3b8'];
    var chart = null;
    var donut = null;

    function counts() {
      var map = {};
      document.querySelectorAll('select.ba-cat').forEach(function (s) {
        var k = s.value || 'Uncategorized';
        map[k] = (map[k] || 0) + 1;
      });
      // Sort by count desc, but keep "Uncategorized" last.
      var entries = Object.keys(map).map(function (k) { return [k, map[k]]; });
      entries.sort(function (a, b) {
        if (a[0] === 'Uncategorized') return 1;
        if (b[0] === 'Uncategorized') return -1;
        return b[1] - a[1];
      });
      return entries;
    }

    // Category breakdown bar.
    function refreshBar() {
      var e = counts();
      var labels = e.map(function (x) { return x[0]; });
      var data = e.map(function (x) { return x[1]; });
      var colors = labels.map(function (l, i) {
        return l === 'Uncategorized' ? '#cbd5e1' : (window.baCatColors[l] || PALETTE[i % PALETTE.length]);
      });
      var tagged = e.reduce(function (n, x) { return n + (x[0] === 'Uncategorized' ? 0 : x[1]); }, 0);
      var total = e.reduce(function (n, x) { return n + x[1]; }, 0);
      if (note) note.textContent = tagged + ' of ' + total + ' categorized';
      if (chart) {
        chart.data.labels = labels; chart.data.datasets[0].data = data;
        chart.data.datasets[0].backgroundColor = colors; chart.update();
      } else {
        chart = new Chart(el, {
          type: 'bar',
          data: { labels: labels, datasets: [{ label: 'Bugs', data: data, backgroundColor: colors,
            borderRadius: 6, borderWidth: 0, maxBarThickness: 26 }] },
          options: {
            indexAxis: 'y', responsive: true, maintainAspectRatio: false,
            plugins: { legend: { display: false },
              tooltip: { callbacks: { label: function (c) { return c.parsed.x + ' bug' + (c.parsed.x === 1 ? '' : 's'); } } } },
            scales: { x: { beginAtZero: true, ticks: { precision: 0 }, grid: { display: true } }, y: { grid: { display: false } } },
          },
        });
      }
    }

    // Escape rate follows the PA scorecard tiers (high-severity bugs escaped to
    // production per release), kept to 100% and adjusting by the escaped-bug count:
    //   0 → Emerald 100% · 1 → Green 60% · 2 → Yellow 40% · 3+ → Red 20%
    function escTier(escaped) {
      if (escaped <= 0) return { rate: 100, label: 'Emerald', color: '#059669' };
      if (escaped < 2)  return { rate: 60,  label: 'Green',   color: '#16a34a' };  // 1 escaped
      if (escaped < 3)  return { rate: 40,  label: 'Yellow',  color: '#d97706' };  // 2 escaped
      return               { rate: 20,  label: 'Red',     color: '#dc2626' };       // 3+ escaped
    }

    // Escape-rate gauge (tier score out of 100) + the KPI tiles.
    function refreshEscape() {
      var escaped = 0;
      document.querySelectorAll('select.ba-cat').forEach(function (s) { if (s.value === 'Escaped Bug') escaped++; });
      var caught = window.baQaCaught || 0;
      var tier = escTier(escaped);
      var rate = tier.rate;
      var set = function (id, v) { var n = document.getElementById(id); if (n) n.textContent = v; };
      set('kpiEscaped', escaped);
      set('kpiEscRate', rate + '%');
      set('baEscCenter', rate + '%');
      var center = document.getElementById('baEscCenter');
      if (center) center.style.color = tier.color;
      var enote = document.getElementById('baEscNote');
      if (enote) enote.textContent = escaped + ' escaped · ' + caught + ' caught · ' + tier.label;
      var escEl = document.getElementById('baEscChart');
      if (!escEl || !window.Chart) return;
      var data = [rate, 100 - rate];
      var colors = [tier.color, (getComputedStyle(document.documentElement).getPropertyValue('--line') || '#e5e7eb').trim()];
      if (donut) {
        donut.data.datasets[0].data = data;
        donut.data.datasets[0].backgroundColor = colors;
        donut.update();
        return;
      }
      donut = new Chart(escEl, {
        type: 'doughnut',
        data: { labels: ['Score', ''], datasets: [{ data: data, backgroundColor: colors, borderColor: '#ffffff', borderWidth: 2 }] },
        options: { responsive: true, maintainAspectRatio: false, cutout: '68%', rotation: -90, circumference: 360,
          plugins: { legend: { display: false }, tooltip: { enabled: false } } },
      });
    }

    function refresh() { refreshBar(); refreshEscape(); }
    window.baRefreshCatChart = refresh;
    refresh();
  })();

  // Filter the grouped bug list (search + status/project/reporter + hide-completed),
  // hiding any target-story group that has no visible bugs and updating the counts.
  (function () {
    var search = document.getElementById('baSearch');
    var status = document.getElementById('baStatus');
    var project = document.getElementById('baProject');
    var reporter = document.getElementById('baReporter');
    var hideDone = document.getElementById('baHideDone');
    var countEl = document.getElementById('baCount');
    var groups = Array.prototype.slice.call(document.querySelectorAll('#baTable tbody[data-ba-group]'));
    if (!groups.length) return;
    var state = { text: '', status: 'all', project: 'all', creator: 'all', hideDone: false };

    function apply() {
      var total = 0;
      groups.forEach(function (g) {
        var visible = 0;
        Array.prototype.forEach.call(g.querySelectorAll('.ba-bug'), function (b) {
          var okText = !state.text || b.textContent.toLowerCase().indexOf(state.text) !== -1;
          var okStatus = state.status === 'all' || b.getAttribute('data-status') === state.status;
          var okProject = state.project === 'all' || b.getAttribute('data-project') === state.project;
          var okCreator = state.creator === 'all' || b.getAttribute('data-creator') === state.creator;
          var okDone = !state.hideDone || b.getAttribute('data-done') !== '1';
          var show = okText && okStatus && okProject && okCreator && okDone;
          b.style.display = show ? '' : 'none';
          if (show) visible++;
        });
        g.hidden = visible === 0;
        var chip = g.querySelector('[data-ba-group-count]');
        if (chip) chip.textContent = visible;
        total += visible;
      });
      if (countEl) countEl.textContent = total;
    }

    if (search) search.addEventListener('input', function () { state.text = search.value.trim().toLowerCase(); apply(); });
    if (status) status.addEventListener('change', function () { state.status = status.value; apply(); });
    if (project) project.addEventListener('change', function () { state.project = project.value; apply(); });
    if (reporter) reporter.addEventListener('change', function () { state.creator = reporter.value; apply(); });
    if (hideDone) hideDone.addEventListener('click', function () {
      state.hideDone = !state.hideDone;
      hideDone.classList.toggle('active', state.hideDone);
      hideDone.setAttribute('aria-pressed', state.hideDone ? 'true' : 'false');
      apply();
    });
  })();

  function groupByColor(statuses) {
    const map = new Map();
    (statuses || []).forEach(function (s) { const k = s.color || '#cbd5e1';
      if (!map.has(k)) map.set(k, { color: k, count: 0, names: [] });
      const g = map.get(k); g.count += s.count; g.names.push(s.name); });
    return Array.from(map.values()).sort((a, b) => b.count - a.count);
  }
  const g = groupByColor(@json($statuses));
  const el = document.getElementById('baChart');
  if (el && g.length) new Chart(el, { type: 'doughnut',
    data: { labels: g.map(x => x.names.join(', ')), datasets: [{ data: g.map(x => x.count),
      backgroundColor: g.map(x => x.color), borderColor: '#ffffff', borderWidth: 2 }] },
    options: { responsive: true, maintainAspectRatio: false, cutout: '62%',
      plugins: { legend: { display: false }, tooltip: { enabled: true } } } });
</script>
@endpush