---
/**
 * Sneaker van de Dag — Shows the best deal of the day with a countdown timer.
 * Picks from the top 7 biggest discounts, rotating daily.
 */
import { query } from '../lib/db';

const { rows } = await query<any>(`
  SELECT p.id, p.slug, p.name, p.brand, p.colorway,
         p.cutout_image_url, p.image_url,
         MIN(po.price)::float as current_price,
         po.original_price::float as original_price,
         ROUND(((po.original_price - MIN(po.price)) / po.original_price * 100))::int as discount_pct,
         COUNT(DISTINCT po.feed_id)::int as shop_count
  FROM products p
  JOIN product_offers po ON po.product_id = p.id AND po.in_stock = true
  WHERE p.is_sneaker = true
    AND po.original_price IS NOT NULL
    AND po.original_price > po.price
    AND p.image_url IS NOT NULL AND p.image_url != ''
  GROUP BY p.id, p.slug, p.name, p.brand, p.colorway, p.cutout_image_url, p.image_url, po.original_price
  HAVING MIN(po.price) < po.original_price * 0.75
  ORDER BY (po.original_price - MIN(po.price)) DESC
  LIMIT 7
`);

// Rotate daily: pick a different deal from the top 7 each day
const dayOfYear = Math.floor((Date.now() - new Date(new Date().getFullYear(), 0, 0).getTime()) / 86400000);
const deal = rows[dayOfYear % Math.max(rows.length, 1)];
if (!deal) return;

// Always use the API image proxy — it handles caching, fallback, and broken URLs
const imageUrl = `/api/img/${deal.id}`;
const saving = (deal.original_price - deal.current_price).toFixed(2).replace('.', ',');
---

<section class="mx-auto max-w-7xl px-4 py-12 sm:px-6">
  <div class="relative overflow-hidden rounded-3xl border border-accent/20 bg-gradient-to-br from-accent/10 via-bg-card to-bg-card">

    <!-- Corner ribbon "Deal van de Dag" — proper diagonal corner wrap -->
    <div class="pointer-events-none absolute left-0 top-0 z-10 overflow-hidden" style="width:110px;height:110px;border-radius:1.5rem 0 0 0">
      <div class="absolute bg-accent text-bg text-center font-black uppercase shadow-md"
           style="width:155px;font-size:9px;padding:7px 0;letter-spacing:0.12em;top:24px;left:-28px;transform:rotate(-45deg)">
        Deal vd dag
      </div>
    </div>

    <!-- Glow effect -->
    <div class="absolute -top-20 -right-20 h-60 w-60 rounded-full bg-accent/10 blur-[80px] pointer-events-none"></div>

    <div class="relative flex flex-col items-center gap-8 p-8 sm:flex-row sm:p-12">
      <!-- Image -->
      <div class="relative w-48 shrink-0 sm:w-64">
        <img
          src={imageUrl}
          srcset={`${imageUrl}?w=300 300w, ${imageUrl}?w=400 400w, ${imageUrl} 600w`}
          sizes="(max-width: 640px) 192px, 256px"
          alt={`${deal.brand} ${deal.name}`}
          width="600"
          height="600"
          class="w-full object-contain drop-shadow-2xl transition-transform duration-500 hover:scale-110"
          style="max-height: 260px;"
          loading="eager"
          fetchpriority="high"
          decoding="async"
          onerror="this.src='/img/sneaker-placeholder.svg';this.onerror=null"
        />
        <!-- Discount badge -->
        <div class="absolute -right-2 -top-2 rounded-full bg-deal px-3 py-1.5 text-sm font-black text-white shadow-lg">
          -{deal.discount_pct}%
        </div>
      </div>

      <!-- Info -->
      <div class="flex-1 text-center sm:text-left">
        <div class="mb-3 flex items-center justify-center gap-2 sm:justify-start">
          <span id="sotd-countdown" class="inline-flex items-center gap-1 rounded-full border border-border/50 bg-bg-elevated px-3 py-1 text-xs font-semibold text-text-muted">
            <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
            <span id="sotd-time">…</span>
          </span>
        </div>

        <p class="text-xs font-bold uppercase tracking-widest text-text-muted">{deal.brand}</p>
        <h3 class="mt-1 text-2xl font-black text-text sm:text-3xl">{deal.name}</h3>
        <p class="mt-1 text-sm text-text-muted">{deal.colorway}</p>

        <div class="mt-4 flex flex-wrap items-baseline gap-3 justify-center sm:justify-start">
          <span class="text-3xl font-black text-accent">€{deal.current_price.toFixed(2).replace('.', ',')}</span>
          <span class="text-lg text-text-muted line-through">€{deal.original_price.toFixed(2).replace('.', ',')}</span>
          <span class="rounded-lg bg-deal/10 px-2 py-0.5 text-sm font-bold text-deal">Bespaar €{saving}</span>
        </div>

        <p class="mt-2 text-xs text-text-muted">Beschikbaar bij {deal.shop_count} shop{deal.shop_count > 1 ? 's' : ''}</p>

        <a
          href={`/sneakers/${deal.slug}`}
          class="mt-6 inline-flex items-center gap-2 rounded-xl bg-accent px-6 py-3 font-bold text-bg transition-all hover:shadow-lg hover:shadow-accent/20"
        >
          Bekijk deal
          <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /></svg>
        </a>
      </div>
    </div>
  </div>
</section>

<script is:inline>
  (function() {
    function updateCountdown() {
      const now = new Date();
      const tomorrow = new Date(now);
      tomorrow.setDate(tomorrow.getDate() + 1);
      tomorrow.setHours(0, 0, 0, 0);
      const diff = tomorrow - now;
      const h = Math.floor(diff / 3600000);
      const m = Math.floor((diff % 3600000) / 60000);
      const s = Math.floor((diff % 60000) / 1000);
      const el = document.getElementById('sotd-time');
      if (el) el.textContent = `Nog ${h}u ${m}m ${s}s`;
    }
    updateCountdown();
    setInterval(updateCountdown, 1000);
  })();
</script>