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

function getDiscountPercent(sneaker: { originalPrice: number; lowestPrice: number }): number {
  return Math.round(((sneaker.originalPrice - sneaker.lowestPrice) / sneaker.originalPrice) * 100);
}

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

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

const totalCount = await getDealsCount({ brand, gender, size });
const brands = await getBrandsFromDB();
const totalPages = Math.ceil(totalCount / perPage);

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

// Stats
const maxDiscount = deals.length > 0 ? Math.max(...deals.map(d => getDiscountPercent(d))) : 0;
const lowestPrice = deals.length > 0 ? Math.min(...deals.map(d => d.lowestPrice)) : 0;
---

<Layout title={`Sneaker Deals — Tot ${maxDiscount}% korting vanaf €${lowestPrice.toFixed(2).replace('.', ',')} | SneakerPicks`} description={`${totalCount} sneaker deals met korting. Bespaar tot ${maxDiscount}% op Nike, Adidas, New Balance en meer. Prijzen dagelijks bijgewerkt.`} 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">
        Deals & Prijsdalingen
      </h1>
      <p class="mt-2 text-text-secondary">Sneakers die recent in prijs zijn gedaald</p>
    </div>

    <!-- Stats -->
    <div class="mb-8 grid grid-cols-3 gap-4">
      <div class="rounded-2xl border border-border/50 bg-bg-card p-4 text-center">
        <div class="text-2xl font-black text-deal">{totalCount}</div>
        <div class="text-xs text-text-muted">Actieve deals</div>
      </div>
      <div class="rounded-2xl border border-border/50 bg-bg-card p-4 text-center">
        <div class="text-2xl font-black text-accent">-{maxDiscount}%</div>
        <div class="text-xs text-text-muted">Hoogste korting</div>
      </div>
      <div class="rounded-2xl border border-border/50 bg-bg-card p-4 text-center">
        <div class="text-2xl font-black text-text">€{lowestPrice.toFixed(0)}</div>
        <div class="text-xs text-text-muted">Vanaf prijs</div>
      </div>
    </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}
          basePath="/deals"
        />
      </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">{deals.length} van {totalCount} deals</span>
        </div>

        {deals.length > 0 ? (
          <div class="grid grid-cols-2 gap-4 sm:gap-6 md:grid-cols-3">
            {deals.map((sneaker, i) => (
              <ProductCard sneaker={sneaker} index={i} />
            ))}
          </div>
        ) : (
          <div class="py-16 text-center">
            <p class="text-lg text-text-secondary">Geen deals 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={`/deals?${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: 'deals',
        item_list_name: 'Deals & Prijsdalingen',
        items: analyticsItems.map(function(item) {
          return Object.assign({}, item, { item_list_id: 'deals', item_list_name: 'Deals & Prijsdalingen' });
        })
      }
    });
  </script>
</Layout>