<script setup lang="ts">
import { computed, onMounted } from "vue";
import { useTemplates } from "../../composables/useTemplates";

const { filter, counts, setFilter, isLoading } = useTemplates();

const filters = computed(() => [
  { id: "all", icon: "ph-squares-four", label: "All", count: counts.value.all },
  {
    id: "agents",
    icon: "ph-robot",
    label: "Agents",
    count: counts.value.agents,
  },
  {
    id: "commands",
    icon: "ph-terminal",
    label: "Commands",
    count: counts.value.commands,
  },
  { id: "mcps", icon: "ph-plug", label: "MCPs", count: counts.value.mcps },
  {
    id: "skills",
    icon: "ph-magic-wand",
    label: "Skills",
    count: counts.value.skills,
  },
  {
    id: "settings",
    icon: "ph-gear",
    label: "Settings",
    count: counts.value.settings,
  },
  {
    id: "hooks",
    icon: "ph-webhooks-logo",
    label: "Hooks",
    count: counts.value.hooks,
  },
]);

function handleFilter(id: string) {
  setFilter(id);
}
</script>

<template>
  <section
    class="border-b border-warm-border-subtle sticky top-[65px] z-40 bg-warm-bg-surface/95 backdrop-blur-xl"
  >
    <!-- Mobile: horizontal scroll -->
    <div
      class="flex items-center gap-2 px-4 py-3 sm:hidden overflow-x-auto scrollbar-hide"
    >
      <button
        v-for="f in filters"
        :key="f.id"
        @click="handleFilter(f.id)"
        :class="[
          'filter-chip flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-medium cursor-pointer transition-all whitespace-nowrap flex-shrink-0',
          filter === f.id
            ? 'bg-warm-accent text-warm-bg-deep'
            : 'bg-warm-bg-elevated text-warm-text-secondary border border-warm-border-subtle',
        ]"
        :disabled="isLoading"
      >
        <span>{{ f.label }}</span>
        <span
          :class="[
            'px-1 rounded',
            filter === f.id ? 'bg-white/20' : 'bg-warm-bg-hover',
          ]"
        >
          {{ f.count }}
        </span>
      </button>
      <select
        class="bg-warm-bg-elevated border border-warm-border-subtle rounded-full px-3 py-1.5 text-warm-text-secondary text-xs cursor-pointer outline-none flex-shrink-0"
      >
        <option value="popular">Popular</option>
        <option value="name">A-Z</option>
      </select>
    </div>

    <!-- Desktop: wrapped layout -->
    <div
      class="hidden sm:flex max-w-6xl mx-auto items-center justify-between gap-4 px-4 py-4"
    >
      <div class="flex gap-2 flex-wrap">
        <button
          v-for="f in filters"
          :key="f.id"
          @click="handleFilter(f.id)"
          :class="[
            'filter-chip flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium cursor-pointer transition-all duration-200',
            filter === f.id
              ? 'bg-warm-accent text-warm-bg-deep'
              : 'bg-warm-bg-elevated text-warm-text-secondary border border-warm-border-subtle hover:text-warm-text-primary hover:border-warm-border-default',
          ]"
          :disabled="isLoading"
        >
          <i :class="['ph', f.icon, 'text-base']"></i>
          <span class="font-semibold">{{ f.label }}</span>
          <span
            :class="[
              'text-xs px-1.5 py-0.5 rounded-full',
              filter === f.id ? 'bg-white/20' : 'bg-warm-bg-hover',
            ]"
          >
            {{ f.count }}
          </span>
        </button>
      </div>
      <select
        class="bg-warm-bg-elevated border border-warm-border-subtle rounded-lg px-4 py-2 text-warm-text-primary text-sm cursor-pointer outline-none focus:border-warm-accent transition-all duration-200"
      >
        <option value="popular">Most Used</option>
        <option value="name">Name A-Z</option>
      </select>
    </div>
  </section>
</template>

<style scoped>
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
</style>
