import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Separator } from "@/components/ui/separator";
import { ToolDetails } from "@/types";

export const ToolDetailsModal = ({
  onClose,
  onCustomize,
  tool,
}: {
  onClose: () => void;
  onCustomize?: () => void;
  tool: ToolDetails;
}) => {
  const {
    description,
    name,
    serviceName,
    originalToolName,
    params,
    overrideParams,
  } = tool;

  const hasOverrideParams = Object.values(overrideParams || {}).some(
    (value) => value,
  );

  return (
    <Dialog open={true} onOpenChange={(open) => !open && onClose()}>
      <DialogContent className="bg-card p-0 sm:max-w-lg">
        <DialogHeader className="p-6 pb-4">
          <DialogTitle>
            {overrideParams ? "Custom" : "Server"} Tool Details
          </DialogTitle>
          <DialogDescription>
            <span className="flex items-center gap-2">
              Server:
              <span className="font-semibold text-primary">{serviceName}</span>
            </span>
            {originalToolName && (
              <span className="flex items-center gap-2">
                Original Tool Name:
                <span className="font-semibold text-primary">
                  {originalToolName}
                </span>
              </span>
            )}
          </DialogDescription>
        </DialogHeader>
        <div className="max-h-[70vh] overflow-y-auto px-6 pt-4 pb-8">
          <h2 className="text-lg font-semibold">Properties</h2>
          <div className="grid gap-3 mb-6 mt-4 px-4">
            <div className="flex items-start gap-2 leading-[24px]">
              <div className="leading-[24px]">Name:</div>
              <span className="text-sm text-primary font-semibold leading-[24px]">
                {name}
              </span>
            </div>
            <div className="flex items-start gap-2 leading-[24px]">
              <div className="">Description: </div>
              <div className="whitespace-pre-wrap text-sm text-muted-foreground leading-[24px]">
                {description}
              </div>
            </div>
          </div>
          <h2 className="text-lg font-semibold mt-8">Parameters</h2>
          <div className="grid gap-3 px-4">
            {params?.length
              ? params.map((param) => (
                  <div key={param.name} className="grid gap-2 mt-4">
                    <div className="flex items-center gap-2">
                      <code>{param.name}</code>
                      <Separator
                        orientation="vertical"
                        className="bg-border h-full"
                      />
                      {param.type && (
                        <p className="text-xs text-muted-foreground">
                          {param.type}
                        </p>
                      )}
                    </div>
                    {param.description && (
                      <p className="text-xs text-muted-foreground">
                        {param.description}
                      </p>
                    )}
                  </div>
                ))
              : null}
          </div>
          {hasOverrideParams ? (
            <>
              <h2 className="text-lg font-semibold mt-8">
                Override Parameters
              </h2>
              <div className="grid gap-3 px-4">
                {Object.entries(overrideParams || {})
                  .filter(([_, value]) => value !== undefined)
                  .map(([name, value]) => (
                    <div key={name} className="grid gap-2 mt-4">
                      <div className="flex items-center gap-2">
                        <code>{name}</code>
                        <Separator
                          orientation="vertical"
                          className="bg-border h-full"
                        />
                        <code className="text-xs text-primary">
                          {JSON.stringify(value, null, 2)}
                        </code>
                      </div>
                    </div>
                  ))}
              </div>
            </>
          ) : null}
        </div>
        <DialogFooter className="flex justify-end items-end p-6">
          <DialogClose asChild>
            <Button variant="secondary">Close</Button>
          </DialogClose>
          <Button variant="secondary" onClick={onCustomize}>
            {tool.originalToolName ? "Edit" : "Customize"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};
