// PDP — product detail page, the design's hero per §2
// IA order: Breadcrumb → Title → LowestPriceSummary (HERO) → Gallery → OfferTable → Chart → Spec → FAQ → Related

function Breadcrumbs({ items }) {
  return (
    <nav aria-label="Breadcrumb" className="breadcrumbs">
      {items.map((it, i) => (
        <React.Fragment key={i}>
          {i > 0 && <span className="breadcrumbs__sep">/</span>}
          {i === items.length - 1
            ? <span className="breadcrumbs__current">{it}</span>
            : <a href="#/">{it}</a>}
        </React.Fragment>
      ))}
    </nav>
  );
}

function Gallery({ product }) {
  const [active, setActive] = React.useState(0);
  const images = (product.images && product.images.length > 0)
    ? product.images
    : (product.imageUrl ? [{ url: product.imageUrl, alt: product.imageAlt || product.h1 }] : []);
  const hasImages = images.length > 0;
  const main = hasImages ? images[Math.min(active, images.length - 1)] : null;

  return (
    <div className="gallery">
      <div className="gallery__main">
        {hasImages ? (
          <img
            src={main.url}
            alt={main.alt || product.h1}
            loading="eager"
            decoding="async"
            style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }}
            onError={(e) => { e.currentTarget.style.display = 'none'; }}
          />
        ) : (
          <div style={{ textAlign: 'center', padding: 24 }}>
            <div className="gallery__placeholder-icon">
              <Icon name={(CATEGORIES.find(c => c.slug === product.categorySlug) || {}).icon || 'box'} size={36} stroke={1.4} style={{ color: 'var(--km-ink-400)' }}/>
            </div>
            <div>{product.galleryLabel}</div>
          </div>
        )}
        {!hasImages && <span className="gallery__label">drag product photo here</span>}
      </div>
      <div className="gallery__thumbs" role="tablist" aria-label="Galeri">
        {(hasImages ? images.slice(0, 5) : [0,1,2,3,4]).map((entry, i) => (
          <button
            key={i}
            className={`gallery__thumb ${active === i ? 'gallery__thumb--on' : ''}`}
            onClick={() => setActive(i)}
            aria-label={`Görsel ${i + 1}`}
            style={hasImages && entry.url ? {
              backgroundImage: `url(${entry.url})`,
              backgroundSize: 'cover',
              backgroundPosition: 'center',
            } : undefined}
          />
        ))}
      </div>
    </div>
  );
}

function LowestPriceSummary({ product }) {
  const inStockOffers = product.offers.filter(o => o.stockStatus === 'IN_STOCK' || o.stockStatus === 'LOW_STOCK');
  const pool = inStockOffers.length ? inStockOffers : product.offers;

  if (!pool.length) {
    return (
      <section className="lps" aria-labelledby="lowest-price-heading">
        <h2 id="lowest-price-heading" className="sr-only">Fiyat özeti</h2>
        <div className="lps__price">
          <span className="lps__price-low">Teklifleri gör</span>
        </div>
        <div className="lps__actions">
          <a href="#offer-table" className="btn btn--accent btn--lg"
            onClick={(e) => { e.preventDefault(); document.getElementById('offer-table')?.scrollIntoView({ behavior: 'smooth', block: 'start' }); }}>
            Satıcıları karşılaştır <Icon name="arrow-down" size={16}/>
          </a>
        </div>
      </section>
    );
  }

  const low = Math.min(...pool.map(o => o.price));
  const high = Math.max(...pool.map(o => o.price));
  const savings = high - low;
  const cheapestOffer = pool.find(o => o.price === low);
  const cheapestMerchant = merchantById(cheapestOffer.merchantId) || { name: cheapestOffer.merchantName || 'Satıcı' };
  const avg30 = product.statistic?.avg30 ?? product.statistics?.avg30 ?? null;

  return (
    <section className="lps" aria-labelledby="lowest-price-heading">
      <div className="lps__eyebrow">
        <Icon name="sparkle" size={11} stroke={2}/> En uygun teklif
      </div>
      <h2 id="lowest-price-heading" className="sr-only">En düşük fiyat özeti</h2>
      <div className="lps__price">
        <span className="lps__price-from">başlangıç</span>
        <span className="lps__price-low tabular">{formatPrice(low)}</span>
        <span className="lps__price-range tabular">– {formatPrice(high)} arası</span>
      </div>
      <p className="lps__meta">
        <strong>{product.offers.length} satıcı</strong>dan teklif var. En düşük teklif
        <strong> {cheapestMerchant.name}</strong>'da · {cheapestOffer.shippingPrice === 0 ? 'kargo ücretsiz' : `kargo dahil ${formatPrice(low + cheapestOffer.shippingPrice)}`} · {timeAgoTr(cheapestOffer.lastSeenAt)}.
        {savings > 0 && <> Satıcılar arasında <strong>{formatPrice(savings)}</strong> fark var.</>}
      </p>
      <div className="lps__actions">
        <a
          href="#offer-table"
          className="btn btn--accent btn--lg"
          onClick={(e) => {
            e.preventDefault();
            document.getElementById('offer-table')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
          }}
        >
          {product.offers.length} satıcıyı karşılaştır
          <Icon name="arrow-down" size={16}/>
        </a>
        <a
          href={cheapestOffer.outboundClickHref || `/referrals/click?o=${cheapestOffer.merchantId}`}
          className="btn btn--ghost btn--lg"
          rel="nofollow sponsored noopener"
          target="_blank"
        >
          {cheapestMerchant.name}'a doğrudan git
          <Icon name="arrow-up-right" size={16}/>
        </a>
      </div>

      <div className="lps__sparks">
        <div>Stokta <strong>{inStockOffers.length} satıcı</strong></div>
        <div>En hızlı kargo <strong>1-2 gün</strong></div>
        {avg30 != null && <div>30 g. ort. <strong className="tabular">{formatPrice(avg30)}</strong></div>}
      </div>
    </section>
  );
}

