import React, { useState, useEffect } from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import rehypeRaw from 'rehype-raw'; // Импортируем rehype-raw для обработки сырого HTML
import CommandInput from './CommandInput';

function ChatPanel({ chatHistory, onSendMessage }) {
    const [message, setMessage] = useState('');

    const handleSubmit = (event) => {
        event.preventDefault(); // Предотвращаем стандартное действие отправки формы, которое перезагружает страницу
        if (message.trim()) { // Проверяем, что сообщение не пустое
            onSendMessage(message); // Вызываем функцию отправки сообщения, переданную из родителя
            setMessage(''); // Очищаем поле ввода после отправки
        }
    };

    useEffect(() => {
        const chatHistoryDiv = document.querySelector('.chat-history');
        if (chatHistoryDiv) {
            chatHistoryDiv.scrollTop = chatHistoryDiv.scrollHeight;
        }
    }, [chatHistory]);

    return (
        <div className="chat-panel">
            <div className="chat-history">
                {chatHistory.map((msg, index) => (
                    <div key={index} className={`message ${msg.role}`}>
                        {/* Добавлено: обработка текста с Markdown */}
                        <ReactMarkdown
                            remarkPlugins={[remarkGfm]} // remarkHtml больше не нужен здесь
                            rehypePlugins={[rehypeRaw]} // Добавляем rehypeRaw для парсинга и отображения сырого HTML
                            components={{
                                a: ({ node, ...props }) => (
                                    <a {...props} target="_blank" rel="noopener noreferrer">
                                        {props.children}
                                    </a>
                                ),
                                img: ({ node, ...props }) => (
                                    // Переопределяем стили изображения для адаптивности
                                    <img
                                        {...props}
                                        style={{
                                            ...props.style, // Сохраняем другие инлайн-стили, переданные из бэкенда (например, max-height)
                                            maxWidth: '100%', // Гарантируем, что изображение не выходит за пределы ширины родителя
                                            height: 'auto' // Сохраняем пропорции изображения
                                        }}
                                    />
                                )
                            }}
                            children={msg.content} // Явное указание children
                            />
                    </div>
                ))}
            </div>
            <form onSubmit={handleSubmit} className="chat-input-form">
                <CommandInput
                    value={message} // Передаем текущее значение поля ввода
                    onChange={(e) => setMessage(e.target.value)} // Обновляем состояние при изменении поля ввода
                    // onSendMessage больше НЕ передается сюда,
                    // так как CommandInput не должен напрямую отправлять сообщения.
                    // Отправка происходит через onSubmit формы.
                />
                <button type="submit">Отправить</button>
            </form>
        </div>
    );
}

export default ChatPanel;