import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { VisuallyHidden as VisuallyHiddenPrimitive } from "radix-ui";
const VisuallyHidden = VisuallyHiddenPrimitive.Root;
import { ScrollArea } from "@/components/ui/scroll-area";
import { ToolGroup } from "@/store";
import { BookmarkPlus } from "lucide-react";
import { useState } from "react";
import { FormProvider, useForm, UseFormRegisterReturn } from "react-hook-form";
import { ToolGroupForm } from "./ToolGroupForm";

export function ToolGroupModal({
  initialData,
  mcpServers,
  onClose,
  saveToolGroup,
  toolGroups,
}: {
  initialData?: ToolGroup | null;
  mcpServers: {
    name: string;
    tools: {
      name: string;
      description: string | undefined;
    }[];
  }[];
  onClose: () => void;
  saveToolGroup: (data: ToolGroup) => void;
  toolGroups: ToolGroup[];
}) {
  const [isNewGroup] = useState(
    !toolGroups.some((g) => g.id === initialData?.id),
  );
  const [selectedTools, setSelectedTools] = useState(
    Object.fromEntries(
      Object.entries(initialData?.services || {}).map(([server, tools]) => [
        server,
        Object.fromEntries(tools.map((tool) => [tool, true])),
      ]),
    ),
  );
  const form = useForm({
    defaultValues: {
      name: initialData?.name || "",
    },
  });

  const { handleSubmit, register } = form;

  const validateToolGroupName = (value: string) => {
    const trimmedValue = value.trim();
    if (!trimmedValue) return "Group name is required";
    if (
      toolGroups.some(
        (g) => g.name === trimmedValue && g.id !== initialData?.id,
      )
    ) {
      return "Group name must be unique";
    }
    return true;
  };

  const registerNameField: () => UseFormRegisterReturn<"name"> = () =>
    register("name", {
      required: "Group name is required",
      validate: validateToolGroupName,
      maxLength: {
        value: 120,
        message: "Group name must not exceed 120 characters",
      },
    });

  const onSubmit = (data: { name: string }) => {
    const groupServices = Object.fromEntries(
      Object.entries(selectedTools).map(([server, tools]) => [
        server,
        Object.keys(
          Object.fromEntries(
            Object.entries(tools).filter(([, selected]) => selected),
          ),
        ),
      ]),
    );
    saveToolGroup({
      id: initialData?.id || "",
      name: data.name,
      services: groupServices,
    });
    form.setValue("name", "");
    setSelectedTools({});
    onClose();
  };

  return (
    <Dialog
      onOpenChange={(isOpen) => {
        if (!isOpen) {
          onClose();
        }
      }}
      open
    >
      <DialogContent className="sm:max-w-[640px] border border-border rounded-lg bg-card">
        <VisuallyHidden>
          <DialogTitle>
            {isNewGroup ? "Create New" : "Edit"} Tool Group
          </DialogTitle>
        </VisuallyHidden>
        <DialogHeader>
          <h2 className="text-lg font-semibold leading-none tracking-tight">
            {isNewGroup ? "Create New" : "Edit"} Tool Group
          </h2>
          <DialogDescription>
            {isNewGroup
              ? "Create a new tool group to organize and manage access to specific tools."
              : "Edit the tool group settings and permissions."}
          </DialogDescription>
        </DialogHeader>
        <FormProvider {...form}>
          <form onSubmit={handleSubmit(onSubmit)}>
            <div className="space-y-4 p-4">
              <ScrollArea className="max-h-[400px] overflow-y-auto">
                <ToolGroupForm
                  mcpServers={mcpServers}
                  registerNameField={registerNameField}
                  selectedTools={selectedTools}
                  setSelectedTools={setSelectedTools}
                />
              </ScrollArea>
            </div>
            <DialogFooter>
              <Button
                variant="secondary"
                className="bg-(--color-bg-success) text-(--color-fg-success) hover:bg-(--color-bg-success-hover) hover:text-(--color-fg-success-hover) focus:bg-(--color-bg-success-hover) focus:text-(--color-fg-success-hover)"
              >
                <BookmarkPlus className="w-4 h-4 mr-2" />
                {isNewGroup ? "Create" : "Save"}
              </Button>
            </DialogFooter>
          </form>
        </FormProvider>
      </DialogContent>
    </Dialog>
  );
}
