---
import Layout from '../../layouts/Layout.astro';
import { getBlogPosts, getBlogCategories } from '../../lib/blog';

const url = new URL(Astro.request.url);
const category = url.searchParams.get('category') || '';
const page = Math.max(1, parseInt(url.searchParams.get('page') || '1'));
const perPage = 12;

const categoryMap: Record<string, string> = {
  guides: 'Koopgidsen',
  deals: 'Deals',
  comparisons: 'Vergelijkingen',
  trends: 'Trends',
};

const { posts, total } = await getBlogPosts({
  limit: perPage,
  offset: (page - 1) * perPage,
  category: category || undefined,
});

const categories = await getBlogCategories();
const totalPages = Math.ceil(total / perPage);

function formatDate(d: string | null) {
  if (!d) return '';
  return new Date(d).toLocaleDateString('nl-NL', { day: 'numeric', month: 'long', year: 'numeric' });
}
---

<Layout title="Blog — Sneaker Guides, Deals & Nieuws | SneakerPicks" description="Lees onze sneaker guides, kooptips, deals en trends. Alles wat je moet weten om de beste sneakers voor de laagste prijs te vinden.">
  <script type="application/ld+json" set:html={JSON.stringify({
    "@context": "https://schema.org",
    "@type": "CollectionPage",
    inLanguage: "nl-NL",
    name: "SneakerPicks Blog",
    description: "Sneaker guides, deals & nieuws — alles om de beste sneakers voor de laagste prijs te scoren.",
    url: "https://sneakerpicks.nl/blog",
    mainEntity: {
      "@type": "ItemList",
      numberOfItems: posts.length,
      itemListElement: posts.map((p, i) => ({
        "@type": "ListItem",
        position: i + 1,
        url: `https://sneakerpicks.nl/blog/${p.slug}`,
        name: p.title,
      })),
    },
  })} />
  <script type="application/ld+json" set:html={JSON.stringify({
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    inLanguage: "nl-NL",
    itemListElement: [
      { "@type": "ListItem", position: 1, name: "Home", item: "https://sneakerpicks.nl/" },
      { "@type": "ListItem", position: 2, name: "Blog" },
    ],
  })} />
  <main class="mx-auto max-w-7xl px-4 py-12 sm:px-6">
    <!-- Header -->
    <div class="mb-10 text-center">
      <h1 class="text-4xl font-black tracking-tight sm:text-5xl">
        SneakerPicks <span class="text-accent">Blog</span>
      </h1>
      <p class="mx-auto mt-4 max-w-2xl text-lg text-text-secondary">
        Sneaker guides, deals & nieuws — alles om de beste sneakers voor de laagste prijs te scoren.
      </p>
    </div>

    <!-- Category tabs -->
    <div class="mb-8 flex flex-wrap justify-center gap-2">
      <a
        href="/blog"
        class:list={[
          'rounded-full px-4 py-2 text-sm font-semibold transition-colors',
          !category ? 'bg-accent text-white' : 'bg-bg-elevated text-text-secondary hover:text-text',
        ]}
      >
        Alle
      </a>
      {Object.entries(categoryMap).map(([key, label]) => (
        <a
          href={`/blog?category=${key}`}
          class:list={[
            'rounded-full px-4 py-2 text-sm font-semibold transition-colors',
            category === key ? 'bg-accent text-white' : 'bg-bg-elevated text-text-secondary hover:text-text',
          ]}
        >
          {label}
        </a>
      ))}
    </div>

    <!-- Posts grid -->
    {posts.length === 0 ? (
      <p class="py-20 text-center text-text-secondary">Nog geen artikelen in deze categorie.</p>
    ) : (
      <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
        {posts.map((post) => (
          <a href={`/blog/${post.slug}`} class="group overflow-hidden rounded-2xl border border-border/50 bg-bg-card transition-all hover:border-accent/50 hover:shadow-lg">
            {post.cover_image && (
              <div class="flex h-48 items-center justify-center overflow-hidden bg-bg-elevated">
                <img src={post.cover_image} alt={post.title} class="max-h-full max-w-full object-contain transition-transform duration-300 group-hover:scale-105" width="400" height="225" loading="lazy" decoding="async" />
              </div>
            )}
            <div class="p-5">
              <div class="mb-2 flex items-center gap-2">
                <span class="rounded-full bg-accent/10 px-2.5 py-0.5 text-xs font-semibold text-accent">
                  {categoryMap[post.category] || post.category}
                </span>
                <span class="text-xs text-text-secondary">{formatDate(post.published_at)}</span>
              </div>
              <h2 class="mb-2 text-lg font-bold leading-snug group-hover:text-accent transition-colors">{post.title}</h2>
              {post.excerpt && <p class="text-sm text-text-secondary line-clamp-2">{post.excerpt}</p>}
            </div>
          </a>
        ))}
      </div>
    )}

    <!-- Pagination -->
    {totalPages > 1 && (
      <div class="mt-10 flex justify-center gap-2">
        {page > 1 && (
          <a href={`/blog?${category ? `category=${category}&` : ''}page=${page - 1}`} class="rounded-lg bg-bg-elevated px-4 py-2 text-sm font-semibold text-text-secondary hover:text-text transition-colors">
            ← Vorige
          </a>
        )}
        <span class="flex items-center px-4 text-sm text-text-secondary">
          Pagina {page} van {totalPages}
        </span>
        {page < totalPages && (
          <a href={`/blog?${category ? `category=${category}&` : ''}page=${page + 1}`} class="rounded-lg bg-bg-elevated px-4 py-2 text-sm font-semibold text-text-secondary hover:text-text transition-colors">
            Volgende →
          </a>
        )}
      </div>
    )}
  </main>
</Layout>