import type { ShopOffer } from '../data/mock';

interface Props {
  offers: ShopOffer[];
  lowestPrice: number;
  sneakerData?: {
    item_id: string;
    item_name: string;
    item_brand: string;
    price: number;
  };
}

export default function PriceComparisonTable({ offers, lowestPrice, sneakerData }: Props) {
  const sorted = [...offers].sort((a, b) => a.price - b.price);

  const handleOutboundClick = (offer: ShopOffer) => {
    if (!sneakerData) return;
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({ ecommerce: null });
    window.dataLayer.push({
      event: 'select_promotion',
      ecommerce: {
        promotion_id: offer.shop,
        promotion_name: offer.shop,
        items: [sneakerData],
      },
    });
    window.dataLayer.push({
      event: 'outbound_click',
      destination_url: offer.url,
      shop_name: offer.shop,
    });
  };

  return (
    <div className="overflow-hidden rounded-2xl border border-border/50">
      <div className="bg-bg-elevated px-4 py-3">
        <h3 className="text-sm font-bold uppercase tracking-widest text-text-muted">Prijsvergelijking</h3>
      </div>
      <div className="divide-y divide-border/30">
        {sorted.map((offer, i) => (
          <div
            key={offer.shop}
            className={`flex items-center gap-4 px-4 py-4 transition-colors hover:bg-bg-hover ${
              i === 0 ? 'bg-accent/5' : ''
            }`}
          >
            <div className="min-w-0 flex-1">
              <div className="flex items-center gap-2">
                <span className="font-semibold text-text">{offer.shop}</span>
                {offer.price === lowestPrice && (
                  <span className="rounded-full bg-accent/20 px-2 py-0.5 text-[10px] font-bold text-accent">
                    LAAGSTE
                  </span>
                )}
              </div>
              <div className="mt-1 flex items-center gap-2">
                {offer.inStock ? (
                  <span className="text-xs text-accent">✓ Op voorraad</span>
                ) : (
                  <span className="text-xs text-danger">✗ Uitverkocht</span>
                )}
                {offer.sizes.length > 0 && (
                  <span className="text-xs text-text-muted">
                    · {offer.sizes.length} maten
                  </span>
                )}
              </div>
            </div>

            <div className="text-right">
              <div className="flex items-baseline gap-2">
                {offer.originalPrice && offer.originalPrice > offer.price && (
                  <span className="text-sm text-text-muted line-through">
                    €{offer.originalPrice.toFixed(2).replace('.', ',')}
                  </span>
                )}
                <span className={`text-lg font-black ${offer.price === lowestPrice ? 'text-accent' : 'text-text'}`}>
                  €{offer.price.toFixed(2).replace('.', ',')}
                </span>
              </div>
            </div>

            <a
              href={offer.url}
              target="_blank"
              rel="noopener noreferrer"
              onClick={() => handleOutboundClick(offer)}
              className={`rounded-xl px-4 py-2 text-sm font-bold transition-all ${
                offer.inStock
                  ? 'bg-accent text-bg hover:bg-accent-dim hover:shadow-lg hover:shadow-accent/20'
                  : 'cursor-not-allowed bg-surface text-text-muted'
              }`}
            >
              Bekijk
            </a>
          </div>
        ))}
      </div>
    </div>
  );
}