function FreshnessRibbon({ product }) {
  if (!product.offers || !product.offers.length) return null;
  const newest = product.offers.reduce((a, b) => new Date(a.lastSeenAt) > new Date(b.lastSeenAt) ? a : b);
  const fresh = product.offers.filter(o => (Date.now() - new Date(o.lastSeenAt).getTime()) / 3600000 < 12).length;
  return (
    <div className="fresh">
      <span className="fresh__icon"><Icon name="clock" size={16} stroke={1.8}/></span>
      <div>
        <span>Bu sayfadaki fiyatlar son <strong>{timeAgoTr(newest.lastSeenAt)}</strong> tazelendi · <strong className="tabular">{fresh}/{product.offers.length}</strong> satıcıdan taze veri.</span>
        <em>Stok ve fiyat satıcıya tıkladığınızda satıcı sitesinde tekrar onaylanmalı.</em>
      </div>
    </div>
  );
}

function SpecTable({ specs }) {
  const [open, setOpen] = React.useState(false);
  const visible = open ? specs : specs.slice(0, 8);
  return (
    <>
      <div className="spec">
        {visible.map(([k, v], i) => (
          <div className="spec__row" key={i}>
            <div className="spec__k">{k}</div>
            <div className="spec__v">{v}</div>
          </div>
        ))}
      </div>
      {specs.length > 8 && (
        <button className="btn btn--ghost btn--sm" style={{ marginTop: 12 }} onClick={() => setOpen(o => !o)}>
          {open ? 'Daralt' : `Tüm ${specs.length} özelliği gör`}
        </button>
      )}
    </>
  );
}

function Faq({ items }) {
  if (!items.length) return <p style={{ fontSize: 14, color: 'var(--km-ink-500)' }}>Bu ürün için henüz soru cevap eklenmemiş.</p>;
  return (
    <div>
      {items.map(([q, a], i) => (
        <details className="faq__item" key={i} open={i === 0}>
          <summary className="faq__q">{q}</summary>
          <div className="faq__a">{a}</div>
        </details>
      ))}
    </div>
  );
}

function RelatedProducts({ products, onCompareToggle, compareSet }) {
  return (
    <div className="related-grid">
      {products.map(p => {
        const low = productLowest(p);
        const inCompare = compareSet.has(p.shortSlug);
        return (
          <a href={urlForProduct(p)} className="prod-card" key={p.shortSlug}>
            <div className="prod-card__img" style={p.imageUrl ? {
              backgroundImage: `url(${p.imageUrl})`,
              backgroundSize: 'cover',
              backgroundPosition: 'center',
            } : undefined}>
              <button
                className={`prod-card__compare ${inCompare ? 'prod-card__compare--on' : ''}`}
                onClick={(e) => { e.preventDefault(); onCompareToggle(p.shortSlug); }}
                aria-label={inCompare ? 'Karşılaştırmadan çıkar' : 'Karşılaştırmaya ekle'}
                title="Karşılaştırmaya ekle"
              >
                {inCompare ? <Icon name="check" size={14} stroke={2.4}/> : <Icon name="plus" size={14} stroke={2.4}/>}
              </button>
            </div>
            <div className="prod-card__body">
              <div className="prod-card__brand">{p.brand}</div>
              <div className="prod-card__name">{p.h1.replace(`${p.brand} `, '')}</div>
              <div className="prod-card__price tabular">{low != null ? <><small>₺</small>{formatPrice(low).replace('₺', '')}</> : 'Teklifleri gör'}</div>
              <div className="prod-card__merchants">{p.offers && p.offers.length ? `${p.offers.length} satıcıdan başlayan` : 'Teklifleri gör'}</div>
            </div>
          </a>
        );
      })}
    </div>
  );
}

