import {
  Button,
  ComboBox,
  ComboBoxItem,
  Dialog,
  DialogTrigger,
  Flex,
  Icon,
  Icons,
  Input,
  Label,
  Popover,
  PopoverArrow,
  Text,
  TextField,
  View,
} from "@phoenix/components";
import { usePlaygroundContext } from "@phoenix/contexts/PlaygroundContext";

const TEMPLATE_VARIABLES_PATH_OPTIONS = [
  {
    id: "",
    label: "Example root",
    description: "Variables like {{input}}, {{reference}}, {{metadata}}",
  },
  {
    id: "input",
    label: "input",
    description: "Variables resolve from input (e.g., {{query}} → input.query)",
  },
  {
    id: "reference",
    label: "reference",
    description: "Variables resolve from reference/output",
  },
  {
    id: "metadata",
    label: "metadata",
    description: "Variables resolve from metadata",
  },
];

export function PlaygroundExperimentSettingsButton({
  isDisabled,
  datasetId,
}: {
  isDisabled?: boolean;
  datasetId: string;
}) {
  const playgroundDatasetState = usePlaygroundContext(
    (state) => state.stateByDatasetId[datasetId]
  );
  const { appendedMessagesPath, templateVariablesPath, maxConcurrency } =
    playgroundDatasetState ?? {};
  const setAppendedMessagesPath = usePlaygroundContext(
    (state) => state.setAppendedMessagesPath
  );
  const setTemplateVariablesPath = usePlaygroundContext(
    (state) => state.setTemplateVariablesPath
  );
  const setMaxConcurrency = usePlaygroundContext(
    (state) => state.setMaxConcurrency
  );

  return (
    <DialogTrigger>
      <Button
        size="S"
        aria-label="Experiment Settings"
        leadingVisual={<Icon svg={<Icons.Options />} />}
        isDisabled={isDisabled}
      />
      <Popover style={{ width: "400px" }}>
        <PopoverArrow />
        <Dialog>
          <View padding="size-200">
            <Flex direction="column" gap="size-200">
              <ComboBox
                label="Template variables path"
                description="Path prefix for template variables"
                size="M"
                placeholder="the root of the example"
                selectedKey={templateVariablesPath ?? ""}
                inputValue={templateVariablesPath ?? ""}
                defaultItems={TEMPLATE_VARIABLES_PATH_OPTIONS}
                allowsCustomValue
                onSelectionChange={(key) => {
                  if (typeof key === "string") {
                    setTemplateVariablesPath({
                      templateVariablesPath: key || null,
                      datasetId,
                    });
                  }
                }}
                onInputChange={(value) => {
                  setTemplateVariablesPath({
                    templateVariablesPath: value || null,
                    datasetId,
                  });
                }}
              >
                {(item) => (
                  <ComboBoxItem key={item.id} id={item.id} textValue={item.id}>
                    <Flex direction="column">
                      <Text weight="heavy">{item.label || "Example root"}</Text>
                      <Text size="XS" color="text-700">
                        {item.description}
                      </Text>
                    </Flex>
                  </ComboBoxItem>
                )}
              </ComboBox>
              <TextField
                value={appendedMessagesPath ?? ""}
                size="S"
                onChange={(value) => {
                  setAppendedMessagesPath({ path: value || null, datasetId });
                }}
              >
                <Label>Appended dataset messages path</Label>
                <Input placeholder="Disabled" />
                <Text slot="description">
                  Path to messages from the dataset to append to prompts
                </Text>
              </TextField>
              <TextField
                value={String(maxConcurrency ?? 10)}
                size="S"
                onChange={(value) => {
                  const parsed = parseInt(value, 10);
                  if (!isNaN(parsed) && parsed >= 1 && parsed <= 100) {
                    setMaxConcurrency({
                      maxConcurrency: parsed,
                      datasetId,
                    });
                  }
                }}
              >
                <Label>Max concurrency</Label>
                <Input type="number" />
                <Text slot="description">
                  Maximum number of tasks/evals that will be run concurrently.
                </Text>
              </TextField>
            </Flex>
          </View>
        </Dialog>
      </Popover>
    </DialogTrigger>
  );
}
