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

@section('content')
<style>
  /* Page tabs — underline style so they read as tabs at a glance. */
  .ptab-bar { display:flex; gap:.4rem; margin:.9rem 0 -1px; border-bottom:1px solid var(--line); }
  /* breathing room between the tabs and the panel content below them */
  .ptab-bar ~ .overall, .ptab-bar ~ .jira-issues { margin-top:1.4rem; }
  .ptab { position:relative; font-size:.9rem; font-weight:600; padding:.55rem 1.1rem; cursor:pointer;
    border:1px solid transparent; border-bottom:none; border-radius:var(--r-sm,8px) var(--r-sm,8px) 0 0;
    background:transparent; color:var(--muted); margin-bottom:-1px; transition:color .15s, background .15s; }
  .ptab:hover { color:var(--ink); background:color-mix(in srgb, var(--primary) 6%, transparent); }
  .ptab.on { color:var(--primary); background:var(--card); border-color:var(--line); }
  /* accent underline that sits on top of the bar's bottom border */
  .ptab.on::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--primary); }
  /* Pager buttons (Prev/Next) keep the small pill-button look. */
  .jtab { font-size:.85rem; font-weight:600; padding:.4rem .95rem; border-radius:var(--r-pill,999px);
    border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; }
  .jtab:disabled { opacity:.45; cursor:default; }
  .jira-pager { display:flex; align-items:center; gap:1rem; justify-content:center; margin-top:.9rem; }
  .jira-proj-block { margin-bottom:1.6rem; }
  .jira-proj-head { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin:.2rem 0 .5rem; }
  .jira-proj-head h3 { margin:0; }
  .jira-proj-search { margin-left:auto; min-width:12rem; }
  .jira-proj-status { min-width:9rem; }
</style>
<div x-data="jiraStatus()">
<section class="summary">
  <div style="display:flex;align-items:center;gap:1rem;flex-wrap:wrap">
    <h2 style="margin:0">Jira Stories @if ($period)<small>· {{ $period }}</small>@endif</h2>
    <form method="get" style="margin:0 0 0 auto">
      <label class="page-filter"><span>Quarter</span>
        <select name="period" onchange="this.form.submit()">
          @foreach ($periodGroups as $g)
            <optgroup label="{{ $g['year'] }}">
              <option value="{{ $g['year'] }}" @selected($period === $g['year'])>All {{ $g['year'] }}</option>
              @foreach ($g['quarters'] as $q)<option value="{{ $q }}" @selected($period === $q)>{{ $q }}</option>@endforeach
            </optgroup>
          @endforeach
        </select>
      </label>
    </form>
    @include('partials.jira-sync')
  </div>
  <p class="muted">Live movement of Jira stories across all three projects (ERP · CRM · SMPP), straight from Jira — independent of the imported quarter-target dashboards. Click any card to see the underlying stories.</p>
  <div class="ptab-bar" role="tablist">
    <button type="button" class="ptab" role="tab" :aria-selected="tab==='status'" :class="{ on: tab==='status' }" @click="tab='status'">Status</button>
    <template x-for="name in ['ERP','CRM','SMPP']" :key="name">
      <button type="button" class="ptab" role="tab" :aria-selected="tab===name" :class="{ on: tab===name }" @click="tab=name; loadIssues()" x-text="name"></button>
    </template>
  </div>
  <div class="overall clickable" role="button" tabindex="0" x-show="tab==='status'" x-cloak
       @click="open('All stories', null, null)" @keydown.enter="open('All stories', null, null)">
    <div class="chart-wrap"><canvas id="overallChart"></canvas></div>
    <div class="big-number">
      <strong>{{ $overall['percent_complete'] }}%</strong>
      <span>complete ({{ $overall['done'] }}/{{ $overall['total'] }})</span>
    </div>
    <x-status-chips :breakdown="$overall" />
  </div>
</section>

@if (!empty($types))
<section class="bytype" x-show="tab==='status'" x-cloak>
  <h2>By story type</h2>
  <div class="type-cards">
    @foreach ($types as $ty => $c)
      <div class="type-card clickable" role="button" tabindex="0"
           @click="open(@js($ty . ' stories'), 'type', @js($ty))" @keydown.enter="open(@js($ty . ' stories'), 'type', @js($ty))">
        <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>
</section>
@endif

