import React from 'react';
import { Box, Text } from 'ink';
import type { Message } from '../../../models/types.js';
import { renderMarkdown } from '../markdown.js';

export interface MessageListProps {
  messages: Message[];
  scrollOffset?: number;
  streamingContent?: string;
}

export function MessageList({
  messages,
  scrollOffset = 0,
  streamingContent,
}: MessageListProps): React.ReactElement {
  // Calculate visible area (approximate, Ink handles overflow)
  const visibleMessages = messages.slice(scrollOffset);

  return (
    <Box flexDirection="column" flexGrow={1} paddingX={1} overflowY="hidden">
      {visibleMessages.length === 0 && !streamingContent ? (
        <Text color="gray">No messages yet. Start typing to chat with Flynn.</Text>
      ) : (
        <>
          {visibleMessages.map((message, index) => (
            <Box key={`${scrollOffset + index}-${message.role}`} marginBottom={1} flexDirection="column">
              <Text color={message.role === 'user' ? 'blue' : 'green'} bold>
                {message.role === 'user' ? 'You:' : 'Flynn:'}
              </Text>
              <Box marginLeft={1}>
                <Text wrap="wrap">
                  {message.role === 'assistant'
                    ? renderMarkdown(message.content)
                    : message.content}
                </Text>
              </Box>
            </Box>
          ))}
          {streamingContent && (
            <Box marginBottom={1} flexDirection="column">
              <Text color="green" bold>Flynn:</Text>
              <Box marginLeft={1}>
                <Text wrap="wrap">{streamingContent}</Text>
                <Text color="yellow">|</Text>
              </Box>
            </Box>
          )}
        </>
      )}
      {messages.length > 0 && scrollOffset > 0 && (
        <Box position="absolute" marginTop={-1}>
          <Text color="gray">{scrollOffset} more above</Text>
        </Box>
      )}
    </Box>
  );
}