---
import Layout from '../../layouts/Layout.astro';
import ProductCard from '../../components/ProductCard.astro';
import Breadcrumb from '../../components/Breadcrumb.astro';
import { getProductsFromDB, getProductCountByGender, getBrandsFromDB } from '../../lib/products';

const url = Astro.url;
const sort = (url.searchParams.get('sort') || 'popular') as 'popular' | 'newest' | 'price_asc' | 'price_desc' | 'discount';
const page = Math.max(1, parseInt(url.searchParams.get('pagina') || '1'));
const spSize = Astro.cookies.get('sp_size')?.value || undefined;
const perPage = 36;

const products = await getProductsFromDB({
  limit: perPage,
  offset: (page - 1) * perPage,
  orderBy: sort,
  gender: 'heren',
  size: spSize,
});

const totalCount = await getProductCountByGender('heren');
const totalPages = Math.ceil(totalCount / perPage);
const brands = await getBrandsFromDB();

const title = `Heren Sneakers — ${totalCount}+ modellen vergelijken | SneakerPicks`;
const description = `Heren sneakers vergelijken: ${totalCount}+ modellen van Nike, Adidas, New Balance en meer. Vind de laagste prijs bij Nederlandse webshops.`;
---

<Layout title={title} description={description} noindex={page > 1}>
  <script type="application/ld+json" set:html={JSON.stringify({
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    itemListElement: [
      { "@type": "ListItem", position: 1, name: "Home", item: "https://sneakerpicks.nl/" },
      { "@type": "ListItem", position: 2, name: "Sneakers", item: "https://sneakerpicks.nl/sneakers" },
      { "@type": "ListItem", position: 3, name: "Heren", item: "https://sneakerpicks.nl/sneakers/heren" },
    ]
  })} />

  <section class="mx-auto max-w-7xl px-4 py-12 sm:px-6">
    <Breadcrumb items={[
      { label: 'Home', href: '/' },
      { label: 'Sneakers', href: '/sneakers' },
      { label: 'Heren' },
    ]} />

    <div class="mb-8">
      <h1 class="text-3xl font-black tracking-tight sm:text-4xl">Heren Sneakers</h1>
      <p class="mt-2 text-text-secondary">{totalCount} heren sneakers beschikbaar. Vergelijk prijzen bij alle Nederlandse webshops.</p>
    </div>

    <!-- Gender navigation -->
    <div class="mb-8 flex gap-2">
      <a href="/sneakers/heren" class="rounded-lg border border-accent bg-accent/10 px-4 py-2 text-sm font-semibold text-accent">Heren</a>
      <a href="/sneakers/dames" class="rounded-lg border border-border/50 px-4 py-2 text-sm font-semibold text-text-muted hover:text-text">Dames</a>
      <a href="/sneakers" class="rounded-lg border border-border/50 px-4 py-2 text-sm font-semibold text-text-muted hover:text-text">Alles</a>
    </div>

    <!-- Sort -->
    <div class="mb-6 flex items-center justify-between">
      <span class="text-sm text-text-muted">{totalCount} resultaten</span>
      <div class="flex gap-2 text-xs">
        {[['popular', 'Populair'], ['price_asc', 'Prijs ↑'], ['price_desc', 'Prijs ↓'], ['discount', 'Korting']].map(([val, label]) => (
          <a href={`?sort=${val}`}
             class:list={['rounded-lg border px-3 py-1.5 transition-all', sort === val ? 'border-accent bg-accent/10 text-accent' : 'border-border/50 text-text-muted hover:text-text']}>
            {label}
          </a>
        ))}
      </div>
    </div>

    <div class="grid grid-cols-2 gap-4 sm:gap-6 md:grid-cols-3 lg:grid-cols-4">
      {products.map((sneaker, i) => <ProductCard sneaker={sneaker} index={i} />)}
    </div>

    {totalPages > 1 && (
      <nav class="mt-12 flex justify-center gap-2">
        {page > 1 && <a href={`?pagina=${page - 1}${sort !== 'popular' ? `&sort=${sort}` : ''}`} class="rounded-lg border border-border/50 px-3 py-2 text-sm text-text-muted hover:text-text">← Vorige</a>}
        {Array.from({ length: Math.min(totalPages, 10) }, (_, i) => i + 1).map(p => (
          <a href={`?pagina=${p}${sort !== 'popular' ? `&sort=${sort}` : ''}`}
             class:list={['rounded-lg border px-3 py-2 text-sm', p === page ? 'border-accent bg-accent/10 text-accent font-bold' : 'border-border/50 text-text-muted hover:text-text']}>
            {p}
          </a>
        ))}
        {page < totalPages && <a href={`?pagina=${page + 1}${sort !== 'popular' ? `&sort=${sort}` : ''}`} class="rounded-lg border border-border/50 px-3 py-2 text-sm text-text-muted hover:text-text">Volgende →</a>}
      </nav>
    )}

    <div class="mt-16 border-t border-border/50 pt-8">
      <h2 class="mb-4 text-xl font-bold">Heren sneakers vergelijken</h2>
      <p class="text-sm text-text-secondary leading-relaxed">
        Op SneakerPicks vergelijken we dagelijks {totalCount}+ heren sneakers bij alle grote Nederlandse webshops. Van klassieke Nike Air Force 1 tot trendy Adidas Samba: vind altijd de laagste prijs. Stel een prijsalert in en we laten je weten wanneer je favoriete sneaker in prijs daalt.
      </p>
      <div class="mt-4 flex flex-wrap gap-2">
        {brands.slice(0, 8).map(b => (
          <a href={`/sneakers?geslacht=heren&merk=${b.slug}`} class="text-xs text-accent hover:underline">{b.name} heren</a>
        ))}
      </div>
    </div>
  </section>
</Layout>