/* global React */
(function(){
const { useState, useEffect } = React;

/* =============================================================
   AdSlot.jsx — Tapsell external ad placement (P1-11)
   --------------------------------------------------------------
   External (Tapsell-network) ads, shown ONLY to logged-OUT users.
   The moment a user signs in, ads disappear — that's the carrot:
   "ورود کن، دیگه تبلیغ نبینی". So every slot doubles as a soft
   registration nudge.

   Variants:
     - "feed"   : in-feed native card (matches masonry rhythm)
     - "banner" : slim sticky-ish horizontal banner
   The real SDK injects creative into [data-tapsell-zone]; here we
   render a faithful placeholder labelled «تبلیغ» per ad-network
   transparency rules.

   Usage:
     <AdSlot variant="feed" zone="zone_feed_1" signedIn={signedIn} onLogin={...} />
   Returns null entirely when signedIn — no layout gap.
   ============================================================= */

const CREATIVES = [
  {
    brand: "دیجی‌کالا",
    glyph: "د",
    color: "#ed1944",
    title: "حراج بهارانه تا ۷۰٪",
    body: "هزاران کالا با ارسال رایگان — فقط تا آخر هفته.",
    cta: "ببین",
  },
  {
    brand: "اسنپ‌فود",
    glyph: "S",
    color: "#e72e4b",
    title: "اولین سفارش، ۵۰٪ تخفیف",
    body: "غذای محله‌ت رو سریع‌تر از همیشه بگیر.",
    cta: "سفارش بده",
  },
  {
    brand: "فیلیمو",
    glyph: "ف",
    color: "#3fb98c",
    title: "یک ماه تماشای رایگان",
    body: "سریال‌ها و فیلم‌های روز ایران، بدون محدودیت.",
    cta: "شروع کن",
  },
];

window.AdSlot = function AdSlot({ variant = "feed", zone = "zone_default", signedIn = false, onLogin }) {
  // pick a stable creative per zone
  const creative = CREATIVES[Math.abs(hashStr(zone)) % CREATIVES.length];
  const [closed, setClosed] = useState(false);

  // Logged-in users never see ads
  if (signedIn || closed) return null;

  if (variant === "banner") {
    return (
      <div className="kd-ad kd-ad--banner" data-tapsell-zone={zone} style={{ ['--brand']: creative.color }}>
        <span className="kd-ad__label">تبلیغ</span>
        <span className="kd-ad__glyph" style={{ background: creative.color }}>{creative.glyph}</span>
        <div className="kd-ad__bannertext">
          <strong>{creative.title}</strong>
          <span>{creative.brand}</span>
        </div>
        <button className="kd-ad__cta">{creative.cta}</button>
        <button className="kd-ad__close" aria-label="بستن" onClick={() => setClosed(true)}>
          <Icon name="close" size={13} stroke={2.4} />
        </button>
      </div>
    );
  }

  // feed native card
  return (
    <div className="kd-ad kd-ad--feed" data-tapsell-zone={zone} style={{ ['--brand']: creative.color }}>
      <div className="kd-ad__top">
        <span className="kd-ad__glyph" style={{ background: creative.color }}>{creative.glyph}</span>
        <div className="kd-ad__brand">
          <strong>{creative.brand}</strong>
          <span>تبلیغ · Tapsell</span>
        </div>
        <button className="kd-ad__close" aria-label="بستن" onClick={() => setClosed(true)}>
          <Icon name="close" size={14} stroke={2.4} />
        </button>
      </div>

      <div className="kd-ad__creative">
        <div className="kd-ad__creative-glow" style={{ background: creative.color }} />
        <div className="kd-ad__creative-text">
          <h4>{creative.title}</h4>
          <p>{creative.body}</p>
        </div>
      </div>

      <div className="kd-ad__foot">
        <button className="kd-ad__cta kd-ad__cta--block">{creative.cta}</button>
      </div>

      {/* registration nudge — the carrot */}
      <button className="kd-ad__noads" onClick={onLogin}>
        <Icon name="check" size={12} stroke={2.6} />
        ورود کن تا دیگه تبلیغ نبینی
      </button>
    </div>
  );
};

function hashStr(s) {
  let h = 0;
  for (let i = 0; i < s.length; i++) { h = (h << 5) - h + s.charCodeAt(i); h |= 0; }
  return h;
}
})();