// OfferTable: §3.1 — the heart of the PDP
// 8 fields per row, snapshot-rank default + 4 client filters

function OfferRow({ offer, isCheapest, isStale, allOffers, rank }) {
  const m = merchantById(offer.merchantId);
  const stock = STOCK_MAP[offer.stockStatus] || STOCK_MAP.UNKNOWN;
  const totalWithShip = offer.price + (offer.shippingPrice || 0);
  const shippingLabel = offer.shippingPrice === null || offer.shippingPrice === undefined
    ? null
    : offer.shippingPrice === 0
      ? { kind: 'free', text: 'Kargo ücretsiz' }
      : { kind: 'paid', text: `Kargo dahil ${formatPrice(totalWithShip)}` };

  // Freshness color band
  const ageHours = (Date.now() - new Date(offer.lastSeenAt).getTime()) / 3600000;
  const freshClass = ageHours < 6 ? 'fresh' : ageHours < 24 ? 'ok' : ageHours < 72 ? 'warn' : 'stale';

  // "Why this seller?" — reasons for #1 / Partner / fresh / free shipping
  const reasons = [];
  if (isCheapest) reasons.push({ k: 'En düşük fiyat', ic: 'check' });
  if (m.tier === 'PARTNER') reasons.push({ k: 'Yetkili Partner', ic: 'partner' });
  if (offer.shippingPrice === 0) reasons.push({ k: 'Kargo ücretsiz', ic: 'truck' });
  if (offer.stockStatus === 'IN_STOCK' && ageHours < 6) reasons.push({ k: 'Stok doğrulandı', ic: 'check-circle' });
  if (offer.freeReturn) reasons.push({ k: 'Ücretsiz iade', ic: 'check' });

  return (
    <article
      className={`offer ${isCheapest ? 'offer--cheapest' : ''} ${isStale ? 'offer--stale' : ''}`}
      aria-label={`${m.name} satıcısı, fiyat ${formatPrice(offer.price)}`}
    >
      {isCheapest && <span className="offer__rank">En ucuz · Önerilen #{rank}</span>}
      <div className="offer__logo" aria-hidden="true">{m.logo}</div>

      <div className="offer__body">
        <div className="offer__merchant-row">
          <h3 className="offer__name">{m.name}</h3>
          {m.tier && (
            <span className={`offer__tier tier--${m.tier}`} title={`Kolaymarin ${m.tier.toLowerCase()} partner`}>
              {m.tier === 'PARTNER' ? '✓ Partner' : m.tier === 'GROWTH' ? '· Doğrulandı' : m.tier}
            </span>
          )}
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 2, fontSize: 12, color: 'var(--km-ink-500)' }}>
            <Icon name="star" size={11} stroke={0} style={{ fill: 'var(--km-accent)', color: 'var(--km-accent)' }}/>
            {m.rating}
          </span>
        </div>

        <div className="offer__meta">
          <span className={`chip chip--${stock.cls}`}>
            {stock.icon && <Icon name={stock.icon} size={11} stroke={2.2}/>}
            {stock.text}
          </span>
          {offer.shippingDays && (
            <span className="offer__meta-item">
              <Icon name="truck" size={13} stroke={1.6}/> {offer.shippingDays}
            </span>
          )}
          {shippingLabel && shippingLabel.kind === 'free' && (
            <span className="chip chip--good" style={{ fontSize: 11 }}>
              <Icon name="truck" size={11} stroke={2.2}/> Kargo ücretsiz
            </span>
          )}
          <span className={`offer__fresh offer__fresh--${freshClass}`}>
            <span className="offer__fresh-dot" aria-hidden="true"></span>
            <Icon name="clock" size={12} stroke={1.6}/> {timeAgoTr(offer.lastSeenAt)} güncellendi
          </span>
        </div>

        {isCheapest && reasons.length > 0 && (
          <div className="offer__reasons" aria-label="Neden bu satıcı?">
            {reasons.slice(0, 4).map((r, i) => (
              <span className="offer__reason" key={i}>
                <Icon name={r.ic} size={11} stroke={2.4}/> {r.k}
              </span>
            ))}
          </div>
        )}
      </div>

      <div className="offer__price-col">
        <div>
          <div className="offer__price tabular">{formatPrice(offer.price)}</div>
          {shippingLabel && shippingLabel.kind === 'paid' && (
            <div className="offer__price-with-ship tabular">{shippingLabel.text}</div>
          )}
        </div>
        <a
          className="offer__cta"
          href={`/referrals/click?o=${m.id}-${offer.merchantId}`}
          rel="nofollow sponsored noopener"
          target="_blank"
          aria-label={`${m.name} satıcısına git, fiyat ${formatPrice(offer.price)}`}
          onClick={(e) => { e.preventDefault(); alert(`→ /referrals/click → ${m.name}\n302 redirect with km_click_id + UTM`); }}
        >
          {isCheapest ? 'En ucuza git' : 'Doğrudan mağazaya git'}
          <Icon name="arrow-up-right" size={14}/>
        </a>
      </div>
    </article>
  );
}

