---
import kitsData from '../data/kits.json';

interface Props {
  limit?: number;
  category?: string;
}

const { limit, category } = Astro.props;

let kits = kitsData.kits;

if (category) {
  kits = kits.filter(k => k.category === category);
}

if (limit) {
  kits = kits.slice(0, limit);
}
---

<section class="py-12 px-4" id="kits-section">
  <div class="max-w-6xl mx-auto">
    <div class="flex items-center justify-between mb-8">
      <div>
        <h2 class="text-2xl font-bold text-warm-text-primary mb-1">Kits</h2>
        <p class="text-warm-text-secondary text-sm">Complete bundles to jumpstart your project</p>
      </div>
      <a href="/kits" class="btn-ghost text-sm">
        View all
        <i class="ph ph-arrow-right"></i>
      </a>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      {kits.map((kit) => (
        <div class="kit-card group cursor-pointer" data-kit-id={kit.id}>
          <div class="flex items-start gap-4 mb-4">
            <div class="w-12 h-12 rounded-warm bg-warm-accent/10 flex items-center justify-center flex-shrink-0 group-hover:bg-warm-accent/20 transition-colors">
              <i class="ph-bold ph-package text-2xl text-warm-accent"></i>
            </div>
            <div class="flex-1 min-w-0">
              <h3 class="font-semibold text-warm-text-primary mb-1 truncate">{kit.name}</h3>
              <p class="text-xs text-warm-text-tertiary line-clamp-2">{kit.description}</p>
            </div>
          </div>

          <div class="flex flex-wrap gap-1.5 mb-4">
            <span class="px-2 py-0.5 rounded-full text-2xs font-medium bg-warm-accent/10 text-warm-accent">
              {kit.itemCount} items
            </span>
            <span class="px-2 py-0.5 rounded-full text-2xs font-medium bg-warm-bg-elevated text-warm-text-tertiary">
              v{kit.version}
            </span>
            <span class="kit-usage-badge hidden px-2 py-0.5 rounded-full text-2xs font-medium bg-warm-bg-elevated text-warm-text-tertiary" data-kit-id={kit.id}>
              <i class="ph ph-fire text-warm-accent"></i>
              <span class="usage-count">0</span>
            </span>
          </div>

          <div class="flex flex-wrap gap-1 mb-4">
            {kit.tags.slice(0, 4).map((tag) => (
              <span class="text-2xs text-warm-text-muted">#{tag}</span>
            ))}
          </div>

          <div class="flex items-center gap-2 pt-3 border-t border-warm-border-subtle">
            <a
              href={kit.downloadUrl}
              class="btn-ghost text-xs py-1.5 px-3 flex-1 text-center"
              download
              onclick="event.stopPropagation()"
            >
              <i class="ph ph-download-simple"></i>
              Download ZIP
            </a>
            <button
              class="btn-primary text-xs py-1.5 px-3 flex-1 install-kit-btn"
              data-kit-id={kit.id}
            >
              <i class="ph ph-terminal"></i>
              Copy CLI
            </button>
          </div>
        </div>
      ))}
    </div>
  </div>
</section>

<style>
  .kit-card {
    @apply bg-warm-bg-surface border border-warm-border-subtle rounded-warm p-5;
    @apply hover:border-warm-accent/30 hover:bg-warm-bg-elevated transition-all;
  }
</style>

<script>
  // Kit usage stats cache
  const kitStatsCache: Record<string, { copies: number; downloads: number; total: number }> = {};

  // Format count for display
  function formatKitCount(count: number): string {
    if (count >= 1000) return `${(count / 1000).toFixed(1)}k`;
    return String(count);
  }

  // Track kit action to server
  async function trackKitAction(kitId: string, action: 'copy' | 'download') {
    try {
      await fetch('/api/track-kit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ kit: kitId, action }),
      });
    } catch {
      // Silent fail
    }
  }

  // Fetch kit stats
  async function fetchKitStats() {
    try {
      const res = await fetch('/api/kit-stats');
      if (res.ok) {
        const data = await res.json();
        Object.assign(kitStatsCache, data);
        updateKitUsageDisplay();
      }
    } catch {
      // Silent fail
    }
  }

  // Update usage display on kit cards
  function updateKitUsageDisplay() {
    document.querySelectorAll('.kit-usage-badge').forEach(badge => {
      const el = badge as HTMLElement;
      const kitId = el.dataset.kitId || '';
      const stats = kitStatsCache[kitId];
      const countEl = el.querySelector('.usage-count');

      if (stats && stats.total > 0 && countEl) {
        countEl.textContent = formatKitCount(stats.total);
        el.classList.remove('hidden');
      }
    });
  }

  function setupKitsGrid() {
    // Fetch stats
    fetchKitStats();

    // Handle CLI copy
    document.querySelectorAll('.install-kit-btn').forEach(btn => {
      // Remove existing listeners to prevent duplicates
      const newBtn = btn.cloneNode(true);
      btn.parentNode?.replaceChild(newBtn, btn);

      newBtn.addEventListener('click', (e) => {
        e.stopPropagation();
        e.preventDefault();
        const target = e.currentTarget as HTMLElement;
        const kitId = target.dataset.kitId || '';
        const command = `npx vibery kit install ${kitId}`;

        navigator.clipboard.writeText(command).then(() => {
          // Track usage
          trackKitAction(kitId, 'copy');

          // Update local cache
          if (!kitStatsCache[kitId]) {
            kitStatsCache[kitId] = { copies: 0, downloads: 0, total: 0 };
          }
          kitStatsCache[kitId].copies++;
          kitStatsCache[kitId].total++;
          updateKitUsageDisplay();

          const originalHTML = target.innerHTML;
          target.innerHTML = '<i class="ph ph-check"></i> Copied!';
          target.classList.add('bg-green-600');

          setTimeout(() => {
            target.innerHTML = originalHTML;
            target.classList.remove('bg-green-600');
          }, 2000);
        });
      });
    });

    // Handle card click to show details
    document.querySelectorAll('.kit-card').forEach(card => {
      card.addEventListener('click', (e) => {
        if ((e.target as HTMLElement).closest('.install-kit-btn, a')) return;
        const kitId = (e.currentTarget as HTMLElement).dataset.kitId;
        window.location.href = `/kits/${kitId}`;
      });
    });
  }

  // Run on initial load
  setupKitsGrid();

  // Re-run on View Transitions navigation
  document.addEventListener('astro:page-load', setupKitsGrid);
</script>