ConnectIDEs.tsx

import { useState, useRef, useEffect } from 'react';
import { Check, Copy, Braces } from 'lucide-react';
import { Card, CardHeader, CardTitle, CardDescription, CardContent, Button } from '@mcpmux/ui';
import cursorIcon from '@/assets/client-icons/cursor.svg';
import vscodeIcon from '@/assets/client-icons/vscode.png';
import claudeIcon from '@/assets/client-icons/claude.svg';
import windsurfIcon from '@/assets/client-icons/windsurf.svg';
import jetbrainsIcon from '@/assets/client-icons/jetbrains.svg';
import androidStudioIcon from '@/assets/client-icons/android-studio.svg';
import { addToVscode, addToCursor } from '@/lib/api/clientInstall';

type GridAction = 'deep_link' | 'copy_command' | 'copy_config';

interface GridEntry {
  id: string;
  name: string;
  label: string;
  icon?: string;
  action: GridAction;
  handler: (() => Promise<void>) | string;
}

interface ConnectIDEsProps {
  gatewayUrl: string;
  gatewayRunning: boolean;
}

export function ConnectIDEs({ gatewayUrl, gatewayRunning }: ConnectIDEsProps) {
  const [activeId, setActiveId] = useState<string | null>(null);
  const [copiedId, setCopiedId] = useState<string | null>(null);
  const popoverRef = useRef<HTMLDivElement>(null);

  const mcpUrl = `${gatewayUrl}/mcp`;

  const entries: GridEntry[] = [
    {
      id: 'vscode',
      name: 'VS Code',
      label: 'VS Code',
      icon: vscodeIcon,
      action: 'deep_link',
      handler: () => addToVscode(gatewayUrl),
    },
    {
      id: 'cursor',
      name: 'Cursor',
      label: 'Cursor',
      icon: cursorIcon,
      action: 'deep_link',
      handler: () => addToCursor(gatewayUrl),
    },
    {
      id: 'windsurf',
      name: 'Windsurf',
      label: 'Windsurf',
      icon: windsurfIcon,
      action: 'copy_config',
      handler: `"mcpmux": {\n  "serverUrl": "${mcpUrl}"\n}`,
    },
    {
      id: 'claude-code',
      name: 'Claude Code',
      label: 'Claude',
      icon: claudeIcon,
      action: 'copy_command',
      handler: `claude mcp add --transport http --scope user mcpmux ${mcpUrl}`,
    },
    {
      id: 'jetbrains',
      name: 'JetBrains IDEs',
      label: 'JetBrains',
      icon: jetbrainsIcon,
      action: 'copy_config',
      handler: `"mcpmux": {\n  "url": "${mcpUrl}"\n}`,
    },
    {
      id: 'android-studio',
      name: 'Android Studio',
      label: 'Android',
      icon: androidStudioIcon,
      action: 'copy_config',
      handler: `"mcpmux": {\n  "httpUrl": "${mcpUrl}"\n}`,
    },
    {
      id: 'copy-config',
      name: 'JSON Config',
      label: 'JSON',
      action: 'copy_config',
      handler: `"mcpmux": {\n  "type": "http",\n  "url": "${mcpUrl}"\n}`,
    },
  ];

  // Close popover on outside click
  useEffect(() => {
    if (!activeId) return;
    const handleClick = (e: MouseEvent) => {
      if (popoverRef.current && !popoverRef.current.contains(e.target as Node)) {
        setActiveId(null);
      }
    };
    document.addEventListener('mousedown', handleClick);
    return () => document.removeEventListener('mousedown', handleClick);
  }, [activeId]);

  const handleDeepLink = async (entry: GridEntry) => {
    if (typeof entry.handler === 'function') {
      await entry.handler();
    }
    setActiveId(null);
  };

  const handleCopy = async (entry: GridEntry) => {
    if (typeof entry.handler === 'string') {
      await navigator.clipboard.writeText(entry.handler);
      setCopiedId(entry.id);
      setTimeout(() => {
        setCopiedId(null);
        setActiveId(null);
      }, 1500);
    }
  };

  return (
    <Card>
      <CardHeader>
        <div className="flex items-center justify-between">
          <div>
            <CardTitle>Connect Your IDEs</CardTitle>
            <CardDescription>
              Add McpMux to your AI clients. Auth happens on first connect.
            </CardDescription>
          </div>
          <div className="flex items-center gap-1.5 text-xs text-[rgb(var(--muted))]">
            <span
              className={`h-2 w-2 rounded-full ${gatewayRunning ? 'bg-green-500' : 'bg-orange-500'}`}
            />
            <code className="text-primary-500">{gatewayUrl}</code>
          </div>
        </div>
      </CardHeader>
      <CardContent>
        <div className="flex flex-wrap gap-3" data-testid="client-grid">
          {entries.map((entry) => {
            const isActive = activeId === entry.id;
            const isCopied = copiedId === entry.id;

            return (
              <div key={entry.id} className="relative flex flex-col items-center gap-1" ref={isActive ? popoverRef : undefined}>
                <button
                  type="button"
                  className={`flex items-center justify-center h-10 w-10 rounded-lg border transition-all
                    ${isActive
                      ? 'border-primary-500 bg-primary-500/10 ring-1 ring-primary-500/30'
                      : 'border-[rgb(var(--border))] bg-[var(--surface)] hover:border-primary-400 hover:bg-primary-500/5'
                    }`}
                  title={entry.name}
                  onClick={() => setActiveId(isActive ? null : entry.id)}
                  data-testid={`client-icon-${entry.id}`}
                >
                  {entry.icon ? (
                    <img
                      src={entry.icon}
                      alt={entry.name}
                      className="h-5 w-5 object-contain"
                    />
                  ) : (
                    <Braces className="h-4 w-4 text-[rgb(var(--muted))]" />
                  )}
                </button>
                <span className="text-[10px] text-[rgb(var(--muted))] leading-none">
                  {entry.label}
                </span>

                {/* Popover */}
                {isActive && (
                  <div
                    className="absolute top-full left-0 mt-2 z-10 w-44 rounded-lg border border-[rgb(var(--border))] bg-white dark:bg-zinc-900 shadow-lg p-2.5"
                    data-testid="client-popover"
                  >
                    {/* Arrow */}
                    <div className="absolute -top-1.5 left-4 h-3 w-3 rotate-45 border-l border-t border-[rgb(var(--border))] bg-white dark:bg-zinc-900" />

                    <p className="text-xs font-medium mb-2 text-center relative">
                      {entry.name}
                    </p>

                    {entry.action === 'deep_link' ? (
                      <Button
                        variant="primary"
                        size="sm"
                        className="w-full h-7 text-xs relative"
                        disabled={!gatewayRunning}
                        onClick={() => handleDeepLink(entry)}
                      >
                        Add to {entry.name}
                      </Button>
                    ) : isCopied ? (
                      <div className="flex items-center justify-center gap-1 text-xs text-green-600 h-7 relative">
                        <Check className="h-3 w-3" />
                        Copied!
                      </div>
                    ) : (
                      <Button
                        variant="secondary"
                        size="sm"
                        className="w-full h-7 text-xs gap-1 relative"
                        onClick={() => handleCopy(entry)}
                        data-testid={entry.id === 'copy-config' ? 'copy-config-btn' : undefined}
                      >
                        <Copy className="h-3 w-3" />
                        {entry.action === 'copy_config' ? 'Copy config' : 'Copy command'}
                      </Button>
                    )}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </CardContent>
    </Card>
  );
}