import { Box, Text, useInput } from "ink";

export interface WelcomeStepProps {
  onComplete: () => void;
  onCancel: () => void;
}

export function WelcomeStep({ onComplete, onCancel }: WelcomeStepProps) {
  useInput((input, key) => {
    if (key.return || input === " ") {
      onComplete();
      return;
    }

    if (input === "q" || input === "Q" || key.escape) {
      onCancel();
      return;
    }
  });

  return (
    <Box
      flexDirection="column"
      borderStyle="round"
      borderColor="cyan"
      paddingX={3}
      paddingY={2}
      width={70}
    >
      {/* Title */}
      <Box marginBottom={1}>
        <Text bold color="cyan" underline>
          Welcome to Gitforest!
        </Text>
      </Box>

      <Box marginBottom={1}>
        <Text>Git Repository Manager for the Terminal</Text>
      </Box>

      {/* Description */}
      <Box flexDirection="column" marginBottom={1}>
        <Text dimColor>
          This wizard will help you set up Gitforest for the first time.
        </Text>
      </Box>

      {/* What we'll configure */}
      <Box flexDirection="column" marginBottom={1}>
        <Text>We'll configure:</Text>
        <Text>  • Project directories to scan for Git repositories</Text>
        <Text>  • GitHub authentication (optional)</Text>
      </Box>

      {/* Instructions */}
      <Box marginTop={1} gap={1}>
        <Text dimColor>Press </Text>
        <Text color="green" bold>
          Enter
        </Text>
        <Text dimColor> to continue, </Text>
        <Text color="red" bold>
          q
        </Text>
        <Text dimColor> to quit</Text>
      </Box>
    </Box>
  );
}