---
import Layout from '../../layouts/Layout.astro';
import ProductCard from '../../components/ProductCard.astro';
import CatalogFilters from '../../components/CatalogFilters.tsx';
import { getProductsFromDB, getBrandsFromDB, getProductCount } from '../../lib/products';
import { getUserFromCookie } from '../../lib/user-auth';

const url = Astro.url;
const brand = url.searchParams.get('merk') || undefined;
const gender = url.searchParams.get('geslacht') || undefined;

// Hierarchical size filtering: check advanced mode cookie and user profile
const user = await getUserFromCookie(Astro.cookies);
const advancedOn = Astro.cookies.get('sp_size_mode')?.value === 'on';
const userId = (advancedOn && user?.id) ? user.id : undefined;
const size = userId ? undefined : (url.searchParams.get('maat') || Astro.cookies.get('sp_size')?.value || undefined);

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 perPage = 36;

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

const totalCount = await getProductCount();
const brands = await getBrandsFromDB();
const totalPages = Math.ceil(totalCount / perPage);

const title = brand
  ? `${brand} Sneakers — Vergelijk Prijzen | SneakerPicks`
  : `Alle Sneakers vergelijken — ${totalCount.toLocaleString('nl-NL')}+ modellen | SneakerPicks`;
const description = brand
  ? `Vergelijk ${brand} sneaker prijzen bij alle Nederlandse shops.`
  : 'Bekijk en vergelijk alle sneakers. Filter op merk, prijs, maat en geslacht.';

const analyticsItems = products.map((s, i) => ({
  item_id: s.id, item_name: `${s.brand} ${s.name}`, item_brand: s.brand, price: s.lowestPrice, index: i
}));
---

<Layout title={title} description={description} noindex={page > 1}>
  <section class="mx-auto max-w-7xl px-4 py-12 sm:px-6">
    <div class="mb-8">
      <h1 class="text-3xl font-black tracking-tight sm:text-4xl">Alle Sneakers</h1>
      <p class="mt-2 text-text-secondary">{totalCount} sneakers gevonden</p>
    </div>

    <div class="flex flex-col gap-8 lg:flex-row">
      <!-- Sidebar -->
      <div class="w-full shrink-0 lg:w-64">
        <CatalogFilters
          client:load
          brands={brands.slice(0, 30).map(b => ({ name: b.name, slug: b.slug, count: b.count }))}
          currentBrand={brand || ''}
          currentGender={gender || ''}
          currentSize={size || ''}
          currentSort={sort}
        />
      </div>

      <!-- Grid -->
      <div class="flex-1">
        <!-- Sort bar -->
        <div class="mb-6 flex items-center justify-between rounded-2xl border border-border/50 bg-bg-card px-4 py-3">
          <span class="text-sm text-text-muted">{products.length} resultaten</span>
        </div>

        {products.length > 0 ? (
          <div class="grid grid-cols-2 gap-4 sm:gap-6 md:grid-cols-3">
            {products.map((sneaker, i) => (
              <ProductCard sneaker={sneaker} index={i} />
            ))}
          </div>
        ) : (
          <div class="py-16 text-center">
            <p class="text-lg text-text-secondary">Geen sneakers gevonden met deze filters.</p>
          </div>
        )}

        <!-- Pagination -->
        {totalPages > 1 && (
          <div class="mt-12 flex justify-center gap-2">
            {Array.from({ length: Math.min(totalPages, 10) }, (_, i) => i + 1).map(p => {
              const params = new URLSearchParams(url.searchParams);
              params.set('pagina', String(p));
              return (
                <a
                  href={`/sneakers?${params.toString()}`}
                  class:list={[
                    'flex h-10 w-10 items-center justify-center rounded-xl text-sm font-bold transition-colors',
                    p === page
                      ? 'bg-accent text-bg'
                      : 'border border-border/50 text-text-muted hover:border-accent/50 hover:text-accent',
                  ]}
                >
                  {p}
                </a>
              );
            })}
          </div>
        )}
      </div>
    </div>
  </section>

  <script is:inline define:vars={{ analyticsItems }}>
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({ ecommerce: null });
    window.dataLayer.push({
      event: 'view_item_list',
      ecommerce: {
        item_list_id: 'sneakers',
        item_list_name: 'Alle Sneakers',
        items: analyticsItems.map(function(item, i) {
          return Object.assign({}, item, { item_list_id: 'sneakers', item_list_name: 'Alle Sneakers' });
        })
      }
    });
  </script>
</Layout>