<section class="projects" x-show="tab==='status'" x-cloak>
  <h2>By project</h2>
  @if (empty($projects))
    <p class="empty">No Jira issues for this period. Run a sync or pick another period.</p>
  @else
  <div class="toolbar">
    <input type="search" id="projSearch" data-filter="#projectCards" placeholder="Filter projects…">
  </div>
  @endif
  <div class="cards" id="projectCards">
    @foreach ($projects as $name => $c)
      <div class="card clickable" role="button" tabindex="0"
           @click="open(@js($name . ' stories'), 'project', @js($name))" @keydown.enter="open(@js($name . ' stories'), 'project', @js($name))">
        <div class="card-head">
          <h3>{{ $name }}</h3>
        </div>
        <div class="card-body">
          <div class="chart-mini"><canvas class="pie" data-statuses='@json($c['statuses'])'></canvas></div>
          <div class="card-stat">
            <strong>{{ $c['percent_complete'] }}%</strong>
            <span class="muted">{{ $c['done'] }}/{{ $c['total'] }} done</span>
          </div>
        </div>
        <x-status-chips :breakdown="$c" />
      </div>
    @endforeach
  </div>
</section>

{{-- Jira Stories tab: all stories (except Sub-task/Task/Bug), all-time, split into one
     table per project (ERP / CRM / SMPP), each with its own search + status filter. --}}
<section class="jira-issues" x-show="tab!=='status'" x-cloak>
  <p x-show="issuesLoading" class="muted">Loading stories…</p>
  <p x-show="issuesErr" x-cloak class="alert error" x-text="issuesErr"></p>
  <template x-if="tab!=='status' && issuesLoaded && !issuesLoading">
    <div class="jira-proj-block">
      <div class="jira-proj-head">
        <h3><span x-text="tab"></span> <small class="muted" x-text="'· ' + projRows(tab).length + ' stories'"></small></h3>
        <input type="search" class="jira-proj-search" x-model="proj[tab].q" @input="proj[tab].page=1" placeholder="Search…">
        <select class="jira-proj-status" x-model="proj[tab].status" @change="proj[tab].page=1">
          <option value="">All statuses</option>
          <template x-for="s in projStatuses(tab)" :key="s"><option :value="s" x-text="s"></option></template>
        </select>
      </div>
      <div style="overflow-x:auto">
        <table class="grid compact">
          <thead><tr><th>Story</th><th>Type</th><th>Assignee</th><th>Created</th><th>Updated</th><th>Status</th></tr></thead>
          <tbody>
            <template x-for="r in projPaged(tab)" :key="r.key">
              <tr>
                <td>
                  <a :href="'{{ $jiraBase ?? '' }}' + '/browse/' + r.key" target="_blank" rel="noopener" class="story-title" x-text="r.summary"></a>
                  <div class="story-key" x-text="r.key"></div>
                </td>
                <td><span class="type-badge" :class="'type-' + r.type.replace(/[-\s]/g,'').toLowerCase()" x-text="r.type"></span></td>
                <td x-text="r.assignee || '—'"></td>
                <td x-text="r.created || '—'"></td>
                <td x-text="r.updated || '—'"></td>
                <td><span class="badge" :style="'background:' + r.color + ';color:' + (r.fg || '#fff')" x-text="r.status"></span></td>
              </tr>
            </template>
            <template x-if="!projRows(tab).length">
              <tr><td colspan="6" class="empty">No stories.</td></tr>
            </template>
          </tbody>
        </table>
      </div>
      <div class="jira-pager" x-show="projRows(tab).length">
        <button type="button" class="jtab" :disabled="proj[tab].page<=1" @click="proj[tab].page=Math.max(1,proj[tab].page-1)">‹ Prev</button>
        <span class="muted" x-text="'Page ' + Math.min(proj[tab].page,projPageCount(tab)) + ' of ' + projPageCount(tab) + ' · ' + projRows(tab).length + ' stories'"></span>
        <button type="button" class="jtab" :disabled="proj[tab].page>=projPageCount(tab)" @click="proj[tab].page=Math.min(projPageCount(tab),proj[tab].page+1)">Next ›</button>
      </div>
    </div>
  </template>
</section>

{{-- Detailed Jira stories modal --}}
<div class="wk-modal" x-show="shown" x-cloak @keydown.escape.window="shown=false" style="display:flex">
  <div class="wk-modal-card js-modal-card">
    <div class="wk-modal-head">
      <strong x-text="title + ' · {{ $period }}'"></strong>
      <button type="button" class="wk-modal-close" @click="shown=false">✕</button>
    </div>
    <div class="wk-modal-body" style="display:block">
      <div class="toolbar" x-show="!loading && rows.length">
        <input type="search" x-model="q" placeholder="Search stories…">
        <span class="count" x-text="filtered().length + ' of ' + rows.length + ' stories'"></span>
      </div>
      <p x-show="loading" class="muted">Loading…</p>
      <p x-show="error" x-cloak class="alert error" x-text="error"></p>
      <div style="overflow-x:auto" x-show="!loading">
        <table class="grid compact">
          <thead><tr><th>Story</th><th>Type</th><th>Project</th><th>Assignee</th><th>Created</th><th>Updated</th><th>Status</th></tr></thead>
          <tbody>
            <template x-for="r in filtered()" :key="r.key">
              <tr>
                <td>
                  <a :href="'{{ $jiraBase ?? '' }}' + '/browse/' + r.key" target="_blank" rel="noopener" class="story-title" x-text="r.summary"></a>
                  <div class="story-key" x-text="r.key"></div>
                </td>
                <td><span class="type-badge" :class="'type-' + r.type.replace(/[-\s]/g,'').toLowerCase()" x-text="r.type"></span></td>
                <td x-text="r.project"></td>
                <td x-text="r.assignee || '—'"></td>
                <td x-text="r.created || '—'"></td>
                <td x-text="r.updated || '—'"></td>
                <td><span class="badge" :style="'background:' + r.color + ';color:' + (r.fg || '#fff')" x-text="r.status"></span></td>
              </tr>
            </template>
            <template x-if="!loading && !filtered().length">
              <tr><td colspan="7" class="empty">No stories.</td></tr>
            </template>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
