core/apps/webapp/app/components/integrations/mcp-auth-section.tsx

import React, { useCallback, useState } from "react";
import { useFetcher } from "@remix-run/react";
import { Button } from "~/components/ui/button";
import { Check } from "lucide-react";

interface MCPAuthSectionProps {
  integration: {
    id: string;
    name: string;
  };
  activeAccount?: {
    id: string;
    integrationConfiguration?: {
      mcp?: any;
    };
  };
  hasMCPAuth: boolean;
}

export function MCPAuthSection({
  integration,
  activeAccount,
  hasMCPAuth,
}: MCPAuthSectionProps) {
  const [isMCPConnecting, setIsMCPConnecting] = useState(false);
  const mcpFetcher = useFetcher<{ redirectURL: string }>();
  const disconnectMcpFetcher = useFetcher();

  const isMCPConnected = activeAccount?.integrationConfiguration?.mcp;

  const handleMCPConnect = useCallback(() => {
    setIsMCPConnecting(true);
    mcpFetcher.submit(
      {
        integrationDefinitionId: integration.id,
        redirectURL: window.location.href,
        integrationAccountId: activeAccount?.id as string,
        mcp: true,
      },
      {
        method: "post",
        action: "/api/v1/oauth",
        encType: "application/json",
      },
    );
  }, [integration.id, mcpFetcher]);

  const handleMCPDisconnect = useCallback(() => {
    if (!activeAccount?.id) return;

    disconnectMcpFetcher.submit(
      {
        integrationAccountId: activeAccount.id,
      },
      {
        method: "post",
        action: "/api/v1/integration_account/disconnect_mcp",
        encType: "application/json",
      },
    );
  }, [activeAccount?.id, disconnectMcpFetcher]);

  // Watch for fetcher completion
  React.useEffect(() => {
    if (mcpFetcher.state === "idle" && isMCPConnecting) {
      if (mcpFetcher.data?.redirectURL) {
        window.location.href = mcpFetcher.data.redirectURL;
      } else {
        setIsMCPConnecting(false);
      }
    }
  }, [mcpFetcher.state, mcpFetcher.data, isMCPConnecting]);

  React.useEffect(() => {
    if (disconnectMcpFetcher.state === "idle" && disconnectMcpFetcher.data) {
      window.location.reload();
    }
  }, [disconnectMcpFetcher.state, disconnectMcpFetcher.data]);

  if (!hasMCPAuth || !activeAccount) return null;

  return (
    <div className="mt-6 space-y-2">
      <h3 className="text-lg font-medium">MCP Authentication</h3>

      {isMCPConnected ? (
        <div className="bg-background-3 rounded-lg p-4">
          <div className="text-sm">
            <p className="inline-flex items-center gap-2 font-medium">
              <Check size={16} /> MCP Connected
            </p>
            <p className="text-muted-foreground mb-3">
              MCP (Model Context Protocol) authentication is active
            </p>
            <div className="flex w-full justify-end">
              <Button
                variant="destructive"
                disabled={disconnectMcpFetcher.state === "submitting"}
                onClick={handleMCPDisconnect}
              >
                {disconnectMcpFetcher.state === "submitting"
                  ? "Disconnecting..."
                  : "Disconnect"}
              </Button>
            </div>
          </div>
        </div>
      ) : activeAccount ? (
        <div className="bg-background-3 rounded-lg p-4">
          <h4 className="text-md mb-1 font-medium">
            MCP (Model Context Protocol) Authentication
          </h4>
          <p className="text-muted-foreground mb-3 text-sm">
            This integration requires MCP (Model Context Protocol)
            authentication. Please provide the required MCP credentials in
            addition to any other authentication method.
          </p>
          <div className="flex w-full justify-end">
            <Button
              variant="secondary"
              disabled={isMCPConnecting || mcpFetcher.state === "submitting"}
              onClick={handleMCPConnect}
            >
              {isMCPConnecting || mcpFetcher.state === "submitting"
                ? "Connecting..."
                : `Connect for MCP`}
            </Button>
          </div>
        </div>
      ) : null}
    </div>
  );
}