"use client";

import { useCallback, useState } from "react";

export function NotificationPermissionButton() {
  const [permission, setPermission] = useState<NotificationPermission | "unsupported">(
    () =>
      typeof window !== "undefined" && "Notification" in window
        ? Notification.permission
        : "unsupported",
  );

  const request = useCallback(async () => {
    if (typeof window === "undefined" || !("Notification" in window)) {
      setPermission("unsupported");
      return;
    }
    const result = await Notification.requestPermission();
    setPermission(result);
  }, []);

  if (permission === "unsupported") {
    return <p className="chart-meta">Browser notifications not supported here.</p>;
  }

  if (permission === "granted") {
    return <p className="chart-meta">Desktop notifications enabled.</p>;
  }

  return (
    <button type="button" className="toolbar-btn" onClick={() => void request()}>
      Enable desktop notifications
    </button>
  );
}