---
import Layout from '../layouts/Layout.astro';
import ProductCard from '../components/ProductCard.astro';
import { getPriceDropsFromDB } from '../lib/products';

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

const deals = await getPriceDropsFromDB(24);
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
}));
---

<Layout title="Deals — SneakerPicks" description="De beste sneaker deals en prijsdalingen. Bespaar tot 25% op populaire sneakers.">
  <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">{deals.length}</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">-{Math.max(...deals.map(d => getDiscountPercent(d)))}%</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">€{Math.min(...deals.map(d => d.lowestPrice)).toFixed(0)}</div>
        <div class="text-xs text-text-muted">Vanaf prijs</div>
      </div>
    </div>

    <!-- Filter buttons -->
    <div class="mb-8 flex flex-wrap gap-2">
      {['Alle', '> 10%', '> 15%', '> 20%'].map((label, i) => (
        <button class:list={[
          'rounded-xl px-4 py-2 text-sm font-bold transition-all',
          i === 0 ? 'bg-deal text-white' : 'bg-bg-card text-text-muted border border-border/50 hover:border-deal/50 hover:text-deal'
        ]}>
          {label}
        </button>
      ))}
    </div>

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