import { useEffect, useState } from "react";
import { Bell, X } from "lucide-react";
import { useRootData } from "~/hooks/use-root-data";
import { usePushNotifications } from "~/hooks/usePushNotifications";

const DISMISS_KEY = "push_banner_dismissed";

/**
 * One-time, dismissible bar prompting logged-in users to enable web push.
 * Shown only when: logged in, push is supported, permission not yet decided,
 * and the user hasn't dismissed or already subscribed. A permanent toggle in
 * settings lets them change their mind later.
 */
export function PushPermissionBanner() {
  const { user } = useRootData();
  const { supported, permission, isSubscribed, subscribe, busy } =
    usePushNotifications();
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    if (typeof window === "undefined") return;
    const dismissed = localStorage.getItem(DISMISS_KEY) === "1";
    setVisible(
      !!user?.access_token &&
        supported &&
        permission === "default" &&
        !isSubscribed &&
        !dismissed
    );
  }, [user?.access_token, supported, permission, isSubscribed]);

  if (!visible) return null;

  const dismiss = () => {
    localStorage.setItem(DISMISS_KEY, "1");
    setVisible(false);
  };

  const enable = async () => {
    const ok = await subscribe();
    // Whether granted or denied, don't nag again from the banner.
    localStorage.setItem(DISMISS_KEY, "1");
    setVisible(false);
    return ok;
  };

  return (
    <div className="fixed bottom-[calc(58px+env(safe-area-inset-bottom))] lg:bottom-4 left-1/2 -translate-x-1/2 z-40 w-[92%] max-w-md lg:max-w-sm">
      <div className="flex items-center gap-3 rounded-2xl bg-BLACK text-white shadow-lg px-4 py-3">
        <Bell size={20} className="shrink-0" />
        <p className="text-[13px] leading-5 flex-1">
          اعلان‌ها را فعال کنید تا از پیام‌ها و وضعیت سفارش‌ها باخبر شوید.
        </p>
        <button
          onClick={enable}
          disabled={busy}
          className="shrink-0 rounded-xl bg-VITROWN_BLUE px-3 py-1.5 text-[13px] font-bold disabled:opacity-60"
        >
          {busy ? "..." : "فعال‌سازی"}
        </button>
        <button onClick={dismiss} aria-label="بستن" className="shrink-0 opacity-70">
          <X size={18} />
        </button>
      </div>
    </div>
  );
}