import { useCallback, useState } from "react";
import { ConnectionHandler, graphql, useMutation } from "react-relay";

import {
  Alert,
  Button,
  Dialog,
  DialogCloseButton,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTitleExtra,
  DialogTrigger,
  Flex,
  Icon,
  Icons,
  Modal,
  ModalOverlay,
  Text,
  View,
} from "@phoenix/components";
import { useNotifySuccess } from "@phoenix/contexts";
import { getErrorMessagesFromRelayMutationError } from "@phoenix/utils/errorUtils";

import type { DeleteCustomProviderButtonMutation } from "./__generated__/DeleteCustomProviderButtonMutation.graphql";

function DeleteProviderDialogContent({
  providerId,
  providerName,
  onClose,
}: {
  providerId: string;
  providerName: string;
  onClose: () => void;
}) {
  const notifySuccess = useNotifySuccess();
  const [error, setError] = useState<string | null>(null);
  const connectionId = ConnectionHandler.getConnectionID(
    "client:root",
    "CustomProvidersCard_generativeModelCustomProviders"
  );

  const [commit, isCommitting] =
    useMutation<DeleteCustomProviderButtonMutation>(graphql`
      mutation DeleteCustomProviderButtonMutation(
        $input: DeleteGenerativeModelCustomProviderMutationInput!
        $connectionId: ID!
      ) {
        deleteGenerativeModelCustomProvider(input: $input) {
          id @deleteEdge(connections: [$connectionId])
          query {
            ...CustomProvidersCard_data
          }
        }
      }
    `);

  const handleDelete = useCallback(() => {
    // Clear any previous error when submitting
    setError(null);

    commit({
      variables: {
        input: {
          id: providerId,
        },
        connectionId,
      },
      onCompleted: () => {
        // Close modal and notify on success
        onClose();
        notifySuccess({
          title: "Provider deleted",
          message: `${providerName} has been deleted successfully.`,
        });
      },
      onError: (error) => {
        // Keep modal open on error so user understands what happened
        const messages = getErrorMessagesFromRelayMutationError(error);
        setError(messages?.join(", ") || "An unknown error occurred");
      },
    });
  }, [commit, connectionId, notifySuccess, providerId, providerName, onClose]);

  return (
    <>
      {error != null && (
        <Alert
          variant="danger"
          banner
          dismissable
          onDismissClick={() => setError(null)}
          title="Failed to delete provider"
        >
          {error}
        </Alert>
      )}
      <View padding="size-200">
        <Text color="danger">
          Are you sure you want to delete <strong>{providerName}</strong>? This
          action cannot be undone.
        </Text>
      </View>
      <View
        paddingEnd="size-200"
        paddingTop="size-100"
        paddingBottom="size-100"
        borderTopColor="default"
        borderTopWidth="thin"
      >
        <Flex direction="row" justifyContent="end" gap="size-100">
          <Button
            variant="default"
            onPress={onClose}
            size="S"
            isDisabled={isCommitting}
          >
            Cancel
          </Button>
          <Button
            variant="danger"
            onPress={handleDelete}
            size="S"
            isDisabled={isCommitting}
          >
            {isCommitting ? "Deleting..." : "Delete Provider"}
          </Button>
        </Flex>
      </View>
    </>
  );
}

export function DeleteCustomProviderButton({
  providerId,
  providerName,
}: {
  providerId: string;
  providerName: string;
}) {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <DialogTrigger isOpen={isOpen} onOpenChange={setIsOpen}>
      <Button
        variant="danger"
        leadingVisual={<Icon svg={<Icons.Trash />} />}
        aria-label="Delete provider"
        size="S"
      />
      <ModalOverlay>
        <Modal>
          <Dialog>
            <DialogContent>
              <DialogHeader>
                <DialogTitle>Delete Provider</DialogTitle>
                <DialogTitleExtra>
                  <DialogCloseButton slot="close" />
                </DialogTitleExtra>
              </DialogHeader>
              <DeleteProviderDialogContent
                providerId={providerId}
                providerName={providerName}
                onClose={() => setIsOpen(false)}
              />
            </DialogContent>
          </Dialog>
        </Modal>
      </ModalOverlay>
    </DialogTrigger>
  );
}
