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

/* =============================================================
   AuthGate.jsx — lazy registration bottom-sheet
   --------------------------------------------------------------
   Triggered when an anonymous user attempts a gated action.
   Each action carries its own copy + icon + accent so the prompt
   feels contextual, not generic.

   Trigger from anywhere via:
     window.dispatchEvent(new CustomEvent("kd-auth-prompt", {
       detail: { action: "rate" | "upload" | "follow" | "save" | "comment", onContinue: () => {} }
     }));

   The App listens, renders AuthGate, and if the user taps
   «ادامه با شماره موبایل» it routes to Login (and on success,
   the optional `onContinue` callback fires).
   ============================================================= */

const COPY = {
  rate: {
    icon: "star",
    accent: "#f5d589",
    title: "این ستاره برای توئه",
    sub: "برای امتیاز دادن یه شماره موبایل کافیه. یه دقیقه‌ای تموم میشه.",
  },
  upload: {
    icon: "upload",
    accent: "#ff4ea8",
    title: "یه قدم مونده تا اثرت ثبت بشه",
    sub: "برای ارسال محتوا یه شماره موبایل می‌خوایم. هیچ فرم خسته‌کننده‌ای در کار نیست.",
  },
  follow: {
    icon: "profile",
    accent: "#9a6cff",
    title: "می‌خوای دنبالش کنی؟",
    sub: "برای دنبال‌کردن کاربرها یه شماره موبایل کافیه.",
  },
  save: {
    icon: "bookmark",
    accent: "#4be3ff",
    title: "ذخیره‌ش کنیم برات",
    sub: "برای ذخیره‌ی محتوا یه شماره موبایل کافیه — هر کجا که بودی پیداش می‌کنی.",
  },
  comment: {
    icon: "comment",
    accent: "#44e3b8",
    title: "یه چیزی بگو",
    sub: "برای کامنت گذاشتن یه شماره موبایل کافیه. اولین حرفت همین‌جاست.",
  },
  default: {
    icon: "profile",
    accent: "#ff4ea8",
    title: "یه قدم مونده",
    sub: "برای ادامه، یه شماره موبایل بهمون بده.",
  },
};

window.AuthGate = function AuthGate({ open, action = "default", onContinue, onDismiss }) {
  // Lock body scroll when open
  useEffect(() => {
    if (!open) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => { document.body.style.overflow = prev; };
  }, [open]);

  // Escape to dismiss
  useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") onDismiss?.(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onDismiss]);

  if (!open) return null;
  const cfg = COPY[action] || COPY.default;

  return (
    <div className="kd-authgate" role="dialog" aria-modal="true">
      <div className="kd-authgate__backdrop" onClick={onDismiss} />
      <div className="kd-authgate__sheet" style={{ ['--accent']: cfg.accent }}>
        <span className="kd-authgate__handle" aria-hidden="true" />

        <div className="kd-authgate__icon">
          <Icon name={cfg.icon} size={28} stroke={1.7} />
        </div>

        <h2 className="kd-authgate__h">{cfg.title}</h2>
        <p className="kd-authgate__sub">{cfg.sub}</p>

        <div className="kd-authgate__hint">
          <Icon name="check" size={14} stroke={2.4} />
          هیچ پسورد و فرمی در کار نیست — فقط یه کد ۵ رقمی.
        </div>

        <button className="kd-btn kd-btn--primary kd-btn--lg kd-authgate__cta" onClick={onContinue}>
          ادامه با شماره موبایل
          <Icon name="back" size={16} stroke={2.4} />
        </button>

        <button className="kd-authgate__later" onClick={onDismiss}>
          بعداً
        </button>
      </div>
    </div>
  );
};
})();