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

/* =============================================================
   PushManager.jsx — push subscribe prompt + in-app toast (P1-12)
   --------------------------------------------------------------
   Two pieces:
   1) PushOptIn — a soft, dismissible banner that appears after
      the user has been active a while, asking to enable push.
      Tapping «بله» fires the PermissionPrompt(notif) → OS dialog.
   2) PushToast — an in-app representation of an incoming push
      (used to demo how a notification looks when it arrives while
      the app is open). Slides in top, auto-dismisses.

   Triggers:
     window.dispatchEvent(new CustomEvent("kd-push-toast", {
       detail: { icon, title, body, accent }
     }));
   ============================================================= */

window.PushOptIn = function PushOptIn({ onEnable, onDismiss }) {
  return (
    <div className="kd-pushoptin" role="status">
      <div className="kd-pushoptin__icon"><Icon name="bell" size={20} stroke={1.8} /></div>
      <div className="kd-pushoptin__text">
        <strong>خبرت کنیم؟</strong>
        <span>وقتی روی پستت ستاره خورد یا برنده شدی، اول از همه می‌فهمی.</span>
      </div>
      <div className="kd-pushoptin__actions">
        <button className="kd-pushoptin__no" onClick={onDismiss}>الان نه</button>
        <button className="kd-btn kd-btn--primary kd-btn--sm" onClick={onEnable}>بله، خبرم کن</button>
      </div>
    </div>
  );
};

window.PushToast = function PushToast() {
  const [toasts, setToasts] = useState([]);

  useEffect(() => {
    const onToast = (e) => {
      const id = Date.now() + Math.random();
      const t = { id, ...(e.detail || {}) };
      setToasts(list => [...list, t]);
      setTimeout(() => setToasts(list => list.filter(x => x.id !== id)), 5200);
    };
    window.addEventListener("kd-push-toast", onToast);
    return () => window.removeEventListener("kd-push-toast", onToast);
  }, []);

  if (toasts.length === 0) return null;
  return (
    <div className="kd-pushtoast-stack">
      {toasts.map(t => (
        <div key={t.id} className="kd-pushtoast" style={{ ['--accent']: t.accent || "#ff4ea8" }}>
          <div className="kd-pushtoast__icon"><Icon name={t.icon || "bell"} size={18} stroke={1.9} /></div>
          <div className="kd-pushtoast__body">
            <strong>{t.title || "کشوردوست"}</strong>
            <span>{t.body}</span>
          </div>
          <button className="kd-pushtoast__close" onClick={() => setToasts(list => list.filter(x => x.id !== t.id))} aria-label="بستن">
            <Icon name="close" size={13} stroke={2.2} />
          </button>
        </div>
      ))}
    </div>
  );
};
})();