@extends('layouts.app')
@section('title', 'Overview · QA Dashboard')

@section('content')
<section class="summary">
  <div style="display:flex;align-items:center;gap:1rem;flex-wrap:wrap">
    <h2 style="margin:0">Overview <small class="muted">· {{ $tq }}</small></h2>
  </div>
</section>

@if (!empty($projectSummaries))
<section data-export-section="Project Status">
  <h2>Project Status <small class="muted">· quarter targets & linked issues</small></h2>
  @unless ($hasImportDashboard ?? true)
  <p class="empty" style="margin:.25rem 0 1rem">No dashboard imported for {{ $tq }} yet — cards show 0%. Import one in <a href="/import-dashboard">Settings → Import Dashboard</a> to populate quarter targets.</p>
  @endunless
  <div class="proj-status-grid">
    @foreach ($projectSummaries as $ps)
    <a class="proj-status-card" href="/projects/{{ rawurlencode($ps['project']) }}">
      <div class="proj-status-head">
        <strong>{{ $ps['project'] }}</strong>
        <span class="muted">{{ $ps['tq'] }}</span>
      </div>
      <div class="proj-status-body">
        <div class="proj-status-chart">
          <canvas class="proj-status-doughnut" data-stats="{{ json_encode($ps['summary']['statuses']) }}"></canvas>
          <div class="proj-status-center">
            <span class="proj-status-pct">{{ $ps['summary']['percent_complete'] }}%</span>
            <span class="proj-status-count">{{ $ps['summary']['done'] }}/{{ $ps['summary']['total'] }}</span>
          </div>
        </div>
        <x-status-chips :breakdown="$ps['summary']" />
      </div>
    </a>
    @endforeach
  </div>
</section>
@endif

{{-- Bugs filed by QA during the selected RYG week, one tile per project. Each tile
     shows a compact list (title · reporter · status); clicking it opens the full
     table (with story + severity) in a modal. --}}
@php
  $fbProjects = ['ERP', 'CRM', 'SMPP'];
  $fbByProject = collect($filedBugs)->groupBy(fn ($b) => in_array($b['project'], $fbProjects, true) ? $b['project'] : 'Other');
@endphp
<section class="filed-bugs" id="filed-bugs" x-data="{ open: null }" data-export-section="Filed Bugs by QA">
  <h2>Filed Bugs by QA <small>· {{ $weeklyQuarter }} · {{ count($filedBugs) }} bug{{ count($filedBugs) === 1 ? '' : 's' }}</small></h2>

  @if (! ($hasImportDashboard ?? true))
    <div class="fb-card"><p class="empty">No dashboard imported for {{ $weeklyQuarter }} — import one in <a href="/import-dashboard">Settings → Import Dashboard</a> to track filed bugs.</p></div>
  @else
    <div class="fb-tiles">
      @foreach ($fbProjects as $proj)
        @php $bugs = $fbByProject->get($proj, collect()); @endphp
        <div class="fb-tile" @if ($bugs->count()) role="button" tabindex="0" @click="open=@js($proj)" @keydown.enter="open=@js($proj)" @endif>
          <div class="fb-tile-head">
            <span class="fb-tile-name">{{ $proj }}</span>
            <span class="chip fb-tile-count">{{ $bugs->count() }} bug{{ $bugs->count() === 1 ? '' : 's' }}</span>
          </div>
          <div class="fb-tile-list">
            @forelse ($bugs as $b)
              <div class="fb-tile-row @if ($b['critical']) fb-critical @endif">
                <span class="fb-tile-title" title="{{ $b['title'] }}">{{ $b['title'] }}</span>
                <span class="fb-tile-sub">
                  <span class="fb-tile-qa">{{ $b['qa'] }}</span>
                  @if ($b['status'])<x-status-badge :name="$b['status']" :canon="$b['canon']" />@endif
                </span>
              </div>
            @empty
              <p class="empty fb-tile-empty">No bugs filed this quarter.</p>
            @endforelse
          </div>
        </div>
      @endforeach
    </div>

    {{-- One detail modal per project with data --}}
    @foreach ($fbProjects as $proj)
      @php $bugs = $fbByProject->get($proj, collect()); @endphp
      @if ($bugs->count())
        <div class="wk-modal fb-modal" x-show="open===@js($proj)" x-cloak style="display:flex"
             @click.self="open=null" @keydown.escape.window="open=null">
          <div class="wk-modal-card fb-modal-card">
            <div class="wk-modal-head">
              <strong>Filed Bugs by QA · {{ $proj }} <span class="muted" style="font-weight:400">· {{ $bugs->count() }} bug{{ $bugs->count() === 1 ? '' : 's' }}</span></strong>
              <button type="button" class="wk-modal-close" @click="open=null">✕</button>
            </div>
            <div class="wk-modal-body fb-modal-body">
              <table class="grid compact fb-table">
                <thead><tr><th>Bug</th><th>Story</th><th>Filed by (QA)</th><th>Severity</th><th>Status</th></tr></thead>
                <tbody>
                  @foreach ($bugs as $b)
                  <tr @class(['fb-critical' => $b['critical']])>
                    <td>{{ $b['title'] }} <span class="story-key">{{ $b['key'] }}</span></td>
                    <td>{{ $b['story_title'] }} <span class="story-key">{{ $b['story_key'] }}</span></td>
                    <td>{{ $b['qa'] }}</td>
                    <td>@if ($b['priority'])<span class="fb-sev @if ($b['critical']) fb-sev-crit @endif">{{ $b['priority'] }}</span>@else <span class="muted">—</span>@endif</td>
                    <td>@if ($b['status'])<x-status-badge :name="$b['status']" :canon="$b['canon']" />@else <span class="muted">—</span>@endif</td>
                  </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          </div>
        </div>
      @endif
    @endforeach
  @endif
