import { createRive } from "@aerofoil/rive-solid-canvas";
import { Button } from "@cap/ui-solid";
import { action, useAction } from "@solidjs/router";
import { createMutation, useQueryClient } from "@tanstack/solid-query";
import { invoke } from "@tauri-apps/api/core";
import { listen } from "@tauri-apps/api/event";
import { getCurrentWindow, Window } from "@tauri-apps/api/window";
import { onOpenUrl } from "@tauri-apps/plugin-deep-link";
import * as shell from "@tauri-apps/plugin-shell";
import { Accessor, createSignal, onCleanup, onMount, Show } from "solid-js";
import { generalSettingsStore } from "~/store";
import { identifyUser, trackEvent } from "~/utils/analytics";
import { clientEnv } from "~/utils/env";
import { getProPlanId } from "~/utils/plans";
import { createLicenseQuery } from "~/utils/queries";
import { commands } from "~/utils/tauri";
import { apiClient, licenseApiClient, protectedHeaders } from "~/utils/web-api";
import PricingRive from "../../assets/rive/pricing.riv";
import { authStore } from "../../store";

import { Dialog, DialogContent, Input } from "../editor/ui";

const proFeatures = [
  "Commercial License Included",
  "Unlimited cloud storage & Shareable links",
  "Connect custom S3 storage bucket",
  "Advanced teams features",
  "Unlimited views",
  "Password protected videos",
  "Advanced analytics",
  "Priority support",
];

import { RuntimeLoader } from "@rive-app/canvas";
import riveWASMResource from "@rive-app/canvas/rive.wasm?url";
import { createSignInMutation } from "~/utils/auth";

RuntimeLoader.setWasmUrl(riveWASMResource);

