"use client";

/**
 * PushPrompt — a gentle on-load invitation to enable browser notifications,
 * shown to signed-in users who haven't decided yet.
 *
 * Browsers require a user gesture to request notification permission, so this
 * is a *soft* ask: the real `Notification.requestPermission()` only fires
 * when the user taps "Enable". We show it when push is supported, the server
 * has push configured, permission is still "default", the user isn't already
 * subscribed, and they haven't recently dismissed it (7-day cooldown).
 */

import { useEffect, useState } from "react";
import { Bell, X } from "lucide-react";
import { toast } from "sonner";
import { useAuth } from "@/components/auth/auth-provider";
import {
  enablePush,
  isPushEnabled,
  pushConfigured,
  pushPermission,
  pushSupported,
} from "@/lib/push";

const DISMISS_KEY = "push.prompt.dismissedAt";
const COOLDOWN_MS = 7 * 24 * 60 * 60 * 1000;

export function PushPrompt() {
  const { user, loading } = useAuth();
  const [show, setShow] = useState(false);
  const [busy, setBusy] = useState(false);

  const userId = user?.id;
  useEffect(() => {
    if (loading || !userId) return;
    let cancelled = false;

    // Async eligibility check — never setState synchronously in the effect.
    (async () => {
      if (!pushSupported() || pushPermission() !== "default") return;
      const dismissed = Number(window.localStorage.getItem(DISMISS_KEY) || 0);
      if (dismissed && Date.now() - dismissed < COOLDOWN_MS) return;
      if (!(await pushConfigured())) return;
      if (await isPushEnabled()) return;
      if (!cancelled) setShow(true);
    })();

    return () => {
      cancelled = true;
    };
  }, [userId, loading]);

  function dismiss() {
    window.localStorage.setItem(DISMISS_KEY, String(Date.now()));
    setShow(false);
  }

  async function enable() {
    setBusy(true);
    try {
      await enablePush();
      toast.success("Notifications enabled 🙏");
      setShow(false);
    } catch (err) {
      toast.error(err instanceof Error ? err.message : "Couldn't enable notifications.");
      // A denial / dismissal shouldn't keep re-prompting.
      dismiss();
    } finally {
      setBusy(false);
    }
  }

  if (!show) return null;

  return (
    <div className="fixed inset-x-0 bottom-20 z-40 flex justify-center px-4 md:bottom-4">
      <div className="flex w-full max-w-md items-start gap-3 rounded-2xl border border-border bg-card p-4 shadow-lg">
        <span className="inline-flex size-9 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary">
          <Bell className="size-4.5" />
        </span>
        <div className="min-w-0 flex-1">
          <p className="text-sm font-semibold text-foreground">
            Stay with your sādhana
          </p>
          <p className="mt-0.5 text-sm text-muted-foreground leading-snug">
            Turn on notifications for daily reminders, follow requests, and
            more — even when the app is closed.
          </p>
          <div className="mt-3 flex items-center gap-2">
            <button
              type="button"
              onClick={enable}
              disabled={busy}
              className="inline-flex h-9 items-center justify-center rounded-lg bg-primary px-4 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-60"
            >
              {busy ? "Enabling…" : "Enable"}
            </button>
            <button
              type="button"
              onClick={dismiss}
              className="inline-flex h-9 items-center justify-center rounded-lg px-3 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
            >
              Not now
            </button>
          </div>
        </div>
        <button
          type="button"
          onClick={dismiss}
          aria-label="Dismiss"
          className="-mr-1 -mt-1 inline-flex size-7 shrink-0 items-center justify-center rounded-full text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
        >
          <X className="size-4" />
        </button>
      </div>
    </div>
  );
}