import React, { useState } from 'react';
import { Box, Text, useInput } from 'ink';
import TextInput from 'ink-text-input';

interface SearchFormProps {
  onSubmit: (author: string, title: string) => void;
  onCancel: () => void;
  initialAuthor?: string;
  initialTitle?: string;
}

export const SearchForm: React.FC<SearchFormProps> = ({ onSubmit, onCancel, initialAuthor = '', initialTitle = '' }) => {
  const [author, setAuthor] = useState(initialAuthor);
  const [title, setTitle] = useState(initialTitle);
  const [currentField, setCurrentField] = useState<'author' | 'title'>('author');

  const handleSubmit = () => {
    // Validate that at least one field is filled
    if (!author.trim() && !title.trim()) {
      return; // Don't submit if both fields are empty
    }
    onSubmit(author.trim(), title.trim());
  };

  useInput((input, key) => {
    if (key.tab) {
      // Switch between fields
      setCurrentField(currentField === 'author' ? 'title' : 'author');
    } else if (key.escape) {
      onCancel();
    }
  });

  const canSubmit = author.trim() || title.trim();

  return (
    <Box flexDirection="column" padding={2}>
      <Box marginBottom={2}>
        <Text bold color="blue">
          Search for Books
        </Text>
      </Box>
      
      <Box marginBottom={1}>
        <Text color="gray">
          Fill in at least one field. Use Tab to switch fields, Enter to search, Esc to cancel.
        </Text>
      </Box>
      
      <Box flexDirection="column" marginBottom={2}>
        <Box marginBottom={1}>
          <Text color={currentField === 'author' ? 'cyan' : 'gray'}>
            Author (optional): 
          </Text>
        </Box>
        <Box>
          <TextInput
            value={author}
            onChange={setAuthor}
            onSubmit={handleSubmit}
            focus={currentField === 'author'}
            placeholder="Enter author name..."
          />
        </Box>
      </Box>
      
      <Box flexDirection="column" marginBottom={2}>
        <Box marginBottom={1}>
          <Text color={currentField === 'title' ? 'cyan' : 'gray'}>
            Book Title (optional if author provided):
          </Text>
        </Box>
        <Box>
          <TextInput
            value={title}
            onChange={setTitle}
            onSubmit={handleSubmit}
            focus={currentField === 'title'}
            placeholder="Enter book title..."
          />
        </Box>
      </Box>
      
      <Box flexDirection="column" gap={1}>
        <Box>
          <Text color={canSubmit ? 'green' : 'red'}>
            {canSubmit ? 'Ready to search' : 'Please enter at least one field'}
          </Text>
        </Box>
        
        <Box flexDirection="row" gap={2}>
          <Text color="gray">
            [Enter] Search
          </Text>
          <Text color="gray">
            [Tab] Switch fields
          </Text>
          <Text color="gray">
            [Esc] Cancel
          </Text>
        </Box>
      </Box>
    </Box>
  );
};