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

interface HelpOverlayProps {
  commands?: CommandConfig[];
}

const HELP_SECTIONS = [
  {
    title: "Navigation",
    keys: [
      { key: "j / ↓", desc: "Move down" },
      { key: "k / ↑", desc: "Move up" },
      { key: "g", desc: "Go to top" },
      { key: "G", desc: "Go to bottom" },
    ],
  },
  {
    title: "Selection",
    keys: [
      { key: "space", desc: "Toggle selection" },
      { key: "a", desc: "Select all / deselect all" },
    ],
  },
  {
    title: "View Mode",
    keys: [
      { key: "Tab", desc: "Cycle view (local/github/all)" },
      { key: "0", desc: "Show all" },
      { key: "1", desc: "Show dirty" },
      { key: "2", desc: "Show unpushed" },
      { key: "3", desc: "Show no-remote" },
      { key: "4", desc: "Show GitHub-only" },
      { key: "5", desc: "Show local-only" },
      { key: "6", desc: "Private repos" },
      { key: "7", desc: "Public repos" },
      { key: "8", desc: "Archived repos" },
      { key: "9", desc: "Forked repos" },
    ],
  },
  {
    title: "Git Operations",
    keys: [
      { key: "p", desc: "Push selected" },
      { key: "P", desc: "Pull all repos" },
      { key: "f", desc: "Fetch all remotes" },
      { key: "i", desc: "Init git in selected" },
    ],
  },
  {
    title: "GitHub",
    keys: [
      { key: "D", desc: "Clone GitHub repos" },
      { key: "c", desc: "Create GitHub repo" },
      { key: "C", desc: "Setup (init + create + push)" },
      { key: "A", desc: "Archive GitHub repo" },
    ],
  },
  {
    title: "General",
    keys: [
      { key: "/", desc: "Filter projects" },
      { key: "s", desc: "Cycle sort field" },
      { key: "x", desc: "Command palette" },
      { key: "+", desc: "Add directory" },
      { key: "r", desc: "Refresh" },
      { key: "?", desc: "Toggle help" },
      { key: "Esc", desc: "Cancel / exit mode" },
      { key: "q", desc: "Quit" },
    ],
  },
];

export function HelpOverlay({ commands = [] }: HelpOverlayProps) {
  // Build sections including custom commands if configured
  const sections = [...HELP_SECTIONS];
  
  if (commands.length > 0) {
    sections.push({
      title: "Custom Commands",
      keys: commands.map((cmd) => ({
        key: cmd.key,
        desc: cmd.name,
      })),
    });
  }

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

      <Box flexDirection="row" flexWrap="wrap" gap={4}>
        {sections.map((section) => (
          <Box key={section.title} flexDirection="column" width={30}>
            <Text bold underline>
              {section.title}
            </Text>
            {section.keys.map(({ key, desc }) => (
              <Box key={key} gap={1}>
                <Box width={14}>
                  <Text color="yellow">{key}</Text>
                </Box>
                <Text>{desc}</Text>
              </Box>
            ))}
          </Box>
        ))}
      </Box>

      <Box marginTop={1}>
        <Text dimColor>Press any key to close</Text>
      </Box>
    </Box>
  );
}