import React, { useState } from "react";
import { Button } from "@mantine/core";
import { useTranslation } from "react-i18next";
import licenseService from "@app/services/licenseService";
import { alert } from "@app/components/toast";

interface ManageBillingButtonProps {
  returnUrl?: string;
}

export const ManageBillingButton: React.FC<ManageBillingButtonProps> = ({
  returnUrl = window.location.href,
}) => {
  const { t } = useTranslation();
  const [loading, setLoading] = useState(false);

  const handleClick = async () => {
    try {
      setLoading(true);

      // Get current license key for authentication
      const licenseInfo = await licenseService.getLicenseInfo();

      if (!licenseInfo.licenseKey) {
        throw new Error(
          "No license key found. Please activate a license first.",
        );
      }

      // Create billing portal session with license key
      const response = await licenseService.createBillingPortalSession(
        returnUrl,
        licenseInfo.licenseKey,
      );

      // Open billing portal in new tab
      window.open(response.url, "_blank");
      setLoading(false);
    } catch (error: unknown) {
      console.error("Failed to open billing portal:", error);
      alert({
        alertType: "error",
        title: t("billing.portal.error", "Failed to open billing portal"),
        body:
          (error instanceof Error ? error.message : undefined) ||
          "Please try again or contact support.",
      });
      setLoading(false);
    }
  };

  return (
    <Button variant="outline" onClick={handleClick} loading={loading}>
      {t("billing.manageBilling", "Manage Billing")}
    </Button>
  );
};
