import React from 'react';
import { Box, Text } from 'ink';
import type { CommandDef, CommandArgDef } from '@mosaicstack/types';

interface CommandAutocompleteProps {
  commands: CommandDef[];
  selectedIndex: number;
  inputValue: string; // the current input after '/'
}

export function CommandAutocomplete({
  commands,
  selectedIndex,
  inputValue,
}: CommandAutocompleteProps) {
  if (commands.length === 0) return null;

  // Filter by inputValue prefix/fuzzy match
  const query = inputValue.startsWith('/') ? inputValue.slice(1) : inputValue;
  const filtered = filterCommands(commands, query);

  if (filtered.length === 0) return null;

  const clampedIndex = Math.min(selectedIndex, filtered.length - 1);
  const selected = filtered[clampedIndex];

  return (
    <Box flexDirection="column" borderStyle="round" borderColor="gray" paddingX={1}>
      {filtered.slice(0, 8).map((cmd, i) => (
        <Box key={`${cmd.execution}-${cmd.name}`}>
          <Text color={i === clampedIndex ? 'cyan' : 'white'} bold={i === clampedIndex}>
            {i === clampedIndex ? '▶ ' : '  '}/{cmd.name}
          </Text>
          {cmd.aliases.length > 0 && (
            <Text color="gray"> ({cmd.aliases.map((a) => `/${a}`).join(', ')})</Text>
          )}
          <Text color="gray"> — {cmd.description}</Text>
        </Box>
      ))}
      {selected && selected.args && selected.args.length > 0 && (
        <Box marginTop={1} borderStyle="single" borderColor="gray" paddingX={1}>
          <Text color="yellow">
            /{selected.name} {getArgHint(selected.args)}
          </Text>
          <Text color="gray"> — {selected.description}</Text>
        </Box>
      )}
    </Box>
  );
}

function filterCommands(commands: CommandDef[], query: string): CommandDef[] {
  if (!query) return commands;
  const q = query.toLowerCase();
  return commands.filter(
    (c) =>
      c.name.includes(q) ||
      c.aliases.some((a) => a.includes(q)) ||
      c.description.toLowerCase().includes(q),
  );
}

function getArgHint(args: CommandArgDef[]): string {
  if (!args || args.length === 0) return '';
  return args.map((a) => (a.optional ? `[${a.name}]` : `<${a.name}>`)).join(' ');
}