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

// --- Helper Functions & Constants ---
const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : {};
const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-phd-notes';

// --- Main App Component ---
export default function App() {
    const [auth, setAuth] = useState(null);
    const [db, setDb] = useState(null);
    const [userId, setUserId] = useState(null);
    const [isAuthReady, setIsAuthReady] = useState(false);
    const [notes, setNotes] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    const [newNoteContent, setNewNoteContent] = useState('');

    // --- Firebase Initialization ---
    useEffect(() => {
        try {
            const app = initializeApp(firebaseConfig);
            const authInstance = getAuth(app);
            const dbInstance = getFirestore(app);
            setAuth(authInstance);
            setDb(dbInstance);

            const unsubscribe = onAuthStateChanged(authInstance, async (user) => {
                if (user) {
                    setUserId(user.uid);
                } else {
                    try {
                        if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
                            await signInWithCustomToken(authInstance, __initial_auth_token);
                        } else {
                            await signInAnonymously(authInstance);
                        }
                    } catch (authError) {
                        console.error("Authentication Error:", authError);
                        setError("Failed to authenticate. Please refresh the page.");
                    }
                }
                setIsAuthReady(true);
            });
            return () => unsubscribe();
        } catch (e) {
            console.error("Firebase initialization failed:", e);
            setError("Could not connect to the database. Please check your connection or configuration.");
            setLoading(false);
        }
    }, []);

    // --- Data Fetching (Notes) ---
    useEffect(() => {
        if (!isAuthReady || !db || !userId) return;

        setLoading(true);
        const notesCollectionPath = `artifacts/${appId}/users/${userId}/notes`;
        const q = query(collection(db, notesCollectionPath));

        const unsubscribe = onSnapshot(q, (snapshot) => {
            const notesData = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
            setNotes(notesData);
            setLoading(false);
        }, (err) => {
            console.error("Firestore Snapshot Error:", err);
            setError("Failed to load notes. Please try again later.");
            setLoading(false);
        });

        return () => unsubscribe();
    }, [isAuthReady, db, userId]);
    
    // --- Data Transformation (Build Tree) ---
    const noteTree = useMemo(() => {
        const noteMap = new Map(notes.map(note => [note.id, { ...note, children: [] }]));
        const tree = [];
        noteMap.forEach(note => {
            if (note.parentId && noteMap.has(note.parentId)) {
                const parent = noteMap.get(note.parentId);
                parent.children.push(note);
            } else {
                tree.push(note);
            }
        });
        return tree;
    }, [notes]);

    // --- Core Firestore Actions ---
    const handleAddNote = useCallback(async (content, parentId = null) => {
        if (!db || !userId || !content.trim()) return;
        try {
            const notesCollectionPath = `artifacts/${appId}/users/${userId}/notes`;
            await addDoc(collection(db, notesCollectionPath), {
                content: content.trim(),
                parentId,
                createdAt: new Date(),
                userId,
            });
            if (!parentId) {
                setNewNoteContent('');
            }
        } catch (err) {
            console.error("Error adding note:", err);
            setError("Could not add note.");
        }
    }, [db, userId]);

    const handleUpdateNote = useCallback(async (id, newContent) => {
        if (!db || !userId || !newContent.trim()) return;
        try {
            const noteDocPath = `artifacts/${appId}/users/${userId}/notes/${id}`;
            await setDoc(doc(db, noteDocPath), { content: newContent.trim() }, { merge: true });
        } catch (err) {
            console.error("Error updating note:", err);
            setError("Could not update note.");
        }
    }, [db, userId]);
    
    const handleDeleteNote = useCallback(async (noteIdToDelete) => {
        if (!db || !userId) return;
        try {
            const batch = writeBatch(db);
            const notesCollectionPath = `artifacts/${appId}/users/${userId}/notes`;

            // Find all descendants
            const descendants = new Set([noteIdToDelete]);
            let searchQueue = [noteIdToDelete];

            while(searchQueue.length > 0){
                const currentId = searchQueue.shift();
                const q = query(collection(db, notesCollectionPath), where("parentId", "==", currentId));
                const snapshot = await getDocs(q);
                snapshot.forEach(doc => {
                    if (!descendants.has(doc.id)) {
                        descendants.add(doc.id);
                        searchQueue.push(doc.id);
                    }
                });
            }
            
            // Delete the note and all its descendants
            descendants.forEach(id => {
                 const noteDocPath = `artifacts/${appId}/users/${userId}/notes/${id}`;
                 batch.delete(doc(db, noteDocPath));
            });

            await batch.commit();

        } catch (err) {
            console.error("Error deleting note and its children:", err);
            setError("Could not delete the note branch.");
        }
    }, [db, userId]);

    // --- Render Logic ---
    if (error) {
        return <div className="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 m-4 rounded-md shadow-lg" role="alert">
            <p className="font-bold">Error</p>
            <p>{error}</p>
        </div>;
    }

    return (
        <div className="bg-gray-50 min-h-screen font-sans text-gray-800">
            <header className="bg-white shadow-sm sticky top-0 z-10">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
                    <div className="flex items-center justify-between">
                         <div className="flex items-center space-x-3">
                            <svg className="h-8 w-8 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v11.494m-5.247-8.995l10.494 0M12 21.747a9.75 9.75 0 110-19.5 9.75 9.75 0 010 19.5z" />
                           </svg>
                            <h1 className="text-2xl font-bold text-gray-900 tracking-tight">PhD Research Notes</h1>
                         </div>
                         {isAuthReady && userId && <span className="text-xs text-gray-500 font-mono bg-gray-100 px-2 py-1 rounded">UserID: {userId}</span>}
                    </div>
                </div>
            </header>

            <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
                <div className="bg-white p-6 rounded-lg shadow-md mb-8">
                    <h2 className="text-lg font-semibold mb-3">Add a New Research Idea</h2>
                    <div className="flex flex-col sm:flex-row gap-2">
                        <input
                            type="text"
                            value={newNoteContent}
                            onChange={(e) => setNewNoteContent(e.target.value)}
                            placeholder="Start a new research branch..."
                            className="flex-grow p-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
                            onKeyPress={(e) => e.key === 'Enter' && handleAddNote(newNoteContent)}
                        />
                        <button
                            onClick={() => handleAddNote(newNoteContent)}
                            disabled={!newNoteContent.trim()}
                            className="bg-blue-600 text-white px-6 py-3 rounded-md font-semibold hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:bg-gray-400 disabled:cursor-not-allowed transition"
                        >
                            Add Idea
                        </button>
                    </div>
                </div>

                {loading && (
                    <div className="text-center py-10">
                        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
                        <p className="mt-4 text-gray-600">Loading your research...</p>
                    </div>
                )}
                
                {!loading && notes.length === 0 && (
                    <div className="text-center py-16 px-6 bg-white rounded-lg shadow-md">
                        <svg className="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                            <path vectorEffect="non-scaling-stroke" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
                        </svg>
                        <h3 className="mt-2 text-lg font-medium text-gray-900">No research notes yet</h3>
                        <p className="mt-1 text-sm text-gray-500">Get started by adding a new research idea above.</p>
                    </div>
                )}

                {!loading && noteTree.length > 0 && (
                    <div className="space-y-4">
                        {noteTree.map(note => (
                            <NoteNode 
                                key={note.id} 
                                note={note} 
                                onAdd={handleAddNote}
                                onUpdate={handleUpdateNote} 
                                onDelete={handleDeleteNote}
                                level={0}
                            />
                        ))}
                    </div>
                )}
            </main>
        </div>
    );
}