</section>

@if (!empty($weeklyRyg))
<section class="weekly-trend" data-export-section="Weekly Tasks · Target vs Actual">
  <h2>Weekly Tasks · Target vs Actual <small>· {{ $weeklyQuarter }} · whole team</small></h2>
  <div class="trend-card"><div class="trend-wrap"><canvas id="weeklyTrend"></canvas></div></div>
</section>

<section class="weekly-ryg" id="weekly-ryg" data-export-section="Weekly completion (RYG)">
  @php $rygLabel = collect($rygWeeks)->firstWhere('start', $rygWeek)['label'] ?? null; @endphp
  <div style="display:flex;align-items:center;gap:1rem;flex-wrap:wrap">
    <h2 style="margin:0">Weekly completion (RYG) <small>· {{ $weeklyQuarter }} · {{ $rygLabel ?? 'week' }}</small></h2>
    @if (!empty($rygWeeks))
    <form method="get" style="margin:0 0 0 auto"
          onsubmit="window.location='?week=' + encodeURIComponent(this.week.value) + '#weekly-ryg'; return false;">
      <label class="page-filter"><span>Week</span>
        <select name="week"
                onchange="window.location='?week=' + encodeURIComponent(this.value) + '#weekly-ryg'">
          @foreach ($rygWeeks as $w)<option value="{{ $w['start'] }}" @selected($w['start'] === $rygWeek)>{{ $w['label'] }}</option>@endforeach
        </select>
      </label>
    </form>
    @endif
  </div>
  <div class="ryg-grid">
    @foreach ($weeklyRyg as $m)
    @php $byModule = collect($m['tasks'])->groupBy('module'); @endphp
    <div class="ryg-card" x-data="{ open: false }">
      <div class="ryg-clickable" role="button" tabindex="0" title="View weekly tasks"
           @click="open = true" @keydown.enter="open = true">
        <div class="ryg-top">
          <div class="chart-mini ryg-chart"><canvas class="ryg-pie" data-g="{{ $m['green'] }}" data-y="{{ $m['yellow'] }}" data-r="{{ $m['red'] }}"></canvas></div>
          <div class="ryg-info">
            <strong class="ryg-name">{{ $m['name'] }}</strong>
            <div class="ryg-pct">{{ $m['percent'] }}%</div>
            <div class="chips">
              <span class="chip" style="background:#e4f6ea;color:#15803d">{{ $m['green'] }} on&nbsp;track</span>
              <span class="chip" style="background:#fdf0dd;color:#b45309">{{ $m['yellow'] }} at&nbsp;risk</span>
              <span class="chip" style="background:#fde8e8;color:#b91c1c">{{ $m['red'] }} overdue</span>
            </div>
          </div>
        </div>
        <div class="ryg-tasks-wrap">
          <table class="grid compact ryg-tasks">
            <thead><tr><th>Title</th><th>Jira Status</th><th>Weekly Status</th></tr></thead>
            <tbody>
              @forelse ($m['tasks'] as $t)
              <tr>
                <td>{{ $t['title'] }}@if ($t['jira_key']) <span class="story-key">{{ $t['jira_key'] }}</span>@endif</td>
                <td>@if ($t['jira_status'])<x-status-badge :name="$t['jira_status']" :canon="$t['jira_canon']" />@else <span class="muted">—</span>@endif</td>
                <td><x-status-badge :name="$t['weekly_label']" :canon="$t['weekly_canon']" /></td>
              </tr>
              @empty
              <tr><td colspan="3" class="empty">No weekly tasks.</td></tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>

      {{-- Read-only weekly-tasks modal, grouped by module (all categories expanded).
           Teleported to <body> so ancestor transforms don't trap the fixed overlay. --}}
      <template x-teleport="body">
      <div class="wk-modal" x-show="open" x-cloak style="display:none"
           @click.self="open = false" @keydown.escape.window="open = false">
        <div class="wk-modal-card wk-ryg-card">
          <div class="wk-modal-head">
            <strong>{{ $m['name'] }} · Weekly Tasks</strong>
            <span class="muted" style="margin-right:auto">{{ $weeklyQuarter }}@if ($rygWeekLabel) · {{ $rygWeekLabel }}@endif</span>
            <button type="button" class="wk-modal-close" @click="open = false">✕</button>
          </div>
          <div class="wk-modal-body" style="display:block">
            @forelse ($weeklyModules as $mod)
              @php $rows = $byModule[$mod] ?? collect(); @endphp
              @if ($rows->count())
              <div class="ryg-mod">
                <div class="ryg-mod-head">{{ $mod }} <span class="chip">{{ $rows->count() }}</span></div>
                <table class="grid compact">
                  <thead><tr><th>Task</th><th>Task Type</th><th>Due</th><th>Accomplished</th><th>Jira Status</th><th>Weekly Status</th></tr></thead>
                  <tbody>
                    @foreach ($rows as $t)
                    <tr>
                      <td>{{ $t['title'] }}@if ($t['jira_key']) <span class="story-key">{{ $t['jira_key'] }}</span>@endif</td>
                      <td class="muted">{{ $t['task_type'] ?: '—' }}</td>
                      <td class="muted">{{ $t['due_date'] ?: '—' }}</td>
                      <td class="muted">{{ $t['date_accomplished'] ?: '—' }}</td>
                      <td>@if ($t['jira_status'])<x-status-badge :name="$t['jira_status']" :canon="$t['jira_canon']" />@else <span class="muted">—</span>@endif</td>
                      <td><x-status-badge :name="$t['weekly_label']" :canon="$t['weekly_canon']" /></td>
                    </tr>
                    @endforeach
                  </tbody>
                </table>
              </div>
              @endif
            @empty
            @endforelse
            @if (empty($m['tasks']))
              <p class="empty">No weekly tasks for {{ $m['name'] }} in {{ $rygWeekLabel ?? $weeklyQuarter }}.</p>
            @endif
          </div>
        </div>
      </div>
      </template>
    </div>
    @endforeach
  </div>
</section>
@else
<section>
  <h2>Weekly Tasks <small class="muted">· {{ $weeklyQuarter }}</small></h2>
  <p class="empty">No weekly tasks for {{ $weeklyQuarter }} yet. Add some in <a href="/weekly">Weekly Tasks</a>.</p>
</section>
@endif

{{-- Real-time Jira movements (this week, ALL statuses) for the quarter's target
     stories — see what the devs are moving so QA knows what to prepare for. --}}
<section class="jira-moves" id="jira-moves">
  <style>
    .jm-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:1rem; }
    .jm-card-head { display:flex; align-items:center; gap:.5rem; font-weight:700; margin-bottom:.4rem; }
    .jm-row { padding:.45rem .05rem; border-top:1px solid var(--line); }
    .jm-main { min-width:0; }
    .jm-title { font-weight:600; font-size:.84rem; }
    .jm-sub { font-size:.71rem; display:block; }
    .jm-tag { display:inline-block; font-size:.6rem; font-weight:700; padding:.05rem .35rem; border-radius:999px; margin-left:.3rem; vertical-align:middle; }
    .jm-tag[data-src="Quarter Targets"] { background:#dbeafe; color:#1e40af; }
    .jm-tag[data-src="Reported Issues"] { background:#fee2e2; color:#b91c1c; }
    .jm-tag[data-src="Automation For Jira"] { background:#ede9fe; color:#6d28d9; }
    .jm-tag[data-src="BA Monitoring"] { background:#ccfbf1; color:#0f766e; }
  </style>
  <h2>Jira Movements <small>· {{ $weeklyQuarter }} · this week · all statuses</small></h2>
  <p class="muted" style="margin:-.3rem 0 .7rem;font-size:.82rem">Real-time story/task movements (all issues, not just quarter targets) — what the devs are working on, so you know what to prepare for next.</p>
  <div class="jm-grid">
    @php
      $jmOrder = collect(['ERP','SMPP','CRM'])->merge(collect(array_keys($jiraMovements))->reject(fn ($p) => in_array($p, ['ERP','SMPP','CRM'], true)))->unique()->values();
    @endphp
    @foreach ($jmOrder as $proj)
      @php $rows = $jiraMovements[$proj] ?? []; @endphp
      <div class="fb-card">
        <div class="jm-card-head">{{ $proj }} <span class="chip">{{ count($rows) }}</span></div>
        @forelse ($rows as $r)
          <div class="jm-row">
            <span class="jm-main">
              <span class="jm-title">
                @if ($r['status_to'])<x-status-badge :name="$r['status_to']" :canon="$r['canon_to']" /> @endif{{ $r['summary'] ?: $r['key'] }}
                @foreach ($r['sources'] ?? [] as $src)<span class="jm-tag" data-src="{{ $src }}">{{ $src }}</span>@endforeach
              </span>
              <span class="jm-sub muted">
                <span class="story-key">{{ $r['key'] }}</span>@if ($r['issue_type']) · {{ $r['issue_type'] }}@endif@if ($r['status_from']) · from {{ $r['status_from'] }}@endif@if ($r['assignee']) · {{ $r['assignee'] }}@endif@if ($r['moved_at']) · {{ $r['moved_at']->diffForHumans() }}@endif
              </span>
            </span>
          </div>
        @empty
          <p class="empty" style="margin:.3rem 0">No movements this week.</p>
        @endforelse
      </div>
    @endforeach
  </div>
</section>
@endsection

@push('scripts')
<script>
  // Per-project status doughnuts (grouped by status color, like the Status page).
  document.querySelectorAll('canvas.proj-status-doughnut').forEach(function (cv) {
    if (!window.Chart) return;
    var statuses;
    try { statuses = JSON.parse(cv.dataset.stats || '[]'); } catch (e) { 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);
    });
    var g = Array.from(map.values()).sort(function (a, b) { return b.count - a.count; });
    if (g.length === 0) g = [{ color: '#e5e7eb', count: 1, names: ['No data'] }];  // grey ring at 0%
    new Chart(cv, { 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: '66%',
        plugins: { legend: { display: false }, tooltip: { enabled: false } } } });
  });

  var trendEl = document.getElementById('weeklyTrend');
  if (trendEl) {
    var wt = @json($weeklyTrend ?? null);
    function areaGradient(ctx, hex) {
      var a = ctx.chart.chartArea; if (!a) return hex + '22';
      var g = ctx.chart.ctx.createLinearGradient(0, a.top, 0, a.bottom);
      g.addColorStop(0, hex + '3d'); g.addColorStop(1, hex + '00'); return g;
    }
    function series(label, data, hex) {
      return { label: label, data: data, borderColor: hex, borderWidth: 2.5,
        backgroundColor: function (c) { return areaGradient(c, hex); },
        tension: 0, fill: true, pointRadius: 0, pointHoverRadius: 5,
        pointBackgroundColor: hex, pointBorderColor: '#fff', pointBorderWidth: 2 };
    }
    var gridColor = (getComputedStyle(document.documentElement).getPropertyValue('--line') || '#eef2f7').trim();
    new Chart(trendEl, { type: 'line',
      data: { labels: wt.labels, datasets: [ series('Target', wt.target, '#2563eb'), series('Actual', wt.actual, '#16a34a') ] },
      options: { responsive: true, maintainAspectRatio: false, interaction: { mode: 'index', intersect: false },
        plugins: { legend: { position: 'bottom' } },
        scales: { x: { grid: { display: false }, border: { display: false }, ticks: { maxRotation: 0, autoSkipPadding: 12 } },
          y: { beginAtZero: true, ticks: { precision: 0, stepSize: 1 }, grid: { color: gridColor }, border: { display: false } } },
        animation: { duration: 900, easing: 'easeOutQuart' } } });
  }

  document.querySelectorAll('canvas.ryg-pie').forEach(function (cv) {
    new Chart(cv, { type: 'doughnut',
      data: { labels: ['On track', 'At risk', 'Overdue'], datasets: [{
        data: [+cv.dataset.g, +cv.dataset.y, +cv.dataset.r],
        backgroundColor: ['#16a34a', '#f59e0b', '#dc2626'], borderColor: '#ffffff',
        borderWidth: 2, borderRadius: 4, hoverOffset: 6, spacing: 2 }] },
      options: { responsive: true, maintainAspectRatio: false, cutout: '62%',
        animation: { animateScale: true, animateRotate: true },
        plugins: { legend: { display: false }, tooltip: { enabled: false } } } });
  });
</script>
@endpush