import { useCreditExposure } from "../lib/use-analytics-exposure";
import type { OpenGeniBrowserClient } from "@opengeni/sdk/browser";
import { Link, usePage } from "../lib/navigation";
import { CreditCardIcon, Loader2Icon, SparklesIcon } from "lucide-react";
import type { BillingCheckoutStatus, WorkspaceModelCatalogModel } from "@opengeni/sdk";
import { useEffect, useState } from "react";
import { toast } from "../lib/toast";

import { CouponRedeem } from "./credits/coupon-redeem";
import { CreditsCelebrationDialog } from "./credits/checkout-credits-celebration";

import { Button } from "../../ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "../../ui/dialog";
import { CreditAmountPicker } from "./credit-amount-picker";
import { Notice } from "../../ui/notice";
import { useAppContext } from "../app-context";
import { userErrorText } from "../../ui/api-error";
import { validTopupAmount } from "../lib/format";
import { analyticsAction } from "../../ui/analytics-actions";
import { billingCheckoutReturnUrl, checkoutTabReturnUrl } from "../lib/credit-checkout";
import { subscriptionAction } from "../lib/subscription-plans";

const DEFAULT_TOPUP = "25.00";

type CreditRequiredPromptProps = {
  open: boolean;
  workspaceId: string;
  accountId: string | null;
  canBuyCredits: boolean;
  purpose?: "required" | "topup" | undefined;
  onOpenChange: (open: boolean) => void;
};

export function CreditRequiredPrompt(props: CreditRequiredPromptProps) {
  return <CreditRequiredPromptView {...props} client={useAppContext().client} />;
}

export function CreditRequiredPromptView({
  client,
  open,
  workspaceId,
  accountId,
  canBuyCredits,
  purpose = "required",
  onOpenChange,
}: CreditRequiredPromptProps & { client: OpenGeniBrowserClient }) {
  const page = usePage();
  const [topupAmount, setTopupAmount] = useState(DEFAULT_TOPUP);
  const [busy, setBusy] = useState(false);
  // A redeemed coupon, celebrated in this dialog with its real amount.
  const [granted, setGranted] = useState<BillingCheckoutStatus | null>(null);
  useEffect(() => {
    if (!open) setGranted(null);
  }, [open]);
  const [stripeEnabled, setStripeEnabled] = useState(false);
  const [upgradeAccountId, setUpgradeAccountId] = useState<string | null>(null);
  const canUpgrade = open && canBuyCredits && accountId !== null && upgradeAccountId === accountId;

  useEffect(() => {
    setUpgradeAccountId(null);
    if (!open || !accountId || !canBuyCredits) {
      setStripeEnabled(false);
      return;
    }
    let active = true;
    setStripeEnabled(false);
    void client
      .getBilling({ accountId })
      .then(async (billing) => {
        if (active) setStripeEnabled(billing.mode === "stripe");
        if (!active || !billing.balance.plan || billing.mode !== "stripe") return;
        const catalog = await client.getBillingSubscriptionPlans({ accountId }).catch(() => null);
        if (
          active &&
          catalog?.plan &&
          catalog.plans.some((target) => {
            const action = subscriptionAction(billing.balance.plan!, catalog.plans, target);
            return action === "checkout" || action === "upgrade";
          })
        )
          setUpgradeAccountId(accountId);
      })
      .catch(() => {
        if (active) setStripeEnabled(false);
      });
    return () => {
      active = false;
    };
  }, [accountId, canBuyCredits, client, open]);

  async function buyCredits(): Promise<void> {
    if (!accountId || !validTopupAmount(topupAmount) || busy) return;
    setBusy(true);
    try {
      const session = await client.createBillingCheckout({
        amountUsd: Number(topupAmount),
        accountId,
        // Beside an embed, checkout ends on a page that asks to go back to it.
        successUrl: page.opensBeside
          ? checkoutTabReturnUrl(page.origin(), "success")
          : billingCheckoutReturnUrl(page.origin(), workspaceId, "success"),
        cancelUrl: page.opensBeside
          ? checkoutTabReturnUrl(page.origin(), "cancelled")
          : billingCheckoutReturnUrl(page.origin(), workspaceId, "cancelled"),
      });
      page.assign(session.url);
      // The web app has left for checkout; an embed stays and can buy again.
      if (page.opensBeside) setBusy(false);
    } catch (error) {
      toast.error("Checkout failed", { description: userErrorText(error) });
      setBusy(false);
    }
  }

  if (granted) {
    return <CreditsCelebrationDialog status={granted} open={open} onOpenChange={onOpenChange} />;
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>
            {purpose === "topup" ? "Add Opengeni credits" : "Add Opengeni credits to continue"}
          </DialogTitle>
          <DialogDescription>
            {purpose === "topup"
              ? "Choose an amount and pay in Stripe Checkout, or redeem a coupon code."
              : "Add credits to use this model, or choose another model."}
          </DialogDescription>
        </DialogHeader>
        {canBuyCredits && stripeEnabled ? (
          <div className="grid gap-4">
            <CreditAmountPicker value={topupAmount} onChange={setTopupAmount} disabled={busy} />
            <Button
              type="button"
              variant={purpose === "topup" ? "default" : "outline"}
              disabled={busy || !validTopupAmount(topupAmount)}
              onClick={() => void buyCredits()}
              {...analyticsAction("buy_credits")}
            >
              {busy ? (
                <Loader2Icon className="size-4 animate-spin" />
              ) : (
                <CreditCardIcon className="size-4" />
              )}
              {purpose === "topup" ? "Continue to Stripe" : "Buy credits"}
            </Button>
            {accountId ? (
              <div className="border-t border-border pt-3">
                <CouponRedeem
                  client={client}
                  accountId={accountId}
                  workspaceId={workspaceId}
                  disabled={busy}
                  onGranted={setGranted}
                />
              </div>
            ) : null}
          </div>
        ) : !canBuyCredits ? (
          <p className="text-sm text-fg-muted">
            Ask an organization owner to add credits, or an admin to connect a model.
          </p>
        ) : null}
        {purpose === "required" ? (
          <DialogFooter>
            <Button asChild type="button">
              <Link
                to="/workspaces/$workspaceId/organization"
                params={{ workspaceId }}
                search={
                  canUpgrade
                    ? { section: "billing" }
                    : { section: "models", workspace: workspaceId }
                }
                onClick={() => onOpenChange(false)}
                {...(canUpgrade ? {} : analyticsAction("connect_model"))}
              >
                {canUpgrade ? (
                  <CreditCardIcon className="size-3.5" />
                ) : (
                  <SparklesIcon className="size-3.5" />
                )}
                {canUpgrade ? "View upgrade options" : "Connect a model"}
              </Link>
            </Button>
          </DialogFooter>
        ) : null}
      </DialogContent>
    </Dialog>
  );
}

