App.tsx

import React, { useState, useEffect } from 'react';
import Sidebar from './components/Sidebar';
import Dashboard from './components/Dashboard';
import DocumentList from './components/DocumentList';
import SharedBrowser from './components/SharedBrowser';
import UploadModal from './components/UploadModal';
import SettingsModal from './components/SettingsModal';
import Auth from './components/Auth';
import { SmartDoc, User, Folder, DocCategory, SharedFolder } from './types';
import { Plus, X, Tag, Calendar, FileText, RefreshCw, Folder as FolderIcon, Cloud, Database, Edit2, Save } from 'lucide-react';
import { 
    loadLocalData, 
    addDocumentLocal, 
    deleteDocumentLocal, 
    updateDocumentLocal, 
    addFolderLocal, 
    deleteFolderLocal, 
    updateUserProfile, 
    createSharedFolder,
    getSharedFolders,
    addDocumentToShared,
    deleteDocumentShared,
    deleteSharedFolderFull,
    USE_REMOTE_DB 
} from './services/localService';

const App: React.FC = () => {
  const [user, setUser] = useState<User | null>(null);
  
  const [activeTab, setActiveTab] = useState<'dashboard' | 'files' | 'shared'>('dashboard');
  const [filterDate, setFilterDate] = useState<string | null>(null);

  const [isUploadOpen, setIsUploadOpen] = useState(false);
  const [uploadTargetSharedFolderId, setUploadTargetSharedFolderId] = useState<string | null>(null); // If not null, uploading to shared
  
  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
  
  // Private Data
  const [documents, setDocuments] = useState<SmartDoc[]>([]);
  const [folders, setFolders] = useState<Folder[]>([]);
  
  // Shared Data
  const [sharedFolders, setSharedFolders] = useState<SharedFolder[]>([]);

  const [currentFolderId, setCurrentFolderId] = useState<string | null>(null);
  const [selectedDoc, setSelectedDoc] = useState<SmartDoc | null>(null);
  
  // Edit State
  const [isEditing, setIsEditing] = useState(false);
  const [editFormData, setEditFormData] = useState<SmartDoc | null>(null);
  
  const [isSyncing, setIsSyncing] = useState(false);

  // Reset editing state when selected doc changes
  useEffect(() => {
      setIsEditing(false);
      setEditFormData(null);
  }, [selectedDoc]);

  // Sync Data function - Accepts user override to avoid stale state in closures
  const syncData = async (currentUser?: User | null) => {
    const targetUser = currentUser || user;
    
    if (!targetUser) return;
    setIsSyncing(true);
    
    try {
        const userId = targetUser.email || targetUser.uniqueId || 'user';
        
        // Parallel Fetch
        const [privateData, sharedData] = await Promise.all([
            loadLocalData(userId, targetUser.accessToken),
            getSharedFolders()
        ]);

        setDocuments(privateData.documents);
        setFolders(privateData.folders);
        setSharedFolders(sharedData);

    } catch (e: any) {
        console.error("Failed to sync", e);
        // Show alert if it's a Permission error so the user knows to fix Console Rules
        if (e.message && (e.message.includes("PERMISSION DENIED") || e.message.includes("rules"))) {
            alert(e.message);
        }
    } finally {
        setIsSyncing(false);
    }
  }

  const handleLogin = (loggedInUser: User) => {
    setUser(loggedInUser);
    setDocuments([]);
    setFolders([]);
    setSharedFolders([]);
    setCurrentFolderId(null);
    setActiveTab('dashboard');
    setFilterDate(null);
    // Pass the user directly to ensure we don't rely on stale state
    syncData(loggedInUser); 
  };

  const handleLogout = () => {
    setUser(null);
    setDocuments([]);
    setFolders([]);
    setSharedFolders([]);
    setCurrentFolderId(null);
    setActiveTab('dashboard');
    setFilterDate(null);
  };

  const handleUpdateProfilePhoto = async (file: File) => {
      if (!user || !user.email) return;

      const reader = new FileReader();
      reader.onload = async (e) => {
          const base64 = e.target?.result as string;
          if (base64) {
              const result = await updateUserProfile(user.email!, { picture: base64 }, user.accessToken);
              if (!('error' in result)) {
                  setUser(result as User);
              } else {
                  alert(result.error);
              }
          }
      };
      reader.readAsDataURL(file);
  };
  
  const handleSaveSettings = async (updates: { name?: string; password?: string; picture?: string }) => {
      if (!user || !user.email) return;

      const result = await updateUserProfile(user.email, updates, user.accessToken);
      if ('error' in result) {
          alert(result.error);
      } else {
          setUser(result as User);
      }
  };

  const handleUpload = async (doc: SmartDoc, file?: File) => {
    if (!user) return;
    setIsSyncing(true);
    try {
        if (uploadTargetSharedFolderId) {
            // SHARED UPLOAD
            // 1. Upload to the Shared Folder
            // Clone the doc to ensure we don't pass a mutated reference if that happens
            await addDocumentToShared(uploadTargetSharedFolderId, { ...doc }, user);

            // 2. REPLICATION: Also upload to "My Files" (Private Root)
            // We create a separate copy for the private section so it has its own independent storage file.
            // This prevents issues where deleting the private file breaks the shared one.
            const privateDocCopy = { ...doc };
            privateDocCopy.folderId = null; // Use null for Firebase (undefined causes error)
            delete privateDocCopy.uploadedBy; // Remove shared context
            
            await addDocumentLocal(user, privateDocCopy);

            await syncData(); // Refresh to see updates in both places
            alert("Success! Document uploaded to Shared Folder and saved to My Files.");
        } else {
            // PRIVATE UPLOAD
            let finalDoc = { ...doc };
            await addDocumentLocal(user, finalDoc);
            setDocuments(prev => [finalDoc, ...prev]);
            setActiveTab('files');
            setFilterDate(null);
        }
    } catch (e: any) {
        console.error("Upload failed", e);
        if (e.message.includes('storage/unauthorized') || e.message.includes('STORAGE PERMISSION')) {
             alert("UPLOAD FAILED: Permission Denied.\n\nPlease update your Firebase Storage Rules in the Console to allow uploads.\n\nSee the 'Shared' tab for rule instructions.");
        } else if (e.message.includes("contains undefined")) {
            alert("UPLOAD FAILED: Internal Error (Undefined Value). Please check console.");
        } else {
             alert(e.message || "Failed to save document.");
        }
    } finally {
        setIsSyncing(false);
        setUploadTargetSharedFolderId(null); // Reset upload target
    }
  };

  const handleDelete = async (id: string) => {
    const docToDelete = documents.find(d => d.id === id);
    if (!docToDelete || !user) return;

    if (window.confirm("Are you sure you want to delete this document?")) {
      setIsSyncing(true);
      try {
        await deleteDocumentLocal(user, id);
        setDocuments(prev => prev.filter(d => d.id !== id));
        if (selectedDoc?.id === id) setSelectedDoc(null);
      } catch (e: any) {
        console.error("Delete failed", e);
        alert(e.message || "Failed to delete.");
      } finally {
        setIsSyncing(false);
      }
    }
  };

  const handleCreateFolder = async (name: string) => {
    if (!user) return;
    const newFolder: Folder = {
        id: crypto.randomUUID(),
        name,
        createdAt: Date.now()
    };
    
    setIsSyncing(true);
    try {
        await addFolderLocal(user, newFolder);
        setFolders(prev => [...prev, newFolder]);
    } catch(e: any) {
        alert(e.message || "Failed to create folder");
    } finally {
        setIsSyncing(false);
    }
  };

  // --- SHARED ACTIONS ---
  const handleCreateSharedFolder = async (name: string) => {
      if(!user) return;
      setIsSyncing(true);
      try {
          await createSharedFolder(name, user);
          await syncData();
      } catch (e: any) {
          alert(e.message);
      } finally {
          setIsSyncing(false);
      }
  };

  const handleDeleteSharedDoc = async (folderId: string, docId: string) => {
      if (!window.confirm("Delete this document for EVERYONE?")) return;
      setIsSyncing(true);
      try {
          await deleteDocumentShared(folderId, docId);
          await syncData();
          if(selectedDoc?.id === docId) setSelectedDoc(null);
      } catch(e: any) {
          alert(e.message);
      } finally {
          setIsSyncing(false);
      }
  };

  const handleDeleteSharedFolder = async (folderId: string) => {
      if (!window.confirm("Delete this shared folder and all contents? This cannot be undone.")) return;
      setIsSyncing(true);
      try {
          await deleteSharedFolderFull(folderId);
          await syncData();
      } catch (e: any) {
          alert(e.message);
      } finally {
          setIsSyncing(false);
      }
  };

  const handleDeleteFolder = async (id: string) => {
    if (!user) return;
    if (window.confirm("Delete this folder? Documents inside will be moved to the root.")) {
        setIsSyncing(true);
        try {
            // Update UI state first
            const updatedDocs = documents.map(doc => doc.folderId === id ? { ...doc, folderId: undefined } : doc);
            const updatedFolders = folders.filter(f => f.id !== id);
            setDocuments(updatedDocs);
            setFolders(updatedFolders);

            await deleteFolderLocal(user, id);
            const docsInFolder = documents.filter(d => d.folderId === id);
            for (const d of docsInFolder) {
                await updateDocumentLocal(user, { ...d, folderId: undefined });
            }
            
        } catch(e: any) {
            alert(e.message || "Failed to delete folder");
        } finally {
            setIsSyncing(false);
        }
    }
  }

  const handleUpdateDoc = async (updatedDoc: SmartDoc) => {
      if (!user) return;
      // Note: Editing shared docs metadata is not fully implemented in UI for simplification, 
      // but this function handles private docs mostly.
      
      setDocuments(prev => prev.map(d => d.id === updatedDoc.id ? updatedDoc : d));
      
      if (selectedDoc && selectedDoc.id === updatedDoc.id) {
          setSelectedDoc(updatedDoc);
      }

      setIsSyncing(true);
      try {
        await updateDocumentLocal(user, updatedDoc);
      } catch (e: any) {
          console.error("Update failed", e);
          alert(e.message || "Failed to save changes.");
      } finally {
          setIsSyncing(false);
      }
  };

  const handleDashboardDateClick = (date: string) => {
      setFilterDate(date);
      setActiveTab('files');
  };

  useEffect(() => {
    if (isUploadOpen || selectedDoc || isSettingsOpen) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = 'unset';
    }
  }, [isUploadOpen, selectedDoc, isSettingsOpen]);


  if (!user) {
    return <Auth onLogin={handleLogin} />;
  }

  // Helper to determine if we can show a preview image
  const hasPreview = selectedDoc?.fileData && (selectedDoc.fileData.startsWith('data:image') || selectedDoc.fileData.startsWith('http'));

  return (
    <div className="flex h-screen bg-gray-50 overflow-hidden font-sans">
      <Sidebar 
        activeTab={activeTab} 
        setActiveTab={(tab) => {
            setActiveTab(tab);
            if (tab === 'dashboard') setFilterDate(null);
        }} 
        onLogout={handleLogout} 
        user={user}
        onUpdatePhoto={handleUpdateProfilePhoto}
        onOpenSettings={() => setIsSettingsOpen(true)}
      />
      
      <main className="flex-1 flex flex-col min-w-0 overflow-hidden relative">
        <header className="h-20 bg-white border-b border-gray-100 flex items-center justify-between px-8 flex-shrink-0">
          <div>
            <h1 className="text-2xl font-bold text-gray-800 tracking-tight">
              {activeTab === 'dashboard' ? 'Dashboard' : (activeTab === 'shared' ? 'Shared Groups' : 'My Files')}
            </h1>
            <div className="flex items-center gap-2 mt-1">
                {isSyncing ? (
                    <span className="flex items-center gap-1.5 text-xs text-blue-600 font-medium bg-blue-50 px-2.5 py-1 rounded-full animate-in fade-in">
                        <RefreshCw size={12} className="animate-spin" /> Syncing...
                    </span>
                ) : (
                    <p className="text-sm text-gray-400">Welcome back, {user.name.split(' ')[0]}</p>
                )}
            </div>
          </div>
          
          <div className="flex items-center gap-6">
              <div className="hidden sm:flex flex-col items-end">
                  <span className="text-gray-900 font-bold text-lg leading-tight">{user.name}</span>
                  <div className="flex items-center gap-3 mt-1">
                     {user.uniqueId && (
                         <span className="text-xs text-gray-500 font-mono tracking-wide">
                             {user.uniqueId}
                         </span>
                     )}
                     <span className="flex items-center gap-1 text-[10px] px-2 py-0.5 rounded-full bg-gray-100 text-gray-600 font-bold tracking-wider border border-gray-200">
                        <Database size={10} />
                        {USE_REMOTE_DB ? 'DATABASE' : 'LOCAL'}
                     </span>
                  </div>
              </div>
              
              <button 
                onClick={() => { setUploadTargetSharedFolderId(null); setIsUploadOpen(true); }}
                className="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2.5 rounded-xl font-medium shadow-md shadow-blue-200 transition-all flex items-center gap-2 active:scale-95 group"
              >
                <Plus size={20} className="group-hover:rotate-90 transition-transform" />
                <span className="hidden sm:inline">Upload</span>
              </button>
          </div>
        </header>

        <div className="flex-1 overflow-y-auto p-8">
          <div className="max-w-7xl mx-auto">
            {activeTab === 'dashboard' && (
              <Dashboard documents={documents} onDateClick={handleDashboardDateClick} />
            )}
            
            {activeTab === 'files' && (
              <DocumentList 
                documents={documents} 
                folders={folders}
                currentFolderId={currentFolderId}
                filterDate={filterDate}
                onClearDateFilter={() => setFilterDate(null)}
                onNavigate={setCurrentFolderId}
                onCreateFolder={handleCreateFolder}
                onDeleteFolder={handleDeleteFolder}
                onDeleteDoc={handleDelete} 
                onViewDoc={setSelectedDoc}
              />
            )}

            {activeTab === 'shared' && (
                <SharedBrowser 
                    sharedFolders={sharedFolders}
                    currentUser={user}
                    onRefresh={() => syncData()}
                    onViewDoc={setSelectedDoc}
                    onUploadToShared={(fid) => { setUploadTargetSharedFolderId(fid); setIsUploadOpen(true); }}
                    onCreateSharedFolder={handleCreateSharedFolder}
                    onDeleteSharedDoc={handleDeleteSharedDoc}
                    onDeleteSharedFolder={handleDeleteSharedFolder}
                />
            )}
          </div>
        </div>
      </main>

      <UploadModal 
        isOpen={isUploadOpen} 
        onClose={() => { setIsUploadOpen(false); setUploadTargetSharedFolderId(null); }} 
        onUpload={handleUpload} 
        currentFolderId={currentFolderId}
      />

      <SettingsModal 
        isOpen={isSettingsOpen}
        onClose={() => setIsSettingsOpen(false)}
        user={user}
        onSave={handleSaveSettings}
      />

      {selectedDoc && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4 animate-in fade-in duration-200">
          <div className="bg-white rounded-2xl shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-hidden flex flex-col md:flex-row">
            
            <div className="w-full md:w-1/2 bg-gray-100 p-8 flex items-center justify-center border-r border-gray-200 relative">
               {hasPreview ? (
                   <img 
                    src={selectedDoc.fileData} 
                    alt="Document Preview" 
                    className="max-w-full max-h-full shadow-lg rounded object-contain"
                   />
               ) : (
                   <div className="text-gray-400 flex flex-col items-center text-center p-4">
                       <FileText size={64} />
                       <p className="mt-4 text-sm">No preview available.</p>
                   </div>
               )}
            </div>

            <div className="w-full md:w-1/2 flex flex-col h-full bg-white">
                <div className="p-6 border-b border-gray-100 flex justify-between items-start">
                    <div>
                        {!isEditing && (
                            <div className="flex flex-wrap gap-2 mb-2">
                                <span className="inline-block px-2 py-1 bg-blue-50 text-blue-600 text-xs font-bold uppercase tracking-wider rounded">
                                    {selectedDoc.category}
                                </span>
                                {selectedDoc.uploadedBy && (
                                    <span className="inline-block px-2 py-1 bg-purple-50 text-purple-600 text-xs font-bold uppercase tracking-wider rounded">
                                        From: {selectedDoc.uploadedBy}
                                    </span>
                                )}
                            </div>
                        )}
                        <h2 className="text-2xl font-bold text-gray-800 leading-tight">
                            {isEditing ? 'Edit Document' : selectedDoc.name}
                        </h2>
                    </div>
                    <button onClick={() => { setSelectedDoc(null); setIsEditing(false); }} className="p-2 hover:bg-gray-100 rounded-full transition-colors">
                        <X size={24} className="text-gray-500" />
                    </button>
                </div>

                {/* --- EDIT MODE (Only for private docs currently) --- */}
                {isEditing && editFormData ? (
                    <div className="p-6 overflow-y-auto flex-1 space-y-5">
                        <div className="p-3 bg-yellow-50 text-yellow-700 text-xs rounded border border-yellow-100 mb-2">
                            Editing details is currently only available for private documents.
                        </div>
                        <div>
                            <label className="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-1">Name</label>
                            <input 
                                type="text" 
                                value={editFormData.name} 
                                onChange={e => setEditFormData({...editFormData, name: e.target.value})}
                                className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none"
                            />
                        </div>
                        {/* ... other edit fields ... */}
                        <div>
                            <label className="block text-xs font-bold text-gray-500 uppercase tracking-wider mb-1">Summary</label>
                            <textarea 
                                value={editFormData.summary} 
                                onChange={e => setEditFormData({...editFormData, summary: e.target.value})}
                                className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none h-32 resize-none"
                            />
                        </div>
                    </div>
                ) : (
                    // --- VIEW MODE ---
                    <div className="p-6 overflow-y-auto flex-1 space-y-6">
                        
                        {/* Only show Move Folder option for Private Docs */}
                        {!selectedDoc.uploadedBy && (
                            <div className="bg-gray-50 p-3 rounded-lg border border-gray-100 flex items-center justify-between">
                                 <div className="flex items-center gap-2">
                                     <FolderIcon size={16} className="text-gray-400" />
                                     <span className="text-sm text-gray-600 font-medium">Location</span>
                                 </div>
                                 <select
                                    value={selectedDoc.folderId || ""}
                                    onChange={(e) => handleUpdateDoc({ ...selectedDoc, folderId: e.target.value || null })}
                                    className="bg-white border border-gray-200 text-gray-800 text-sm rounded-md focus:ring-blue-500 focus:border-blue-500 block p-1.5 cursor-pointer max-w-[150px]"
                                >
                                    <option value="">Home (Root)</option>
                                    {folders.map(f => (
                                        <option key={f.id} value={f.id}>{f.name}</option>
                                    ))}
                                </select>
                            </div>
                        )}

                        <div>
                            <h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wide mb-2">Summary</h3>
                            <p className="text-gray-700 leading-relaxed bg-gray-50 p-4 rounded-lg border border-gray-100">
                                {selectedDoc.summary}
                            </p>
                        </div>

                        <div className="grid grid-cols-2 gap-4">
                            <div>
                                <h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wide mb-1">Uploaded</h3>
                                <div className="flex items-center gap-2 text-gray-600 text-sm">
                                    <Calendar size={14} />
                                    {new Date(selectedDoc.uploadDate).toLocaleDateString()}
                                </div>
                            </div>
                            {selectedDoc.extractedDate && (
                                <div>
                                    <h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wide mb-1">Extracted Date</h3>
                                    <div className="flex items-center gap-2 text-gray-600 text-sm">
                                        <Calendar size={14} />
                                        {selectedDoc.extractedDate}
                                    </div>
                                </div>
                            )}
                        </div>

                        <div>
                            <h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wide mb-2">Tags</h3>
                            <div className="flex flex-wrap gap-2">
                                {selectedDoc.tags.map((tag, i) => (
                                    <span key={i} className="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm font-medium flex items-center gap-1">
                                        <Tag size={12} />
                                        {tag}
                                    </span>
                                ))}
                            </div>
                        </div>
                    </div>
                )}
                
                {/* Footer Actions */}
                <div className="p-6 border-t border-gray-100 bg-gray-50 flex justify-end gap-3">
                    {isEditing ? (
                        <>
                            <button 
                                onClick={() => { setIsEditing(false); setEditFormData(null); }}
                                className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg text-sm font-medium transition-colors"
                            >
                                Cancel
                            </button>
                            <button 
                                onClick={() => { if(editFormData) handleUpdateDoc(editFormData); setIsEditing(false); }}
                                className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-sm font-medium transition-colors flex items-center gap-2"
                            >
                                <Save size={16} />
                                Save Changes
                            </button>
                        </>
                    ) : (
                        // Edit button is visible for everyone, but logic inside might restrict fields.
                        // For shared docs, we hide "Edit" for now to keep it simple, as concurrent editing isn't implemented.
                        !selectedDoc.uploadedBy && (
                            <button 
                                onClick={() => { setEditFormData(selectedDoc); setIsEditing(true); }}
                                className="px-4 py-2 border border-gray-300 bg-white hover:bg-gray-50 text-gray-700 rounded-lg text-sm font-medium transition-colors flex items-center gap-2"
                            >
                                <Edit2 size={16} />
                                Edit Details
                            </button>
                        )
                    )}
                </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default App;