{% extends "base.html" %}
{% block title %}Trends - craft-dashboard{% endblock %}
{% block head %}
<script src="/static/vendor/chart.umd.min.js"></script>
{% endblock %}

{% block layout %}
<div class="p-strip">
  <div class="row">
    <div class="col-12">
      {% include "stats/partials/tabs.html" %}
      <h2>Issue &amp; PR trends</h2>
      <div id="trends-loading" style="text-align:center;padding:2rem;">
        <i class="p-icon--spinner u-animation--spin"></i> Loading trend data...
      </div>
    </div>
  </div>
</div>

<!-- Filters Section -->
<div class="p-strip is-shallow">
  <div class="row">
    <div class="col-12" style="display:flex;flex-wrap:wrap;gap:1.5rem;align-items:flex-end;">

      <!-- Author Groups -->
      <div class="filter-group">
        <label>Author Groups</label>
        <div class="multiselect" data-name="author-groups" data-hidden="author-groups-hidden">
          <div class="multiselect__input-wrap" tabindex="0" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-label="Select author groups">
            <span class="multiselect__placeholder">All groups</span>
            <div class="multiselect__chips"></div>
          </div>
          <div class="multiselect__dropdown u-hide">
            <div class="multiselect__options" role="listbox">
              <label class="multiselect__option" role="option">
                <input type="checkbox" value="maintainers" checked /> Maintainers
              </label>
              <label class="multiselect__option" role="option">
                <input type="checkbox" value="contributors" checked /> Contributors
              </label>
              <label class="multiselect__option" role="option">
                <input type="checkbox" value="bots" checked /> Bots
              </label>
            </div>
          </div>
          <input type="hidden" id="author-groups-hidden" name="author-groups" value="maintainers,contributors,bots" />
        </div>
      </div>

      <!-- Type Filter -->
      <div class="filter-group">
        <label>Type</label>
        <div class="multiselect" data-name="trend-type" data-hidden="trend-type-hidden">
          <div class="multiselect__input-wrap" tabindex="0" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-label="Select types">
            <span class="multiselect__placeholder">All types</span>
            <div class="multiselect__chips"></div>
          </div>
          <div class="multiselect__dropdown u-hide">
            <div class="multiselect__options" role="listbox">
              <label class="multiselect__option" role="option">
                <input type="checkbox" value="issue" checked /> Issues
              </label>
              <label class="multiselect__option" role="option">
                <input type="checkbox" value="pull_request" checked /> PRs
              </label>
            </div>
          </div>
          <input type="hidden" id="trend-type-hidden" name="trend-type" value="issue,pull_request" />
        </div>
      </div>

      <!-- Projects Filter -->
      <div class="filter-group">
        <label>Projects</label>
        <div class="multiselect" data-name="trend-projects" data-hidden="trend-projects-hidden">
          <div class="multiselect__input-wrap" tabindex="0" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-label="Select projects">
            <span class="multiselect__placeholder">All projects</span>
            <div class="multiselect__chips"></div>
          </div>
          <div class="multiselect__dropdown u-hide">
            <div class="multiselect__options" role="listbox">
              <label class="multiselect__option" role="option">
                <input type="checkbox" value="all-projects" checked /> All projects
              </label>
              {% for p in project_names %}
              <label class="multiselect__option" role="option">
                <input type="checkbox" value="{{ p }}" /> {{ p }}
              </label>
              {% endfor %}
            </div>
          </div>
          <input type="hidden" id="trend-projects-hidden" name="trend-projects" value="all-projects" />
        </div>
      </div>

      <!-- Date Range -->
      <div class="filter-group">
        <label>Date Range</label>
        <div style="display:flex;gap:0.5rem;align-items:center;">
          <input type="date" id="date-start" />
          <span>to</span>
          <input type="date" id="date-end" />
        </div>
      </div>

      <!-- Action buttons -->
      <div class="filter-group" style="align-self:flex-end;">
        <div style="display:flex;gap:0.5rem;align-items:center;">
          <button class="p-button--positive is-small" id="btn-date-apply">Apply</button>
          <button class="p-button--neutral is-small" id="btn-date-reset">Clear filters</button>
        </div>
      </div>

      <!-- Tooltip toggle -->
      <div class="filter-group" style="align-self:flex-end;">
        <label style="display:flex;align-items:center;gap:0.4rem;cursor:pointer;">
          <input type="checkbox" id="hide-tooltips" />
          Hide tooltips
        </label>
      </div>

    </div>
  </div>
