"use client";

import { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { subscribeCommissionPush, syncCommissionPush } from "./push-client";

type PushRequest = { scope: "customer" | "admin"; publicKey: string };
const askedKey = "commission-push-asked";

export function CommissionPushEntryPrompt({ scope }: { scope: "customer" | "admin" }) {
  const [request, setRequest] = useState<PushRequest | null>(null);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");

  useEffect(() => {
    if (!window.isSecureContext ||
      !("Notification" in window) || !("PushManager" in window) || !("serviceWorker" in navigator) ||
      Notification.permission === "denied" ||
      (Notification.permission === "default" && sessionStorage.getItem(askedKey)) ||
      (Notification.permission === "granted" && (sessionStorage.getItem(`commission-push-synced-${scope}`) ||
        (scope === "customer" && sessionStorage.getItem("commission-push-synced-admin"))))) return;

    let active = true;
    void fetch("/api/commission/push-subscription", { cache: "no-store" }).then(async (response) => {
      if (!response.ok) return;
      const config = await response.json() as { publicKey: string; canAdmin: boolean };
      if (!active || (scope === "admin" && !config.canAdmin)) return;
      const subscriptionScope = config.canAdmin ? "admin" : scope;
      if (Notification.permission === "granted") {
        await syncCommissionPush(subscriptionScope, config.publicKey);
        return;
      }
      if (Notification.permission !== "default") return;
      sessionStorage.setItem(askedKey, "1");
      setRequest({ scope: subscriptionScope, publicKey: config.publicKey });
    }).catch(() => undefined);
    return () => { active = false; };
  }, [scope]);

  async function enable() {
    if (!request) return;
    setBusy(true);
    setError("");
    try {
      await subscribeCommissionPush(request.scope, request.publicKey);
      setRequest(null);
    } catch {
      setError("เปิดการแจ้งเตือนไม่สำเร็จ กรุณาลองอีกครั้ง");
    } finally { setBusy(false); }
  }

  return <Dialog open={request !== null} onOpenChange={(open) => { if (!open) setRequest(null); }}>
    <DialogContent>
      <DialogHeader>
        <DialogTitle>รับการแจ้งเตือนข้อความใหม่?</DialogTitle>
        <DialogDescription>เมื่อมีข้อความใหม่ใน Ticket เราจะแจ้งเตือนพร้อมชื่อผู้ส่งและข้อความ แม้ปิดแท็บแล้ว</DialogDescription>
      </DialogHeader>
      {error && <p role="alert" className="text-sm text-destructive">{error}</p>}
      <DialogFooter>
        <Button type="button" variant="outline" disabled={busy} onClick={() => setRequest(null)}>ไว้ก่อน</Button>
        <Button type="button" disabled={busy} onClick={() => void enable()}>เปิดการแจ้งเตือน</Button>
      </DialogFooter>
    </DialogContent>
  </Dialog>;
}