{% extends "base.html" %}

{% block title %}Core Rules{% endblock %}

{% block page_title %}Core Rules Engine{% endblock %}
{% block page_subtitle %}<span class="text-xs text-slate-500 ml-2">View and understand system rules</span>{% endblock %}

{% block header_actions %}
<div class="relative">
  <svg class="w-3.5 h-3.5 absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
  <input type="text" id="search-input" placeholder="Search rules..." onkeyup="applyFilters()"
    class="text-xs bg-slate-800 border border-slate-700 rounded-md pl-8 pr-3 py-1.5 text-slate-300 placeholder-slate-500 w-48 focus:outline-none focus:border-nexo-500 focus:w-64 transition-all">
</div>
<select id="filter-type" onchange="applyFilters()" class="text-xs bg-slate-800 border border-slate-700 rounded-md px-2 py-1.5 text-slate-300 focus:outline-none focus:border-nexo-500">
  <option value="">All Types</option>
  <option value="blocking">Blocking</option>
  <option value="advisory">Advisory</option>
</select>
<select id="filter-importance" onchange="applyFilters()" class="text-xs bg-slate-800 border border-slate-700 rounded-md px-2 py-1.5 text-slate-300 focus:outline-none focus:border-nexo-500">
  <option value="">All Importance</option>
  <option value="5">5 Stars</option>
  <option value="4">4+ Stars</option>
  <option value="3">3+ Stars</option>
</select>
<button onclick="loadData()" class="text-xs text-slate-400 hover:text-slate-200 transition-colors px-2 py-1.5 rounded hover:bg-slate-800">
  <svg class="w-3.5 h-3.5 inline -mt-0.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
  Refresh
</button>
{% endblock %}

{% block content %}
<!-- Stats row -->
<div class="grid grid-cols-4 gap-4 mb-6">
  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
    <p class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-1">Total Rules</p>
    <p class="text-2xl font-display font-bold text-slate-100" id="stat-total">--</p>
  </div>
  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
    <p class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-1">Active</p>
    <p class="text-2xl font-display font-bold text-emerald-400" id="stat-active">--</p>
  </div>
  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
    <p class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-1">Blocking</p>
    <p class="text-2xl font-display font-bold text-red-400" id="stat-blocking">--</p>
  </div>
  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
    <p class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-1">Categories</p>
    <p class="text-2xl font-display font-bold text-nexo-400" id="stat-categories">--</p>
  </div>
</div>

<!-- Importance distribution -->
<div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card mb-6">
  <h2 class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-3">Importance Distribution</h2>
  <div class="flex items-end gap-3 h-20" id="importance-chart"></div>
</div>

<!-- Rules by category -->
<div id="rules-container" class="space-y-4">
  <div class="py-16 text-center text-sm text-slate-500">Loading rules...</div>
</div>

<!-- Empty state -->
<div id="no-results" class="hidden py-16 text-center">
  <svg class="w-12 h-12 mx-auto text-slate-700 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
  <p class="text-sm text-slate-500">No rules match your search</p>
</div>
{% endblock %}

