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

/* =============================================================
   AppBanners.jsx — PWA install + update banners (P2-08)
   --------------------------------------------------------------
   - InstallBanner: slim bottom banner prompting "Add to home
     screen". Captures beforeinstallprompt when available; shows
     a faithful placeholder otherwise. Dismiss persists.
   - UpdateBanner: appears when the service worker reports a new
     version waiting. Tapping «به‌روزرسانی» reloads.

   Both are driven by simple state here for the kit; in prod they
   hook beforeinstallprompt + SW 'waiting'.
   ============================================================= */

window.InstallBanner = function InstallBanner() {
  const [show, setShow] = useState(false);

  useEffect(() => {
    let dismissed = false;
    try { dismissed = localStorage.getItem("kd-install-dismissed") === "1"; } catch {}
    if (dismissed) return;
    // In a real PWA: window.addEventListener('beforeinstallprompt', ...).
    // For the kit, surface after a short delay so reviewers can see it.
    const t = setTimeout(() => setShow(true), 3500);
    return () => clearTimeout(t);
  }, []);

  const dismiss = () => {
    setShow(false);
    try { localStorage.setItem("kd-install-dismissed", "1"); } catch {}
  };
  const install = () => {
    // would call deferredPrompt.prompt()
    setShow(false);
    window.dispatchEvent(new CustomEvent("kd-push-toast", {
      detail: { icon: "check", accent: "#44e3b8", title: "در حال نصب…", body: "کشوردوست داره به صفحه‌ی اصلی‌ت اضافه می‌شه." }
    }));
  };

  if (!show) return null;
  return (
    <div className="kd-installbar">
      <img className="kd-installbar__logo" src="../../assets/logo-512.png" alt="" />
      <div className="kd-installbar__text">
        <strong>کشوردوست رو نصب کن</strong>
        <span>سریع‌تر باز می‌شه، تمام‌صفحه، و آفلاین هم کار می‌کنه.</span>
      </div>
      <button className="kd-installbar__cta" onClick={install}>نصب</button>
      <button className="kd-installbar__close" aria-label="بستن" onClick={dismiss}>
        <Icon name="close" size={14} stroke={2.4} />
      </button>
    </div>
  );
};

window.UpdateBanner = function UpdateBanner() {
  const [show, setShow] = useState(false);

  useEffect(() => {
    const onUpdate = () => setShow(true);
    window.addEventListener("kd-sw-update", onUpdate);
    return () => window.removeEventListener("kd-sw-update", onUpdate);
  }, []);

  if (!show) return null;
  return (
    <div className="kd-updatebar" role="status">
      <span className="kd-updatebar__dot" />
      <div className="kd-updatebar__text">
        <strong>نسخه‌ی تازه آماده‌ست</strong>
        <span>برای استفاده از آخرین امکانات، صفحه رو تازه کن.</span>
      </div>
      <button className="kd-updatebar__cta" onClick={() => location.reload()}>به‌روزرسانی</button>
      <button className="kd-updatebar__later" onClick={() => setShow(false)}>بعداً</button>
    </div>
  );
};
})();