import type {
  ControlledFieldItem,
  FieldItemProps,
  FormSelectProps,
} from "@/components/tanstack-form-utils";
import { Button } from "@/components/ui/button";
import {
  Command,
  CommandGroup,
  CommandItem,
  CommandList,
} from "@/components/ui/command";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { useLocaleFunction } from "@/hooks/use-localed";
import { listServerlessClusters } from "@/lib/api/tidbcloud";
import type { ClusterRegionKey } from "@/lib/cluster-regions";
import { getErrorMessage } from "@/lib/errors";
import { buildPathQuery, buildUrlParams } from "@/lib/url";
import { cn } from "@/lib/utils";
import { sendGTMEvent } from "@next/third-parties/google";
import { FieldApi } from "@tanstack/react-form";
import { useQuery } from "@tanstack/react-query";
import { CheckIcon, ChevronDown, PlusIcon, ThumbsUpIcon } from "lucide-react";
import { useEffect, useState } from "react";

export function startAuthorizeServerless(
  labCode: string,
  fieldApi?: FieldApi<
    any,
    any,
    any,
    any,
    any,
    any,
    any,
    any,
    any,
    any,
    any,
    any,
    any,
    any,
    any,
    any,
    any,
    any,
    any,
    any,
    any,
    any,
    any
  >
) {
  const region = fieldApi?.form?.getFieldValue("region") as
    | ClusterRegionKey
    | undefined;
  const next = buildPathQuery(
    "/lab",
    buildUrlParams({
      preview: labCode,
      region,
    })
  );
  location.href = `/api/labs/oauth/tidbcloud/start?next=${encodeURIComponent(next)}`;
}

export function ServerlessClusterSelect({
  fieldApi,
  disabled,
  value,
  onValueChange,
  onOpenChange,
  className,
  serverlessGrantId,
  labCode,
  region,
  ...props
}: FieldItemProps &
  FormSelectProps &
  ControlledFieldItem & {
    labCode: string;
    region: ClusterRegionKey;
    serverlessGrantId?: number;
  }) {
  const [open, setOpen] = useState(false);
  const t = useLocaleFunction();

  const {
    data: clusters,
    isFetching,
    error,
  } = useQuery({
    queryKey: ["tidbcloud.serverless.clusters", serverlessGrantId, region],
    queryFn: () => listServerlessClusters(serverlessGrantId!, region),
    enabled: serverlessGrantId != null,
    retry: false,
  });

  useEffect(() => {
    if (error && fieldApi) {
      fieldApi.setErrorMap({
        onServer: [getErrorMessage(error)],
      });
      return () => {
        fieldApi.setErrorMap({
          onServer: undefined,
        });
      };
    }
  }, [fieldApi, error]);

  if (serverlessGrantId == null) {
    return (
      <Button
        type="button"
        className="flex w-full"
        variant="secondary"
        onClick={() => {
          startAuthorizeServerless(labCode, fieldApi);
          sendGTMEvent(
            {
              event: "lab.tidbcloud-cluster-authorize-button.click",
              lab_code: labCode,
            },
            "gtag"
          );
        }}
      >
        {t("lab.meta.serverless-cluster.authorize")}
      </Button>
    );
  }

  return (
    <>
      <Popover
        open={open}
        onOpenChange={(open) => {
          setOpen(open);
          onOpenChange?.(open);
        }}
      >
        <PopoverTrigger
          {...props}
          className={cn(
            "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
            className
          )}
          disabled={disabled || isFetching || !!error}
        >
          {value === "$create-new" ? (
            t("lab.meta.serverless-cluster.create-new")
          ) : isFetching ? (
            t("common.loading")
          ) : value ? (
            clusters?.find((cluster) => cluster.cluster_id === value)
              ?.display_name
          ) : (
            <span className="text-muted-foreground">
              {t("lab.meta.serverless-cluster.placeholder")}
            </span>
          )}
          <ChevronDown className="ml-auto h-4 w-4 opacity-50" />
        </PopoverTrigger>
        <PopoverContent
          className="p-0"
          align="start"
          style={{ width: `var(--radix-popper-anchor-width)` }}
        >
          <Command>
            <CommandList>
              <CommandGroup>
                <CommandItem
                  className="cursor-pointer"
                  value="$create-new"
                  onSelect={() => {
                    onValueChange?.("$create-new");
                    setOpen(false);
                  }}
                >
                  {t("lab.meta.serverless-cluster.create-new")}
                  {value === "$create-new" ? (
                    <CheckIcon className="ml-auto" />
                  ) : (
                    <PlusIcon className="ml-auto" />
                  )}
                </CommandItem>
                {clusters?.map(
                  ({ cluster_id, display_name, region, recommend }) => (
                    <CommandItem
                      key={cluster_id}
                      value={cluster_id}
                      onSelect={(currentValue) => {
                        onValueChange?.(currentValue);
                        setOpen(false);
                      }}
                    >
                      <div className="space-y-1">
                        <div>{display_name}</div>
                        <div
                          className={cn(
                            "text-muted-foreground text-xs",
                            recommend && "text-green-500"
                          )}
                        >
                          {recommend && (
                            <ThumbsUpIcon className="inline-flex size-3! mr-1 align-text-bottom " />
                          )}
                          {region}
                        </div>
                      </div>
                      <CheckIcon
                        className={cn(
                          "ml-auto",
                          value === cluster_id ? "opacity-100" : "opacity-0"
                        )}
                      />
                    </CommandItem>
                  )
                )}
              </CommandGroup>
            </CommandList>
          </Command>
        </PopoverContent>
      </Popover>
    </>
  );
}