export default function Page() {
  const [isProAnnual, setIsProAnnual] = createSignal(true);
  const [isCommercialAnnual, setIsCommercialAnnual] = createSignal(true);
  const [upgradeComplete, setUpgradeComplete] = createSignal(false);
  const [loading, setLoading] = createSignal(false);
  const signIn = createSignInMutation();
  const license = createLicenseQuery();
  const [openLicenseDialog, setOpenLicenseDialog] = createSignal(false);

  const resetLicense = createMutation(() => ({
    mutationFn: async () => {
      const generalSettings = await generalSettingsStore.get();
      if (
        !generalSettings?.instanceId ||
        !license.data ||
        license.data.type !== "commercial"
      ) {
        throw new Error("No instance ID or valid commercial license found");
      }

      const resp = await licenseApiClient.activateCommercialLicense({
        headers: {
          licensekey: license.data.licenseKey,
          instanceid: generalSettings.instanceId,
        },
        body: { reset: true },
      });

      if (resp.status !== 200) {
        if (
          typeof resp.body === "object" &&
          resp.body &&
          "message" in resp.body
        )
          throw resp.body.message;
        throw new Error((resp.body as any).toString());
      }
    },
    onSuccess: async () => {
      await generalSettingsStore.set({
        commercialLicense: undefined,
      });
      license.refetch();
    },
  }));

  const openCheckoutInExternalBrowser = async () => {
    console.log("Opening checkout in external browser");
    setLoading(true);

    try {
      const auth = await authStore.get();

      console.log({ auth });
      if (!auth) {
        console.log("No auth found, starting sign in flow");
        await signIn.mutateAsync(new AbortController());
      }

      const planId = getProPlanId(isProAnnual() ? "yearly" : "monthly");
      console.log("Getting checkout URL for plan:", planId);
      const response = await apiClient.desktop.getProSubscribeURL({
        body: { priceId: planId },
        headers: await protectedHeaders(),
      });

      if (response.status === 200) {
        console.log("Opening checkout URL in external browser");
        commands.openExternalLink(response.body.url);
        console.log("Minimizing upgrade window");
        const window = await Window.getByLabel("upgrade");
        if (window) await window.minimize();
      } else {
        console.error("Failed to get checkout URL, status:", response.status);
      }
    } catch (error) {
      console.error("Error getting checkout URL:", error);
    } finally {
      setLoading(false);
    }
  };

  const openCommercialCheckout = createMutation(() => ({
    mutationFn: async () => {
      const resp = await licenseApiClient.createCommercialCheckoutUrl({
        body: { type: isCommercialAnnual() ? "yearly" : "lifetime" },
      });

      if (resp.status === 200) {
        console.log("Opening checkout URL in external browser");
        commands.openExternalLink(resp.body.url);
        console.log("Minimizing upgrade window");
        const window = await Window.getByLabel("upgrade");
        if (window) {
          await window.minimize();
        }
      } else {
        throw resp.body;
      }
    },
  }));

  // onMount(async () => {
  //   console.log("Component mounted");
  //   const unsubscribeDeepLink = await onOpenUrl(async (urls) => {
  //     console.log("Deep link received:", urls);
  //     const isDevMode = import.meta.env.VITE_ENVIRONMENT === "development";
  //     if (isDevMode) {
  //       console.log("In dev mode, ignoring deep link");
  //       return;
  //     }

  //     for (const url of urls) {
  //       if (!url.includes("token=")) {
  //         console.log("URL does not contain token, skipping");
  //         return;
  //       }

  //       console.log("Processing auth URL");
  //       const urlObject = new URL(url);
  //       const token = urlObject.searchParams.get("token");
  //       const user_id = urlObject.searchParams.get("user_id");
  //       const expires = Number(urlObject.searchParams.get("expires"));

  //       if (!token || !expires || !user_id) {
  //         console.error("Invalid signin params");
  //         throw new Error("Invalid signin params");
  //       }

  //       console.log("Setting auth store with new credentials");
  //       const existingAuth = await authStore.get();
  //       await authStore.set({
  //         token,
  //         user_id,
  //         expires,
  //         intercom_hash: existingAuth?.intercom_hash ?? "",
  //         plan: {
  //           upgraded: false,
  //           last_checked: 0,
  //           manual: existingAuth?.plan?.manual ?? false,
  //         },
  //       });

  //       console.log("Identifying user in analytics");
  //       identifyUser(user_id);
  //       console.log("Tracking sign in event");
  //       trackEvent("user_signed_in", { platform: "desktop" });

  //       console.log("Reopening upgrade window");
  //       await commands.showWindow("Upgrade");

  //       console.log("Waiting for window to be ready");
  //       await new Promise((resolve) => setTimeout(resolve, 500));

  //       console.log("Getting upgrade window reference");
  //       const upgradeWindow = await Window.getByLabel("upgrade");
  //       if (upgradeWindow) {
  //         try {
  //           console.log("Setting focus on upgrade window");
  //           await upgradeWindow.show();
  //           await upgradeWindow.setFocus();
  //         } catch (e) {
  //           console.error("Failed to focus upgrade window:", e);
  //         }
  //       }

  //       console.log("Getting checkout URL");
  //       const planId = getProPlanId(isProAnnual() ? "yearly" : "monthly");
  //       const response = await apiClient.desktop.getProSubscribeURL({
  //         body: { priceId: planId },
  //         headers: await protectedHeaders(),
  //       });

  //       if (response.status === 200) {
  //         console.log("Opening checkout URL in external browser");
  //         commands.openExternalLink(response.body.url);
  //         console.log("Minimizing upgrade window");
  //         if (upgradeWindow) {
  //           await upgradeWindow.minimize();
  //         }
  //       }
  //     }
  //   });

  //   onCleanup(() => {
  //     console.log("Cleaning up deep link listener");
  //     unsubscribeDeepLink();
  //   });

  //   console.log("Setting up upgrade status check interval");
  //   const interval = setInterval(async () => {
  //     console.log("Checking upgrade status");
  //     const result = await commands.checkUpgradedAndUpdate();
  //     if (result) {
  //       console.log("Upgrade complete");
  //       setUpgradeComplete(true);
  //     }
  //   }, 5000);
  //   onCleanup(() => {
  //     console.log("Cleaning up upgrade status check interval");
  //     clearInterval(interval);
  //   });
  // });

  const { rive: CommercialRive, RiveComponent: Commercial } = createRive(
    () => ({
      src: PricingRive,
      autoplay: true,
      artboard: "commercial",
      animations: ["card-stack"],
    })
  );

  const { rive: ProRive, RiveComponent: Pro } = createRive(() => ({
    src: PricingRive,
    autoplay: true,
    artboard: "pro",
    animations: ["items-coming-in"],
  }));

  return (
    <div class="flex relative flex-col justify-center items-center p-5 mx-auto w-full h-full">
      {upgradeComplete() && (
        <div class="flex justify-center items-center h-full bg-opacity-75">
          <div class="relative z-10 p-6 text-center bg-white rounded-lg shadow-lg">
            <h2 class="mb-4 text-2xl font-bold">Upgrade complete</h2>
            <p class="mb-4 text-sm text-gray-10">
              You can now close this window - thank you for upgrading!
            </p>
            <Button
              onClick={() => {
                console.log("Closing window after upgrade");
                const window = getCurrentWindow();
                window.close();
              }}
              variant="primary"
              size="lg"
            >
              Close window
            </Button>
          </div>
        </div>
      )}
      {!upgradeComplete() && (
        <>
          {license.data?.type === "commercial" ? (
            <div class="p-8 mx-auto w-full max-w-[700px] rounded-xl border shadow-sm bg-gray-2 border-gray-3">
              <div class="space-y-6">
                <div class="flex flex-col items-center mb-6 text-center">
                  <h3 class="text-2xl font-medium">Commercial License</h3>
                  <p class="text-sm text-gray-11">
                    Your license details for Cap commercial use
                  </p>
                </div>

                <div class="space-y-6">
                  <div>
                    <label class="block mb-2 text-sm text-gray-12">
                      License Key
                    </label>
                    <p class="overflow-x-auto p-3 font-mono text-xs whitespace-pre-wrap break-all rounded-lg border border-gray-4 text-gray-9 bg-gray-3">
                      {license.data.licenseKey}
                    </p>
                  </div>

                  <Show when={license.data.expiryDate}>
                    {(expiryDate) => (
                      <div class="space-y-1">
                        <label class="text-sm text-gray-12">Expires</label>
                        <p class="text-gray-10">
                          {new Date(expiryDate()).toLocaleDateString(
                            undefined,
                            {
                              year: "numeric",
                              month: "long",
                              day: "numeric",
                            }
                          )}
                        </p>
                      </div>
                    )}
                  </Show>

                  <div class="flex flex-col items-center pt-6 border-t border-gray-3">
                    <Button
                      variant="destructive"
                      disabled={resetLicense.isPending}
                      onClick={() => {
                        resetLicense.mutate();
                      }}
                    >
                      {resetLicense.isPending
                        ? "Deactivating..."
                        : "Deactivate License"}
                    </Button>
                  </div>
                </div>
              </div>
            </div>
          ) : (
            <>
              <div class="text-center">
                <h1 class="text-4xl md:text-4xl mb-6 tracking-[-.05em] font-medium text-[--text-primary]">
                  Early Adopter Pricing
                </h1>
              </div>
              <div class="flex gap-4 w-full">
                <div
                  onMouseEnter={() => {
                    const riveInstance = CommercialRive();
                    if (riveInstance) {
                      // Stop any current animations first
                      riveInstance.stop();
                      // Play the enter animation
                      riveInstance.play("cards");
                    }
                  }}
                  onMouseLeave={() => {
                    const riveInstance = CommercialRive();
                    if (riveInstance) {
                      // Stop any current animations first
                      riveInstance.stop();
                      // Play the leave animation
                      riveInstance.play("card-stack");
                    }
                  }}
                  class="flex flex-col flex-1 justify-between p-3 h-[700px ] bg-gray-3 rounded-2xl border border-gray-3 shadow-sm text-card-foreground md:p-3"
                >
                  <div class="space-y-5">
                    <div class="flex flex-col gap-6 items-center">
                      <Commercial class="w-[250px]" />
                      <div class="space-y-1 text-center">
                        <h3 class="text-2xl font-medium tracking-tight leading-5">
                          Commercial License
                        </h3>
                        <p class="mt-2 text-sm text-[--text-tertiary]">
                          For commercial use
                        </p>
                      </div>
                      <div class="flex flex-col justify-center items-center">
                        <h3 class="text-4xl leading-6">
                          {isCommercialAnnual() ? "$29" : "$58"}
                          <span class="text-gray-11 text-[16px]">.00 /</span>
                        </h3>
                        {isCommercialAnnual() && (
                          <p class="text-[16px] font-medium text-gray-11">
                            billed annually
                          </p>
                        )}
                        {!isCommercialAnnual() && (
                          <p class="text-[16px] font-medium text-gray-11">
                            one-time payment
                          </p>
                        )}
                      </div>
                      <div
                        onClick={() => setIsCommercialAnnual((v) => !v)}
                        class="px-3 py-2 text-center rounded-full border border-transparent transition-all duration-200 cursor-pointer bg-gray-5 hover:border-gray-400"
                      >
                        <p class="text-xs text-gray-12">
                          Switch to{" "}
                          {isCommercialAnnual() ? "lifetime" : "yearly"}:{" "}
                          <span class="font-medium">
                            {isCommercialAnnual() ? "$58" : "$29"}
                          </span>
                        </p>
                      </div>
                      <ul class="flex flex-col gap-2 justify-center list-none">
                        {[
                          "Commercial Use of Cap Recorder + Editor",
                          "Community Support",
                          "Local-only features",
                          "Perpetual license option",
                        ].map((feature) => (
                          <li class="flex justify-start items-center">
                            <div class="flex justify-center items-center p-0 m-0 w-6 h-6">
                              <IconLucideCheck class="w-4 h-4 text-[--text-primary]" />
                            </div>
                            <span class="ml-1 text-[0.9rem] text-[--text-primary]">
                              {feature}
                            </span>
                          </li>
                        ))}
                      </ul>
                    </div>
                  </div>
                  <ActivateLicenseDialog
                    open={openLicenseDialog}
                    onOpenChange={setOpenLicenseDialog}
                  />
                  <div class="flex flex-col gap-4 items-center">
                    <Button
                      onClick={() => openCommercialCheckout.mutate()}
                      disabled={openCommercialCheckout.isPending}
                      variant="lightdark"
                      class="w-full !rounded-full !h-[48px] text-lg font-medium"
                      size="lg"
                    >
                      {openCommercialCheckout.isPending
                        ? "Loading..."
                        : "Purchase License"}
                    </Button>
                    <p
                      onClick={() => setOpenLicenseDialog(true)}
                      class="mb-2 text-sm transition-colors cursor-pointer text-gray-11 hover:text-gray-12"
                    >
                      Already have a license key?
                    </p>
                  </div>
                </div>

                {/* Cap Pro */}
                <div
                  onMouseEnter={() => {
                    const riveInstance = ProRive();
                    if (riveInstance) {
                      // Stop any current animations first
                      riveInstance.stop();
                      // Play the enter animation
                      riveInstance.play("items-coming-out");
                    }
                  }}
                  onMouseLeave={() => {
                    const riveInstance = ProRive();
                    if (riveInstance) {
                      // Stop any current animations first
                      riveInstance.stop();
                      // Play the leave animation
                      riveInstance.play("items-coming-in");
                    }
                  }}
                  class="flex-grow p-3 h-[700px] flex-1 bg-gray-12 rounded-2xl border shadow-sm text-card-foreground md:p-3"
                >
                  <div class="flex flex-col justify-between space-y-5 h-full">
                    <div class="flex flex-col gap-6 items-center px-6">
                      <Pro class="w-[250px]" />
                      <div class="space-y-1 text-center">
                        <h3 class="text-2xl font-medium tracking-tight leading-5 text-gray-1">
                          Cap Pro
                        </h3>
                        <p class="text-[0.875rem] text-gray-9">
                          For professional use and teams.
                        </p>
                      </div>
                      <div class="flex flex-col justify-center items-center">
                        <h3 class="text-4xl leading-6 text-gray-1">
                          {isProAnnual() ? "$6" : "$9"}
                          <span class="text-gray-10 text-[16px]">.00 /</span>
                        </h3>
                        {isProAnnual() && (
                          <p class="text-[16px] font-medium text-gray-9">
                            per user, billed annually
                          </p>
                        )}
                        {!isProAnnual() && (
                          <p class="text-[16px] font-medium text-gray-9">
                            per user, billed monthly
                          </p>
                        )}
                      </div>
                      <div
                        onClick={() => setIsProAnnual((v) => !v)}
                        class="px-3 py-2 text-center rounded-full border border-transparent transition-all duration-200 cursor-pointer bg-blue-9 hover:border-blue-400"
                      >
                        <p class="text-xs text-solid-white">
                          Switch to {isProAnnual() ? "monthly" : "yearly"}:{" "}
                          <span class="font-medium">
                            {isProAnnual()
                              ? "$9 per user, billed monthly"
                              : "$6 per user, billed annually"}
                          </span>
                        </p>
                      </div>
                      <ul class="flex flex-col gap-2 justify-center list-none">
                        {proFeatures.map((feature) => (
                          <li class="flex justify-start items-center text-gray-1">
                            <div class="flex justify-center items-center p-0 m-0 size-4">
                              <IconLucideCheck class="size-4" />
                            </div>
                            <span class="ml-2 text-[0.9rem]">{feature}</span>
                          </li>
                        ))}
                      </ul>
                    </div>
                    <Button
                      variant="primary"
                      class="!rounded-full !text-lg w-full mx-auto"
                      onClick={openCheckoutInExternalBrowser}
                    >
                      {loading() ? "Loading..." : "Upgrade to Cap Pro"}
                    </Button>
                  </div>
                </div>
              </div>
            </>
          )}
        </>
      )}
    </div>
  );
}

