{% extends "base.html" %}
{% block title %}Compliance Templates - DocuElevate{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-6" x-data="complianceApp()">
  <!-- Header -->
  <div class="mb-6">
    <div class="flex flex-col sm:flex-row justify-between items-start gap-4 mb-4">
      <div>
        <h1 class="text-3xl font-bold mb-1">Compliance Templates</h1>
        <p class="text-gray-500 text-sm">
          Pre-built compliance configurations for GDPR, HIPAA, and SOC 2.
          Apply templates with one click to align your instance with regulatory requirements.
        </p>
      </div>
      <button @click="refreshAll()"
              class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
              :disabled="loading"
              aria-label="Refresh compliance status">
        <i class="fas fa-sync-alt mr-2" :class="loading ? 'animate-spin' : ''" aria-hidden="true"></i> Refresh
      </button>
    </div>
  </div>

  <!-- Overall Status Banner -->
  <div class="mb-6 rounded-lg p-5 shadow"
       :class="{
         'bg-green-50 border border-green-200': summary.overall_status === 'compliant',
         'bg-yellow-50 border border-yellow-200': summary.overall_status === 'partial',
         'bg-red-50 border border-red-200': summary.overall_status === 'non_compliant' || summary.overall_status === 'unknown'
       }">
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
      <div class="flex items-center gap-3">
        <span class="inline-flex items-center justify-center h-12 w-12 rounded-full text-xl"
              :class="{
                'bg-green-100 text-green-600': summary.overall_status === 'compliant',
                'bg-yellow-100 text-yellow-600': summary.overall_status === 'partial',
                'bg-red-100 text-red-600': summary.overall_status === 'non_compliant' || summary.overall_status === 'unknown'
              }">
          <i :class="{
               'fas fa-check-circle': summary.overall_status === 'compliant',
               'fas fa-exclamation-triangle': summary.overall_status === 'partial',
               'fas fa-times-circle': summary.overall_status === 'non_compliant' || summary.overall_status === 'unknown'
             }" aria-hidden="true"></i>
        </span>
        <div>
          <h2 class="text-lg font-semibold"
              :class="{
                'text-green-800': summary.overall_status === 'compliant',
                'text-yellow-800': summary.overall_status === 'partial',
                'text-red-800': summary.overall_status === 'non_compliant' || summary.overall_status === 'unknown'
              }">
            <span x-text="summary.overall_status === 'compliant' ? 'All Checks Passing' :
                          summary.overall_status === 'partial' ? 'Partially Compliant' :
                          'Non-Compliant'"></span>
          </h2>
          <p class="text-sm text-gray-600">
            <span x-text="summary.total_passed"></span> of <span x-text="summary.total_checks"></span> checks passing across all templates
          </p>
        </div>
      </div>
      <div class="flex gap-4 text-center">
        <div>
          <div class="text-2xl font-bold text-green-700" x-text="summary.total_passed"></div>
          <div class="text-xs text-gray-500">Passed</div>
        </div>
        <div>
          <div class="text-2xl font-bold text-red-700" x-text="summary.total_failed"></div>
          <div class="text-xs text-gray-500">Failed</div>
        </div>
        <div>
          <div class="text-2xl font-bold text-gray-700" x-text="summary.total_checks"></div>
          <div class="text-xs text-gray-500">Total</div>
        </div>
      </div>
    </div>
  </div>

  <!-- Alert Messages -->
  <div x-show="alertMessage" x-cloak
       class="mb-4 rounded-lg p-4 flex items-center gap-3"
       :class="alertType === 'success' ? 'bg-green-50 border border-green-200 text-green-800' :
               'bg-red-50 border border-red-200 text-red-800'"
       role="alert">
    <i :class="alertType === 'success' ? 'fas fa-check-circle text-green-500' : 'fas fa-exclamation-circle text-red-500'" aria-hidden="true"></i>
    <span x-text="alertMessage"></span>
    <button @click="alertMessage = ''" class="ml-auto text-gray-400 hover:text-gray-600" aria-label="Dismiss alert">
      <i class="fas fa-times" aria-hidden="true"></i>
    </button>
  </div>

  <!-- Template Cards -->
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
    <template x-for="tmpl in templates" :key="tmpl.name">
      <div class="bg-white rounded-lg shadow-md overflow-hidden">
        <!-- Card Header -->
        <div class="p-5 border-b"
             :class="{
               'border-green-200 bg-green-50': tmpl._status === 'compliant',
               'border-yellow-200 bg-yellow-50': tmpl._status === 'partial',
               'border-gray-200': tmpl._status === 'not_applied' || tmpl._status === 'non_compliant'
             }">
          <div class="flex items-center justify-between mb-2">
            <h3 class="text-lg font-bold text-gray-800" x-text="tmpl.display_name"></h3>
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold"
                  :class="{
                    'bg-green-100 text-green-800': tmpl._status === 'compliant',
                    'bg-yellow-100 text-yellow-800': tmpl._status === 'partial',
                    'bg-red-100 text-red-800': tmpl._status === 'non_compliant',
                    'bg-gray-100 text-gray-600': tmpl._status === 'not_applied'
                  }">
              <span x-text="tmpl._status === 'compliant' ? 'Compliant' :
                            tmpl._status === 'partial' ? 'Partial' :
                            tmpl._status === 'non_compliant' ? 'Non-Compliant' :
                            'Not Applied'"></span>
            </span>
          </div>
          <p class="text-sm text-gray-600" x-text="tmpl.description"></p>
        </div>

        <!-- Check Results (when expanded) -->
        <div class="p-5" x-show="tmpl._expanded" x-collapse>
          <h4 class="text-sm font-semibold text-gray-700 mb-3">
            <i class="fas fa-clipboard-check mr-1" aria-hidden="true"></i>
            Compliance Checks (<span x-text="tmpl._statusData ? tmpl._statusData.passed : '?'"></span>/<span x-text="tmpl._statusData ? tmpl._statusData.total : '?'"></span>)
          </h4>
          <ul class="space-y-2">
            <template x-for="check in (tmpl._statusData ? tmpl._statusData.check_results : [])" :key="check.key">
              <li class="flex items-start gap-2 text-sm">
                <span class="mt-0.5 flex-shrink-0">
                  <i :class="check.passing ? 'fas fa-check-circle text-green-500' : 'fas fa-times-circle text-red-500'" aria-hidden="true"></i>
                </span>
                <div>
                  <span class="font-medium" x-text="check.label"></span>
                  <p class="text-xs text-gray-500" x-text="check.description"></p>
                  <p class="text-xs mt-0.5" x-show="!check.passing">
                    <span class="text-red-600">Current: <code x-text="check.actual"></code></span>
                    <span class="text-gray-400 mx-1">→</span>
                    <span class="text-green-600">Expected: <code x-text="check.expected"></code></span>
                  </p>
                </div>
              </li>
            </template>
          </ul>
        </div>

        <!-- Card Footer -->
        <div class="px-5 py-4 bg-gray-50 border-t flex items-center justify-between gap-2">
          <button @click="toggleExpand(tmpl)"
                  class="inline-flex items-center px-3 py-1.5 text-sm text-gray-600 hover:text-gray-800 hover:bg-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                  :aria-expanded="tmpl._expanded"
                  :aria-label="'Toggle details for ' + tmpl.display_name">
            <i class="fas mr-1" :class="tmpl._expanded ? 'fa-chevron-up' : 'fa-chevron-down'" aria-hidden="true"></i>
            <span x-text="tmpl._expanded ? 'Hide Details' : 'Show Details'"></span>
          </button>
          <button @click="applyTemplate(tmpl.name)"
                  :disabled="tmpl._applying"
                  :aria-busy="tmpl._applying"
                  class="inline-flex items-center px-4 py-2 text-sm font-medium rounded-md text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 min-h-[44px] min-w-[44px]"
                  :class="tmpl._applying ? 'bg-gray-400 cursor-not-allowed' : 'bg-blue-600 hover:bg-blue-700'"
                  :aria-label="'Apply ' + tmpl.display_name + ' template'"
                  aria-live="polite">>
            <i class="fas mr-1.5" :class="tmpl._applying ? 'fa-spinner animate-spin' : 'fa-bolt'" aria-hidden="true"></i>
            <span x-text="tmpl._applying ? 'Applying…' : 'Apply Template'"></span>
          </button>
        </div>

        <!-- Applied info -->
        <div x-show="tmpl.applied_at" class="px-5 py-2 bg-gray-50 border-t text-xs text-gray-500">
          <i class="fas fa-clock mr-1" aria-hidden="true"></i>
          Last applied: <span x-text="tmpl.applied_at ? new Date(tmpl.applied_at).toLocaleString() : 'Never'"></span>
          <span x-show="tmpl.applied_by"> by <span x-text="tmpl.applied_by"></span></span>
        </div>
      </div>
    </template>
  </div>

  <!-- Empty State -->
  <div x-show="!loading && templates.length === 0" class="text-center py-12 text-gray-500">
    <i class="fas fa-shield-alt text-4xl mb-4" aria-hidden="true"></i>
    <p class="text-lg font-medium">No compliance templates available</p>
    <p class="text-sm">Templates will appear here after seeding.</p>
  </div>

  <!-- Loading Spinner -->
  <div x-show="loading && templates.length === 0" class="text-center py-12">
    <i class="fas fa-spinner animate-spin text-3xl text-blue-500" aria-hidden="true"></i>
    <p class="text-gray-500 mt-2">Loading compliance templates…</p>
  </div>
