import { Box, Text } from 'ink';
import { Select } from '@inkjs/ui';
import type { McpTool } from '../mcp-session.js';

interface ToolListViewProps {
  tools: McpTool[];
  onSelect: (tool: McpTool) => void;
  onBack: () => void;
}

export function ToolListView({ tools, onSelect }: ToolListViewProps) {
  if (tools.length === 0) {
    return <Text dimColor>No tools available.</Text>;
  }

  const options = tools.map((t) => ({
    label: `${t.name}${t.description ? ` — ${t.description.slice(0, 60)}` : ''}`,
    value: t.name,
  }));

  return (
    <Box flexDirection="column">
      <Text bold>Tools ({tools.length}):</Text>
      <Box marginTop={1}>
        <Select
          options={options}
          onChange={(value) => {
            const tool = tools.find((t) => t.name === value);
            if (tool) onSelect(tool);
          }}
        />
      </Box>
    </Box>
  );
}
