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

export interface InputBarProps {
  onSubmit: (value: string) => void;
  isStreaming: boolean;
  connected: boolean;
}

export function InputBar({ onSubmit, isStreaming, connected }: InputBarProps) {
  const [input, setInput] = useState('');

  const handleSubmit = useCallback(
    (value: string) => {
      if (!value.trim() || isStreaming || !connected) return;
      onSubmit(value);
      setInput('');
    },
    [onSubmit, isStreaming, connected],
  );

  const placeholder = !connected
    ? 'disconnected — waiting for gateway…'
    : isStreaming
      ? 'waiting for response…'
      : 'message mosaic…';

  return (
    <Box paddingX={0}>
      <Text bold color="green">
        {'❯ '}
      </Text>
      <TextInput
        value={input}
        onChange={setInput}
        onSubmit={handleSubmit}
        placeholder={placeholder}
      />
    </Box>
  );
}