</div>

<div class="row"><hr class="p-rule" /></div>

<!-- Open issues over time -->
<div class="p-strip">
  <div class="row">
    <div class="col-12">
      <h3 class="p-heading--4">Open issues over time</h3>
    </div>
  </div>
  <div class="row">
    <div class="col-12" style="position:relative;height:600px;width:100%;">
      <canvas id="issues-chart" role="img" aria-label="Line chart showing open issues over time for selected projects" style="width:100%;height:600px;"></canvas>
    </div>
  </div>
</div>

<div class="row"><hr class="p-rule" /></div>

<!-- Median issue age over time -->
<div class="p-strip">
  <div class="row">
    <div class="col-12">
      <h3 class="p-heading--4">Median issue age over time</h3>
    </div>
  </div>
  <div class="row">
    <div class="col-12" style="position:relative;height:600px;width:100%;">
      <canvas id="median-age-chart" role="img" aria-label="Line chart showing median issue age over time for selected projects" style="width:100%;height:600px;"></canvas>
    </div>
  </div>
</div>

<div class="row"><hr class="p-rule" /></div>

<!-- Issues closed per week -->
<div class="p-strip">
  <div class="row">
    <div class="col-12">
      <h3 class="p-heading--4">Issues closed per week</h3>
    </div>
  </div>
  <div class="row">
    <div class="col-12" style="position:relative;height:600px;width:100%;">
      <canvas id="closed-chart" role="img" aria-label="Bar chart showing issues closed per week for selected projects" style="width:100%;height:600px;"></canvas>
    </div>
  </div>
</div>

<div class="row"><hr class="p-rule" /></div>

<!-- Annual delivery & project state -->
<div class="p-strip">
  <div class="row">
    <div class="col-12">
      <h3 class="p-heading--4">Annual delivery &amp; project state</h3>
    </div>
  </div>
  <div class="row--25-75">
    <div class="col">
      <div id="snapshot-summary" style="display: flex; flex-direction: column; gap: 1rem; margin-top: 0.5rem;">
        <div>
          <span class="p-text--small">Closed in last year</span>
          <div id="snap-closed-year-total" style="font-size: 1.4rem; font-weight: 700;">—</div>
          <span id="snap-closed-year-breakdown" class="p-text--small p-text--muted"></span>
        </div>
        <div>
          <span class="p-text--small">Current open backlog</span>
          <div id="snap-open-total" style="font-size: 1.2rem; font-weight: 600;">—</div>
          <span id="snap-open-breakdown" class="p-text--small p-text--muted"></span>
        </div>
        <div>
          <span class="p-text--small">Current median age</span>
          <div id="snap-median-age" style="font-size: 1.2rem; font-weight: 600;">—</div>
          <span id="snap-median-breakdown" class="p-text--small p-text--muted"></span>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="u-table-container">
        <table data-sortable class="p-table--sortable table-fixed u-no-margin--bottom" id="snapshot-table">
          <colgroup>
            <col style="width: 25%;">
            <col style="width: 15%;">
            <col style="width: 15%;">
            <col style="width: 15%;">
            <col style="width: 15%;">
            <col style="width: 15%;">
          </colgroup>
          <thead>
            <tr>
              <th>Repository</th>
              <th class="u-align--right">Closed (Year)</th>
              <th class="u-align--right">Open Issues</th>
              <th class="u-align--right">Open PRs</th>
              <th class="u-align--right">Issue Age</th>
              <th class="u-align--right">PR Age</th>
            </tr>
          </thead>
          <tbody id="snapshot-table-body">
            <!-- Populated and filtered via trends.js -->
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/multiselect.js"></script>
<script src="/static/js/table-sort.js"></script>
<script type="module" src="/static/js/trends.js?v={{ cache_bust }}"></script>
{% endblock %}