export function EmptyCreditsNotice({
  workspaceId,
  accountId,
  canBuyCredits,
  canReadBilling,
  creditFunding,
}: {
  workspaceId: string;
  accountId: string | null;
  canBuyCredits: boolean;
  canReadBilling: boolean;
  creditFunding?: WorkspaceModelCatalogModel["creditFunding"] | undefined;
}) {
  const client = useAppContext().client;
  const [legacyEmpty, setEmpty] = useState(false);
  const [stripeEnabled, setStripeEnabled] = useState(false);

  useEffect(() => {
    setEmpty(false);
    setStripeEnabled(false);
    if (!accountId || !canReadBilling) return;
    let active = true;
    void client
      .getBilling({ accountId })
      .then((summary) => {
        if (!active) return;
        setEmpty(summary.mode !== "disabled" && summary.balance.balanceMicros <= 0);
        setStripeEnabled(summary.mode === "stripe");
      })
      .catch(() => {
        if (!active) return;
        setEmpty(false);
        setStripeEnabled(false);
      });
    return () => {
      active = false;
    };
  }, [accountId, canReadBilling, client]);

  const empty =
    stripeEnabled && (creditFunding === undefined ? legacyEmpty : creditFunding === "unavailable");
  useCreditExposure(empty, workspaceId);
  if (!empty) return null;
  return (
    <Notice tone="waiting" title="This model uses Opengeni credits">
      No credits are available for this model. Choose another model or add credits.
      <div className="mt-2 flex flex-wrap gap-2">
        {canBuyCredits && stripeEnabled ? (
          <Button asChild type="button" size="sm" variant="outline">
            <Link
              to="/workspaces/$workspaceId/organization"
              params={{ workspaceId }}
              search={{ section: "billing" }}
              {...analyticsAction("buy_credits")}
            >
              <CreditCardIcon className="size-3.5" />
              Buy credits
            </Link>
          </Button>
        ) : null}
        <Button asChild type="button" size="sm">
          <Link
            to="/workspaces/$workspaceId/organization"
            params={{ workspaceId }}
            search={{ section: "models", workspace: workspaceId }}
            {...analyticsAction("connect_model")}
          >
            Connect a model
          </Link>
        </Button>
      </div>
    </Notice>
  );
}