import React, { useState, useEffect, useRef } from 'react';
import { initializeApp } from 'firebase/app';
import { getAuth, signInAnonymously, signInWithCustomToken, onAuthStateChanged } from 'firebase/auth';
import { getFirestore, collection, addDoc, query, orderBy, onSnapshot, serverTimestamp, doc, setDoc, getDocs, deleteDoc } from 'firebase/firestore';

// Global variables for Firebase config and app ID (provided by the environment)
const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';
const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : {};
const initialAuthToken = typeof __initial_auth_token !== 'undefined' ? __initial_auth_token : null;

// Utility function to copy text to clipboard
const copyToClipboard = (text) => {
    const textarea = document.createElement('textarea');
    textarea.value = text;
    document.body.appendChild(textarea);
    textarea.select();
    try {
        document.execCommand('copy');
        console.log('Text copied to clipboard');
    } catch (err) {
        console.error('Failed to copy text: ', err);
    }
    document.body.removeChild(textarea);
};

// Main App Component
const App = () => {
    const [db, setDb] = useState(null);
    const [auth, setAuth] = useState(null);
    const [userId, setUserId] = useState(null);
    const [isAuthReady, setIsAuthReady] = useState(false);

    const [uploadedFiles, setUploadedFiles] = useState([]);
    const [documentContent, setDocumentContent] = useState(''); // Combined text content from documents
    const [chatHistory, setChatHistory] = useState([]);
    const [userMessage, setUserMessage] = useState('');
    const [isLoading, setIsLoading] = useState(false);
    const [errorMessage, setErrorMessage] = useState('');
    const [showUploadModal, setShowUploadModal] = useState(false);
    const [currentFileContent, setCurrentFileContent] = useState('');
    const [currentFileName, setCurrentFileName] = useState('');

    const chatContainerRef = useRef(null);

    // Initialize Firebase and set up auth listener
    useEffect(() => {
        try {
            const app = initializeApp(firebaseConfig);
            const firestore = getFirestore(app);
            const authentication = getAuth(app);
            setDb(firestore);
            setAuth(authentication);

            onAuthStateChanged(authentication, async (user) => {
                if (user) {
                    setUserId(user.uid);
                } else {
                    // Sign in anonymously if no initial token or user
                    if (!initialAuthToken) {
                        await signInAnonymously(authentication);
                    }
                }
                setIsAuthReady(true);
            });

            if (initialAuthToken) {
                signInWithCustomToken(authentication, initialAuthToken)
                    .catch((error) => {
                        console.error("Error signing in with custom token:", error);
                        signInAnonymously(authentication); // Fallback to anonymous
                    });
            } else {
                 signInAnonymously(authentication);
            }

        } catch (error) {
            console.error("Error initializing Firebase:", error);
            setErrorMessage("Lỗi khi khởi tạo Firebase.");
        }
    }, []);

    // Fetch documents and chat history when auth is ready and userId is available
    useEffect(() => {
        if (db && userId && isAuthReady) {
            const documentsRef = collection(db, `artifacts/${appId}/users/${userId}/documents`);
            const chatHistoryRef = collection(db, `artifacts/${appId}/users/${userId}/chatHistory`);

            // Listen for document changes
            const unsubscribeDocs = onSnapshot(documentsRef, (snapshot) => {
                const docsData = [];
                let combinedContent = '';
                snapshot.forEach((doc) => {
                    const data = doc.data();
                    docsData.push({ id: doc.id, ...data });
                    combinedContent += data.content + '\n\n'; // Concatenate document content
                });
                setUploadedFiles(docsData);
                setDocumentContent(combinedContent.trim());
            }, (error) => {
                console.error("Error fetching documents:", error);
                setErrorMessage("Lỗi khi tải tài liệu.");
            });

            // Listen for chat history changes
            const unsubscribeChat = onSnapshot(query(chatHistoryRef, orderBy('timestamp')), (snapshot) => {
                const messages = [];
                snapshot.forEach((doc) => {
                    messages.push(doc.data());
                });
                setChatHistory(messages);
            }, (error) => {
                console.error("Error fetching chat history:", error);
                setErrorMessage("Lỗi khi tải lịch sử trò chuyện.");
            });

            // Clean up listeners on unmount
            return () => {
                unsubscribeDocs();
                unsubscribeChat();
            };
        }
    }, [db, userId, isAuthReady]);

    // Scroll to bottom of chat history
    useEffect(() => {
        if (chatContainerRef.current) {
            chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
        }
    }, [chatHistory]);

    // Handle file upload
    const handleFileChange = async (event) => {
        const files = Array.from(event.target.files);
        if (files.length === 0) return;

        setShowUploadModal(true);
        setCurrentFileContent(''); // Clear previous content
        setErrorMessage('');

        for (const file of files) {
            setCurrentFileName(file.name);
            if (file.type === 'text/plain') {
                const reader = new FileReader();
                reader.onload = async (e) => {
                    const content = e.target.result;
                    setCurrentFileContent(content);
                    // Automatically save .txt content
                    if (db && userId) {
                        try {
                            const documentsRef = collection(db, `artifacts/${appId}/users/${userId}/documents`);
                            await addDoc(documentsRef, {
                                fileName: file.name,
                                content: content,
                                timestamp: serverTimestamp()
                            });
                            console.log("Tệp văn bản đã được tải lên và lưu trữ:", file.name);
                        } catch (e) {
                            console.error("Lỗi khi thêm tài liệu vào Firestore:", e);
                            setErrorMessage("Không thể lưu tài liệu. Vui lòng thử lại.");
                        }
                    }
                };
                reader.readAsText(file);
            } else {
                // For other file types, prompt user to manually paste content
                setCurrentFileContent(`Nội dung từ tệp '${file.name}' (loại: ${file.type}) không thể được trích xuất tự động. Vui lòng dán nội dung văn bản liên quan vào đây:`);
            }
        }
        // After processing all files, if not a .txt, the modal will remain open for manual input
        // If it was a .txt, the modal will close after content is set and saved.
    };

    const handleManualContentSave = async () => {
        if (!currentFileName || !currentFileContent.trim()) {
            setErrorMessage("Vui lòng nhập nội dung hoặc chọn tệp.");
            return;
        }
        if (db && userId) {
            try {
                const documentsRef = collection(db, `artifacts/${appId}/users/${userId}/documents`);
                await addDoc(documentsRef, {
                    fileName: currentFileName,
                    content: currentFileContent,
                    timestamp: serverTimestamp()
                });
                console.log("Nội dung thủ công đã được lưu trữ cho:", currentFileName);
                setShowUploadModal(false); // Close modal after saving
                setCurrentFileContent('');
                setCurrentFileName('');
            } catch (e) {
                console.error("Lỗi khi thêm tài liệu thủ công vào Firestore:", e);
                setErrorMessage("Không thể lưu nội dung thủ công. Vui lòng thử lại.");
            }
        }
    };

    const handleDeleteDocument = async (docId) => {
        if (db && userId) {
            try {
                await deleteDoc(doc(db, `artifacts/${appId}/users/${userId}/documents`, docId));
                console.log("Tài liệu đã xóa:", docId);
            } catch (e) {
                console.error("Lỗi khi xóa tài liệu:", e);
                setErrorMessage("Không thể xóa tài liệu. Vui lòng thử lại.");
            }
        }
    };

    // Send message to chatbot
    const sendMessage = async () => {
        if (!userMessage.trim() || isLoading || !db || !userId) return;

        const userMsg = userMessage.trim();
        setUserMessage('');
        setErrorMessage('');
        setIsLoading(true);

        // Add user message to chat history in Firestore
        try {
            const chatHistoryRef = collection(db, `artifacts/${appId}/users/${userId}/chatHistory`);
            await addDoc(chatHistoryRef, {
                sender: 'user',
                message: userMsg,
                timestamp: serverTimestamp()
            });
        } catch (e) {
            console.error("Lỗi khi lưu tin nhắn người dùng:", e);
            setErrorMessage("Không thể lưu tin nhắn của bạn.");
            setIsLoading(false);
            return;
        }

        try {
            // Construct prompt with document content
            const prompt = `Dựa trên các tài liệu sau:\n\n${documentContent}\n\nTrả lời câu hỏi: ${userMsg}\n\nLƯU Ý QUAN TRỌNG: CHỈ TRẢ LỜI DỰA TRÊN THÔNG TIN CÓ TRONG CÁC TÀI LIỆU ĐƯỢC CUNG CẤP. KHÔNG THÊM BẤT KỲ DỮ LIỆU NÀO NẰM NGOÀI PHẠM VI CỦA CÁC TÀI LIỆU ĐƯỢC HỌC. Nếu thông tin không có trong tài liệu, hãy nói rõ rằng bạn không tìm thấy thông tin đó.`;

            let chatHistoryForAPI = [];
            chatHistoryForAPI.push({ role: "user", parts: [{ text: prompt }] });

            const payload = { contents: chatHistoryForAPI };
            const apiKey = ""; // Canvas will provide this
            const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`;

            const response = await fetch(apiUrl, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload)
            });

            const result = await response.json();

            let botResponse = "Xin lỗi, tôi không thể tạo phản hồi vào lúc này.";
            if (result.candidates && result.candidates.length > 0 &&
                result.candidates[0].content && result.candidates[0].content.parts &&
                result.candidates[0].content.parts.length > 0) {
                botResponse = result.candidates[0].content.parts[0].text;
            } else {
                console.error("Cấu trúc phản hồi API không mong muốn:", result);
                setErrorMessage("Lỗi từ API: Cấu trúc phản hồi không hợp lệ.");
            }

            // Add bot message to chat history in Firestore
            await addDoc(chatHistoryRef, {
                sender: 'bot',
                message: botResponse,
                timestamp: serverTimestamp()
            });

        } catch (error) {
            console.error("Lỗi khi gọi API Gemini:", error);
            setErrorMessage("Lỗi khi giao tiếp với chatbot. Vui lòng thử lại.");
            // Add an error message to chat history if API call fails
            try {
                const chatHistoryRef = collection(db, `artifacts/${appId}/users/${userId}/chatHistory`);
                await addDoc(chatHistoryRef, {
                    sender: 'bot',
                    message: "Xin lỗi, đã xảy ra lỗi khi xử lý yêu cầu của bạn. Vui lòng thử lại sau.",
                    timestamp: serverTimestamp()
                });
            } catch (e) {
                console.error("Lỗi khi lưu tin nhắn lỗi của bot:", e);
            }
        } finally {
            setIsLoading(false);
        }
    };

    if (!isAuthReady) {
        return (
            <div className="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-400 to-pink-500">
                <div className="text-white text-2xl font-bold">Đang tải ứng dụng...</div>
            </div>
        );
    }

    return (
        <div className="min-h-screen bg-gradient-to-br from-purple-400 to-pink-500 text-gray-800 font-inter flex flex-col p-4 sm:p-6 lg:p-8 rounded-lg shadow-lg">
            <style>
                {`
                @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
                body {
                    font-family: 'Inter', sans-serif;
                }
                `}
            </style>
            <h1 className="text-white text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-6 text-center drop-shadow-md">
                <span role="img" aria-label="robot">🤖</span> Thư Ký Chatbot Tài Liệu <span role="img" aria-label="book">📚</span>
            </h1>

            {userId && (
                <div className="text-white text-sm mb-4 text-center">
                    ID người dùng của bạn: <span className="font-semibold">{userId}</span>
                    <button
                        onClick={() => copyToClipboard(userId)}
                        className="ml-2 px-2 py-1 bg-white bg-opacity-20 hover:bg-opacity-30 rounded-md text-xs transition-all duration-200"
                        title="Sao chép ID người dùng"
                    >
                        Sao chép
                    </button>
                </div>
            )}

            {errorMessage && (
                <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-md mb-4 text-center shadow-sm" role="alert">
                    {errorMessage}
                </div>
            )}

            {/* Upload Section */}
            <div className="bg-white bg-opacity-90 rounded-xl p-4 sm:p-6 mb-6 shadow-xl flex flex-col items-center">
                <label
                    htmlFor="file-upload"
                    className="w-full max-w-md flex flex-col items-center justify-center px-4 py-6 bg-blue-100 text-blue-700 rounded-lg shadow-md tracking-wide uppercase border border-dashed border-blue-400 cursor-pointer hover:bg-blue-200 hover:border-blue-500 transition-all duration-300 ease-linear"
                >
                    <svg className="w-8 h-8 mb-2" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                        <path d="M16.88 9.1A4.997 4.997 0 0 1 15 17H2a2 2 0 0 1-2-2V4c0-1.1.9-2 2-2h4l2 2h4l2 2h2a2 2 0 0 1 2 2v1zm-6-7a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v2H4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1H10V2zM8 10a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
                    </svg>
                    <span className="mt-2 text-base leading-normal text-center">Tải lên tài liệu (PDF, TXT, JPG, PNG, PPTX)</span>
                    <input id="file-upload" type="file" multiple className="hidden" onChange={handleFileChange} accept=".txt,.pdf,.jpg,.jpeg,.png,.pptx" />
                </label>

                {uploadedFiles.length > 0 && (
                    <div className="mt-4 w-full max-w-md">
                        <h3 className="text-lg font-semibold text-gray-700 mb-2 text-center">Tài liệu đã tải lên:</h3>
                        <ul className="list-disc list-inside bg-gray-50 p-3 rounded-lg shadow-inner max-h-48 overflow-y-auto">
                            {uploadedFiles.map((file) => (
                                <li key={file.id} className="flex justify-between items-center text-sm text-gray-600 py-1 border-b last:border-b-0">
                                    <span className="truncate flex-grow mr-2">{file.fileName}</span>
                                    <button
                                        onClick={() => handleDeleteDocument(file.id)}
                                        className="text-red-500 hover:text-red-700 transition-colors duration-200"
                                        title="Xóa tài liệu"
                                    >
                                        <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
                                            <path strokeLinecap="round" strokeLinejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                        </svg>
                                    </button>
                                </li>
                            ))}
                        </ul>
                    </div>
                )}
            </div>

            {/* Chat Section */}
            <div className="flex-grow bg-white bg-opacity-90 rounded-xl p-4 sm:p-6 shadow-xl flex flex-col">
                <div ref={chatContainerRef} className="flex-grow overflow-y-auto mb-4 p-2 border border-gray-200 rounded-lg bg-gray-50">
                    {chatHistory.length === 0 ? (
                        <div className="text-center text-gray-500 italic p-4">
                            Chào mừng bạn! Hãy tải lên tài liệu và bắt đầu hỏi tôi.
                        </div>
                    ) : (
                        chatHistory.map((msg, index) => (
                            <div
                                key={index}
                                className={`mb-3 p-3 rounded-lg shadow-sm max-w-[80%] ${
                                    msg.sender === 'user'
                                        ? 'bg-blue-100 text-blue-800 ml-auto rounded-br-none'
                                        : 'bg-green-100 text-green-800 mr-auto rounded-bl-none'
                                }`}
                            >
                                <span className="font-semibold">{msg.sender === 'user' ? 'Bạn' : 'Thư ký'}:</span> {msg.message}
                            </div>
                        ))
                    )}
                </div>

                <div className="flex items-center">
                    <input
                        type="text"
                        className="flex-grow p-3 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-purple-400 transition-all duration-200"
                        placeholder="Hỏi tôi về tài liệu đã tải lên..."
                        value={userMessage}
                        onChange={(e) => setUserMessage(e.target.value)}
                        onKeyPress={(e) => e.key === 'Enter' && sendMessage()}
                        disabled={isLoading}
                    />
                    <button
                        onClick={sendMessage}
                        className="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-r-lg shadow-md transition-all duration-300 ease-in-out transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center"
                        disabled={isLoading}
                    >
                        {isLoading ? (
                            <svg className="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                            </svg>
                        ) : (
                            'Gửi'
                        )}
                    </button>
                </div>
            </div>

            {/* Manual Content Input Modal */}
            {showUploadModal && (
                <div className="fixed inset-0 bg-gray-600 bg-opacity-75 flex items-center justify-center p-4 z-50">
                    <div className="bg-white rounded-lg p-6 shadow-xl max-w-lg w-full">
                        <h2 className="text-xl font-bold mb-4 text-gray-800">Nhập nội dung từ "{currentFileName}"</h2>
                        <p className="text-gray-600 mb-4">
                            Chúng tôi không thể tự động trích xuất văn bản từ loại tệp này. Vui lòng dán nội dung văn bản liên quan vào hộp bên dưới để chatbot có thể sử dụng.
                        </p>
                        <textarea
                            className="w-full h-48 p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-400 mb-4 resize-y"
                            placeholder="Dán nội dung văn bản của tài liệu vào đây..."
                            value={currentFileContent}
                            onChange={(e) => setCurrentFileContent(e.target.value)}
                        ></textarea>
                        {errorMessage && (
                            <div className="bg-red-100 border border-red-400 text-red-700 px-3 py-2 rounded-md mb-4 text-sm" role="alert">
                                {errorMessage}
                            </div>
                        )}
                        <div className="flex justify-end space-x-3">
                            <button
                                onClick={() => setShowUploadModal(false)}
                                className="px-4 py-2 bg-gray-300 text-gray-800 rounded-md hover:bg-gray-400 transition-colors duration-200"
                            >
                                Hủy
                            </button>
                            <button
                                onClick={handleManualContentSave}
                                className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors duration-200"
                            >
                                Lưu nội dung
                            </button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
};

export default App;