//Nesta página falta: ajustar caminho do CSS

import { useState, useRef, useEffect } from 'react';
//import './styleMedico/chat.css';

// --- COMPONENTES (Estes não mudam) ---

const ConversationListItem = ({ conversation, isActive, onClick }) => (
    <div
        onClick={onClick}
        className={`conversation-item ${isActive ? 'active' : ''}`}
    >
        <img src={conversation.avatarUrl} alt={conversation.patientName} className="avatar" />
        <div className="conversation-details">
            <div className="conversation-header">
                <p className="patient-name">{conversation.patientName}</p>
                <span className="timestamp">{conversation.timestamp}</span>
            </div>
            <div className="conversation-body">
                <p className="last-message">{conversation.lastMessage}</p>
                {conversation.unread > 0 && (
                    <span className="unread-badge">{conversation.unread}</span>
                )}
            </div>
        </div>
    </div>
);

const ChatMessage = ({ message, isDoctor }) => (
    <div className={`message-container ${isDoctor ? 'sent' : 'received'}`}>
        <div className="message-bubble">
            <p className="message-text">{message.text}</p>
            <p className="message-time">{message.time}</p>
        </div>
    </div>
);


// --- COMPONENTE PRINCIPAL (Aqui estão as mudanças) ---

const ChatComponent = () => { // Renomeei para ChatComponent para clareza
    // ✅ 1. O estado agora começa vazio. Os dados virão da API.
    const [conversations, setConversations] = useState([]);
    const [activeConversation, setActiveConversation] = useState(null);
    const [newMessage, setNewMessage] = useState('');
    const [searchTerm, setSearchTerm] = useState('');
    const chatEndRef = useRef(null);
    
    // ✅ 2. useEffect para buscar a lista de conversas da API quando o componente carregar
    useEffect(() => {
        fetch('http://localhost:3001/api/conversations')
            .then(res => res.json())
            .then(data => {
                setConversations(data);
                // Se houver conversas, seleciona a primeira para ser exibida
                if (data.length > 0) {
                    handleConversationClick(data[0].id);
                }
            })
            .catch(error => console.error("Erro ao buscar conversas:", error));
    }, []); // O array vazio [] garante que isso rode apenas uma vez.

    useEffect(() => {
        chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
    }, [activeConversation]); // Rola para o final sempre que as mensagens da conversa ativa mudarem

    // ✅ 3. Lógica para enviar a mensagem para o backend
    const handleSendMessage = async (e) => {
        e.preventDefault();
        if (newMessage.trim() === '' || !activeConversation) return;

        const messageData = { text: newMessage };

        // Faz a requisição POST para a sua API
        try {
            const response = await fetch(`http://localhost:3001/api/conversations/${activeConversation.id}/messages`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(messageData),
            });

            if (!response.ok) throw new Error('Falha ao enviar mensagem');

            const sentMessage = await response.json(); // A mensagem criada que o backend retornou

            // Atualiza a tela com a nova mensagem
            setActiveConversation(prev => ({
                ...prev,
                messages: [...prev.messages, sentMessage]
            }));

            setNewMessage('');

        } catch (error) {
            console.error("Erro ao enviar mensagem:", error);
            alert("Não foi possível enviar a mensagem. Tente novamente.");
        }
    };

    // ✅ 4. Busca os detalhes (mensagens) de uma conversa quando ela é clicada
    const handleConversationClick = (id) => {
        fetch(`http://localhost:3001/api/conversations/${id}`)
            .then(res => res.json())
            .then(data => {
                setActiveConversation(data);
            })
            .catch(error => console.error(`Erro ao buscar detalhes da conversa ${id}:`, error));
    };

    const filteredConversations = conversations.filter(conversation =>
        conversation.patientName.toLowerCase().includes(searchTerm.toLowerCase())
    );

    return (
        <div className="chat-app-container">
            {/* Barra Lateral de Conversas */}
            <aside className="sidebar">
                <header className="sidebar-header">
                    <h1>Mensagens</h1>
                    <div className="search-container">
                        <input
                            type="text"
                            placeholder="Pesquisar paciente..."
                            className="search-input"
                            value={searchTerm}
                            onChange={(e) => setSearchTerm(e.target.value)}
                        />
                        <svg className="search-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                    </div>
                </header>
                <div className="conversation-list">
                    {filteredConversations.map(convo => (
                        <ConversationListItem
                            key={convo.id}
                            conversation={convo}
                            isActive={activeConversation?.id === convo.id}
                            onClick={() => handleConversationClick(convo.id)}
                        />
                    ))}
                </div>
            </aside>

            {/* Painel Principal do Chat */}
            <main className="main-chat">
                {activeConversation ? (
                    <>
                        <header className="chat-header">
                            <img src={activeConversation.avatarUrl} alt={activeConversation.patientName} className="avatar" />
                            <div>
                                <h2 className="chat-patient-name">{activeConversation.patientName}</h2>
                                <p className="chat-status">Online</p>
                            </div>
                        </header>
                        <div className="messages-body">
                            {activeConversation.messages.map(msg => (
                                <ChatMessage key={msg.id} message={msg} isDoctor={msg.sender === 'Você'} />
                            ))}
                            <div ref={chatEndRef} />
                        </div>
                        <footer className="message-footer">
                            <form onSubmit={handleSendMessage} className="message-form">
                                <input
                                    type="text"
                                    value={newMessage}
                                    onChange={(e) => setNewMessage(e.target.value)}
                                    placeholder="Digite sua mensagem..."
                                    className="message-input"
                                    autoComplete="off"
                                />
                                <button type="submit" className="send-button">
                                    <svg className="send-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path></svg>
                                </button>
                            </form>
                        </footer>
                    </>
                ) : (
                    <div className="no-conversation-selected">
                        <p>Selecione uma conversa para começar.</p>
                    </div>
                )}
            </main>
        </div>
    );
};

export default ChatComponent; // Exporte o componente de chat