// --- NoteNode Component ---
function NoteNode({ note, onAdd, onUpdate, onDelete, level }) {
    const [isEditing, setIsEditing] = useState(false);
    const [content, setContent] = useState(note.content);
    const [newChildContent, setNewChildContent] = useState('');
    const [isAdding, setIsAdding] = useState(false);

    const handleUpdate = () => {
        if (content !== note.content) {
            onUpdate(note.id, content);
        }
        setIsEditing(false);
    };

    const handleAddChild = () => {
        if (newChildContent.trim()) {
            onAdd(newChildContent, note.id);
            setNewChildContent('');
            setIsAdding(false);
        }
    }

    const branchColorClasses = [
        'border-blue-500', 'border-purple-500', 'border-green-500', 'border-yellow-500', 'border-red-500', 'border-indigo-500'
    ];
    const borderClass = branchColorClasses[level % branchColorClasses.length];

    return (
        <div className={`bg-white rounded-lg shadow-md p-4 border-l-4 ${borderClass}`}>
            <div className="flex items-center justify-between">
                {isEditing ? (
                    <input
                        type="text"
                        value={content}
                        onChange={(e) => setContent(e.target.value)}
                        onBlur={handleUpdate}
                        onKeyPress={(e) => e.key === 'Enter' && handleUpdate()}
                        className="flex-grow p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500"
                        autoFocus
                    />
                ) : (
                    <p className="flex-grow text-gray-800 text-lg break-words">{note.content}</p>
                )}
                
                <div className="flex items-center space-x-2 ml-4 flex-shrink-0">
                    <button onClick={() => setIsAdding(!isAdding)} className="p-2 text-gray-500 hover:text-blue-600 hover:bg-gray-100 rounded-full transition" title="Add Branch">
                        <svg className="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" /></svg>
                    </button>
                    <button onClick={() => setIsEditing(true)} className="p-2 text-gray-500 hover:text-green-600 hover:bg-gray-100 rounded-full transition" title="Edit">
                        <svg className="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.5L14.732 3.732z" /></svg>
                    </button>
                    <button onClick={() => onDelete(note.id)} className="p-2 text-gray-500 hover:text-red-600 hover:bg-gray-100 rounded-full transition" title="Delete Branch">
                        <svg className="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 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>
                </div>
            </div>

            {isAdding && (
                 <div className="mt-4 flex gap-2">
                     <input
                         type="text"
                         value={newChildContent}
                         onChange={(e) => setNewChildContent(e.target.value)}
                         placeholder="New finding or sub-topic..."
                         className="flex-grow p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500"
                         autoFocus
                         onKeyPress={(e) => e.key === 'Enter' && handleAddChild()}
                     />
                     <button onClick={handleAddChild} className="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 transition">Add</button>
                 </div>
            )}
            
            {note.children && note.children.length > 0 && (
                <div className="pl-6 mt-4 space-y-4 border-l-2 border-gray-200">
                    {note.children.map(child => (
                        <NoteNode 
                            key={child.id} 
                            note={child} 
                            onAdd={onAdd}
                            onUpdate={onUpdate} 
                            onDelete={onDelete}
                            level={level + 1}
                        />
                    ))}
                </div>
            )}
        </div>
    );
}