import { useCallback } from "react";

import type { ButtonProps } from "@phoenix/components";
import { Button, Tooltip, TooltipTrigger } from "@phoenix/components";
import { ModelProviders } from "@phoenix/constants/generativeConstants";
import { useNotifySuccess } from "@phoenix/contexts";
import { usePlaygroundContext } from "@phoenix/contexts/PlaygroundContext";
import { usePreferencesContext } from "@phoenix/contexts/PreferencesContext";

export type SaveModelConfigButtonProps = {
  /**
   * The playground instance ID to save the configuration for
   */
  playgroundInstanceId: number;
  /**
   * Whether the button should be disabled (e.g., due to validation errors)
   */
  isDisabled?: boolean;
  /**
   * The variant of the button
   */
  variant?: ButtonProps["variant"];
  /**
   * The styles to apply to the button
   */
  style?: React.CSSProperties;
};

/**
 * Button to save the current model configuration as the default for the provider.
 * Saves to user preferences for later use.
 */
export function SaveModelConfigButton({
  playgroundInstanceId,
  isDisabled = false,
  variant = "default",
  style,
}: SaveModelConfigButtonProps) {
  const instance = usePlaygroundContext((state) =>
    state.instances.find((instance) => instance.id === playgroundInstanceId)
  );

  const setModelConfigForProvider = usePreferencesContext(
    (state) => state.setModelConfigForProvider
  );

  const notifySuccess = useNotifySuccess();

  const onSaveConfig = useCallback(() => {
    if (!instance) return;

    const {
      // Strip out fields that should not be saved:
      // - customProvider: custom providers are separate from built-in providers
      customProvider: _customProvider,
      ...modelConfigToSave
    } = instance.model;

    setModelConfigForProvider({
      provider: instance.model.provider,
      modelConfig: modelConfigToSave,
    });

    notifySuccess({
      title: "Model Configuration Saved",
      message: `${ModelProviders[instance.model.provider]} model configuration saved as default for later use.`,
      expireMs: 3000,
    });
  }, [instance, notifySuccess, setModelConfigForProvider]);

  if (!instance) {
    return null;
  }

  const providerName =
    ModelProviders[instance.model.provider] ?? "this provider";

  return (
    <TooltipTrigger delay={0} closeDelay={0}>
      <Button
        size="S"
        variant={variant}
        onPress={onSaveConfig}
        isDisabled={isDisabled}
        style={style}
      >
        Save as Default
      </Button>
      <Tooltip placement="bottom" offset={5}>
        {isDisabled
          ? "Fix validation errors before saving"
          : `Saves the current configuration as the default for ${providerName}.`}
      </Tooltip>
    </TooltipTrigger>
  );
}
