@extends('layouts.app')
@section('title', $project . ' Status · QA Dashboard')

@section('content')
@if (in_array($project, ['ERP', 'CRM', 'SMPP'], true))
  @include('partials.project-tabs', ['tabBase' => '/projects', 'tabActive' => $project, 'tabQuery' => request('period') ? '?period=' . request('period') : ''])
@endif
<section class="summary">
  <div style="display:flex;align-items:center;gap:1rem;flex-wrap:wrap">
    <h2 style="margin:0">{{ $project }} · Status <small>· target stories & linked Jira issues</small></h2>
    <span style="{{ empty($quarters) ? 'margin-left:auto' : '' }}">@include('partials.jira-sync')</span>
    @unless ($noImport ?? false)
      <span style="margin-left:auto">@include('partials.project-status-export', ['pxProject' => $project, 'pxTq' => $tq])</span>
    @endunless
  </div>
  @unless ($noImport ?? false)
  <div class="overall" style="margin-top:.9rem">
    <div class="chart-wrap"><canvas id="statusChart"></canvas></div>
    <div class="big-number">
      <strong>{{ $summary['percent_complete'] }}%</strong>
      <span>complete ({{ $summary['done'] }}/{{ $summary['total'] }})</span>
    </div>
    <x-status-chips :breakdown="$summary" />
  </div>
  @endunless
</section>

@if ($noImport ?? false)
<section>
  <p class="empty">No imported dashboard for {{ $tq }} yet. Upload it in <a href="/import-dashboard">Settings → Import Dashboard</a>@if ($project === 'SMPP') (or generate it from an Epic Link)@endif, then it will appear here.</p>
</section>
@else

