{# output/templates/report_template.html #}
{% extends "base.html" %}

{% block title %}SnapCheck Audit Report{% endblock %}

{# Load Tailwind + Chart.js (brand.css already loaded by base.html) #}
{% block head_extra %}
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
{% endblock %}

{# Header actions (right side of the header) #}
{% block header_actions %}
  <button onclick="window.print()" class="sc-btn-primary">Export PDF</button>
  <a href="#" class="sc-btn-primary">Export JSON</a>
  <button class="sc-btn-primary" id="toggleTheme">Toggle Theme</button>
{% endblock %}

{% block content %}
  <div class="grid grid-cols-12 gap-4">
    <!-- Sidebar -->
    <aside class="col-span-12 md:col-span-3 lg:col-span-3 space-y-4">
      <input id="search"
             class="w-full rounded-xl border p-2 bg-white dark:bg-zinc-900"
             placeholder="Search findings…" />

      <div>
        <div class="text-xs uppercase opacity-60 mb-2">Severity</div>
        <div class="flex flex-wrap gap-2">
          {% for s in ['FAIL','WARN','PASS','INFO'] %}
          <label class="text-sm flex items-center gap-1">
            <input type="checkbox" class="severity-filter" value="{{ s }}" checked> {{ s }}
          </label>
          {% endfor %}
        </div>
      </div>

      <div>
        <div class="text-xs uppercase opacity-60 mb-2">Plugins</div>
        <div class="grid grid-cols-2 gap-2" id="pluginFilterList">
          {% for p in plugin_results.keys() if p != 'correlation' %}
          <label class="text-sm flex items-center gap-1">
            <input type="checkbox" class="plugin-filter" value="{{ p }}" checked> {{ p|replace('_',' ')|title }}
          </label>
          {% endfor %}
          {% if plugin_results.get('correlation') %}
          <label class="text-sm flex items-center gap-1">
            <input type="checkbox" class="plugin-filter" value="correlation" checked> Correlation
          </label>
          {% endif %}
        </div>
      </div>

      <div class="text-xs uppercase opacity-60 mb-2">GPT Summary</div>
      <div class="text-sm rounded-xl border p-3 bg-white dark:bg-zinc-900 whitespace-pre-wrap">
        {{ gpt_summary or '—' }}
      </div>
    </aside>

    <!-- Main -->
    <section class="col-span-12 md:col-span-9 lg:col-span-9">
      <!-- KPI strip (precomputed in html_report.py) -->
      <div class="grid sm:grid-cols-2 lg:grid-cols-6 gap-3 mb-4">
        {% for k in kpis %}
        <button class="sc-kpi rounded-2xl shadow p-3 text-left bg-white dark:bg-zinc-900 transition hover:shadow-lg hover:scale-[1.02]"
                data-kpi="{{ k.key }}" data-scroll-to="{{ k.scroll_to }}">
          <div class="text-xs opacity-70">{{ k.label }}</div>
          <div class="text-2xl font-semibold">{{ k.value }}</div>
        </button>
        {% endfor %}
      </div>

      <!-- Global Charts (renders if charts.cost exists) -->
      <section class="sc-card rounded-2xl shadow p-4 mb-4 bg-white dark:bg-zinc-900">
        <h3 class="text-lg font-semibold mb-2">Global Charts</h3>
        <div class="grid md:grid-cols-2 gap-4">
          <div class="h-48">
            <canvas id="chart-cost" height="160"></canvas>
          </div>
        </div>
      </section>

      <!-- Correlation (normalized) -->
      {% if plugin_results.get('correlation') %}
      {% set pdata = plugin_results.get('correlation') %}
      <section class="sc-card rounded-2xl shadow p-4 mb-4 bg-white dark:bg-zinc-900"
               data-plugin="correlation" data-status="{{ pdata.status }}">
        <header class="flex items-center justify-between mb-3">
          <div class="text-lg font-semibold">Correlation</div>
          <button class="underline text-sm" data-action="toggle">Collapse</button>
        </header>
        <div class="space-y-2" data-body>
          {% for it in pdata["items"] %}
          <article class="finding border rounded-xl p-3" data-severity="{{ it.severity }}">
            <div class="flex items-center justify-between">
              <strong class="text-sm">{{ it.title }}</strong>
              <span class="sc-pill sc-pill--{{ it.severity }}">{{ it.severity }}</span>
            </div>
            <p class="text-sm mt-1 whitespace-pre-wrap">{{ it.message }}</p>
            {% if it.meta %}
            <div class="mt-2 text-xs opacity-70">{{ it.meta }}</div>
            {% endif %}
          </article>
          {% endfor %}
        </div>
      </section>
      {% endif %}

      <!-- Plugin cards (normalized) -->
      {% for plugin_name, pdata in plugin_results.items() if plugin_name != 'correlation' %}
      <section class="sc-card rounded-2xl shadow p-4 mb-4 bg-white dark:bg-zinc-900"
               data-plugin="{{ plugin_name }}" data-status="{{ pdata.status }}">
        <header class="flex items-center justify-between mb-3">
          <div class="flex items-center gap-2">
            <span class="text-lg font-semibold">{{ pdata.title }}</span>
            <span class="sc-pill sc-pill--{{ pdata.status }}">{{ pdata.status }}</span>
          </div>
          <div class="flex items-center gap-2 text-sm">
            <button class="underline" data-action="toggle">Collapse</button>
          </div>
        </header>

        <div class="grid md:grid-cols-3 gap-4" data-body>
          <div class="md:col-span-2 space-y-2">
            {% for it in pdata["items"] %}
            <article class="finding border rounded-xl p-3" data-severity="{{ it.severity }}">
              <div class="flex items-center justify-between">
                <strong class="text-sm">{{ it.title }}</strong>
                <span class="sc-pill sc-pill--{{ it.severity }}">{{ it.severity }}</span>
              </div>
              <p class="text-sm mt-1 whitespace-pre-wrap">{{ it.message }}</p>
              {% if it.meta %}
              <div class="mt-2 text-xs opacity-70">{{ it.meta }}</div>
              {% endif %}
            </article>
            {% endfor %}
          </div>

          <aside class="space-y-3">
            <div class="h-40">
              <canvas id="chart-{{ plugin_name }}" height="160" class="rounded-xl border"></canvas>
            </div>
            <ul class="text-sm space-y-1">
              <li class="flex justify-between">
                <span class="opacity-70">Findings</span>
                <span>{{ pdata["items"]|length if pdata.get("items") else 0 }}</span>
              </li>
              <li class="flex justify-between">
                <span class="opacity-70">Status</span>
                <span>{{ pdata.status }}</span>
              </li>
            </ul>
          </aside>
        </div>
      </section>
      {% endfor %}
    </section>
  </div>
{% endblock %}

{# JS at end for best performance #}
{% block scripts_end %}
  <script>
    window.SNAPCHECK_CHARTS = {{ charts | default({}) | tojson | safe }};
  </script>
  {# Use a relative path so file:// loads work #}
  <script src="static/app.js"></script>
{% endblock %}