---
import Layout from '../layouts/Layout.astro';
import ProductCard from '../components/ProductCard.astro';
import SearchBar from '../components/SearchBar.tsx';
import { query as dbQuery } from '../lib/db';

const q = Astro.url.searchParams.get('q')?.trim() || '';
let products: any[] = [];

if (q.length >= 2) {
  const pattern = `%${q}%`;
  const result = await dbQuery(`
    SELECT p.id, p.name, p.slug, p.brand, p.colorway, p.gender, p.image_url, p.original_price,
           MIN(po.price) as lowest_price,
           MAX(po.original_price) as original_price_offer,
           COUNT(DISTINCT po.id) as offer_count,
           COUNT(DISTINCT COALESCE(f.merchant_name, f.name)) as shop_count
    FROM products p
    JOIN product_offers po ON po.product_id = p.id AND po.in_stock = true
    JOIN feeds f ON f.id = po.feed_id
    WHERE (p.name ILIKE $1 OR p.brand ILIKE $1 OR CONCAT(p.brand, ' ', p.name) ILIKE $1)
      AND p.is_sneaker = true AND p.image_url IS NOT NULL AND p.image_url != ''
    GROUP BY p.id
    HAVING MIN(po.price) > 0
    ORDER BY COUNT(po.id) DESC
    LIMIT 60
  `, [pattern]);

  products = result.rows.map((r: any) => {
    const lowestPrice = Number(r.lowest_price);
    const originalPrice = Number(r.original_price) || Number(r.original_price_offer) || lowestPrice;
    const shopCount = Number(r.shop_count);
    const offers = Array.from({ length: shopCount }, () => ({ shop: '', price: lowestPrice, url: '', inStock: true, sizes: [] }));
    return {
      id: String(r.id),
      slug: r.slug,
      name: r.name,
      brand: r.brand || 'Unknown',
      brandSlug: (r.brand || 'unknown').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, ''),
      colorway: r.colorway || '',
      image: r.image_url || '',
      lowestPrice,
      originalPrice: originalPrice > lowestPrice ? originalPrice : lowestPrice,
      offers,
      sizes: [],
      gender: r.gender || 'unisex',
      releaseDate: '',
      trending: false,
      priceDrop: originalPrice > lowestPrice,
      priceHistory: [],
    };
  });
}

const title = q ? `"${q}" — Zoekresultaten | SneakerPicks` : 'Zoeken | SneakerPicks';
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
}));
const searchQuery = q;
const resultsCount = products.length;
---

<Layout title={title}>
  <section class="mx-auto max-w-7xl px-4 py-8 sm:px-6">
    <div class="mb-8 max-w-2xl">
      <SearchBar large client:load />
    </div>

    {q ? (
      <div>
        <h1 class="mb-6 text-2xl font-black">
          {products.length > 0 ? (
            <span>{products.length} resultaten voor <span class="text-accent">"{q}"</span></span>
          ) : (
            <span>Geen resultaten voor <span class="text-accent">"{q}"</span></span>
          )}
        </h1>

        {products.length > 0 ? (
          <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>
        ) : (
          <div class="py-16 text-center">
            <p class="text-lg text-text-secondary">Probeer een andere zoekterm, bijvoorbeeld een merk of model.</p>
          </div>
        )}
      </div>
    ) : (
      <div class="py-16 text-center">
        <h1 class="mb-4 text-2xl font-black">Zoek sneakers</h1>
        <p class="text-text-secondary">Typ een merk, model of naam om te zoeken.</p>
      </div>
    )}
  </section>

  {searchQuery && (
    <script is:inline define:vars={{ searchQuery, resultsCount, analyticsItems }}>
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({ event: 'view_search_results', search_term: searchQuery, results_count: resultsCount });
      if (analyticsItems.length > 0) {
        window.dataLayer.push({ ecommerce: null });
        window.dataLayer.push({
          event: 'view_item_list',
          ecommerce: {
            item_list_id: 'search_results',
            item_list_name: 'Zoekresultaten: ' + searchQuery,
            items: analyticsItems.map(function(item) {
              return Object.assign({}, item, { item_list_id: 'search_results', item_list_name: 'Zoekresultaten: ' + searchQuery });
            })
          }
        });
      }
    </script>
  )}
</Layout>