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

@section('content')
<section x-data="{ mm: false, mname: '', mitems: [], openM(n, i){ this.mname = n; this.mitems = i; this.mm = true; } }">
  <div style="display:flex;align-items:center;gap:1rem;flex-wrap:wrap">
    <h2 style="margin:0">By member @if ($period)<small>· {{ $period }}</small>@endif</h2>
  </div>
  <p class="muted">Total Weekly Tasks logged per module, by member — the actuals behind the trend above.</p>

  @if (!empty($trend['series']))
  <div class="trend-card"><div class="trend-wrap"><canvas id="memberTrend"></canvas></div></div>
  @endif

  <table class="grid sortable" id="memberTable">
    <thead>
      <tr>
        <th>Member</th>
        @foreach ($types as $ty)<th>{{ $ty }}</th>@endforeach
        <th>Total</th>
      </tr>
    </thead>
    <tbody>
      @forelse ($members as $email => $c)
      @php $mn = $names[$email] ?? $email; @endphp
      <tr>
        <td><a href="/members/{{ $email }}@if ($period)?period={{ $period }}@endif"
               @click.prevent="openM(@js($mn), @js($memberItems[$email] ?? []))"><x-who :email="$email" :names="$names" /></a></td>
        @foreach ($types as $ty)<td>{{ $c[$ty] ?? 0 }}</td>@endforeach
        <td><strong>{{ $c['total'] ?? 0 }}</strong></td>
      </tr>
      @empty
      <tr><td colspan="{{ count($types) + 2 }}" class="empty">No closed items for this period.</td></tr>
      @endforelse
    </tbody>
  </table>

  {{-- Per-member drill-down modal: the Weekly Tasks behind the module counts. --}}
  <div class="wk-modal" x-show="mm" x-cloak style="display:flex" @keydown.escape.window="mm = false">
    <div class="wk-modal-card qa-drill-card member-drill-card" style="width:min(1040px,95vw)" @click.outside="mm = false">
      <div class="wk-modal-head">
        <strong><span x-text="mname"></span> <span class="muted" x-text="'· ' + mitems.length + ' task' + (mitems.length === 1 ? '' : 's') + ' · {{ $period }}'"></span></strong>
        <button type="button" class="wk-modal-close" @click="mm = false">✕</button>
      </div>
      <div class="wk-modal-body" style="display:block">
        <div style="overflow-x:auto">
          <table class="grid compact">
            <thead><tr><th>Module</th><th>Task</th><th>Task Type</th><th>Week</th><th>Weekly Status</th></tr></thead>
            <tbody>
              <template x-for="(it, i) in mitems" :key="i">
                <tr>
                  <td x-text="it.module"></td>
                  <td>
                    <template x-if="it.jira_key">
                      <a :href="'{{ $jiraBase }}' + '/browse/' + it.jira_key" target="_blank" rel="noopener" class="story-title" x-text="it.title"></a>
                    </template>
                    <template x-if="!it.jira_key"><span class="story-title" x-text="it.title"></span></template>
                    <div class="story-key" x-show="it.jira_key" x-text="it.jira_key"></div>
                  </td>
                  <td x-text="it.task_type"></td>
                  <td x-text="it.week || '—'"></td>
                  <td><span class="badge" :style="'background:' + it.bg + ';color:' + it.fg" x-text="it.weekly_label"></span></td>
                </tr>
              </template>
              <template x-if="!mitems.length"><tr><td colspan="5" class="empty">No weekly tasks.</td></tr></template>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</section>

