import { jsx, jsxs } from "react/jsx-runtime";
import {
  useState,
  useEffect,
  forwardRef,
  useRef,
  useImperativeHandle,
  useMemo
} from "react";
import { Box, Text } from "ink";
import { BaseSelector } from "../base/BaseSelector.js";
function getStatusIcon(status) {
  switch (status) {
    case "connected":
      return "\u{1F7E2}";
    case "disconnected":
      return "\u26AA";
    case "auth-required":
      return "\u{1F510}";
    case "error":
      return "\u{1F534}";
  }
}
function getStatusText(status) {
  switch (status) {
    case "connected":
      return "connected";
    case "disconnected":
      return "disabled";
    case "auth-required":
      return "auth required";
    case "error":
      return "failed";
  }
}
const McpServerList = forwardRef(function McpServerList2({ isVisible, onAction, onClose, agent }, ref) {
  const baseSelectorRef = useRef(null);
  const [selectedIndex, setSelectedIndex] = useState(0);
  const [servers, setServers] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  useImperativeHandle(
    ref,
    () => ({
      handleInput: (input, key) => {
        return baseSelectorRef.current?.handleInput(input, key) ?? false;
      }
    }),
    []
  );
  useEffect(() => {
    if (isVisible) {
      setIsLoading(true);
      setSelectedIndex(0);
      const serverList = agent.getMcpServersWithStatus();
      serverList.sort((a, b) => {
        const order = {
          connected: 0,
          disconnected: 1,
          "auth-required": 2,
          error: 3
        };
        return order[a.status] - order[b.status];
      });
      setServers(serverList);
      setIsLoading(false);
    }
  }, [isVisible, agent]);
  const items = useMemo(() => {
    const list = servers.map((server) => ({
      id: server.name,
      isAddNew: false,
      server
    }));
    list.push({
      id: "__add_new__",
      isAddNew: true
    });
    return list;
  }, [servers]);
  const formatItem = (item, isSelected) => {
    if (item.isAddNew) {
      return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { color: isSelected ? "green" : "gray", bold: isSelected, children: "+ Add new server" }) });
    }
    const server = item.server;
    const statusIcon = getStatusIcon(server.status);
    const statusText = getStatusText(server.status);
    return /* @__PURE__ */ jsxs(Box, { children: [
      /* @__PURE__ */ jsxs(Text, { children: [
        statusIcon,
        " "
      ] }),
      /* @__PURE__ */ jsx(Text, { color: isSelected ? "cyan" : "white", bold: isSelected, children: server.name }),
      /* @__PURE__ */ jsxs(Text, { color: "gray", children: [
        " (",
        server.type,
        ") "
      ] }),
      /* @__PURE__ */ jsxs(
        Text,
        {
          color: server.status === "connected" ? "green" : server.status === "disconnected" ? "gray" : server.status === "auth-required" ? "yellow" : "red",
          children: [
            "[",
            statusText,
            "]"
          ]
        }
      )
    ] });
  };
  const handleSelect = (item) => {
    if (item.isAddNew) {
      onAction({ type: "add-new" });
    } else if (item.server) {
      onAction({ type: "select-server", server: item.server });
    }
  };
  return /* @__PURE__ */ jsx(
    BaseSelector,
    {
      ref: baseSelectorRef,
      items,
      isVisible,
      isLoading,
      selectedIndex,
      onSelectIndex: setSelectedIndex,
      onSelect: handleSelect,
      onClose,
      formatItem,
      title: "MCP Servers",
      borderColor: "magenta",
      emptyMessage: "No servers configured"
    }
  );
});
var McpServerList_default = McpServerList;
export {
  McpServerList_default as default
};