function StickyCta({ product, visible }) {
  const low = productLowest(product);
  return (
    <div className={`sticky-cta ${visible ? '' : 'sticky-cta--hidden'}`}>
      <div className="sticky-cta__price">
        <span className="tabular">{low != null ? formatPrice(low) : 'Teklifleri gör'}</span>
        <small>{product.offers && product.offers.length ? `${product.offers.length} satıcıdan başlayan` : ''}</small>
      </div>
      <a href="#offer-table" className="btn btn--accent" onClick={(e) => {
        e.preventDefault();
        document.getElementById('offer-table')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }}>
        Satıcıları gör
        <Icon name="arrow-down" size={14}/>
      </a>
    </div>
  );
}

function PdpPage({ product, onCompareToggle, compareSet }) {
  const [stickyVisible, setStickyVisible] = React.useState(true);
  const [priceHistory, setPriceHistory] = React.useState(product.priceHistory || []);

  React.useEffect(() => {
    setPriceHistory(product.priceHistory || []);
    const api = window.kolaymarinApi;
    if (!api?.isLive || !product.slug) return;
    api.getPriceHistory(product.slug, 90).then(setPriceHistory).catch(() => {});
  }, [product.slug]);

  React.useEffect(() => {
    const robotsMeta = document.getElementById('km-robots');
    if (robotsMeta) {
      robotsMeta.content = product.entityStatus && product.entityStatus !== 'ACTIVE'
        ? 'noindex, follow'
        : 'index, follow';
    }
    return () => { if (robotsMeta) robotsMeta.content = 'index, follow'; };
  }, [product.shortSlug, product.entityStatus]);

  React.useEffect(() => {
    const el = document.getElementById('offer-table');
    if (!el) return;
    const obs = new IntersectionObserver(([entry]) => {
      setStickyVisible(!entry.isIntersecting);
    }, { rootMargin: '-50% 0px -10% 0px' });
    obs.observe(el);
    return () => obs.disconnect();
  }, [product.shortSlug]);

  const related = PRODUCTS.filter(p => p.shortSlug !== product.shortSlug).slice(0, 4);

  return (
    <main id="main" data-screen-label="PDP">
      <div className="container">
        <Breadcrumbs items={product.breadcrumbs.concat([product.h1.slice(0, 40) + '...'])}/>

        <div className="pdp-title">
          <h1>{product.h1}</h1>
          <div className="pdp-title__meta">
            <a href="#/"><strong>{product.brand}</strong></a>
            <span style={{ color: 'var(--km-ink-300)' }}>·</span>
            <a href="#/">{product.category}</a>
            {product.model && <>
              <span style={{ color: 'var(--km-ink-300)' }}>·</span>
              <span>Model {product.model}</span>
            </>}
            <span style={{ color: 'var(--km-ink-300)' }}>·</span>
            <span className="pdp-title__sku">{product.sku}</span>
            <button
              className="chip"
              onClick={() => onCompareToggle(product.shortSlug)}
              style={{ marginLeft: 'auto', cursor: 'pointer' }}
            >
              {compareSet.has(product.shortSlug)
                ? <><Icon name="check" size={11} stroke={2.4}/> Karşılaştırmada</>
                : <><Icon name="plus" size={11} stroke={2.4}/> Karşılaştırmaya ekle</>}
            </button>
          </div>
        </div>

        <div className="pdp-grid">
          <div>
            <FreshnessRibbon product={product}/>
            <Gallery product={product}/>

            <section className="sec" aria-labelledby="offers-heading" style={{ marginTop: 32 }}>
              <div className="sec__head">
                <h2 className="sec__title" id="offers-heading">
                  <span style={{ color: 'var(--km-deep)' }}>{product.offers.length}</span> satıcıdan teklif
                </h2>
                <span className="sec__sub">Liste fiyat + kargo + güven kombinasyonuna göre sıralı</span>
              </div>
              {(() => {
                const offs = product.offers;
                if (!offs || !offs.length) return null;
                const low = Math.min(...offs.map(o => o.price));
                const high = Math.max(...offs.map(o => o.price));
                const diff = high - low;
                const pct = Math.round(((high - low) / high) * 100);
                const newest = offs.reduce((a, b) => new Date(a.lastSeenAt) > new Date(b.lastSeenAt) ? a : b);
                const stockChanges = Math.max(2, Math.round(offs.length * 0.4));
                return (
                  <div className="pdp-activity" aria-label="Bu üründeki son aktivite">
                    <span className="pdp-activity__dot" aria-hidden="true"></span>
                    <span>
                      Bu üründe son 24 saatte <strong>{offs.length}</strong> teklif tarandı
                      <span className="pdp-activity__sep"> · </span>
                      <strong>{stockChanges}</strong> satıcı stok güncelledi
                      <span className="pdp-activity__sep"> · </span>
                      en taze tarama <strong>{timeAgoTr(newest.lastSeenAt)}</strong>
                      {diff > 0 && (
                        <>
                          <span className="pdp-activity__sep"> · </span>
                          satıcılar arası fark <strong className="tabular">{formatPrice(diff)}</strong>
                          <span className="savings-chip tabular">%{pct} tasarruf</span>
                        </>
                      )}
                    </span>
                  </div>
                );
              })()}
              <OfferTable product={product}/>
            </section>

            <section className="sec">
              <div className="sec__head">
                <h2 className="sec__title">Fiyat geçmişi</h2>
                <span className="sec__sub">Son 90 günde en düşük teklifin seyri</span>
              </div>
              <PriceHistoryChart series={priceHistory} statistics={product.statistics} merchants={product.offers}/>
            </section>

            {product.specs && product.specs.length > 0 && (
              <section className="sec">
                <div className="sec__head">
                  <h2 className="sec__title">Teknik özellikler</h2>
                </div>
                <SpecTable specs={product.specs}/>
              </section>
            )}

            {product.faq && product.faq.length > 0 && (
              <section className="sec">
                <div className="sec__head">
                  <h2 className="sec__title">Sık sorulanlar</h2>
                </div>
                <Faq items={product.faq}/>
              </section>
            )}
          </div>

          <aside className="pdp-grid__aside">
            <LowestPriceSummary product={product}/>

            <div className="kg-panel" style={{ marginTop: 16 }}>
              <h3 className="kg-panel__title">
                <Icon name="shield" size={11} stroke={2.2}/> Kolaymarin garantisi
              </h3>
              <ul className="kg-list">
                <li>
                  <Icon name="check" size={12} stroke={3}/>
                  <span>
                    <strong>Saatlik snapshot kontrolü</strong>
                    Her teklifte son tarama zamanı görünür. 14 günden eski veri sıralamadan düşer.
                  </span>
                </li>
                <li>
                  <Icon name="check" size={12} stroke={3}/>
                  <span>
                    <strong>Bozuk fiyat filtresi</strong>
                    Pazar ortalamasının %30 dışındaki fiyatlar otomatik flag’lanır ve manuel kontrolden geçer.
                  </span>
                </li>
                <li>
                  <Icon name="check" size={12} stroke={3}/>
                  <span>
                    <strong>Şüpheli stok tespiti</strong>
                    Tutarsız stok bildirimleri snapshot geçmişi ile karşılaştırılarak filtrelenir.
                  </span>
                </li>
                <li>
                  <Icon name="check" size={12} stroke={3}/>
                  <span>
                    <strong>Satıcı güven tier sistemi</strong>
                    Partner · Doğrulandı · Başlangıç — her rozet manuel onboardingle kazanılır, satın alınamaz.
                  </span>
                </li>
                <li>
                  <Icon name="check" size={12} stroke={3}/>
                  <span>
                    <strong>Sepet yok, üyelik yok</strong>
                    Satışı her zaman satıcı yapar. Kargo, iade, garanti, fatura — hepsi doğrudan satıcı ile sizin aranızda.
                  </span>
                </li>
              </ul>
            </div>
          </aside>
        </div>

        <section className="sec">
          <div className="sec__head">
            <h2 className="sec__title">Bu kategoride benzer ürünler</h2>
            <a href="#/" style={{ fontSize: 13, color: 'var(--km-deep)', fontWeight: 500 }}>Tüm {product.category} →</a>
          </div>
          <RelatedProducts products={related} onCompareToggle={onCompareToggle} compareSet={compareSet}/>
        </section>
      </div>

      <StickyCta product={product} visible={stickyVisible}/>
    </main>
  );
}

Object.assign(window, { PdpPage });