@if (!empty($monthCards))
<section>
  <h2>Monthly progress <small class="muted">· signed off, quarter to date · same basis as
    <a href="/reports/monthly-summary">Reports → Monthly Summary</a></small></h2>
  <div class="qa-speed-legend muted">Moved-to-In-QA keys tinted by completion speed:
    <span class="story-key k-green">same month</span>
    <span class="story-key k-orange">next month</span>
    <span class="story-key k-red">3rd month</span>
    <span class="story-key">not yet</span>
    <span style="margin-left:.6rem">· QA-completed keys flagged</span>
    <span class="story-key k-noqa" title="Completed without going through In QA">didn’t go through QA</span>
  </div>
  <div class="type-cards month-cards">
    @foreach ($monthCards as $mc)
    <div class="type-card month-card" x-data="{ open: false }">
      <div class="type-card-head"><strong>{{ $mc['label'] }}</strong></div>
      {{-- A month of the quarter that hasn't started yet has nothing to show. --}}
      @if (! empty($mc['future']))
        <div class="muted" style="text-align:center;padding:1.4rem 0">not started yet</div>
      @else
      <div class="month-chart">
        <canvas class="month-doughnut" data-completed="{{ $mc['completed'] }}" data-total="{{ $mc['total'] }}"></canvas>
        <div class="month-chart-center">
          <span class="month-pct">{{ $mc['percent'] }}%</span>
          <span class="month-count">{{ $mc['completed'] }}/{{ $mc['total'] }}</span>
        </div>
      </div>
      <div class="muted" style="text-align:center">signed off vs {{ $mc['total'] }} targets in scope</div>
      @if (!is_null($mc['in_qa']) || !is_null($mc['qa_completed']))
      <div class="month-load"
           title="This month's own movement: stories that moved into In QA during it (or had a bug filed against them), and stories that moved to BA UAT / PO UAT / Done during it — whichever month they entered QA in. Bugs excluded.">
        <button type="button" class="month-load-toggle" @click="open = !open" :class="{ open: open }">
          <span class="month-load-caret" x-text="open ? '▾' : '▸'"></span>
          <span class="month-load-sum">In QA <strong>{{ $mc['in_qa'] ?? 0 }}</strong> · Signed off <strong>{{ $mc['qa_completed'] ?? 0 }}</strong></span>
        </button>
        <div class="month-load-body" x-show="open" x-cloak>
          <div class="month-load-group">
            <div class="month-load-head">Entered In QA this month ({{ $mc['in_qa'] ?? 0 }})</div>
            <div class="month-load-keys">
              @forelse ($mc['in_qa_items'] as $it)
                <span class="story-key {{ $it['cls'] ?? '' }}">{{ $it['key'] }}</span>
              @empty
                <span class="muted">None</span>
              @endforelse
            </div>
          </div>
          <div class="month-load-group">
            <div class="month-load-head">Moved to Completed this month ({{ $mc['qa_completed'] ?? 0 }})</div>
            <div class="month-load-keys">
              @forelse ($mc['qa_completed_items'] as $it)
                <span class="story-key {{ ($it['no_qa'] ?? false) ? 'k-noqa' : '' }}"
                      @if ($it['no_qa'] ?? false) title="Completed without going through In QA" @endif>{{ $it['key'] }}</span>
              @empty
                <span class="muted">None</span>
              @endforelse
            </div>
          </div>
        </div>
      </div>
      @endif
      @endif
    </div>
    @endforeach
  </div>
</section>
@endif

@if (!empty($types))
<section x-data="{ tm: false, tname: '', titems: [], openType(n, i){ this.tname = n; this.titems = i; this.tm = true; } }">
  <h2>By story type <small class="muted">· targets & linked issues</small></h2>
  <div class="type-cards">
    @foreach ($types as $ty => $c)
      <div class="type-card clickable" role="button" tabindex="0"
           @click="openType(@js($ty), @js($c['items']))" @keydown.enter="openType(@js($ty), @js($c['items']))">
        <div class="type-card-head"><x-type-badge :type="$ty" /><span class="pct">{{ $c['percent_complete'] }}%</span></div>
        <div class="bar"><span class="seg done" style="width: {{ $c['percent_complete'] }}%"></span></div>
        <div class="muted">{{ $c['done'] }}/{{ $c['total'] }} done</div>
      </div>
    @endforeach
  </div>

  {{-- By-story-type drill-down modal --}}
  <div class="wk-modal" x-show="tm" x-cloak style="display:flex" @keydown.escape.window="tm = false">
    <div class="wk-modal-card qa-drill-card" @click.outside="tm = false">
      <div class="wk-modal-head">
        <strong><span x-text="tname"></span> <span class="muted" x-text="'· ' + titems.length + ' issue' + (titems.length === 1 ? '' : 's')"></span></strong>
        <button type="button" class="wk-modal-close" @click="tm = false">✕</button>
      </div>
      <div class="wk-modal-body" style="display:block">
        <div style="overflow-x:auto">
          <table class="grid compact">
            <thead><tr><th>Issue</th><th>Status</th></tr></thead>
            <tbody>
              <template x-for="it in titems" :key="it.key">
                <tr>
                  <td>
                    <a :href="'{{ $jiraBase }}' + '/browse/' + it.key" target="_blank" rel="noopener" class="story-title" x-text="it.title"></a>
                    <div class="story-key" x-text="it.key"></div>
                  </td>
                  <td><span class="badge" :style="'background:' + it.bg + ';color:' + it.fg" x-text="it.status"></span></td>
                </tr>
              </template>
              <template x-if="!titems.length"><tr><td colspan="2" class="empty">No issues.</td></tr></template>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</section>
@endif

@if (!empty($qa))
<section x-data="{ qm: false, qname: '', qitems: [], openQa(n, i){ this.qname = n; this.qitems = i; this.qm = true; } }">
  <h2>Assigned QA <small class="muted">· credited to the assigned QA (owner); bugs go to the QA who reported them</small></h2>
  <table class="grid">
    <thead><tr><th>Member</th><th>Progress</th><th>Done</th><th>Remaining</th><th>Total</th></tr></thead>
    <tbody>
      @foreach ($qa as $m)
      <tr>
        <td><a href="/members/{{ $m['email'] }}" @click.prevent="openQa(@js($m['name']), @js($m['items']))">{{ $m['name'] }}</a></td>
        <td class="progress-cell"><x-progress-bar :counts="$m" /></td>
        <td>{{ $m['done'] }}</td>
        <td>{{ $m['total'] - $m['done'] }}</td>
        <td><strong>{{ $m['total'] }}</strong></td>
      </tr>
      @endforeach
    </tbody>
  </table>

  {{-- Per-QA drill-down modal (stories + bugs credited to the member) --}}
  <div class="wk-modal" x-show="qm" x-cloak style="display:flex" @keydown.escape.window="qm = false">
    <div class="wk-modal-card qa-drill-card" @click.outside="qm = false">
      <div class="wk-modal-head">
        <strong>Assigned QA · <span x-text="qname"></span> <span class="muted" x-text="'· ' + qitems.length + ' item' + (qitems.length === 1 ? '' : 's')"></span></strong>
        <button type="button" class="wk-modal-close" @click="qm = false">✕</button>
      </div>
      <div class="wk-modal-body" style="display:block">
        <div style="overflow-x:auto">
          <table class="grid compact">
            <thead><tr><th>Type</th><th>Story / Bug</th><th>Status</th></tr></thead>
            <tbody>
              <template x-for="it in qitems" :key="it.key">
                <tr>
                  <td><span class="type-badge" :class="'type-' + it.kind.replace(/[-\s]/g,'').toLowerCase()" x-text="it.kind"></span></td>
                  <td>
                    <a :href="'{{ $jiraBase }}' + '/browse/' + it.key" target="_blank" rel="noopener" class="story-title" x-text="it.title"></a>
                    <div class="story-key" x-text="it.key"></div>
                  </td>
                  <td><span class="badge" :style="'background:' + it.bg + ';color:' + it.fg" x-text="it.status"></span></td>
                </tr>
              </template>
              <template x-if="!qitems.length"><tr><td colspan="3" class="empty">No items.</td></tr></template>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</section>
@endif

<div x-data="{ activeOnly: false }">
<section>
  <div style="display:flex;align-items:center;gap:1rem;flex-wrap:wrap">
    <h2 style="margin:0">Quarter Targets <small class="muted">· {{ $tq }}</small></h2>
    @if ($anyActive)
      <button type="button" class="qt-pending-btn" :class="{ active: activeOnly }"
              @click="activeOnly = !activeOnly"
              title="Show only stories still in Dev / In QA / In BA"
              x-text="activeOnly ? 'Show All' : 'Show Pending'">Show Pending</button>
    @endif
    <details class="colmenu" style="margin-left:auto">
      <summary>Columns</summary>
      <div class="colmenu-body">
        <label><input type="checkbox" data-qcol="owner" checked> Owner</label>
        <label><input type="checkbox" data-qcol="creator" checked> Creator</label>
        <label><input type="checkbox" data-qcol="created" checked> Created</label>
        <label><input type="checkbox" data-qcol="updated" checked> Updated</label>
      </div>
    </details>
  </div>
</section>

@forelse ($epicGroups as $eg)
  <div class="qt-epic" x-data="{ open: true }" x-show="!activeOnly || {{ $eg['has_active'] ? 'true' : 'false' }}">
    <button type="button" class="qt-acc-head qt-epic-head" @click="open = !open" :class="{ open: open }">
      <span class="qt-acc-caret" x-text="open ? '▾' : '▸'"></span>
      <span class="qt-acc-title">
        <span class="qt-acc-name">Epic · {{ $eg['title'] }}</span>
        <span class="story-key">{{ $eg['key'] }}</span>
      </span>
      <span class="qt-acc-meta">
        <span>@if ($eg['type'])<x-type-badge :type="$eg['type']" />@endif</span>
        <span>@if ($eg['status'])<x-status-badge :name="$eg['status']" :canon="$eg['canon']" />@endif</span>
        <span class="chip qt-acc-count">{{ count($eg['rows']) }} stories</span>
      </span>
    </button>
    <div class="qt-epic-body" x-show="open" x-cloak>
      <section class="qt-status-list">
        @foreach ($eg['rows'] as $r)
          @include('pages.partials.status-card', ['r' => $r, 'groupOrder' => $groupOrder])
        @endforeach
      </section>
    </div>
  </div>
@empty
@endforelse

@if (count($flatRows))
<section class="qt-status-list">
  @foreach ($flatRows as $r)
    @include('pages.partials.status-card', ['r' => $r, 'groupOrder' => $groupOrder])
  @endforeach
</section>
@endif

</div>

@if (empty($epicGroups) && empty($flatRows))
  <p class="empty">No target stories for {{ $tq }}.</p>
@endif
@endif
@endsection

@push('scripts')
<script>
  // Hide/show Owner/Creator/Created/Updated across every linked-issue table on the page.
  (function () {
    var boxes = document.querySelectorAll('[data-qcol]');
    if (!boxes.length) return;
    var key = 'qtcols:{{ $project }}';
    var saved;
    try { saved = JSON.parse(localStorage.getItem(key) || '{}'); } catch (e) { saved = {}; }
    function apply(col, show) {
      document.querySelectorAll('.qc-' + col).forEach(function (cell) {
        cell.style.display = show ? '' : 'none';
      });
    }
    boxes.forEach(function (box) {
      var col = box.getAttribute('data-qcol');
      if (Object.prototype.hasOwnProperty.call(saved, col)) box.checked = !!saved[col];
      apply(col, box.checked);
      box.addEventListener('change', function () {
        apply(col, box.checked);
        var s;
        try { s = JSON.parse(localStorage.getItem(key) || '{}'); } catch (e) { s = {}; }
        s[col] = box.checked;
        try { localStorage.setItem(key, JSON.stringify(s)); } catch (e) {}
      });
    });
  })();

  // Monthly progress mini-doughnuts: completed vs remaining of the quarter target.
  (function () {
    if (!window.Chart) return;
    document.querySelectorAll('canvas.month-doughnut').forEach(function (el) {
      var done = parseInt(el.dataset.completed, 10) || 0;
      var total = parseInt(el.dataset.total, 10) || 0;
      var rem = Math.max(0, total - done);
      new Chart(el, { type: 'doughnut',
        data: { labels: ['Completed', 'Remaining'],
          datasets: [{ data: (done + rem) > 0 ? [done, rem] : [0, 1],
            backgroundColor: ['#16a34a', '#e2e8f0'], borderColor: '#ffffff', borderWidth: 2 }] },
        options: { responsive: true, maintainAspectRatio: false, cutout: '68%',
          plugins: { legend: { display: false }, tooltip: { enabled: false } } } });
    });
  })();

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