{% extends "base.html" %}

{% block title %}Plugins{% endblock %}

{% block page_title %}Plugin Manager{% endblock %}
{% block page_subtitle %}<span class="text-xs text-slate-500 ml-2">Overview of all loaded plugins</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 plugins or tools..." 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>
<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-3 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 Plugins</p>
    <div class="flex items-baseline gap-2">
      <p class="text-2xl font-display font-bold text-slate-100" id="stat-plugins">--</p>
      <span class="text-xs text-slate-500">loaded</span>
    </div>
  </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">Total Tools</p>
    <div class="flex items-baseline gap-2">
      <p class="text-2xl font-display font-bold text-nexo-400" id="stat-tools">--</p>
      <span class="text-xs text-slate-500">available</span>
    </div>
  </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">Avg Tools/Plugin</p>
    <p class="text-2xl font-display font-bold text-slate-100" id="stat-avg">--</p>
  </div>
</div>

<!-- Plugin grid -->
<div id="plugins-grid" class="grid grid-cols-2 gap-4">
  <div class="col-span-2 py-16 text-center text-sm text-slate-500">Loading plugins...</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="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z"/></svg>
  <p class="text-sm text-slate-500">No plugins match your search</p>
</div>
{% endblock %}

{% block scripts %}
<style>
  @keyframes pluginFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .plugin-card {
    animation: pluginFadeIn 0.4s ease-out both;
  }
</style>
<script>
  let allPlugins = [];

  function freshnessBadge(loadedAt) {
    if (!loadedAt) return '<span class="w-2 h-2 rounded-full bg-slate-600"></span>';
    const d = new Date(loadedAt);
    const diffH = (Date.now() - d.getTime()) / 3600000;
    if (diffH < 1) return '<span class="w-2 h-2 rounded-full bg-emerald-400 glow-dot" style="color:#34D399" title="Loaded recently"></span>';
    if (diffH < 24) return '<span class="w-2 h-2 rounded-full bg-amber-400" title="Loaded today"></span>';
    return '<span class="w-2 h-2 rounded-full bg-slate-500" title="Loaded ' + Math.floor(diffH / 24) + 'd ago"></span>';
  }

  function createdByBadge(author) {
    if (!author) return '';
    const colors = {
      'system': 'bg-slate-700/50 text-slate-400',
      'user': 'bg-nexo-500/15 text-nexo-400',
      'nexo': 'bg-nexo-500/15 text-nexo-400',
      'plugin': 'bg-blue-500/15 text-blue-400',
    };
    const c = colors[(author || '').toLowerCase()] || 'bg-slate-700/50 text-slate-400';
    return `<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold ${c}">${escapeHtml(author)}</span>`;
  }

  function renderPlugins(plugins) {
    const grid = document.getElementById('plugins-grid');
    const noResults = document.getElementById('no-results');

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

    noResults.classList.add('hidden');

    grid.innerHTML = plugins.map((p, i) => {
      const tools = p.tool_names || [];
      const toolCount = p.tools_count || tools.length || 0;
      const filename = p.filename || 'unknown';
      const ext = filename.split('.').pop();

      return `
        <div class="plugin-card bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card hover:border-nexo-500/30" style="animation-delay: ${i * 60}ms">
          <!-- Header -->
          <div class="flex items-start justify-between mb-3">
            <div class="flex items-center gap-3 min-w-0">
              <div class="w-10 h-10 rounded-lg bg-nexo-500/10 border border-nexo-500/20 flex items-center justify-center flex-shrink-0">
                <svg class="w-5 h-5 text-nexo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z"/></svg>
              </div>
              <div class="min-w-0">
                <p class="text-sm font-display font-semibold text-slate-100 truncate">${escapeHtml(filename)}</p>
                <div class="flex items-center gap-2 mt-0.5">
                  <span class="text-[10px] font-mono text-slate-500 uppercase">.${escapeHtml(ext)}</span>
                  ${createdByBadge(p.created_by)}
                </div>
              </div>
            </div>
            <div class="flex items-center gap-2 flex-shrink-0">
              ${freshnessBadge(p.loaded_at)}
              <span class="inline-flex items-center justify-center min-w-[28px] h-6 px-2 rounded-full bg-nexo-500/15 text-nexo-400 text-xs font-bold">${toolCount}</span>
            </div>
          </div>

          <!-- Tool tags -->
          ${tools.length ? `
            <div class="flex flex-wrap gap-1.5 mb-3">
              ${tools.slice(0, 12).map(t => `
                <span class="inline-flex items-center px-2 py-0.5 rounded-md text-[10px] font-mono bg-slate-800/80 text-slate-400 border border-slate-700/30 hover:border-nexo-500/30 hover:text-nexo-400 transition-colors">${escapeHtml(t)}</span>
              `).join('')}
              ${tools.length > 12 ? `<span class="inline-flex items-center px-2 py-0.5 rounded-md text-[10px] text-slate-500">+${tools.length - 12} more</span>` : ''}
            </div>
          ` : '<p class="text-xs text-slate-600 mb-3">No tools exported</p>'}

          <!-- Footer -->
          <div class="flex items-center justify-between pt-3 border-t border-slate-800/30">
            <span class="text-[10px] text-slate-600">${p.loaded_at ? 'Loaded ' + relativeTime(p.loaded_at) : 'Load time unknown'}</span>
            <span class="text-[10px] text-slate-500 font-mono">${toolCount} tool${toolCount !== 1 ? 's' : ''}</span>
          </div>
        </div>
      `;
    }).join('');
  }

  function applyFilters() {
    const search = (document.getElementById('search-input').value || '').toLowerCase().trim();

    let filtered = allPlugins;
    if (search) {
      filtered = filtered.filter(p =>
        (p.filename || '').toLowerCase().includes(search) ||
        (p.created_by || '').toLowerCase().includes(search) ||
        (p.tool_names || []).some(t => t.toLowerCase().includes(search))
      );
    }

    renderPlugins(filtered);
  }

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

    allPlugins = data.plugins || [];

    // Stats
    const totalPlugins = data.total || allPlugins.length;
    const totalTools = data.total_tools || allPlugins.reduce((sum, p) => sum + (p.tools_count || (p.tool_names || []).length || 0), 0);
    const avg = totalPlugins > 0 ? (totalTools / totalPlugins).toFixed(1) : '0';

    document.getElementById('stat-plugins').textContent = formatNumber(totalPlugins);
    document.getElementById('stat-tools').textContent = formatNumber(totalTools);
    document.getElementById('stat-avg').textContent = avg;

    applyFilters();
  }

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