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

/* =============================================================
   PermissionPrompt.jsx — pre-OS-dialog rationale
   --------------------------------------------------------------
   Shown BEFORE the browser/OS permission dialog so the user
   understands *why* we're asking — significantly higher accept
   rates than going straight to the system prompt.

   Trigger:
     window.dispatchEvent(new CustomEvent("kd-permission-prompt", {
       detail: { kind: "camera" | "mic" | "notif" | "location",
                 onAllow, onDeny }
     }));
   ============================================================= */

const COPY = {
  camera: {
    icon: "image",
    accent: "#ff4ea8",
    title: "می‌تونیم از دوربین استفاده کنیم؟",
    why: "برای گرفتن عکس یا ضبط ویدیو لحظه‌ای، که بفرستی توی چالش امروز.",
    promise: "دسترسی فقط وقتیه که خودت روی دکمه‌ی دوربین بزنی. هیچ‌وقت پشت پرده فعال نمی‌شه.",
    cta: "اجازه بده",
  },
  mic: {
    icon: "audio",
    accent: "#44e3b8",
    title: "می‌تونیم از میکروفون استفاده کنیم؟",
    why: "برای ضبط صوت — پادکست، روایت، یا داستانک گفتاری.",
    promise: "وقتی ضبط می‌کنی یه نقطه قرمز روشن می‌بینی. هیچ‌وقت پنهانی نیست.",
    cta: "اجازه بده",
  },
  notif: {
    icon: "bell",
    accent: "#f5d589",
    title: "اعلان بفرستیم برات؟",
    why: "وقتی کسی روی پستت ستاره داد، یا تو چالش امروز برنده شدی، می‌خوایم خبرت کنیم.",
    promise: "می‌تونی هر نوع اعلان رو جدا توی تنظیمات خاموش کنی. اسپم نمی‌فرستیم.",
    cta: "اعلان بفرستین",
  },
  location: {
    icon: "target",
    accent: "#4be3ff",
    title: "موقعیت‌ت رو ببینیم؟",
    why: "تا چالش‌های منطقه‌ی خودت و هم‌ولایتی‌هات رو پیدا کنی.",
    promise: "فقط استانت رو نگه می‌داریم. موقعیت دقیق هیچ‌وقت ذخیره نمی‌شه.",
    cta: "اجازه بده",
  },
};

window.PermissionPrompt = function PermissionPrompt({ open, kind = "camera", onAllow, onDeny }) {
  useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") onDeny?.(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onDeny]);

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

  return (
    <div className="kd-perm" role="dialog" aria-modal="true">
      <div className="kd-perm__backdrop" onClick={onDeny} />
      <div className="kd-perm__sheet" style={{ ['--accent']: cfg.accent }}>
        <span className="kd-authgate__handle" />

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

        <h2 className="kd-perm__h">{cfg.title}</h2>
        <p className="kd-perm__sub">{cfg.why}</p>

        <div className="kd-perm__promise">
          <Icon name="check" size={14} stroke={2.4} />
          <span>{cfg.promise}</span>
        </div>

        <div className="kd-perm__nav">
          <button className="kd-perm__deny" onClick={onDeny}>نه ممنون</button>
          <button className="kd-btn kd-btn--primary kd-btn--md kd-perm__allow" onClick={onAllow}>
            {cfg.cta}
          </button>
        </div>

        <p className="kd-perm__foot">بعدش مرورگرت یه دیالوگ خودش نشون می‌ده — حتماً «بذار» رو بزن.</p>
      </div>
    </div>
  );
};
})();