<section style="margin-top:1.6rem">
  <h2>Filed bugs @if ($period)<small class="muted">· {{ $period }}</small>@endif</h2>
  <p class="muted">Bugs each QA member filed against quarter target stories, grouped by the story (linked issue) they belong to.</p>
  <div class="fb-cards">
    @foreach ($filedBugs['members'] as $mem)
      @php
        $fbhl = str_contains($mem['name'], 'Cano') ? 'fb-hl fb-hl-teal'
              : (str_contains($mem['name'], 'Joshua') ? 'fb-hl fb-hl-amber' : '');
      @endphp
      <div class="fb-card">
        <div class="fb-card-head">
          <h3>{{ $mem['name'] }}</h3>
          <span class="chip">{{ $mem['totalBugs'] }} bugs · {{ $mem['totalStories'] }} stories</span>
        </div>
        <div class="fb-list">
          @forelse ($mem['stories'] as $s)
            @php $shref = $jiraBase ? $jiraBase . '/browse/' . $s['key'] : null; @endphp
            <div class="fb-group">
              <div class="fb-group-head {{ $fbhl }}">
                <span class="fb-row-main">
                  <span class="fb-title">@if ($shref)<a href="{{ $shref }}" target="_blank" rel="noopener">{{ $s['title'] }}</a>@else{{ $s['title'] }}@endif</span>
                  <span class="fb-sub muted">{{ $s['key'] }} · {{ $s['project'] }} · {{ $s['quarter'] }}@if ($s['done']) · <span style="color:#16a34a">done</span>@endif</span>
                </span>
                <span class="chip">{{ $s['bug_count'] }}</span>
              </div>
              @foreach ($s['bugs'] as $b)
                @php $bhref = $jiraBase ? $jiraBase . '/browse/' . $b['key'] : null; @endphp
                <a class="fb-row" @if ($bhref) href="{{ $bhref }}" target="_blank" rel="noopener" @endif>
                  <span class="fb-row-main">
                    <span class="fb-title">{{ $b['summary'] }}</span>
                    <span class="fb-sub muted">{{ $b['key'] }}</span>
                  </span>
                  <span class="badge" style="background:{{ $b['color'] }};color:{{ $b['fg'] }}">{{ $b['status'] }}</span>
                </a>
              @endforeach
            </div>
          @empty
            <p class="empty">No bugs filed in this period.</p>
          @endforelse
        </div>
      </div>
    @endforeach
  </div>
</section>
@endsection

@push('scripts')
<script>
  var mtEl = document.getElementById('memberTrend');
  if (mtEl) {
    var trend = @json($trend);
    var names = @json($names);
    var palette = ['#2563eb', '#16a34a', '#7c3aed', '#d97706', '#dc2626', '#0e7490', '#db2777', '#65a30d'];
    var gridColor = (getComputedStyle(document.documentElement).getPropertyValue('--line') || '#eef2f7').trim();
    var datasets = trend.series.map(function (s, i) {
      var hex = palette[i % palette.length];
      return {
        label: names[s.email] || s.email, data: s.data, borderColor: hex, borderWidth: 2.5,
        backgroundColor: hex + '22', tension: 0, fill: false, pointRadius: 0, pointHoverRadius: 5,
        pointBackgroundColor: hex, pointBorderColor: '#fff', pointBorderWidth: 2,
      };
    });
    new Chart(mtEl, {
      type: 'line',
      data: { labels: trend.labels, datasets: datasets },
      options: {
        responsive: true, maintainAspectRatio: false,
        interaction: { mode: 'index', intersect: false },
        plugins: { legend: { position: 'bottom' },
          title: { display: true, text: 'Closed Weekly Tasks per ' + (trend.granularity === 'week' ? 'week' : 'month') + ' · {{ $period }}', font: { family: "'Lexend'", weight: '600', size: 14 }, color: (getComputedStyle(document.documentElement).getPropertyValue('--ink')||'#0f172a').trim() } },
        scales: {
          x: { grid: { display: false }, border: { display: false } },
          y: { beginAtZero: true, ticks: { precision: 0 }, grid: { color: gridColor }, border: { display: false } },
        },
        animation: { duration: 800, easing: 'easeOutQuart' },
      }
    });
  }
</script>
@endpush