"use client";

import { useMcpServers } from "@/hooks/useMcpServers";
import { McpList } from "./McpList";
import { McpDetail } from "./McpDetail";

export function McpView() {
  const {
    servers,
    loading,
    selectedServer,
    selectServer,
    addServer,
    updateServer,
    deleteServer,
    updateAgents,
  } = useMcpServers();

  const handleToggleAgent = (agentName: string, enabled: boolean) => {
    if (!selectedServer) return;
    const newAgents = enabled
      ? [...selectedServer.agents, agentName]
      : selectedServer.agents.filter((a) => a !== agentName);
    updateAgents(selectedServer.name, newAgents);
  };

  return (
    <div className="flex h-full">
      <div className="w-72 shrink-0">
        <McpList
          servers={servers}
          loading={loading}
          selectedName={selectedServer?.name}
          onSelect={selectServer}
          onAdd={addServer}
          onDelete={deleteServer}
        />
      </div>
      <div className="flex-1">
        {selectedServer ? (
          <McpDetail
            server={selectedServer}
            onUpdate={updateServer}
            onToggleAgent={handleToggleAgent}
          />
        ) : (
          <div className="flex h-full items-center justify-center">
            <p className="text-sm text-zinc-400">Select an MCP server to view details</p>
          </div>
        )}
      </div>
    </div>
  );
}