</div>

<script>
function complianceApp() {
  return {
    templates: [],
    summary: { overall_status: 'unknown', total_checks: 0, total_passed: 0, total_failed: 0 },
    loading: true,
    alertMessage: '',
    alertType: 'success',

    async init() {
      await this.refreshAll();
    },

    async refreshAll() {
      this.loading = true;
      try {
        const [templatesRes, summaryRes] = await Promise.all([
          fetch('/api/compliance/templates'),
          fetch('/api/compliance/summary')
        ]);

        if (templatesRes.ok) {
          const data = await templatesRes.json();
          this.templates = data.map(t => ({
            ...t,
            _expanded: false,
            _applying: false,
            _status: t.status || 'not_applied',
            _statusData: null
          }));

          // Fetch status for each template
          for (const tmpl of this.templates) {
            this.fetchTemplateStatus(tmpl);
          }
        }

        if (summaryRes.ok) {
          this.summary = await summaryRes.json();
        }
      } catch (err) {
        console.error('Failed to load compliance data:', err);
        this.showAlert('error', 'Failed to load compliance data. Please try again.');
      } finally {
        this.loading = false;
      }
    },

    async fetchTemplateStatus(tmpl) {
      try {
        const res = await fetch(`/api/compliance/templates/${tmpl.name}/status`);
        if (res.ok) {
          tmpl._statusData = await res.json();
          tmpl._status = tmpl._statusData.status;
        }
      } catch (err) {
        console.error(`Failed to fetch status for ${tmpl.name}:`, err);
      }
    },

    async toggleExpand(tmpl) {
      tmpl._expanded = !tmpl._expanded;
      if (tmpl._expanded && !tmpl._statusData) {
        await this.fetchTemplateStatus(tmpl);
      }
    },

    async applyTemplate(name) {
      const tmpl = this.templates.find(t => t.name === name);
      if (!tmpl) return;

      if (!confirm(`Apply the ${tmpl.display_name} compliance template?\n\nThis will update your application settings to meet ${name.toUpperCase()} requirements.`)) {
        return;
      }

      tmpl._applying = true;
      this.alertMessage = '';

      try {
        const res = await fetch(`/api/compliance/templates/${name}/apply`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' }
        });

        const data = await res.json();

        if (res.ok && data.success) {
          this.showAlert('success', `${tmpl.display_name} template applied successfully.`);
          await this.refreshAll();
        } else {
          this.showAlert('error', data.detail || data.error || 'Failed to apply template.');
        }
      } catch (err) {
        console.error(`Failed to apply ${name}:`, err);
        this.showAlert('error', 'Network error. Please try again.');
      } finally {
        tmpl._applying = false;
      }
    },

    showAlert(type, message) {
      this.alertType = type;
      this.alertMessage = message;
      if (type === 'success') {
        setTimeout(() => { this.alertMessage = ''; }, 5000);
      }
    }
  };
}
</script>
{% endblock %}