"use client";

import { App, Button, Tag, Tooltip } from "antd";
import { CopyOutlined } from "@ant-design/icons";
import { useEffect, useState } from "react";
import { getAppIp } from "@/lib/api/servers";

export function useAppIp(isActive = true): string | null | undefined {
  const [ip, setIp] = useState<string | null | undefined>(undefined);

  useEffect(() => {
    if (!isActive) return;
    void getAppIp()
      .then(setIp)
      .catch(() => setIp(null));
  }, [isActive]);

  return ip;
}

export function CopyIpButton({ ip }: { ip: string }) {
  const { message } = App.useApp();

  async function handleCopy() {
    try {
      await navigator.clipboard.writeText(ip);
      message.success(`Copied ${ip}.`);
    } catch {
      message.error("Couldn't copy - select the address and copy it by hand.");
    }
  }

  return (
    <Tooltip title="Copy">
      <Button size="small" type="text" icon={<CopyOutlined />} aria-label="Copy the IP address" onClick={() => void handleCopy()} className="dms_app_ip_copy_btn" />
    </Tooltip>
  );
}

export function AppIpBadge() {
  const ip = useAppIp();

  if (!ip) return null;

  return (
    <Tooltip title="The address to allow in a cloud security group, a server firewall and the BT Panel API whitelist.">
      <Tag className="!m-0 flex items-center gap-1 dms_servers_app_ip_badge">
        This app&apos;s public IP: <span className="font-mono">{ip}</span>
        <CopyIpButton ip={ip} />
      </Tag>
    </Tooltip>
  );
}