import { Box, Text } from "ink";
import { join } from "path";
import { homedir } from "os";

export interface CompleteStepProps {
  directories: Array<{ path: string; maxDepth: number; label?: string }>;
  githubAuth: { authenticated: boolean; user?: string };
}

export function CompleteStep({ directories, githubAuth }: CompleteStepProps) {
  const xdgConfigHome = process.env.XDG_CONFIG_HOME ?? join(homedir(), ".config");
  const configPath = join(xdgConfigHome, "gitforest", "config.yaml");

  return (
    <Box
      flexDirection="column"
      borderStyle="round"
      borderColor="green"
      paddingX={3}
      paddingY={2}
      width={70}
    >
      {/* Title */}
      <Box marginBottom={1}>
        <Text bold color="green">
          Setup Complete!
        </Text>
      </Box>

      {/* Success message */}
      <Box marginBottom={1}>
        <Text>Your Gitforest configuration has been created.</Text>
      </Box>

      {/* Configuration summary */}
      <Box flexDirection="column" marginBottom={1}>
        <Text>Configuration:</Text>
        <Box gap={2}>
          <Text>  Directories:</Text>
          <Text bold color="cyan">
            {directories.length}
          </Text>
        </Box>
        <Box gap={2}>
          <Text>  GitHub:</Text>
          {githubAuth.authenticated ? (
            <Text bold color="green">
              Authenticated{githubAuth.user ? ` as ${githubAuth.user}` : ""}
            </Text>
          ) : (
            <Text dimColor>Skipped</Text>
          )}
        </Box>
      </Box>

      {/* Directory details */}
      <Box flexDirection="column" marginBottom={1}>
        <Text dimColor>Directories configured:</Text>
        {directories.map((dir, i) => (
          <Text key={i} dimColor>
            {"  "}• {dir.label || dir.path} {dir.maxDepth > 0 && `(depth: ${dir.maxDepth})`}
          </Text>
        ))}
      </Box>

      {/* Config file path */}
      <Box flexDirection="column" marginBottom={1}>
        <Text dimColor>Config saved to:</Text>
        <Text dimColor color="cyan">
          {"  "}{configPath}
        </Text>
      </Box>

      {/* Starting message */}
      <Box marginTop={1}>
        <Text bold color="yellow">
          Starting Gitforest...
        </Text>
      </Box>
    </Box>
  );
}