{% block scripts %}
<script>
  let allRules = [];
  let categoriesData = {};

  function importanceStars(n) {
    const level = n || 1;
    let stars = '';
    for (let i = 1; i <= 5; i++) {
      stars += `<svg class="w-3.5 h-3.5 ${i <= level ? 'text-amber-400' : 'text-slate-700'}" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>`;
    }
    return `<div class="flex items-center gap-0.5">${stars}</div>`;
  }

  function typeBadge(type) {
    if (type === 'blocking') {
      return '<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-semibold uppercase bg-red-500/15 text-red-400 border border-red-500/20"><span class="w-1.5 h-1.5 rounded-full bg-red-400"></span>Blocking</span>';
    }
    return '<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-semibold uppercase bg-blue-500/15 text-blue-400 border border-blue-500/20"><span class="w-1.5 h-1.5 rounded-full bg-blue-400"></span>Advisory</span>';
  }

  function toggleCategory(btn) {
    const section = btn.closest('.rule-category');
    section.classList.toggle('collapsed');
    const items = section.querySelector('.category-items');
    const chevron = section.querySelector('.cat-chevron');
    if (section.classList.contains('collapsed')) {
      items.style.maxHeight = '0';
      chevron.style.transform = 'rotate(0deg)';
    } else {
      items.style.maxHeight = items.scrollHeight + 'px';
      chevron.style.transform = 'rotate(90deg)';
    }
  }

  function renderRules(rules, categories) {
    const container = document.getElementById('rules-container');
    const noResults = document.getElementById('no-results');

    // Group rules by category
    const grouped = {};
    rules.forEach(r => {
      const cat = r.category || 'Uncategorized';
      if (!grouped[cat]) grouped[cat] = [];
      grouped[cat].push(r);
    });

    const catNames = Object.keys(grouped).sort();

    if (!catNames.length) {
      container.innerHTML = '';
      noResults.classList.remove('hidden');
      return;
    }

    noResults.classList.add('hidden');

    container.innerHTML = catNames.map(cat => {
      const catRules = grouped[cat].sort((a, b) => (b.importance || 0) - (a.importance || 0));
      const blockingCount = catRules.filter(r => r.type === 'blocking').length;
      return `
        <div class="rule-category bg-slate-900/50 border border-slate-800/50 rounded-xl overflow-hidden card">
          <button onclick="toggleCategory(this)"
            class="w-full flex items-center gap-3 px-5 py-4 hover:bg-slate-800/30 transition-colors text-left">
            <svg class="w-4 h-4 cat-chevron text-slate-500 transition-transform flex-shrink-0" style="transform:rotate(90deg)" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"/>
            </svg>
            <span class="text-sm font-display font-semibold text-slate-100">${escapeHtml(cat)}</span>
            <span class="text-[10px] font-mono text-slate-500 ml-1">${catRules.length} rule${catRules.length !== 1 ? 's' : ''}</span>
            ${blockingCount > 0 ? `<span class="text-[10px] font-mono text-red-400 ml-auto">${blockingCount} blocking</span>` : ''}
          </button>
          <div class="category-items border-t border-slate-800/30 overflow-hidden transition-all duration-300" style="max-height: 2000px">
            <div class="divide-y divide-slate-800/20">
              ${catRules.map(r => {
                const isBlocking = r.type === 'blocking';
                const borderClass = isBlocking ? 'border-l-2 border-l-red-500/40' : 'border-l-2 border-l-blue-500/20';
                const inactiveClass = r.is_active === false ? 'opacity-50' : '';
                return `
                  <div class="px-5 py-3.5 hover:bg-slate-800/20 transition-colors ${borderClass} ${inactiveClass}">
                    <div class="flex items-start justify-between gap-4">
                      <div class="flex-1 min-w-0">
                        <div class="flex items-center gap-2 mb-1.5">
                          ${typeBadge(r.type)}
                          ${importanceStars(r.importance)}
                          ${r.is_active === false ? '<span class="text-[10px] px-1.5 py-0.5 rounded bg-slate-700/50 text-slate-500">inactive</span>' : ''}
                          <span class="text-[10px] font-mono text-slate-600 ml-auto">#${r.id || '--'}</span>
                        </div>
                        <p class="text-sm text-slate-200 leading-relaxed">${escapeHtml(r.rule || '--')}</p>
                        ${r.why ? `<p class="text-xs text-slate-500 mt-1 leading-relaxed">${escapeHtml(r.why)}</p>` : ''}
                      </div>
                      <div class="flex-shrink-0 mt-1">
                        <div class="w-8 h-4 rounded-full ${r.is_active !== false ? 'bg-emerald-500/30' : 'bg-slate-700/50'} relative">
                          <div class="absolute top-0.5 ${r.is_active !== false ? 'right-0.5 bg-emerald-400' : 'left-0.5 bg-slate-500'} w-3 h-3 rounded-full transition-all"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                `;
              }).join('')}
            </div>
          </div>
        </div>
      `;
    }).join('');
  }

  function renderImportanceChart(rules) {
    const chart = document.getElementById('importance-chart');
    const counts = [0, 0, 0, 0, 0];
    rules.forEach(r => {
      const imp = Math.min(Math.max((r.importance || 1) - 1, 0), 4);
      counts[imp]++;
    });
    const max = Math.max(...counts, 1);
    const labels = ['1', '2', '3', '4', '5'];
    const colors = ['bg-slate-600', 'bg-blue-500/60', 'bg-nexo-500/60', 'bg-amber-500/60', 'bg-red-500/60'];

    chart.innerHTML = counts.map((count, i) => {
      const height = (count / max * 100).toFixed(0);
      return `
        <div class="flex-1 flex flex-col items-center gap-1">
          <span class="text-[10px] font-mono text-slate-400">${count}</span>
          <div class="w-full rounded-t ${colors[i]} transition-all duration-500 hover:opacity-80" style="height: ${Math.max(height, 6)}%"></div>
          <div class="flex items-center gap-0.5">
            <svg class="w-3 h-3 text-amber-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
            <span class="text-[10px] text-slate-500">${labels[i]}</span>
          </div>
        </div>
      `;
    }).join('');
  }

  function applyFilters() {
    const search = (document.getElementById('search-input').value || '').toLowerCase().trim();
    const typeFilter = document.getElementById('filter-type').value;
    const impFilter = parseInt(document.getElementById('filter-importance').value) || 0;

    let filtered = allRules;

    if (search) {
      filtered = filtered.filter(r =>
        (r.rule || '').toLowerCase().includes(search) ||
        (r.category || '').toLowerCase().includes(search) ||
        (r.why || '').toLowerCase().includes(search)
      );
    }
    if (typeFilter) {
      filtered = filtered.filter(r => r.type === typeFilter);
    }
    if (impFilter) {
      filtered = filtered.filter(r => (r.importance || 1) >= impFilter);
    }

    renderRules(filtered, categoriesData);
  }

  async function loadData() {
    const data = await fetchJSON('/api/rules');
    if (!data) return;

    allRules = data.rules || [];
    categoriesData = data.categories || {};

    // Stats
    document.getElementById('stat-total').textContent = formatNumber(data.total || allRules.length);
    document.getElementById('stat-active').textContent = formatNumber(data.active || allRules.filter(r => r.is_active !== false).length);
    document.getElementById('stat-blocking').textContent = formatNumber(allRules.filter(r => r.type === 'blocking').length);
    document.getElementById('stat-categories').textContent = Object.keys(categoriesData).length || [...new Set(allRules.map(r => r.category))].filter(Boolean).length;

    renderImportanceChart(allRules);
    applyFilters();
  }

  loadData();
  setInterval(loadData, 60000);
</script>
{% endblock %}