import React, { useState, useEffect } from 'react';
import { Box, Text, useStdout } from 'ink';
import SelectInput from 'ink-select-input';

interface MenuItem {
  label: string;
  value: string;
}

const menuItems: MenuItem[] = [
  { label: 'Search for Book', value: 'search' },
  { label: 'Batch Process CSV', value: 'batch' },
  { label: 'Settings', value: 'settings' },
  { label: 'Exit', value: 'exit' },
];

interface MainMenuProps {
  onSelect: (value: string) => void;
}

export const MainMenu: React.FC<MainMenuProps> = ({ onSelect }) => {
  const [terminalSize] = useState({
    columns: process.stdout.columns || 80,
    rows: (process.stdout.rows || 24) - 1
  });

  const handleSelect = (item: MenuItem) => {
    onSelect(item.value);
  };

  return (
    <Box 
      flexDirection="column" 
      height={terminalSize.rows}
      width={terminalSize.columns} 
      justifyContent="flex-start" 
      alignItems="stretch"
      paddingX={2}
      paddingY={0}
    >
      {/* Top spacer */}
      <Box flexGrow={1} />
      
      {/* Header Section */}
      <Box flexDirection="column" alignItems="center" marginBottom={2}>
        <Box marginBottom={1}>
          <Text bold color="blue">
            📚 BookGrabs
          </Text>
        </Box>
        <Text color="cyan" bold>
          Your Library Genesis Search Tool
        </Text>
      </Box>
      
      {/* Menu Section */}
      <Box flexDirection="column" alignItems="center" marginBottom={2}>
        <Box marginBottom={2}>
          <Text color="gray">
            Use arrow keys to navigate, Enter to select:
          </Text>
        </Box>
        
        <Box width={30}>
          <SelectInput items={menuItems} onSelect={handleSelect} />
        </Box>
      </Box>
      
      {/* Bottom spacer */}
      <Box flexGrow={1} />
      
      {/* Footer Section */}
      <Box width="100%" justifyContent="center" marginBottom={1}>
        <Text color="gray" dimColor>
          Press Ctrl+C to exit anytime
        </Text>
      </Box>
    </Box>
  );
};