{% extends "base.html" %}

{% block title %}Skills Lab{% endblock %}
{% block page_title %}Skills Lab{% endblock %}

{% block head %}
<style>
  .kanban-col {
    min-height: 300px;
    transition: background 0.2s;
  }
  .kanban-col:hover {
    background: rgba(30, 41, 59, 0.3);
  }
  .skill-card {
    transition: all 0.25s ease;
    cursor: pointer;
    animation: slideIn 0.3s ease-out forwards;
  }
  .skill-card:hover {
    border-color: rgba(124, 58, 237, 0.4);
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.1);
    transform: translateY(-1px);
  }
  .skill-card .detail-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    opacity: 0;
  }
  .skill-card.expanded .detail-panel {
    max-height: 600px;
    opacity: 1;
  }
  .tag-pill {
    transition: transform 0.15s;
  }
  .tag-pill:hover {
    transform: scale(1.05);
  }
  .trust-bar-fill {
    transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .level-badge-trace { background: rgba(148, 163, 184, 0.1); color: #94a3b8; border-color: rgba(148, 163, 184, 0.2); }
  .level-badge-draft { background: rgba(251, 191, 36, 0.1); color: #fbbf24; border-color: rgba(251, 191, 36, 0.2); }
  .level-badge-candidate { background: rgba(96, 165, 250, 0.1); color: #60a5fa; border-color: rgba(96, 165, 250, 0.2); }
  .level-badge-published { background: rgba(52, 211, 153, 0.1); color: #34d399; border-color: rgba(52, 211, 153, 0.2); }
  .level-badge-archived { background: rgba(107, 114, 128, 0.1); color: #6b7280; border-color: rgba(107, 114, 128, 0.2); }
  .drag-hint {
    cursor: grab;
    opacity: 0.3;
    transition: opacity 0.2s;
  }
  .skill-card:hover .drag-hint {
    opacity: 0.6;
  }
  @keyframes slideIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
</style>
{% endblock %}

{% block header_actions %}
<div class="flex items-center gap-2">
  <input type="text" id="skill-search" placeholder="Filter skills..."
    class="bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-xs text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-1 focus:ring-violet-500 w-52"
    oninput="filterSkills()">
</div>
{% endblock %}

{% block content %}
<!-- Stats Header -->
<div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-3 mb-6" id="stats-row">
  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 text-center">
    <div class="text-[10px] uppercase tracking-wider text-slate-500 font-semibold mb-1">Total Skills</div>
    <div class="text-2xl font-display font-bold text-slate-200" id="stat-total">--</div>
  </div>
  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 text-center">
    <div class="text-[10px] uppercase tracking-wider text-slate-500 font-semibold mb-1">Trace</div>
    <div class="text-2xl font-display font-bold text-slate-400" id="stat-trace">--</div>
  </div>
  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 text-center">
    <div class="text-[10px] uppercase tracking-wider text-slate-500 font-semibold mb-1">Draft</div>
    <div class="text-2xl font-display font-bold text-amber-400" id="stat-draft">--</div>
  </div>
  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 text-center">
    <div class="text-[10px] uppercase tracking-wider text-slate-500 font-semibold mb-1">Candidate</div>
    <div class="text-2xl font-display font-bold text-blue-400" id="stat-candidate">--</div>
  </div>
  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 text-center">
    <div class="text-[10px] uppercase tracking-wider text-slate-500 font-semibold mb-1">Published</div>
    <div class="text-2xl font-display font-bold text-emerald-400" id="stat-published">--</div>
  </div>
  <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 text-center">
    <div class="text-[10px] uppercase tracking-wider text-slate-500 font-semibold mb-1">Archived</div>
    <div class="text-2xl font-display font-bold text-gray-500" id="stat-archived">--</div>
  </div>
</div>

<!-- Top Skills by Usage -->
<div class="mb-6">
  <h2 class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-3">Top Skills by Usage</h2>
  <div class="flex gap-3 overflow-x-auto pb-2" id="top-skills">
    <div class="text-xs text-slate-600 py-3">Loading...</div>
  </div>
</div>

<!-- Kanban Board -->
<div class="mb-6">
  <h2 class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-3">Skill Lifecycle</h2>
  <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-3" id="kanban-board">
    <!-- Columns generated by JS -->
  </div>
</div>

<!-- Recent Usage Timeline -->
<div>
  <h2 class="text-xs uppercase tracking-wider text-slate-500 font-semibold mb-3">Recent Usage</h2>
  <div class="space-y-2" id="usage-timeline">
    <div class="text-xs text-slate-600 text-center py-6">Loading usage data...</div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  const REFRESH_MS = 60000;
  const LEVELS = ['trace', 'draft', 'candidate', 'published', 'archived'];
  const LEVEL_COLORS = {
    trace: { bg: 'bg-slate-500/10', border: 'border-slate-500/20', text: 'text-slate-400', dot: 'bg-slate-400' },
    draft: { bg: 'bg-amber-500/10', border: 'border-amber-500/20', text: 'text-amber-400', dot: 'bg-amber-400' },
    candidate: { bg: 'bg-blue-500/10', border: 'border-blue-500/20', text: 'text-blue-400', dot: 'bg-blue-400' },
    published: { bg: 'bg-emerald-500/10', border: 'border-emerald-500/20', text: 'text-emerald-400', dot: 'bg-emerald-400' },
    archived: { bg: 'bg-gray-500/10', border: 'border-gray-500/20', text: 'text-gray-500', dot: 'bg-gray-500' },
  };

  let allSkills = [];

  const TAG_COLORS = [
    'bg-violet-500/15 text-violet-300', 'bg-cyan-500/15 text-cyan-300',
    'bg-pink-500/15 text-pink-300', 'bg-emerald-500/15 text-emerald-300',
    'bg-amber-500/15 text-amber-300', 'bg-blue-500/15 text-blue-300',
    'bg-rose-500/15 text-rose-300', 'bg-indigo-500/15 text-indigo-300',
  ];

  function tagColor(tag) {
    let hash = 0;
    for (let i = 0; i < tag.length; i++) hash = tag.charCodeAt(i) + ((hash << 5) - hash);
    return TAG_COLORS[Math.abs(hash) % TAG_COLORS.length];
  }

  function trustColor(score) {
    if (score >= 0.8) return 'bg-emerald-500';
    if (score >= 0.5) return 'bg-violet-500';
    if (score >= 0.3) return 'bg-amber-500';
    return 'bg-red-500';
  }

  function renderSkillCard(skill) {
    const level = (skill.level || 'trace').toLowerCase();
    const colors = LEVEL_COLORS[level] || LEVEL_COLORS.trace;
    const trust = skill.trust_score != null ? skill.trust_score : 0;
    const tags = skill.tags || [];
    const useCount = skill.use_count || 0;
    const steps = skill.steps || [];
    const gotchas = skill.gotchas || [];
    const desc = skill.description || '';

    const tagsHtml = tags.slice(0, 5).map(t =>
      `<span class="tag-pill text-[10px] px-1.5 py-0.5 rounded-full ${tagColor(t)}">${escapeHtml(t)}</span>`
    ).join('');

    const stepsHtml = steps.length > 0
      ? `<div class="mt-3"><div class="text-[10px] uppercase tracking-wider text-slate-500 font-semibold mb-1">Steps</div><ol class="list-decimal list-inside space-y-0.5">${steps.map(s => `<li class="text-xs text-slate-400">${escapeHtml(typeof s === 'string' ? s : s.description || JSON.stringify(s))}</li>`).join('')}</ol></div>`
      : '';

    const gotchasHtml = gotchas.length > 0
      ? `<div class="mt-3"><div class="text-[10px] uppercase tracking-wider text-amber-500/60 font-semibold mb-1">Gotchas</div><ul class="space-y-0.5">${gotchas.map(g => `<li class="text-xs text-amber-300/70">&#x26A0; ${escapeHtml(typeof g === 'string' ? g : JSON.stringify(g))}</li>`).join('')}</ul></div>`
      : '';

    return `<div class="skill-card bg-slate-900/50 border border-slate-800/50 rounded-xl p-3 mb-2" data-name="${escapeHtml(skill.name || '')}" data-level="${level}" onclick="this.classList.toggle('expanded')">
      <div class="flex items-start justify-between mb-1.5">
        <div class="flex items-center gap-1.5 min-w-0">
          <svg class="w-3 h-3 drag-hint text-slate-600 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><circle cx="6" cy="5" r="1.5"/><circle cx="14" cy="5" r="1.5"/><circle cx="6" cy="10" r="1.5"/><circle cx="14" cy="10" r="1.5"/><circle cx="6" cy="15" r="1.5"/><circle cx="14" cy="15" r="1.5"/></svg>
          <span class="text-sm font-medium text-slate-200 truncate">${escapeHtml(skill.name || 'Unnamed')}</span>
        </div>
        <span class="text-[10px] font-mono text-slate-600 flex-shrink-0 ml-2">#${skill.id || '?'}</span>
      </div>

      <!-- Trust score bar -->
      <div class="flex items-center gap-2 mb-2">
        <div class="flex-1 h-1.5 bg-slate-800 rounded-full overflow-hidden">
          <div class="trust-bar-fill h-full rounded-full ${trustColor(trust)}" style="width:${(trust * 100).toFixed(0)}%"></div>
        </div>
        <span class="text-[10px] font-mono text-slate-500">${trust.toFixed(2)}</span>
      </div>

      <div class="flex items-center gap-2 flex-wrap">
        <span class="text-[10px] font-mono text-slate-500">${useCount} uses</span>
        ${tagsHtml}
      </div>

      <!-- Expandable detail -->
      <div class="detail-panel">
        <div class="mt-3 pt-3 border-t border-slate-800/50">
          ${desc ? `<p class="text-xs text-slate-400 leading-relaxed mb-2">${escapeHtml(desc)}</p>` : ''}
          ${stepsHtml}
          ${gotchasHtml}
        </div>
      </div>
    </div>`;
  }

  function renderKanban(skills) {
    const board = document.getElementById('kanban-board');
    const grouped = {};
    LEVELS.forEach(l => grouped[l] = []);
    skills.forEach(s => {
      const level = (s.level || 'trace').toLowerCase();
      if (grouped[level]) grouped[level].push(s);
      else grouped.trace.push(s);
    });

    board.innerHTML = LEVELS.map(level => {
      const colors = LEVEL_COLORS[level];
      const items = grouped[level];
      return `<div class="kanban-col ${colors.bg} border ${colors.border} rounded-xl p-3">
        <div class="flex items-center gap-2 mb-3 pb-2 border-b ${colors.border}">
          <span class="w-2 h-2 rounded-full ${colors.dot}"></span>
          <span class="text-xs uppercase tracking-wider ${colors.text} font-semibold">${level}</span>
          <span class="text-[10px] font-mono text-slate-600 ml-auto">${items.length}</span>
        </div>
        <div class="space-y-0">
          ${items.length === 0
            ? `<div class="text-[10px] text-slate-600 text-center py-4">No skills</div>`
            : items.map(renderSkillCard).join('')}
        </div>
      </div>`;
    }).join('');
  }

  function renderTopSkills(skills) {
    const container = document.getElementById('top-skills');
    const sorted = [...skills].sort((a, b) => (b.use_count || 0) - (a.use_count || 0)).slice(0, 8);
    if (sorted.length === 0) {
      container.innerHTML = '<div class="text-xs text-slate-600 py-3">No skill usage data</div>';
      return;
    }
    const maxUse = sorted[0].use_count || 1;
    container.innerHTML = sorted.map(s => {
      const pct = ((s.use_count || 0) / maxUse * 100).toFixed(0);
      const level = (s.level || 'trace').toLowerCase();
      const colors = LEVEL_COLORS[level] || LEVEL_COLORS.trace;
      return `<div class="flex-shrink-0 bg-slate-900/50 border border-slate-800/50 rounded-xl p-3 w-44">
        <div class="text-sm font-medium text-slate-200 truncate mb-1">${escapeHtml(s.name || 'Unnamed')}</div>
        <div class="flex items-center gap-2 mb-1">
          <div class="flex-1 h-1 bg-slate-800 rounded-full overflow-hidden">
            <div class="h-full rounded-full bg-violet-500" style="width:${pct}%"></div>
          </div>
        </div>
        <div class="flex items-center justify-between">
          <span class="text-[10px] font-mono text-slate-500">${s.use_count || 0} uses</span>
          <span class="text-[10px] px-1 py-0.5 rounded level-badge-${level}">${level}</span>
        </div>
      </div>`;
    }).join('');
  }

  function renderUsageTimeline(usage) {
    const container = document.getElementById('usage-timeline');
    if (!usage || usage.length === 0) {
      container.innerHTML = '<div class="text-xs text-slate-600 text-center py-6">No recent usage</div>';
      return;
    }
    container.innerHTML = usage.slice(0, 20).map(u => {
      const skillName = u.skill_name || u.name || `Skill #${u.skill_id || '?'}`;
      const when = u.created_at ? relativeTime(u.created_at) : '';
      const result = u.result || u.outcome || '';
      return `<div class="flex items-center gap-3 bg-slate-900/30 border border-slate-800/30 rounded-lg px-3 py-2">
        <div class="w-1.5 h-1.5 rounded-full bg-violet-500 flex-shrink-0"></div>
        <span class="text-xs text-slate-300 font-medium">${escapeHtml(skillName)}</span>
        ${result ? `<span class="text-[10px] px-1.5 py-0.5 rounded ${result === 'success' ? 'bg-emerald-500/10 text-emerald-400' : 'bg-red-500/10 text-red-400'}">${escapeHtml(result)}</span>` : ''}
        <span class="text-[10px] text-slate-600 font-mono ml-auto">${escapeHtml(when)}</span>
      </div>`;
    }).join('');
  }

  function filterSkills() {
    const q = document.getElementById('skill-search').value.trim().toLowerCase();
    const filtered = q ? allSkills.filter(s =>
      (s.name || '').toLowerCase().includes(q) ||
      (s.description || '').toLowerCase().includes(q) ||
      (s.tags || []).some(t => t.toLowerCase().includes(q))
    ) : allSkills;
    renderKanban(filtered);
  }

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

    allSkills = data.skills || [];
    const usage = data.usage || [];
    const levels = data.levels || {};

    // Stats
    document.getElementById('stat-total').textContent = formatNumber(allSkills.length);
    const countByLevel = {};
    LEVELS.forEach(l => countByLevel[l] = 0);
    allSkills.forEach(s => {
      const l = (s.level || 'trace').toLowerCase();
      if (countByLevel[l] !== undefined) countByLevel[l]++;
    });
    LEVELS.forEach(l => {
      const el = document.getElementById(`stat-${l}`);
      if (el) el.textContent = formatNumber(levels[l] != null ? levels[l] : countByLevel[l]);
    });

    renderKanban(allSkills);
    renderTopSkills(allSkills);
    renderUsageTimeline(usage);
  }

  // Init
  loadSkills();
  setInterval(loadSkills, REFRESH_MS);
</script>
{% endblock %}