{% extends "base.html" %}
{% from "components/score_donut.html" import score_donut %}
{% from "components/severity_bar.html" import severity_bar %}
{% block title %}Scan {{ scan_id[:8] }} — ComplyForm Dashboard{% endblock %}
{% block content %}
<div class="max-w-7xl mx-auto px-4 py-6">

  {# Header #}
  <div class="flex items-start justify-between mb-6">
    <div>
      <a href="/dashboard/projects/{{ project.project_id }}" class="text-sm" style="color: var(--accent); text-decoration: none;">
        ← {{ project.project_label }}
      </a>
      <h1 class="text-xl font-semibold mt-2" style="color: var(--text-primary);">Scan from {{ scanned_at }}</h1>
      <div class="flex items-center gap-3 mt-1">
        <span class="text-xs" style="color: var(--text-secondary);">{{ frameworks | join(", ") }}</span>
      </div>
    </div>
    {% if can_share %}
    <button x-data x-on:click="$dispatch('open-share-modal')"
            class="px-3 py-1.5 text-sm rounded"
            style="background: var(--accent); color: #fff;">
      Share
    </button>
    {% endif %}
  </div>

  {# Score panel #}
  <div class="flex items-center gap-6 p-4 rounded-lg mb-6"
       style="background: var(--bg-surface); border: 1px solid var(--border-default);">
    {{ score_donut(score, 120) }}
    {{ severity_bar(severity_counts) }}
  </div>

  {# Tabs — only 3: Findings, Controls, Cloud Intelligence #}
  {% set tabs = [
      ("findings", "Findings", "/dashboard/partials/findings/"),
      ("controls", "Controls", "/dashboard/partials/controls/"),
      ("intelligence", "Cloud Intel", "/dashboard/partials/cloud-intelligence/"),
  ] %}
  <nav class="flex items-center gap-1 mb-4 border-b" style="border-color: var(--border-default);">
    {% for tab_id, tab_label, partial_path in tabs %}
    <a hx-get="{{ partial_path }}{{ project.project_id }}"
       hx-target="#tab-content"
       class="tab-link px-3 py-2 text-sm rounded-t"
       {% if loop.first %}aria-current="true"{% endif %}
       style="color: {% if loop.first %}var(--accent){% else %}var(--text-secondary){% endif %}; text-decoration: none; {% if loop.first %}border-bottom: 2px solid var(--accent);{% endif %}">
      {{ tab_label }}
    </a>
    {% endfor %}
  </nav>

  <div id="tab-content" style="view-transition-name: tab-content;"></div>

  {# Share modal #}
  {% if can_share %}
  <div x-data="{ showShareModal: false, shareUrl: '', shareToken: '', loading: false, error: '', scope: 'full', expiryDays: 7, password: '' }"
       @open-share-modal.window="showShareModal = true"
       x-cloak>
    <div x-show="showShareModal" style="position: fixed; inset: 0; z-index: 9998; background: rgba(0,0,0,0.5);" @click="showShareModal = false"></div>
    <div x-show="showShareModal" style="position: fixed; top: 20%; left: 50%; transform: translateX(-50%); z-index: 9999; width: 100%; max-width: 480px;">
      <div style="background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 12px; padding: 24px;">
        <h2 class="text-lg font-semibold mb-4" style="color: var(--text-primary);">Share this scan</h2>

        <template x-if="!shareUrl">
          <form @submit.prevent="
            loading = true; error = '';
            fetch('/dashboard/projects/{{ project.project_id }}/scans/{{ scan_id }}/share', {
              method: 'POST',
              headers: {'Content-Type': 'application/json', 'X-CSRF-Token': document.querySelector('meta[name=csrf-token]').content},
              body: JSON.stringify({expires_in_days: parseInt(expiryDays), password: password || null, scope: scope})
            }).then(r => r.json()).then(data => {
              if (data.share_url) { shareUrl = data.share_url; shareToken = data.token; }
              else { error = data.detail || 'Error creating link'; }
              loading = false;
            }).catch(() => { error = 'Network error'; loading = false; });
          ">
            <div class="mb-3">
              <label class="text-sm block mb-1" style="color: var(--text-secondary);">Scope</label>
              <select x-model="scope" class="text-sm px-2 py-1 rounded w-full" style="background: var(--bg-surface); border: 1px solid var(--border-default); color: var(--text-primary);">
                <option value="full">Full (all resource details)</option>
                <option value="summary">Summary (redacted resources)</option>
              </select>
            </div>
            <div class="mb-3">
              <label class="text-sm block mb-1" style="color: var(--text-secondary);">Expires in (days)</label>
              <input x-model="expiryDays" type="number" min="1" max="30" class="text-sm px-2 py-1 rounded w-full" style="background: var(--bg-surface); border: 1px solid var(--border-default); color: var(--text-primary);">
            </div>
            <div class="mb-4">
              <label class="text-sm block mb-1" style="color: var(--text-secondary);">Password (optional)</label>
              <input x-model="password" type="password" class="text-sm px-2 py-1 rounded w-full" style="background: var(--bg-surface); border: 1px solid var(--border-default); color: var(--text-primary);" placeholder="Leave empty for no password">
            </div>
            <div x-show="error" class="text-sm mb-3" style="color: var(--cf-critical);" x-text="error"></div>
            <button type="submit" :disabled="loading" class="px-4 py-2 text-sm rounded w-full" style="background: var(--accent); color: #fff;">
              <span x-show="!loading">Create share link</span>
              <span x-show="loading">Creating...</span>
            </button>
          </form>
        </template>

        <template x-if="shareUrl">
          <div>
            <p class="text-sm mb-2" style="color: var(--text-secondary);">Share this one-time URL:</p>
            <div class="p-2 rounded text-xs break-all" style="background: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-default);" x-text="shareUrl"></div>
            <button @click="navigator.clipboard.writeText(shareUrl)" class="mt-3 px-3 py-1.5 text-sm rounded" style="background: var(--accent); color: #fff;">
              Copy URL
            </button>
          </div>
        </template>

        <button @click="showShareModal = false" class="mt-3 text-sm" style="color: var(--text-muted);">Close</button>
      </div>
    </div>
  </div>
  {% endif %}

  {# Manage shared links #}
  {% if can_share %}
  <div class="mt-8">
    <h3 class="text-sm font-semibold mb-3" style="color: var(--text-primary);">Shared Links ({{ shared_links_count }})</h3>
    <div hx-get="/dashboard/partials/shared-links/{{ project.project_id }}" hx-trigger="load"></div>
  </div>
  {% endif %}

</div>
{% endblock %}