import { Switch } from "@/components/ui/switch";
import { Spinner } from "@/components/ui/spinner";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { useToast } from "@/components/ui/use-toast";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { apiClient } from "@/lib/api";
import { HelpCircle } from "lucide-react";
import { FC } from "react";
import { StrictnessFeatureEnabledResponse } from "@mcpx/shared-model";

interface StrictModeToggleProps {
  strictnessData: StrictnessFeatureEnabledResponse;
  isLoading?: boolean;
}

export const StrictModeToggle: FC<StrictModeToggleProps> = ({
  strictnessData,
  isLoading,
}) => {
  const { toast } = useToast();
  const queryClient = useQueryClient();

  const { mutate: setOverride, isPending } = useMutation({
    mutationFn: (override: boolean) =>
      apiClient.setStrictnessOverride(override),
    onSuccess: (result) => {
      queryClient.setQueryData(["admin-strictness"], result);
      if (result.strictnessFeatureEnabled) {
        toast({
          title: "Strictness Updated",
          description: result.adminOverride
            ? "Strict mode bypassed"
            : "Strict mode enabled",
        });
      }
    },
    onError: () => {
      toast({
        title: "Error",
        description: "Failed to update strictness. Please try again.",
        variant: "destructive",
      });
    },
  });

  if (isLoading) {
    return (
      <div className="flex items-center justify-between px-3 py-2">
        <span className="text-sm text-gray-700">Strict mode</span>
        <Spinner className="w-4 h-4" />
      </div>
    );
  }

  const isStrictModeOn = !strictnessData.adminOverride;

  return (
    <div className="flex items-center justify-between px-3 py-2">
      <div className="flex items-center gap-1">
        <span className="text-sm text-gray-700">Strict mode</span>
        <StrictModeHelp />
      </div>
      <Switch
        checked={isStrictModeOn}
        onCheckedChange={(checked) => setOverride(!checked)}
        disabled={isPending}
      />
    </div>
  );
};

const StrictModeHelp: FC = () => (
  <Popover>
    <PopoverTrigger asChild>
      <button className="text-gray-400 hover:text-gray-600 transition-colors">
        <HelpCircle className="h-3.5 w-3.5" />
      </button>
    </PopoverTrigger>
    <PopoverContent side="top" className="w-56 text-sm text-gray-600">
      When off, unlisted MCP servers and restricted tools become available.
    </PopoverContent>
  </Popover>
);
