import { Box, Text } from "ink";
import type { CommandConfig, UnifiedRepo } from "../types/index.ts";

export interface CommandPaletteProps {
  commands: CommandConfig[];
  selectedRepos: UnifiedRepo[];
  onClose: () => void;
}

export function CommandPalette({
  commands,
  selectedRepos,
  onClose: _onClose,
}: CommandPaletteProps) {
  // onClose is handled by parent through keybindings
  void _onClose;
  const repoCount = selectedRepos.length;
  const repoNames = selectedRepos.slice(0, 3).map((r) => r.name);
  const moreCount = repoCount > 3 ? repoCount - 3 : 0;

  // Get the first local path for context
  const targetPath = selectedRepos[0]?.localPath || selectedRepos[0]?.local?.path;

  if (commands.length === 0) {
    return (
      <Box
        flexDirection="column"
        borderStyle="round"
        borderColor="cyan"
        paddingX={2}
        paddingY={1}
      >
        <Box marginBottom={1}>
          <Text bold color="cyan">
            Command Palette
          </Text>
        </Box>

        <Text dimColor>
          No custom commands configured.
        </Text>
        <Text dimColor>
          Add commands to your config file:
        </Text>
        <Box marginTop={1} flexDirection="column">
          <Text color="gray">commands:</Text>
          <Text color="gray">  - name: "Open in Editor"</Text>
          <Text color="gray">    key: "e"</Text>
          <Text color="gray">    command: "code ."</Text>
        </Box>

        <Box marginTop={1}>
          <Text dimColor>[Esc] Close</Text>
        </Box>
      </Box>
    );
  }

  return (
    <Box
      flexDirection="column"
      borderStyle="round"
      borderColor="cyan"
      paddingX={2}
      paddingY={1}
    >
      {/* Header */}
      <Box marginBottom={1}>
        <Text bold color="cyan">
          Command Palette
        </Text>
      </Box>

      {/* Target info */}
      <Box marginBottom={1} flexDirection="column">
        <Box gap={1}>
          <Text>Target:</Text>
          <Text color="green">
            {repoNames.join(", ")}
            {moreCount > 0 && <Text dimColor> +{moreCount} more</Text>}
          </Text>
        </Box>
        {targetPath && (
          <Box gap={1}>
            <Text dimColor>Path:</Text>
            <Text dimColor>{targetPath}</Text>
          </Box>
        )}
      </Box>

      {/* Commands list */}
      <Box flexDirection="column" gap={0}>
        <Box marginBottom={1}>
          <Text bold underline>
            Available Commands
          </Text>
        </Box>
        {commands.map((cmd) => (
          <Box key={cmd.key} gap={1}>
            <Box width={6}>
              <Text color="yellow">[{cmd.key}]</Text>
            </Box>
            <Box width={24}>
              <Text>{cmd.name}</Text>
            </Box>
            <Text dimColor>{cmd.command}</Text>
            {cmd.confirm && <Text color="red"> (confirm)</Text>}
            {cmd.background && <Text color="blue"> (bg)</Text>}
          </Box>
        ))}
      </Box>

      {/* Footer */}
      <Box marginTop={1} gap={2}>
        <Text dimColor>[key] Execute</Text>
        <Text dimColor>[Esc] Close</Text>
      </Box>
    </Box>
  );
}