src/ChatPage.tsx

import React, { useState } from 'react';
import './ChatPage.css'; // 確保你有這個樣式檔案
import { useNavigate } from 'react-router-dom';

// frontend message type
interface Message {
  sender: 'user' | 'ai';
  text: string;
}

// Type definition of backend return data
interface AskResponse {
  answer: string;
  source_documents: string[];
}

const ChatPage: React.FC = () => {
  const [messages, setMessages] = useState<Message[]>([]);
  const [input, setInput] = useState('');
  const [loading, setLoading] = useState(false);
  const navigate = useNavigate();

  const handleSend = async () => {
    if (input.trim() === '') return;

    const userMessage: Message = { sender: 'user', text: input };
    setMessages((prev) => [...prev, userMessage]);
    setInput('');
    setLoading(true);

    try {

      const res = await fetch('/ask', {  // 改成相對路徑
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ query: input }),
      });


      if (!res.ok) throw new Error('Backend error');

      const data: AskResponse = await res.json();
     
      let aiText = data.answer;
      if (aiText.includes("📚 Source Snippets")) {
      aiText = aiText.split("📚 Source Snippets")[0].trim();
    }

      const aiMessage: Message = { sender: 'ai', text: aiText };
      setMessages((prev) => [...prev, aiMessage]);

      // const aiText = `${data.answer}\n\n📚 Source Snippets:\n${data.source_documents.slice(0, 2).join('\n\n')}`;
      // const aiMessage: Message = { sender: 'ai', text: aiText };

      setMessages((prev) => [...prev, aiMessage]);
    } catch (err) {
      console.error('Fetch error:', err);
      const errorMessage: Message = { sender: 'ai', text: '❌ Unable to get a response, please try again later.' };
      setMessages((prev) => [...prev, errorMessage]);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="chat-container">
      <div className="back-button-container">
        <button className="back-button" onClick={() => navigate('/')}>
          🔙 Back to Home Page
        </button>
      </div>  
      <header className="chat-header">LabAid AI Chat</header>
      <div className="chat-messages">
        {messages.map((msg, idx) => (
          <div key={idx} className={`chat-bubble ${msg.sender}`}>
            {msg.text}
          </div>
        ))}
        {loading && <div className="chat-bubble ai loading">💬 thinking...</div>}
      </div>

      <div className="chat-input-area">
        <input
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyDown={(e) => {
            if (e.key === 'Enter') handleSend();
          }}
          placeholder="please enter your question..."
        />
        <button onClick={handleSend} disabled={loading}>send</button>
      </div>
    </div>
  );
};

export default ChatPage;