</div>
@endsection

@push('scripts')
<script>
  function groupByColor(statuses) {
    const map = new Map();
    (statuses || []).forEach(function (s) {
      const key = s.color || '#cbd5e1';
      if (!map.has(key)) map.set(key, { color: key, count: 0, names: [] });
      const g = map.get(key); g.count += s.count; g.names.push(s.name);
    });
    return Array.from(map.values()).sort((a, b) => b.count - a.count);
  }
  function ring(canvas, statuses) {
    const g = groupByColor(statuses);
    return new Chart(canvas, {
      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, borderRadius: 4, hoverOffset: 6 }] },
      options: { responsive: true, maintainAspectRatio: false, cutout: '62%',
        plugins: { legend: { display: false }, tooltip: { enabled: false } } }
    });
  }
  ring(document.getElementById('overallChart'), @json($overall['statuses']));
  document.querySelectorAll('canvas.pie').forEach(function (cv) {
    let s; try { s = JSON.parse(cv.dataset.statuses || '[]'); } catch (e) { s = []; }
    ring(cv, s);
  });

  function jiraStatus() {
    return {
      shown: false, loading: false, error: '', title: '', rows: [], q: '',
      period: @json($period),
      // Jira Stories tab: all stories all-time, loaded once, then split into per-project
      // tables (ERP/CRM/SMPP) each with its own search + status filter + pagination.
      tab: 'status', issuesAll: [], issuesLoaded: false, issuesLoading: false, issuesErr: '', per: 50,
      proj: { ERP: { q: '', status: '', page: 1 }, CRM: { q: '', status: '', page: 1 }, SMPP: { q: '', status: '', page: 1 } },
      async loadIssues() {
        if (this.issuesLoaded || this.issuesLoading) return;
        this.issuesLoading = true; this.issuesErr = '';
        try {
          const res = await fetch('/jira-status/issues?scope=stories', { headers: { 'Accept': 'application/json' } });
          if (!res.ok) throw new Error('Failed to load stories (' + res.status + ')');
          const d = await res.json();
          this.issuesAll = d.issues || []; this.issuesLoaded = true;
        } catch (e) { this.issuesErr = e.message || 'Failed to load stories.'; }
        finally { this.issuesLoading = false; }
      },
      projRows(name) {
        const st = this.proj[name]; const t = st.q.trim().toLowerCase();
        return this.issuesAll.filter(r => r.project === name
          && (!st.status || r.status === st.status)
          && (!t || (r.summary + ' ' + r.key + ' ' + (r.assignee || '')).toLowerCase().includes(t)));
      },
      projStatuses(name) { return [...new Set(this.issuesAll.filter(r => r.project === name).map(r => r.status))].sort(); },
      projPageCount(name) { return Math.max(1, Math.ceil(this.projRows(name).length / this.per)); },
      projPaged(name) { const p = Math.min(this.proj[name].page, this.projPageCount(name)); const s = (p - 1) * this.per; return this.projRows(name).slice(s, s + this.per); },
      filtered() {
        const t = this.q.trim().toLowerCase();
        if (!t) return this.rows;
        return this.rows.filter(r => (r.summary + ' ' + r.key + ' ' + (r.assignee || '') + ' ' + r.status).toLowerCase().includes(t));
      },
      async open(title, key, value) {
        this.title = title; this.shown = true; this.loading = true; this.error = ''; this.rows = []; this.q = '';
        const params = new URLSearchParams({ period: this.period });
        if (key) params.set(key, value);
        try {
          const res = await fetch('/jira-status/issues?' + params.toString(), { headers: { 'Accept': 'application/json' } });
          if (!res.ok) throw new Error('Failed to load stories (' + res.status + ')');
          const d = await res.json();
          this.rows = d.issues || [];
        } catch (e) {
          this.error = e.message || 'Failed to load stories.';
        } finally {
          this.loading = false;
        }
      },
    };
  }
</script>
@endpush