<script setup>
import { computed, onMounted, ref } from 'vue'
import { RouterLink } from 'vue-router'
import { api } from '@/api/client'
import SectionHero from '@/components/SectionHero.vue'

const posts = ref([])
const loading = ref(true)
const activeCategory = ref('all')

onMounted(async () => {
  try { posts.value = await api.listPosts() }
  catch (e) {}
  finally { loading.value = false }
})

const categories = computed(() => {
  const set = new Map()
  set.set('all', 'All')
  for (const p of posts.value) set.set(p.category, p.category_label)
  return Array.from(set, ([value, label]) => ({ value, label }))
})

const filtered = computed(() =>
  activeCategory.value === 'all'
    ? posts.value
    : posts.value.filter(p => p.category === activeCategory.value)
)

function fmtDate(iso) {
  try { return new Date(iso).toLocaleDateString('en-IN', { year: 'numeric', month: 'short', day: 'numeric' }) }
  catch { return iso }
}
</script>

<template>
  <SectionHero
    eyebrow="Insights"
    title="Notes from the lab."
    subtitle="Engineering notes, architecture choices, and the occasional founder essay. Written by the team — not a content desk."
  />

  <section class="section">
    <div class="container">
      <div class="filters" v-if="categories.length > 1">
        <button
          v-for="c in categories"
          :key="c.value"
          class="filter"
          :class="{ 'filter--active': activeCategory === c.value }"
          @click="activeCategory = c.value"
        >
          {{ c.label }}
        </button>
      </div>

      <div v-if="loading" class="dim mono">Loading…</div>
      <div v-else class="grid grid--2 posts">
        <RouterLink
          v-for="post in filtered"
          :key="post.slug"
          :to="`/blog/${post.slug}`"
          class="post"
        >
          <div class="post__head">
            <span class="pill">{{ post.category_label }}</span>
            <span class="dim mono">{{ post.read_time_minutes }} min</span>
          </div>
          <h3>{{ post.title }}</h3>
          <p class="muted">{{ post.excerpt }}</p>
          <span class="dim mono">{{ post.author_name }} · {{ fmtDate(post.published_at) }}</span>
        </RouterLink>
      </div>
    </div>
  </section>
</template>

<style scoped>
.filters {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.filter {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.filter:hover { border-color: var(--color-accent); color: var(--color-accent); }
.filter--active {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.posts { gap: var(--space-5); }
.post {
  background: linear-gradient(180deg, var(--color-surface), var(--color-surface-2));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  color: var(--color-text);
  transition: border-color var(--transition), transform var(--transition);
}
.post:hover {
  border-color: rgba(0, 229, 255, 0.4);
  transform: translateY(-3px);
  color: var(--color-text);
}
.post__head { display: flex; justify-content: space-between; align-items: center; }
.post h3 { margin: 0; font-size: 1.3rem; }
.post p { margin: 0; flex: 1; }
</style>
