"use client";

import { BellRing, BellOff } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useT } from "@/i18n";
import { useWebPush } from "@/features/notifications/web-push-provider";

/**
 * The browser-notifications switch, shown where notifications are: the bell's menu and the notifications page.
 * Renders nothing when browser notifications are not available here.
 */
export function WebPushToggle({ className }: { className?: string }) {
  const t = useT();
  const { status, working, enable, disable } = useWebPush();

  if (status === "unavailable") return null;

  if (status === "blocked") {
    return (
      <p className={className} role="status">
        <BellOff className="me-1 inline h-3.5 w-3.5" aria-hidden />
        {t("notifications.push.blocked")}
      </p>
    );
  }

  if (status === "on") {
    return (
      <div className={className}>
        <span className="inline-flex items-center gap-1 text-xs text-muted-foreground">
          <BellRing className="h-3.5 w-3.5 text-success" aria-hidden />
          {t("notifications.push.on")}
        </span>
        <Button type="button" variant="ghost" size="sm" loading={working} onClick={() => void disable()}>
          {t("notifications.push.turnOff")}
        </Button>
      </div>
    );
  }

  return (
    <div className={className}>
      <Button type="button" variant="outline" size="sm" loading={working} onClick={() => void enable()}>
        <BellRing className="h-4 w-4" aria-hidden />
        {t("notifications.push.turnOn")}
      </Button>
      <p className="mt-1 text-xs text-muted-foreground">{t("notifications.push.hint")}</p>
    </div>
  );
}