import React, { RefObject } from 'react';
import { ChatDisplayMode, ChatUiMessage } from '../../types/chatAssistant';
import ChatAssistantHeader from './ChatAssistantHeader';
import ChatMessageList from './ChatMessageList';
import ChatInput from './ChatInput';
import styles from './ChatAssistant.module.css';

interface ChatAssistantPanelProps {
  preferredMode: ChatDisplayMode;
  effectiveMode: ChatDisplayMode;
  messages: ChatUiMessage[];
  isSending: boolean;
  inputRef: RefObject<HTMLTextAreaElement | null>;
  onPreferredModeChange: (mode: ChatDisplayMode) => void;
  onNewConversation: () => void;
  onClose: () => void;
  onSend: (text: string) => Promise<void>;
  onRetry: () => Promise<void>;
}

const ChatAssistantPanel: React.FC<ChatAssistantPanelProps> = ({
  preferredMode,
  effectiveMode,
  messages,
  isSending,
  inputRef,
  onPreferredModeChange,
  onNewConversation,
  onClose,
  onSend,
  onRetry,
}) => {
  return (
    <section
      id="chat-assistant-panel"
      className={`${styles.chatPanel} ${styles.chatPanelEmbedded}`}
      role="dialog"
      aria-modal="false"
      aria-label="Asistente de chat"
    >
      <ChatAssistantHeader
        preferredMode={preferredMode}
        effectiveMode={effectiveMode}
        onPreferredModeChange={onPreferredModeChange}
        onNewConversation={onNewConversation}
        onClose={onClose}
      />

      <div className={styles.chatBody}>
        <ChatMessageList
          messages={messages}
          isSending={isSending}
          onRetry={() => void onRetry()}
          onSelectOption={(value) => void onSend(value)}
        />
        <ChatInput isSending={isSending} onSend={onSend} inputRef={inputRef} />
      </div>
    </section>
  );
};

export default ChatAssistantPanel;