const SORT_OPTIONS = [
  { id: 'recommended', label: 'Önerilen', icon: 'sparkle' },
  { id: 'price-asc',   label: 'Fiyat (artan)', icon: 'arrow-down' },
  { id: 'stock',       label: 'Önce stokta', icon: 'box' },
  { id: 'shipping',    label: 'En hızlı kargo', icon: 'truck' },
  { id: 'trust',       label: 'Güven (yüksek)', icon: 'shield' },
];

function OfferTable({ product }) {
  const [sort, setSort] = React.useState('recommended');

  const sorted = React.useMemo(() => {
    const arr = [...product.offers];
    switch (sort) {
      case 'price-asc': return arr.sort((a, b) => a.price - b.price);
      case 'stock': {
        const rank = { IN_STOCK: 0, LOW_STOCK: 1, PREORDER: 2, UNKNOWN: 3, OUT_OF_STOCK: 4 };
        return arr.sort((a, b) => (rank[a.stockStatus] - rank[b.stockStatus]) || (a.price - b.price));
      }
      case 'shipping': {
        const num = s => parseInt((s || '99').split('-')[0]) || 99;
        return arr.sort((a, b) => num(a.shippingDays) - num(b.shippingDays));
      }
      case 'trust': {
        const tierRank = { PARTNER: 0, GROWTH: 1, STARTER: 2 };
        return arr.sort((a, b) => (tierRank[merchantById(a.merchantId).tier] - tierRank[merchantById(b.merchantId).tier]));
      }
      default: return arr; // recommended = snapshot order
    }
  }, [sort, product]);

  const lowestPrice = Math.min(...product.offers.map(o => o.price));

  return (
    <div className="offers" id="offer-table">
      <div className="offers__toolbar">
        <span className="offers__toolbar-label">Sırala:</span>
        {SORT_OPTIONS.map(s => (
          <button
            key={s.id}
            className={`sort-btn ${sort === s.id ? 'sort-btn--on' : ''}`}
            onClick={() => setSort(s.id)}
          >
            <Icon name={s.icon} size={12} stroke={2}/>
            {s.label}
          </button>
        ))}
      </div>

      {sorted.map((o, i) => {
        const isCheapest = sort === 'recommended' ? i === 0 : (o.price === lowestPrice && product.offers.indexOf(o) === product.offers.findIndex(x => x.price === lowestPrice));
        const isStale = (Date.now() - new Date(o.lastSeenAt).getTime()) / 3600000 > 24;
        return <OfferRow key={o.merchantId} offer={o} isCheapest={isCheapest} isStale={isStale} allOffers={product.offers} rank={i+1} />;
      })}

      <p style={{ fontSize: 12, color: 'var(--km-ink-400)', marginTop: 16, lineHeight: 1.5 }}>
        Liste varsayılan olarak <strong style={{ color: 'var(--km-ink-600)' }}>kolaymarin sıralama algoritmasına</strong> göre dizilidir;
        fiyatın yanında satıcı güvenilirliği, stok tazeliği ve kargo süresi de dikkate alınır.
        İsterseniz yukarıdaki filtrelerle yeniden sıralayabilirsiniz.
      </p>
    </div>
  );
}

Object.assign(window, { OfferTable, OfferRow });