---
// @design-system: domain/DealCard
// SSR-only card for /deals/all grid — zero client JS, no hydration.
// `imageUrl` MUST be a raw R2 key or absolute URL; never a pre-built /api/img/... path.
// `<Image>` handles variant pipeline + responsive srcSet ladder (wave 4).

import { Image } from '@/components/ui/primitives/Image';
import { getT } from '@/lib/i18n';
import { formatShekelFloat } from '@/lib/money';
import { Image as ImageIcon } from 'lucide-react';

interface Props {
  id: string;
  title: string;
  originalPrice: number | string;
  discountedPrice: number | string;
  discountPercent?: number | string | null;
  /** Raw R2 key or absolute URL — NOT pre-built /api/img/... path. */
  imageUrl?: string | null;
  imageAlt?: string;
  hrefBase?: string;
  /** Full href override — takes precedence over hrefBase+id when provided. */
  href?: string;
  qtyTierTop?: { minQty: number; discountPercent: number } | null;
  skuCount?: number;
  locale?: 'he' | 'en';
}

const {
  id,
  title,
  originalPrice,
  discountedPrice,
  discountPercent,
  imageUrl,
  imageAlt,
  hrefBase = '/deal',
  href: hrefOverride,
  qtyTierTop,
  skuCount,
  locale = 'he',
} = Astro.props as Props;

const href = hrefOverride ?? `${hrefBase}/${id}`;
const imageSrc = imageUrl ?? '';

// deals cache cols hold the discounted-price range only; originalPrice now mirrors
// max_price (the discounted figure) for single-SKU deals, so derive the strikethrough
// pre-discount price from the sale price + percent instead.
const pct = discountPercent != null ? Number(discountPercent) : 0;
const saleNum = Number(discountedPrice);
const strikethroughPrice =
  pct > 0 && pct < 100 ? (saleNum / (1 - pct / 100)).toFixed(2) : originalPrice;

const tV = getT(locale, 'variants');
const tCard = getT(locale, 'deal-card');
const displayTitle = (title ?? '').trim() || tCard('untitledDeal');
const tierBadge = (() => {
  if (qtyTierTop == null) return null;
  const template = (skuCount ?? 1) > 1 ? tV('qty_tier_badge_multi') : tV('qty_tier_badge');
  return template
    .replace('{minQty}', String(qtyTierTop.minQty))
    .replace('{percent}', String(qtyTierTop.discountPercent));
})();
---

<article
  data-testid="deal-card"
  data-deal-id={id}
  class="bg-surface-base border-border-default relative flex flex-col overflow-hidden rounded-xl border shadow-sm"
>
  <a
    href={href}
    aria-label={displayTitle}
    class="focus-visible:outline-brand-primary-500 block focus-visible:outline-2"
  >
    <div class="bg-surface-inset relative aspect-square w-full overflow-hidden">
      {
        imageSrc ? (
          <Image
            src={imageSrc}
            alt={imageAlt || displayTitle}
            width={400}
            height={400}
            loading="lazy"
            variant="card"
            className="absolute inset-0 h-full w-full object-cover"
          />
        ) : (
          <span
            class="text-text-muted absolute inset-0 flex items-center justify-center"
            aria-hidden="true"
          >
            <ImageIcon className="h-8 w-8" />
          </span>
        )
      }
      {
        discountPercent != null && Number(discountPercent) > 0 && (
          <span class="bg-brand-primary-500 text-text-on-brand absolute end-2 top-2 rounded-full px-2 py-0.5 text-xs font-bold">
            -{Number(discountPercent)}%
          </span>
        )
      }
    </div>
    <div class="p-2">
      <p class="text-text-secondary truncate text-xs font-medium">{displayTitle}</p>
    </div>
  </a>
  <div class="bg-brand-primary-50 border-border-subtle mt-auto border-t px-2 py-1.5">
    <div class="flex items-center gap-2">
      <span class="text-text-muted text-xs line-through"
        >{formatShekelFloat(strikethroughPrice)}</span
      >
      <span class="text-brand-primary-700 text-sm font-bold"
        >{formatShekelFloat(discountedPrice)}</span
      >
    </div>
    {tierBadge && <p class="text-brand-primary-700 mt-1 text-xs font-bold">{tierBadge}</p>}
  </div>
</article>