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

export interface CloneDialogProps {
  repos: UnifiedRepo[];
  directories: DirectoryConfig[];
  selectedDirIndex: number;
  useSSH: boolean;
  onConfirm: (targetDir: string, useSSH: boolean) => void;
  onCancel: () => void;
  onSelectDir: (index: number) => void;
  onToggleSSH: () => void;
}

export function CloneDialog({
  repos,
  directories,
  selectedDirIndex,
  useSSH,
  onConfirm,
  onCancel,
  onSelectDir,
  onToggleSSH,
}: CloneDialogProps) {
  useInput((input, key) => {
    if (key.escape || input === "n" || input === "N") {
      onCancel();
      return;
    }

    if (key.return || input === "y" || input === "Y") {
      const targetDir = directories[selectedDirIndex]?.path;
      if (targetDir) {
        // Expand ~ to home directory
        const expandedPath = targetDir.replace(/^~/, process.env.HOME || "");
        onConfirm(expandedPath, useSSH);
      }
      return;
    }

    // Navigate directories
    if (input === "j" || key.downArrow) {
      const nextIndex = Math.min(selectedDirIndex + 1, directories.length - 1);
      onSelectDir(nextIndex);
      return;
    }

    if (input === "k" || key.upArrow) {
      const prevIndex = Math.max(selectedDirIndex - 1, 0);
      onSelectDir(prevIndex);
      return;
    }

    // Toggle SSH/HTTPS
    if (input === "p" || input === "P") {
      onToggleSSH();
      return;
    }
  });

  const maxItems = 5;
  const displayRepos = repos.slice(0, maxItems);
  const remainingCount = repos.length - maxItems;

  return (
    <Box
      flexDirection="column"
      borderStyle="round"
      borderColor="cyan"
      paddingX={2}
      paddingY={1}
      width={60}
    >
      {/* Title */}
      <Box marginBottom={1}>
        <Text bold color="cyan">
          Clone GitHub {repos.length === 1 ? "Repository" : `Repositories (${repos.length})`}
        </Text>
      </Box>

      {/* Repos to clone */}
      <Box flexDirection="column" marginBottom={1}>
        <Text>Repositories to clone:</Text>
        {displayRepos.map((repo) => (
          <Text key={repo.id} color="magenta">
            {"  ☁ "}
            {repo.github?.fullName || repo.name}
          </Text>
        ))}
        {remainingCount > 0 && (
          <Text dimColor>{"  "}...and {remainingCount} more</Text>
        )}
      </Box>

      {/* Target directory selection */}
      <Box flexDirection="column" marginBottom={1}>
        <Text>Target directory (j/k to select):</Text>
        {directories.map((dir, index) => (
          <Box key={dir.path} gap={1}>
            <Text color={index === selectedDirIndex ? "cyan" : "gray"}>
              {index === selectedDirIndex ? "●" : "○"}
            </Text>
            <Text color={index === selectedDirIndex ? "white" : "gray"}>
              {dir.label || dir.path}
            </Text>
            <Text dimColor>({dir.path})</Text>
          </Box>
        ))}
      </Box>

      {/* Protocol selection */}
      <Box marginBottom={1} gap={2}>
        <Text>Protocol:</Text>
        <Text color={useSSH ? "green" : "gray"}>
          {useSSH ? "[●]" : "[ ]"} SSH
        </Text>
        <Text color={!useSSH ? "green" : "gray"}>
          {!useSSH ? "[●]" : "[ ]"} HTTPS
        </Text>
        <Text dimColor>(p to toggle)</Text>
      </Box>

      {/* Actions */}
      <Box gap={2}>
        <Text dimColor>Press </Text>
        <Text color="green" bold>
          Enter/y
        </Text>
        <Text dimColor> to clone, </Text>
        <Text color="red" bold>
          Esc/n
        </Text>
        <Text dimColor> to cancel</Text>
      </Box>
    </Box>
  );
}