import React, { useCallback, useState } from 'react'
import TextInput from '../../components/TextInput.js'
import { useTerminalSize } from '../../hooks/useTerminalSize.js'
import { Box, Text } from '@anthropic/ink'
import { useKeybindings } from '../../keybindings/useKeybinding.js'

interface ChooseRepoStepProps {
  currentRepo: string | null
  useCurrentRepo: boolean
  repoUrl: string
  onRepoUrlChange: (value: string) => void
  onToggleUseCurrentRepo: (useCurrentRepo: boolean) => void
  onSubmit: () => void
}

export function ChooseRepoStep({
  currentRepo,
  useCurrentRepo,
  repoUrl,
  onRepoUrlChange,
  onSubmit,
  onToggleUseCurrentRepo,
}: ChooseRepoStepProps) {
  const [cursorOffset, setCursorOffset] = useState(0)
  const [showEmptyError, setShowEmptyError] = useState(false)
  const terminalSize = useTerminalSize()
  const textInputColumns = terminalSize.columns

  const handleSubmit = useCallback(() => {
    const repoName = useCurrentRepo ? currentRepo : repoUrl
    if (!repoName?.trim()) {
      setShowEmptyError(true)
      return
    }
    onSubmit()
  }, [useCurrentRepo, currentRepo, repoUrl, onSubmit])

  // When the text input is visible, omit confirm:yes so bare 'y' passes
  // through to the input instead of submitting. TextInput's onSubmit handles
  // Enter. Keep the Confirmation context (not Settings) to avoid j/k bindings.
  const isTextInputVisible = !useCurrentRepo || !currentRepo
  const handlePrevious = useCallback(() => {
    onToggleUseCurrentRepo(true)
    setShowEmptyError(false)
  }, [onToggleUseCurrentRepo])
  const handleNext = useCallback(() => {
    onToggleUseCurrentRepo(false)
    setShowEmptyError(false)
  }, [onToggleUseCurrentRepo])

  useKeybindings(
    {
      'confirm:previous': handlePrevious,
      'confirm:next': handleNext,
      'confirm:yes': handleSubmit,
    },
    { context: 'Confirmation', isActive: !isTextInputVisible },
  )
  useKeybindings(
    {
      'confirm:previous': handlePrevious,
      'confirm:next': handleNext,
    },
    { context: 'Confirmation', isActive: isTextInputVisible },
  )

  return (
    <>
      <Box flexDirection="column" borderStyle="round" paddingX={1}>
        <Box flexDirection="column" marginBottom={1}>
          <Text bold>Install GitHub App</Text>
          <Text dimColor>Select GitHub repository</Text>
        </Box>
        {currentRepo && (
          <Box marginBottom={1}>
            <Text
              bold={useCurrentRepo}
              color={useCurrentRepo ? 'permission' : undefined}
            >
              {useCurrentRepo ? '> ' : '  '}
              Use current repository: {currentRepo}
            </Text>
          </Box>
        )}
        <Box marginBottom={1}>
          <Text
            bold={!useCurrentRepo || !currentRepo}
            color={!useCurrentRepo || !currentRepo ? 'permission' : undefined}
          >
            {!useCurrentRepo || !currentRepo ? '> ' : '  '}
            {currentRepo ? 'Enter a different repository' : 'Enter repository'}
          </Text>
        </Box>
        {(!useCurrentRepo || !currentRepo) && (
          <Box marginLeft={2} marginBottom={1}>
            <TextInput
              value={repoUrl}
              onChange={value => {
                onRepoUrlChange(value)
                setShowEmptyError(false)
              }}
              onSubmit={handleSubmit}
              focus={true}
              placeholder="Enter a repo as owner/repo or https://github.com/owner/repo…"
              columns={textInputColumns}
              cursorOffset={cursorOffset}
              onChangeCursorOffset={setCursorOffset}
              showCursor={true}
            />
          </Box>
        )}
      </Box>
      {showEmptyError && (
        <Box marginLeft={3} marginBottom={1}>
          <Text color="error">Please enter a repository name to continue</Text>
        </Box>
      )}
      <Box marginLeft={3}>
        <Text dimColor>
          {currentRepo ? '↑/↓ to select · ' : ''}Enter to continue
        </Text>
      </Box>
    </>
  )
}