import { useState, useEffect } from 'react';

interface DealItem {
  id: number;
  name: string;
  brand: string;
  slug: string;
  image_url: string;
  cutout_image_url: string | null;
  colorway: string;
  lowest_price: number | null;
  original_price: number | null;
  discount_pct: number;
}

export default function DealsForYouSection() {
  const [items, setItems] = useState<DealItem[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('/api/user/deals-for-you')
      .then(r => r.json())
      .then(data => {
        setItems(data.items || []);
        setLoading(false);
      })
      .catch(() => setLoading(false));
  }, []);

  if (loading) return null;
  if (items.length === 0) return null;

  return (
    <section className="mx-auto max-w-7xl px-4 py-16 sm:px-6">
      <div className="mb-8 flex items-end justify-between">
        <div>
          <h2 className="text-2xl font-black tracking-tight sm:text-3xl">
            Deals van de dag — voor jou
          </h2>
          <p className="mt-1 text-sm text-text-muted">
            Prijsdalingen op jouw favoriete merken en budgetrange
          </p>
        </div>
      </div>
      <div className="grid grid-cols-2 gap-4 sm:gap-6 md:grid-cols-3 lg:grid-cols-4">
        {items.map((item) => (
          <a
            key={item.id}
            href={`/sneakers/${item.slug}`}
            className="group rounded-xl border border-border/30 bg-bg-card overflow-hidden transition-all hover:border-accent/40 hover:shadow-lg hover:shadow-accent/5"
          >
            <div className="relative overflow-hidden bg-white h-40 flex items-center justify-center">
              <img
                src={`/api/img/${item.id}`}
                alt={item.name}
                width={300}
                height={160}
                className="h-full w-full object-contain group-hover:scale-105 transition-transform"
                loading="lazy"
                decoding="async"
                onError={(e) => {
                  (e.target as HTMLImageElement).src = '/img/sneaker-placeholder.svg';
                }}
              />
              {item.discount_pct > 0 && (
                <div className="absolute top-2 right-2 bg-deal text-white font-black text-sm px-2 py-1 rounded">
                  -{item.discount_pct}%
                </div>
              )}
            </div>
            <div className="p-3">
              <p className="text-[10px] font-bold uppercase tracking-widest text-text-muted">
                {item.brand}
              </p>
              <p className="text-sm font-semibold text-text line-clamp-2">
                {item.name}
              </p>
              <div className="mt-2 flex items-baseline gap-2">
                {item.lowest_price ? (
                  <>
                    <span className="text-lg font-black text-deal">
                      €{item.lowest_price.toFixed(2).replace('.', ',')}
                    </span>
                    {item.original_price && item.original_price > item.lowest_price && (
                      <span className="text-xs text-text-muted line-through">
                        €{item.original_price.toFixed(2).replace('.', ',')}
                      </span>
                    )}
                  </>
                ) : (
                  <span className="text-xs text-text-muted">N/A</span>
                )}
              </div>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}