interface Props {
  open: Accessor<boolean>;
  onOpenChange: (open: boolean) => void;
}

const ActivateLicenseDialog = ({ open, onOpenChange }: Props) => {
  const [licenseKey, setLicenseKey] = createSignal("");
  const queryClient = useQueryClient();

  const activateLicenseKey = createMutation(() => ({
    mutationFn: async (vars: { licenseKey: string }) => {
      const generalSettings = await generalSettingsStore.get();
      if (!generalSettings?.instanceId) {
        throw new Error("No instance ID found");
      }
      const resp = await licenseApiClient.activateCommercialLicense({
        headers: {
          licensekey: vars.licenseKey,
          instanceid: generalSettings.instanceId,
        },
        body: { reset: false },
      });

      if (resp.status === 200)
        return { ...resp.body, licenseKey: vars.licenseKey };
      if (typeof resp.body === "object" && resp.body && "message" in resp.body)
        throw resp.body.message;
      throw new Error((resp.body as any).toString());
    },
    onSuccess: async (value) => {
      await generalSettingsStore.set({
        commercialLicense: {
          activatedOn: Date.now(),
          expiryDate: value.expiryDate ?? null,
          refresh: value.refresh,
          licenseKey: value.licenseKey,
        },
      });
      await queryClient.refetchQueries({ queryKey: ["bruh"] });
    },
  }));
  return (
    <Dialog.Root open={open()} onOpenChange={onOpenChange}>
      <DialogContent
        title="Activate License"
        confirm={
          <Dialog.ConfirmButton
            disabled={activateLicenseKey.isPending}
            onClick={() =>
              activateLicenseKey.mutate({
                licenseKey: licenseKey(),
              })
            }
          >
            Activate
          </Dialog.ConfirmButton>
        }
      >
        <Input
          class="mt-2"
          placeholder="Enter license key..."
          value={licenseKey()}
          onInput={(e) => setLicenseKey(e.currentTarget.value)}
        />
      </DialogContent>
    </Dialog.Root>
  );
};
