import { css } from "@emotion/react";
import { Suspense, useState } from "react";

import {
  Button,
  DialogTrigger,
  Flex,
  Icon,
  Icons,
  Popover,
  PopoverArrow,
  Text,
  View,
} from "@phoenix/components";
import { usePlaygroundContext } from "@phoenix/contexts/PlaygroundContext";

import { AWSRegionConfigFormField } from "./AWSRegionConfigFormField";
import { BaseUrlConfigFormField } from "./BaseUrlConfigFormField";
import { EndpointConfigFormField } from "./EndpointConfigFormField";
import { ModelInvocationParametersFormFields } from "./ModelInvocationParametersFormFields";
import { ModelNameConfigFormField } from "./ModelNameConfigFormField";
import { OpenAIApiTypeConfigFormField } from "./OpenAIApiTypeConfigFormField";
import { SaveModelConfigButton } from "./SaveModelConfigButton";

/**
 * Displays information about an environment variable that will be used for routing.
 * Shown when ephemeral routing is disabled and no custom provider is selected.
 */
function EnvVarRoutingInfo({
  label,
  envVarName,
}: {
  label: string;
  envVarName: string;
}) {
  return (
    <Flex direction="column" gap="size-50">
      <Text weight="heavy" size="S" color="text-700">
        {label}
      </Text>
      <View
        backgroundColor="gray-100"
        padding="size-100"
        borderRadius="small"
        borderWidth="thin"
        borderColor="gray-400"
      >
        <Flex direction="row" gap="size-100" alignItems="center">
          <Icon svg={<Icons.Info />} color="info" />
          <Flex direction="column" gap="size-25">
            <Text size="S" color="text-700">
              From environment variable
            </Text>
            <Text size="S" color="text-500" fontStyle="italic">
              {envVarName}
            </Text>
          </Flex>
        </Flex>
      </View>
    </Flex>
  );
}

const formFieldsCSS = css`
  display: flex;
  flex-direction: column;
  gap: var(--global-dimension-size-200);
  .field,
  .dropdown,
  .dropdown__button,
  .slider {
    width: 100%;
  }
`;

export type ModelParametersConfigButtonProps = {
  /**
   * The playground instance ID to configure
   */
  playgroundInstanceId: number;
  /**
   * Whether to disable ephemeral routing fields.
   *
   * Ephemeral routing fields are provider-specific configuration values (like Azure endpoint,
   * AWS region, or custom base URLs) that are entered in the UI but not persisted with the prompt.
   * They exist only for the current browser session and are typically stored in localStorage.
   *
   * When true, shows informational text about environment variables instead of editable fields.
   * This is used in evaluator contexts where routing must come from custom providers or env vars.
   */
  disableEphemeralRouting?: boolean;
};

export function ModelParametersConfigButton(
  props: ModelParametersConfigButtonProps
) {
  const { playgroundInstanceId, disableEphemeralRouting } = props;
  const [isModelConfigValid, setIsModelConfigValid] = useState(true);

  const model = usePlaygroundContext(
    (state) =>
      state.instances.find((instance) => instance.id === playgroundInstanceId)
        ?.model
  );

  const provider = model?.provider;
  const customProvider = model?.customProvider;

  // When a custom provider is selected, hide routing fields (they come from the provider config)
  const usingCustomProvider = !!customProvider;

  // Provider capability flags - only show routing fields for built-in providers
  // When disableEphemeralRouting is true, we show env var info instead of editable fields
  const canConfigureBaseUrl = provider === "OPENAI" || provider === "OLLAMA";
  const canConfigureAzureFields = provider === "AZURE_OPENAI";
  const canConfigureRegion = provider === "AWS";
  const canConfigureOpenAIApiType =
    !usingCustomProvider &&
    (provider === "OPENAI" || provider === "AZURE_OPENAI");

  const showBaseUrl =
    !usingCustomProvider && !disableEphemeralRouting && canConfigureBaseUrl;
  const showAzureFields =
    !usingCustomProvider && !disableEphemeralRouting && canConfigureAzureFields;
  const showRegion =
    !usingCustomProvider && !disableEphemeralRouting && canConfigureRegion;

  // Show env var info when ephemeral routing is disabled and no custom provider
  const showEnvVarInfo = disableEphemeralRouting && !usingCustomProvider;

  return (
    <DialogTrigger>
      <Button
        variant="default"
        size="S"
        aria-label="Configure model parameters"
        leadingVisual={<Icon svg={<Icons.Options />} />}
      />
      <Popover
        css={css`
          overflow: auto;
          overscroll-behavior: none;
        `}
      >
        <PopoverArrow />
        <View padding="size-200" width="386px">
          <div css={formFieldsCSS}>
            {/* Model name field - shown for all providers */}
            <ModelNameConfigFormField
              playgroundInstanceId={playgroundInstanceId}
            />

            {/* OpenAI / Azure API type - built-in only: editable when ephemeral routing enabled, fixed default when disabled */}
            {canConfigureOpenAIApiType && (
              <OpenAIApiTypeConfigFormField
                playgroundInstanceId={playgroundInstanceId}
                displayDefaultOnly={disableEphemeralRouting}
              />
            )}

            {/* Custom provider info - shown when a custom provider is selected */}
            {customProvider && (
              <Flex direction="column" gap="size-50">
                <Text weight="heavy" size="S" color="text-700">
                  Custom Provider
                </Text>
                <Text size="S">{customProvider.name}</Text>
              </Flex>
            )}

            {/* OpenAI / Ollama specific fields */}
            {showBaseUrl && (
              <BaseUrlConfigFormField
                playgroundInstanceId={playgroundInstanceId}
              />
            )}

            {/* Azure OpenAI specific fields */}
            {showAzureFields && (
              <EndpointConfigFormField
                playgroundInstanceId={playgroundInstanceId}
              />
            )}
            {showEnvVarInfo && canConfigureAzureFields && (
              <EnvVarRoutingInfo
                label="Endpoint"
                envVarName="AZURE_OPENAI_ENDPOINT"
              />
            )}

            {/* AWS Bedrock specific fields */}
            {showRegion && (
              <AWSRegionConfigFormField
                playgroundInstanceId={playgroundInstanceId}
              />
            )}
            {showEnvVarInfo && canConfigureRegion && (
              <EnvVarRoutingInfo label="Region" envVarName="AWS_REGION" />
            )}

            <Suspense>
              <ModelInvocationParametersFormFields
                playgroundInstanceId={playgroundInstanceId}
                onValidityChange={setIsModelConfigValid}
              />
            </Suspense>
          </div>
        </View>
        <View padding="size-100" borderTopColor="default" borderTopWidth="thin">
          <SaveModelConfigButton
            playgroundInstanceId={playgroundInstanceId}
            variant="quiet"
            isDisabled={!isModelConfigValid}
            style={{
              width: "100%",
            }}
          />
        </View>
      </Popover>
    </DialogTrigger>
  );
}
