import { Box, Text, useInput } from "ink";
import { homedir } from "os";
import {
  HybridDirectoryBrowser,
  formatDisplayPath,
} from "./onboarding/DirectoriesStep.tsx";
import { useAddDirectoryFlow } from "../hooks/useAddDirectoryFlow.ts";
import type { ExtendedKey } from "../types/ink-keys.ts";

export interface AddDirectoryDialogProps {
  initialPath?: string;
  onConfirm: (path: string, maxDepth: number, label: string) => void;
  onCancel: () => void;
}

export function AddDirectoryDialog({
  initialPath,
  onConfirm,
  onCancel,
}: AddDirectoryDialogProps) {
  const flow = useAddDirectoryFlow({
    initialPath,
    onComplete: onConfirm,
    onCancel,
  });
  const {
    step,
    selectedPath,
    maxDepthInput,
    labelInput,
    error,
    setSelectedPath,
    setMaxDepthInput,
    setLabelInput,
    advance,
    back,
  } = flow;

  useInput((input, key) => {
    const extKey = key as unknown as ExtendedKey;

    // Browse mode is handled entirely by HybridDirectoryBrowser
    if (step === "browse") return;

    if (key.escape) {
      back();
      return;
    }

    if (key.return) {
      advance();
      return;
    }

    if (step === "maxDepth") {
      if (extKey.backspace || extKey.delete) {
        setMaxDepthInput(maxDepthInput.slice(0, -1));
      } else if (/^[0-9]$/.test(input)) {
        setMaxDepthInput(maxDepthInput + input);
      }
    } else if (step === "label") {
      if (extKey.backspace || extKey.delete) {
        setLabelInput(labelInput.slice(0, -1));
      } else if (input.length === 1) {
        setLabelInput(labelInput + input);
      }
    }
  });

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

      {step === "browse" && (
        <HybridDirectoryBrowser
          startingPath={homedir()}
          onSelect={setSelectedPath}
          onCancel={onCancel}
        />
      )}

      {step === "maxDepth" && (
        <Box flexDirection="column" marginBottom={1}>
          <Text>Max scan depth (0-10, default 2):</Text>
          <Box gap={1}>
            <Text color="yellow">{"> "}</Text>
            <Text color="yellow">{maxDepthInput}</Text>
            <Text color="yellow" inverse>_</Text>
          </Box>
          <Text dimColor>Path: {formatDisplayPath(selectedPath || "")}</Text>
          {error && <Text color="red">{error}</Text>}
          <Box marginTop={1} gap={2}>
            <Text dimColor>Enter:</Text>
            <Text dimColor>continue</Text>
            <Text dimColor>Esc:</Text>
            <Text dimColor>back to browser</Text>
          </Box>
        </Box>
      )}

      {step === "label" && (
        <Box flexDirection="column" marginBottom={1}>
          <Text>Label (optional, press Enter to skip):</Text>
          <Box gap={1}>
            <Text color="yellow">{"> "}</Text>
            <Text color="yellow">{labelInput}</Text>
            <Text color="yellow" inverse>_</Text>
          </Box>
          <Text dimColor>Path: {formatDisplayPath(selectedPath || "")}</Text>
          <Text dimColor>Depth: {maxDepthInput}</Text>
          {error && <Text color="red">{error}</Text>}
          <Box marginTop={1} gap={2}>
            <Text dimColor>Enter:</Text>
            <Text dimColor>confirm</Text>
            <Text dimColor>Esc:</Text>
            <Text dimColor>back to depth</Text>
          </Box>
        </Box>
      )}
    </Box>
  );
}