'use client';

import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { useSession } from 'next-auth/react';
import { 
  Mail, Loader2, AlertCircle, 
  MoreVertical, Settings, Plus as PlusIcon, Trash2, Edit, 
  Inbox, Send, Star, Trash, Plus, ChevronLeft, ChevronRight, 
  Search, ChevronDown, Folder, ChevronUp, Reply, Forward, ReplyAll, 
  MoreHorizontal, FolderOpen, X, Paperclip, MessageSquare, Copy, EyeOff, 
  AlertOctagon, Archive, Menu, Check
} from 'lucide-react';
import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { ScrollArea } from '@/components/ui/scroll-area';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
import { Checkbox } from '@/components/ui/checkbox';
import { Label } from '@/components/ui/label';
import { toast } from '@/components/ui/use-toast';
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@/components/ui/dropdown-menu';

// Import components
import EmailSidebar from '@/components/email/EmailSidebar';
import EmailList from '@/components/email/EmailList';
import EmailSidebarContent from '@/components/email/EmailSidebarContent';
import EmailDetailView from '@/components/email/EmailDetailView';
import ComposeEmail from '@/components/email/ComposeEmail';
import { DeleteConfirmDialog } from '@/components/email/EmailDialogs';

// Import the custom hooks
import { useEmailState } from '@/hooks/use-email-state';

// Import the prefetching function
import { prefetchFolderEmails } from '@/lib/services/prefetch-service';

// Import Account type from the reducer
import { Account } from '@/lib/reducers/emailReducer';

// Add the missing EmailData import from use-courrier
import { EmailData } from '@/hooks/use-courrier';

// Simplified version for this component
function SimplifiedLoadingFix() {
  // In production, don't render anything
  if (process.env.NODE_ENV === 'production') {
    return null;
  }
  
  // Simple debugging component
  return (
    <div className="fixed bottom-4 right-4 z-50 p-2 bg-white/80 shadow rounded-lg text-xs">
      Debug: Email app loaded
    </div>
  );
}

interface EmailWithFlags {
  id: string;
  read?: boolean;
  flags?: {
    seen?: boolean;
  };
}

interface EmailMessage {
  id: string;
  from: { name: string; address: string }[];
  to: { name: string; address: string }[];
  subject: string;
  date: Date;
  flags: {
    seen: boolean;
    flagged: boolean;
    answered: boolean;
    draft: boolean;
    deleted: boolean;
  };
  size: number;
  hasAttachments: boolean;
  folder: string;
  contentFetched: boolean;
  accountId: string;
  content: {
    text: string;
    html: string;
  };
}

interface AccountData {
  email: string;
  password: string;
  host: string;
  port: number;
  secure: boolean;
  display_name: string;
  smtp_host?: string;
  smtp_port?: number;
  smtp_secure?: boolean;
}

// Define a color palette for account circles
const colorPalette = [
  'bg-blue-500',
  'bg-green-500',
  'bg-red-500',
  'bg-yellow-500',
  'bg-purple-500',
  'bg-pink-500',
  'bg-indigo-500',
  'bg-teal-500',
  'bg-orange-500',
  'bg-cyan-500',
];

// Helper function for consistent logging
const logEmailOp = (operation: string, details: string, data?: any) => {
  const timestamp = new Date().toISOString().split('T')[1].substring(0, 12);
  console.log(`[${timestamp}][EMAIL-APP][${operation}] ${details}`);
  if (data) {
    console.log(`[${timestamp}][EMAIL-APP][DATA]`, data);
  }
};

export default function CourrierPage() {
  const router = useRouter();
  const { data: session } = useSession();
  
  // Replace useCourrier with useEmailState
  const {
    // State values
    accounts,
    selectedAccount,
    selectedFolders,
    currentFolder,
    emails,
    selectedEmail,
    selectedEmailIds,
    isLoading,
    error,
    page,
    totalPages,
    totalEmails,
    mailboxes,
    unreadCountMap,
    showFolders,
    
    // Actions
    loadEmails,
    handleEmailSelect,
    toggleEmailSelection,
    toggleSelectAll,
    markEmailAsRead,
    toggleStarred,
    changeFolder,
    deleteEmails,
    sendEmail,
    searchEmails,
    formatEmailForAction,
    setPage,
    setEmails,
    selectAccount,
    handleLoadMore
  } = useEmailState();

  // UI state (keeping only what's still needed)
  const [showComposeModal, setShowComposeModal] = useState(false);
  const [composeType, setComposeType] = useState<'new' | 'reply' | 'reply-all' | 'forward'>('new');
  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
  const [showLoginNeeded, setShowLoginNeeded] = useState(false);
  const [sidebarOpen, setSidebarOpen] = useState(true);
  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const [prefetchStarted, setPrefetchStarted] = useState(false);
  const [showAddAccountForm, setShowAddAccountForm] = useState(false);
  
  // Add state for modals/dialogs
  const [showEditModal, setShowEditModal] = useState(false);
  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
  const [accountToEdit, setAccountToEdit] = useState<Account | null>(null);
  const [accountToDelete, setAccountToDelete] = useState<Account | null>(null);
  const [newPassword, setNewPassword] = useState('');
  const [editLoading, setEditLoading] = useState(false);
  const [deleteLoading, setDeleteLoading] = useState(false);
  const [selectedColor, setSelectedColor] = useState<string>('');
  
  // Use the reducer-managed values directly instead of tracked separately
  const [searchQuery, setSearchQuery] = useState('');
  const [unreadCount, setUnreadCount] = useState(0);
  
  // Calculate unread count for the selected folder
  useEffect(() => {
    if (selectedAccount && selectedAccount.id !== 'loading-account') {
      const folderCounts = unreadCountMap[selectedAccount.id.toString()];
      if (folderCounts) {
        setUnreadCount(folderCounts[currentFolder] || 0);
      } else {
        setUnreadCount(0);
      }
    } else {
      // For 'loading-account', sum up all unread counts for the current folder
      let totalUnread = 0;
      Object.values(unreadCountMap).forEach((folderCounts) => {
        totalUnread += folderCounts[currentFolder] || 0;
      });
      setUnreadCount(totalUnread);
    }
  }, [unreadCountMap, selectedAccount, currentFolder]);
  
  // Initialize session and start prefetching
  useEffect(() => {
    // Flag to prevent multiple initialization attempts
    let isMounted = true;
    let retryCount = 0;
    const MAX_RETRIES = 3;
    const RETRY_DELAY = 1000; // 1 second

    const initSession = async () => {
      try {
        if (!isMounted) return;
        logEmailOp('SESSION', 'Initializing email session');
        setLoading(true);
        
        // First check if Redis is ready before making API calls
        const redisStatus = await fetch('/api/redis/status')
          .then(res => res.json())
          .catch(() => ({ ready: false }));
        
        if (!isMounted) return;
        
        // Call the session API to check email credentials and start prefetching
        logEmailOp('SESSION', 'Fetching session data from API');
        const response = await fetch('/api/courrier/session', {
          credentials: 'include',
          headers: {
            'Content-Type': 'application/json',
          }
        });
        
        // Handle 401 Unauthorized with retry logic
        if (response.status === 401) {
          if (retryCount < MAX_RETRIES) {
            retryCount++;
            console.log(`Session request failed (attempt ${retryCount}/${MAX_RETRIES}), retrying in ${RETRY_DELAY}ms...`);
            await new Promise(resolve => setTimeout(resolve, RETRY_DELAY));
            return initSession();
          } else {
            console.error('Max retries reached for session request');
            return;
          }
        }

        if (!response.ok) {
          throw new Error(`Session request failed with status ${response.status}`);
        }

        const data = await response.json();
        
        // Log session response
        console.log('[DEBUG] Session API response details:', {
          authenticated: data.authenticated,
          hasEmailCredentials: data.hasEmailCredentials,
          accountsCount: data.allAccounts?.length || 0
        });

        // Process accounts if authenticated
        if (data.authenticated && data.hasEmailCredentials) {
          setPrefetchStarted(Boolean(data.prefetchStarted));
          
          let updatedAccounts: Account[] = [];
          
          // Process multiple accounts
          if (data.allAccounts && Array.isArray(data.allAccounts) && data.allAccounts.length > 0) {
            console.log('[DEBUG] Processing multiple accounts:', data.allAccounts.length);
            
            data.allAccounts.forEach((account: any) => {
              // Use exact folders from IMAP
              const accountFolders = (account.folders && Array.isArray(account.folders)) 
                ? account.folders 
                : [];
              
              // Ensure folder names have account prefix
              const validFolders = accountFolders.map((folder: string) => {
                if (!folder.includes(':')) {
                  return `${account.id}:${folder}`;
                }
                return folder;
              });
              
              updatedAccounts.push({
                id: account.id,
                name: account.display_name || account.email,
                email: account.email,
                color: account.color || colorPalette[(updatedAccounts.length) % colorPalette.length],
                folders: validFolders
              });
            });
            
            console.log('[DEBUG] Constructed accounts:', updatedAccounts);
          } else {
            // Fallback to single account if allAccounts is not available
            const folderList = (data.mailboxes && data.mailboxes.length > 0) ? 
              data.mailboxes : [];
            
            updatedAccounts.push({
              id: 'default-account',
              name: data.displayName || data.email,
              email: data.email,
              color: colorPalette[0],
              folders: folderList
            });
            
            console.log('[DEBUG] Constructed single fallback account:', updatedAccounts[0]);
          }
          
          // Update accounts state using our reducer actions
          // First, set the accounts
          setEmails([]);  // Clear any existing emails first
          
          // Log current state for debugging
          console.log('[DEBUG] Current state before setting accounts:', {
            accounts: accounts?.length || 0,
            selectedAccount: selectedAccount?.id || 'none',
            currentFolder: currentFolder || 'none'
          });
          
          // Use our reducer actions instead of setState
          setAccounts(updatedAccounts);
          
          // Auto-select the first account if available
          if (updatedAccounts.length > 0) {
            const firstAccount = updatedAccounts[0];
            console.log('[DEBUG] Auto-selecting first account:', firstAccount);
            
            // Use our new selectAccount function which handles state atomically
            // Add a slight delay to ensure the accounts are set first
            setTimeout(() => {
              console.log('[DEBUG] Now calling selectAccount');
              selectAccount(firstAccount);
            }, 100);
          }
        } else {
          // User is authenticated but doesn't have email credentials
          setShowLoginNeeded(true);
        }
      } catch (error) {
        console.error('Error initializing session:', error);
      } finally {
        if (isMounted) {
          setLoading(false);
        }
      }
    };
    
    if (session?.user?.id) {
      initSession();
    }
    
    return () => {
      isMounted = false;
    };
  }, [session?.user?.id, setEmails, selectAccount]);
  
  // Helper to get folder icons
  const getFolderIcon = (folder: string) => {
    const folderLower = folder.toLowerCase();
    
    if (folderLower.includes('inbox')) {
      return <Inbox className="h-4 w-4 text-gray-500" />;
    } else if (folderLower.includes('sent')) {
      return <Send className="h-4 w-4 text-gray-500" />;
    } else if (folderLower.includes('trash')) {
      return <Trash className="h-4 w-4 text-gray-500" />;
    } else if (folderLower.includes('archive')) {
      return <Archive className="h-4 w-4 text-gray-500" />;
    } else if (folderLower.includes('draft')) {
      return <Edit className="h-4 w-4 text-gray-500" />;
    } else if (folderLower.includes('spam') || folderLower.includes('junk')) {
      return <AlertOctagon className="h-4 w-4 text-gray-500" />;
    } else {
      return <Folder className="h-4 w-4 text-gray-500" />;
    }
  };
  
  // Helper to format folder names
  const formatFolderName = (folder: string) => {
    // Extract base folder name if prefixed
    const baseFolderName = folder.includes(':') ? folder.split(':')[1] : folder;
    return baseFolderName.charAt(0).toUpperCase() + baseFolderName.slice(1).toLowerCase();
  };

  // Handle actions - replace with useReducer-based functions
  const handleMailboxChange = (folder: string, accountId?: string) => {
    // Simply call our new changeFolder function which handles everything atomically
    setLoading(true);
    changeFolder(folder, accountId)
      .finally(() => {
        setLoading(false);
      });
  };

  // Handle account selection - replace with reducer-based function
  const handleAccountSelect = (account: Account) => {
    // Add extensive debugging to track the process
    console.log('[DEBUG] handleAccountSelect called with account:', {
      id: account.id, 
      email: account.email,
      folders: account.folders?.length
    });
    
    // Skip if no valid account provided
    if (!account || !account.id) {
      console.error('Invalid account passed to handleAccountSelect');
      return;
    }
    
    // Skip if this is already the selected account
    if (selectedAccount?.id === account.id) {
      console.log('[DEBUG] Account already selected, skipping');
      return;
    }
    
    // Simply call our new selectAccount function which handles everything atomically
    setLoading(true);
    
    // Clear all existing selections first
    console.log('[DEBUG] Now selecting account through reducer action');
    selectAccount(account);
    
    // Log what happened
    console.log('[DEBUG] Account selection completed');
    
    // Give some time for the UI to update
    setTimeout(() => setLoading(false), 300);
  };

  // Email actions
  const handleReply = () => {
    if (!selectedEmail) return;
    setComposeType('reply');
    setShowComposeModal(true);
  };
  
  const handleReplyAll = () => {
    if (!selectedEmail) return;
    setComposeType('reply-all');
    setShowComposeModal(true);
  };
  
  const handleForward = () => {
    if (!selectedEmail) return;
    setComposeType('forward');
    setShowComposeModal(true);
  };
  
  const handleComposeNew = () => {
    setComposeType('new');
    setShowComposeModal(true);
  };

  // Handle bulk actions
  const handleBulkAction = async (action: 'delete' | 'mark-read' | 'mark-unread' | 'archive') => {
    if (selectedEmailIds.length === 0) return;
    
    switch (action) {
      case 'delete':
        setShowDeleteConfirm(true);
        break;
        
      case 'mark-read':
        // Mark all selected emails as read
        for (const emailId of selectedEmailIds) {
          await markEmailAsRead(emailId, true);
        }
        break;
        
      case 'mark-unread':
        // Mark all selected emails as unread
        for (const emailId of selectedEmailIds) {
          await markEmailAsRead(emailId, false);
        }
        break;
        
      case 'archive':
        // Archive functionality would be implemented here
        break;
    }
  };

  const handleSendEmail = async (emailData: EmailData) => {
    try {
      const result = await sendEmail(emailData);
      if (!result.success) {
        throw new Error(result.error);
      }
      return result;
    } catch (error) {
      throw error;
    }
  };

  const handleDeleteConfirm = async () => {
    await deleteEmails(selectedEmailIds);
    setShowDeleteConfirm(false);
    
    // Clear selected emails after deletion
    // Using setEmails will reset the selection state
    setLoading(true);
    setPage(1);
    loadEmails(1, 20, false).finally(() => {
      // Selection will be cleared by loading new emails
      setLoading(false);
    });
  };
  
  const handleGoToLogin = () => {
    router.push('/courrier/login');
  };

  // Update the accounts from state - fix type issues
  const setAccounts = (newAccounts: Account[]) => {
    console.log('[DEBUG] Setting accounts:', newAccounts);
    
    // In the previous implementation, we'd dispatch an action
    // But since we don't have direct access to the reducer's dispatch function,
    // we need to use the exported actions from our hook
    
    // This dispatch function should be made available by our hook
    const windowWithDispatch = window as any;
    if (typeof windowWithDispatch.dispatchEmailAction === 'function') {
      // Use the global dispatch function if available
      windowWithDispatch.dispatchEmailAction({ 
        type: 'SET_ACCOUNTS', 
        payload: newAccounts 
      });
    } else {
      console.error('Cannot dispatch SET_ACCOUNTS action - no dispatch function available');
      
      // Fallback: Try to directly modify the accounts array if we have access
      // This isn't ideal but ensures backward compatibility during transition
      console.log('[DEBUG] Using fallback method to update accounts');
      
      // Our reducer should expose this action
      const useEmailStateDispatch = windowWithDispatch.__emailStateDispatch;
      if (typeof useEmailStateDispatch === 'function') {
        useEmailStateDispatch({ 
          type: 'SET_ACCOUNTS', 
          payload: newAccounts 
        });
      } else {
        console.error('No fallback dispatch method available either');
      }
    }
  };

  return (
    <>
      <SimplifiedLoadingFix />
      
      {/* Main layout */}
      <main className="w-full h-screen bg-black">
        <div className="w-full h-full px-4 pt-12 pb-4">
          <div className="flex h-full bg-carnet-bg">
            {/* Use EmailSidebar component instead of inline sidebar */}
            <EmailSidebar
              accounts={accounts}
              selectedAccount={selectedAccount}
              selectedFolders={selectedFolders}
              currentFolder={currentFolder}
              loading={loading || isLoading}
              unreadCount={unreadCountMap}
              showAddAccountForm={showAddAccountForm}
              onFolderChange={handleMailboxChange}
              onRefresh={() => {
                setLoading(true);
                setPage(1);
                loadEmails(page, 10, false).finally(() => setLoading(false));
              }}
              onComposeNew={handleComposeNew}
              onAccountSelect={handleAccountSelect}
              onShowAddAccountForm={setShowAddAccountForm}
              onAddAccount={async (formData) => {
                setLoading(true);
                
                console.log('[DEBUG] Add account form submission:', formData);
                
                // Pull values from form with proper type handling
                const formValues = {
                  email: formData.get('email')?.toString() || '',
                  password: formData.get('password')?.toString() || '',
                  host: formData.get('host')?.toString() || '',
                  port: parseInt(formData.get('port')?.toString() || '993'),
                  secure: formData.get('secure') === 'on',
                  display_name: formData.get('display_name')?.toString() || '',
                  smtp_host: formData.get('smtp_host')?.toString() || '',
                  smtp_port: formData.get('smtp_port')?.toString() ? 
                    parseInt(formData.get('smtp_port')?.toString() || '587') : undefined,
                  smtp_secure: formData.get('smtp_secure') === 'on'
                };
                
                // If display_name is empty, use email
                if (!formValues.display_name) {
                  formValues.display_name = formValues.email;
                }
                
                try {
                  // First test the connection
                  const testResponse = await fetch('/api/courrier/test-connection', {
                    method: 'POST',
                    headers: {
                      'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                      email: formValues.email,
                      password: formValues.password,
                      host: formValues.host,
                      port: formValues.port,
                      secure: formValues.secure
                    })
                  });
                  
                  const testResult = await testResponse.json();
                  
                  if (!testResponse.ok) {
                    throw new Error(testResult.error || 'Connection test failed');
                  }
                  
                  console.log('Connection test successful:', testResult);
                  
                  // Only declare realAccounts once before using for color assignment
                  const realAccounts = accounts.filter(a => a.id !== 'loading-account');
                  const saveResponse = await fetch('/api/courrier/account', {
                    method: 'POST',
                    headers: {
                      'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(formValues)
                  });
                  const saveResult = await saveResponse.json();
                  if (!saveResponse.ok) {
                    throw new Error(saveResult.error || 'Failed to add account');
                  }
                  const realAccount = saveResult.account;
                  realAccount.color = colorPalette[realAccounts.length % colorPalette.length];
                  realAccount.folders = testResult.details.sampleFolders || ['INBOX', 'Sent', 'Drafts', 'Trash'];
                  setAccounts([...accounts, realAccount]);
                  setShowAddAccountForm(false);
                  toast({
                    title: "Account added successfully",
                    description: `Your email account ${formValues.email} has been added.`,
                    duration: 5000
                  });
                } catch (error) {
                  console.error('Error adding account:', error);
                  toast({
                    title: "Failed to add account",
                    description: error instanceof Error ? error.message : 'Unknown error',
                    variant: "destructive",
                    duration: 5000
                  });
                } finally {
                  setLoading(false);
                }
              }}
              onEditAccount={async (account) => {
                try {
                  // Get the latest account data from accounts array
                  const updatedAccount = accounts.find(a => a.id === account.id);
                  if (updatedAccount) {
                    setAccountToEdit(updatedAccount as any);
                    setSelectedColor(updatedAccount.color || '');
                    setShowEditModal(true);
                  } else {
                    toast({
                      title: "Error",
                      description: "Could not find account data",
                      variant: "destructive",
                      duration: 3000
                    });
                  }
                } catch (error) {
                  console.error("Error preparing account edit:", error);
                  toast({
                    title: "Error",
                    description: "Failed to load account settings",
                    variant: "destructive",
                    duration: 3000
                  });
                }
              }}
              onDeleteAccount={(account) => {
                setAccountToDelete(account as any); 
                setShowDeleteDialog(true);
              }}
              onSelectEmail={(emailId, accountId, folder) => { 
                if (typeof emailId === 'string') {
                  handleEmailSelect(emailId, accountId || '', folder || currentFolder); 
                }
              }}
              {...({} as any)}
            />

            {/* Panel 2: Email List - Always visible */}
            <div className="w-80 flex flex-col border-r border-gray-100 overflow-hidden">
              {/* Header without search bar or profile */}
              <div className="p-2 border-b border-gray-100 bg-white flex items-center justify-between">
                <Button 
                  variant="ghost" 
                  size="icon"
                  className="md:hidden h-9 w-9"
                  onClick={() => setMobileSidebarOpen(!mobileSidebarOpen)}
                >
                  <Menu className="h-5 w-5 text-gray-500" />
                </Button>
                
                <div className="flex-1">
                  <div className="flex items-center">
                    {getFolderIcon(currentFolder)}
                    {/* Extract base folder and show email as prefix */}
                    <span className="ml-2 font-medium text-gray-700">
                      {selectedAccount?.email ? `${selectedAccount.email}: ` : ''}
                      {formatFolderName(currentFolder.includes(':') ? currentFolder.split(':')[1] : currentFolder)}
                    </span>
                  </div>
                </div>
                
                {/* Buttons removed from here to avoid duplication with the BulkActionsToolbar */}
              </div>
              
              {/* Email List - Always visible */}
              <div className="flex-1 overflow-hidden bg-white">
                {isLoading ? (
                  <div className="h-full flex items-center justify-center">
                    <div className="flex flex-col items-center">
                      <Loader2 className="h-8 w-8 text-blue-500 animate-spin mb-2" />
                      <p className="text-sm text-gray-500">Loading emails...</p>
                    </div>
                  </div>
                ) : error ? (
                  <div className="h-full flex items-center justify-center">
                    <div className="max-w-md p-4">
                      <Alert variant="destructive">
                        <AlertCircle className="h-4 w-4" />
                        <AlertTitle>Error</AlertTitle>
                        <AlertDescription>
                          {error}
                        </AlertDescription>
                      </Alert>
                    </div>
                  </div>
                ) : (
                  <div className="h-full overflow-hidden flex flex-col">
                    {/* Email List */}
                    <div 
                      className="flex-1 overflow-y-auto"
                      onScroll={(e) => {
                        const target = e.currentTarget;
                        const { scrollTop, scrollHeight, clientHeight } = target;
                        const distanceToBottom = scrollHeight - scrollTop - clientHeight;
                        const scrollPercentage = (scrollTop + clientHeight) / scrollHeight;
                        
                        // Store last scroll position to detect direction
                        const lastScrollTop = target.dataset.lastScrollTop ? 
                          parseInt(target.dataset.lastScrollTop) : 0;
                        const scrollingDown = scrollTop > lastScrollTop;
                        
                        // Update last scroll position
                        target.dataset.lastScrollTop = scrollTop.toString();
                        
                        // Prevent frequent log spam with a timestamp check
                        const now = Date.now();
                        const lastLog = parseInt(target.dataset.lastLogTime || '0');
                        if (now - lastLog > 500) { // Log at most every 500ms
                          console.log(`[DEBUG-WRAPPER-SCROLL] Distance: ${distanceToBottom}px, %: ${Math.round(scrollPercentage * 100)}%, direction: ${scrollingDown ? 'down' : 'up'}, more: ${page < totalPages}, loading: ${isLoading}`);
                          target.dataset.lastLogTime = now.toString();
                        }
                        
                        // Check throttle to prevent multiple rapid triggers
                        const lastTrigger = parseInt(target.dataset.lastTriggerTime || '0');
                        const throttleTime = 1000; // 1 second throttle
                        
                        // CRITICAL FIX: Only trigger loading more emails when:
                        // 1. User is scrolling DOWN (not up)
                        // 2. User is EXACTLY at the bottom (distance < 5px)
                        // 3. Not currently loading
                        // 4. More emails exist to load
                        // 5. Not throttled (hasn't triggered in last second)
                        if (scrollingDown && 
                            distanceToBottom < 5 && // Much stricter - truly at bottom
                            !isLoading && 
                            page < totalPages &&
                            now - lastTrigger > throttleTime) {
                          console.log(`[DEBUG-WRAPPER-TRIGGER] *** AT BOTTOM *** Loading more emails`);
                          target.dataset.lastTriggerTime = now.toString();
                          handleLoadMore();
                        }
                      }}
                    >
                      {emails.length === 0 ? (
                        <div className="h-full flex items-center justify-center">
                          <div className="text-center p-6">
                            <Inbox className="h-12 w-12 text-gray-300 mx-auto mb-4" />
                            <h3 className="text-lg font-medium text-gray-700">No emails found</h3>
                            <p className="text-sm text-gray-500 mt-1">
                              {searchQuery 
                                ? `No results found for "${searchQuery}"`
                                : `Your ${currentFolder.toLowerCase()} is empty`}
                            </p>
                          </div>
                        </div>
                      ) : (
                        <EmailList 
                          emails={emails} 
                          selectedEmailIds={selectedEmailIds}
                          selectedEmail={selectedEmail}
                          onSelectEmail={(emailId, emailAccountId, emailFolder) => {
                            // Always use the email's own accountId and folder if available
                            handleEmailSelect(
                              emailId, 
                              emailAccountId || selectedAccount?.id || '', 
                              emailFolder || currentFolder
                            );
                          }}
                          onToggleSelect={toggleEmailSelection}
                          onToggleSelectAll={toggleSelectAll}
                          onToggleStarred={toggleStarred}
                          onLoadMore={handleLoadMore}
                          hasMoreEmails={page < totalPages}
                          currentFolder={currentFolder}
                          isLoading={isLoading}
                          totalEmails={emails.length}
                          onBulkAction={handleBulkAction}
                        />
                      )}
                    </div>
                  </div>
                )}
              </div>
            </div>

            {/* Panel 3: Email Detail - Always visible */}
            <div className="flex-1 flex flex-col overflow-hidden">
              {/* Content for Panel 3 based on state but always visible */}
              <div className="flex-1 overflow-hidden bg-white">
                {selectedEmail ? (
                  <EmailDetailView 
                    email={selectedEmail as any}
                    onBack={() => {
                      handleEmailSelect('', '', '');
                      // Ensure sidebar stays visible
                      setSidebarOpen(true);
                    }}
                    onReply={handleReply}
                    onReplyAll={handleReplyAll}
                    onForward={handleForward}
                    onToggleStar={() => toggleStarred(selectedEmail.id)}
                  />
                ) : (
                  <div className="h-full flex items-center justify-center">
                    <div className="text-center text-muted-foreground">
                      <p>Select an email to view or</p>
                      <button 
                        className="text-primary mt-2 hover:underline"
                        onClick={() => {
                          setComposeType('new');
                          setShowComposeModal(true);
                        }}
                      >
                        Compose a new message
                      </button>
                    </div>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </main>

      {/* Modals and Dialogs */}
      <DeleteConfirmDialog 
        show={showDeleteConfirm}
        selectedCount={selectedEmailIds.length}
        onConfirm={handleDeleteConfirm}
        onCancel={() => setShowDeleteConfirm(false)}
      />

      {/* Compose Email Dialog */}
      <Dialog open={showComposeModal} onOpenChange={(open) => !open && setShowComposeModal(false)}>
        <DialogContent className="sm:max-w-[800px] p-0 h-[80vh]">
          <DialogTitle asChild>
            <span className="sr-only">New Message</span>
          </DialogTitle>
          <ComposeEmail 
            type={composeType}
            initialEmail={composeType !== 'new' ? (selectedEmail as any) : undefined}
            onSend={async (emailData) => {
              try {
                const result = await sendEmail(emailData);
                return;
              } catch (error) {
                console.error('Error sending email:', error);
                throw error;
              }
            }}
            onClose={() => setShowComposeModal(false)}
            accounts={accounts}
          />
        </DialogContent>
      </Dialog>

      {/* Edit Password Modal */}
      <Dialog open={showEditModal} onOpenChange={open => { 
        if (!open) {
          setShowEditModal(false);
          setEditLoading(false);
          setAccountToEdit(null);
          setNewPassword('');
          setSelectedColor('');
          window.location.reload();
        }
      }}>
        <DialogContent className="sm:max-w-[500px] bg-white text-gray-800">
          <DialogTitle className="text-gray-800">Edit Account Settings</DialogTitle>
          <form onSubmit={async e => {
            e.preventDefault();
            if (!accountToEdit) return;
            setEditLoading(true);
            try {
              const formElement = e.target as HTMLFormElement;
              const displayName = (formElement.querySelector('#display-name') as HTMLInputElement).value;
              const color = selectedColor;
              
              // If password is changed, test the connection first
              if (newPassword) {
                try {
                  // First get the account's connection details
                  const accountDetailsRes = await fetch(`/api/courrier/account-details?accountId=${accountToEdit.id}`);
                  if (!accountDetailsRes.ok) {
                    throw new Error('Failed to fetch account connection details');
                  }
                  const accountDetails = await accountDetailsRes.json();
                  
                  // Test connection with new password before saving
                  const testResponse = await fetch('/api/courrier/test-connection', {
                    method: 'POST',
                    headers: {
                      'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                      email: accountToEdit.email,
                      password: newPassword,
                      // Use the account's connection details from the API
                      host: accountDetails.host,
                      port: accountDetails.port || 993,
                      secure: accountDetails.secure || true
                    })
                  });
                  
                  const testResult = await testResponse.json();
                  
                  if (!testResponse.ok) {
                    throw new Error(testResult.error || 'Connection test failed with new password');
                  }
                  
                  console.log('Connection test successful with new password');
                } catch (error) {
                  console.error('Error testing connection:', error);
                  throw new Error(`Password test failed: ${error instanceof Error ? error.message : 'Unknown error'}`);
                }
              }
              
              // Continue with the update if test passed or no password change
              const res = await fetch('/api/courrier/account', {
                method: 'PATCH',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ 
                  accountId: accountToEdit.id, 
                  newPassword: newPassword || undefined,
                  display_name: displayName,
                  color: color
                }),
              });
              const data = await res.json();
              if (!res.ok) throw new Error(data.error || 'Failed to update account settings');
              toast({ title: 'Account updated', description: 'Account settings updated successfully.' });
              setShowEditModal(false);
              setNewPassword('');
              // Update the local account data
              setAccounts(accounts.map(account => 
                account.id === accountToEdit.id 
                  ? {...account, name: displayName, color: color} 
                  : account
              ));
              // Clear accountToEdit to ensure fresh data on next edit
              setAccountToEdit(null);
              // Force a page refresh to reset all UI states
              window.location.reload();
            } catch (err) {
              toast({ title: 'Error', description: err instanceof Error ? err.message : 'Failed to update account settings', variant: 'destructive' });
            } finally {
              setEditLoading(false);
            }
          }}>
            <div className="mb-4">
              <Label htmlFor="display-name" className="text-gray-800">Account Name</Label>
              <Input 
                id="display-name" 
                type="text" 
                defaultValue={accountToEdit?.name} 
                className="mt-1 bg-white text-gray-800" 
                disabled={editLoading}
              />
            </div>
            
            <div className="mb-4">
              <Label htmlFor="new-password" className="text-gray-800">New Password (optional)</Label>
              <Input 
                id="new-password" 
                type="password" 
                value={newPassword} 
                onChange={e => setNewPassword(e.target.value)} 
                className="mt-1 bg-white text-gray-800" 
                placeholder="Leave blank to keep current password"
                disabled={editLoading}
              />
            </div>
            
            <div className="mb-4">
              <Label className="block mb-2 text-gray-800">Account Color</Label>
              <div className="grid grid-cols-5 gap-2">
                {colorPalette.map((color, index) => (
                  <div key={index} className="flex items-center">
                    <input
                      type="radio"
                      id={`color-${index}`}
                      name="color"
                      value={color}
                      checked={selectedColor === color}
                      onChange={() => setSelectedColor(color)}
                      className="sr-only"
                    />
                    <label
                      htmlFor={`color-${index}`}
                      className={`w-8 h-8 rounded-full cursor-pointer flex items-center justify-center ${color} hover:ring-2 hover:ring-blue-300 transition-all`}
                      style={{ boxShadow: selectedColor === color ? '0 0 0 2px white, 0 0 0 4px #3b82f6' : 'none' }}
                      onClick={() => setSelectedColor(color)}
                    >
                      {selectedColor === color && (
                        <Check className="h-4 w-4 text-white" />
                      )}
                    </label>
                  </div>
                ))}
              </div>
            </div>
            
            <div className="flex justify-end gap-2 mt-6">
              <Button 
                type="button" 
                className="bg-red-500 hover:bg-red-600 text-white" 
                onClick={() => {
                  setShowEditModal(false);
                  window.location.reload();
                }}
              >
                Cancel
              </Button>
              <Button 
                type="submit" 
                className="bg-blue-500 hover:bg-blue-600 text-white" 
                disabled={editLoading}
              >
                {editLoading ? <Loader2 className="h-4 w-4 animate-spin mr-2" /> : null}
                Save
              </Button>
            </div>
          </form>
        </DialogContent>
      </Dialog>

      {/* Delete Account Dialog */}
      <AlertDialog open={showDeleteDialog} onOpenChange={open => { if (!open) setShowDeleteDialog(false); }}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Delete Account</AlertDialogTitle>
            <AlertDialogDescription>
              Are you sure you want to delete this account? This action cannot be undone.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel onClick={() => setShowDeleteDialog(false)}>Cancel</AlertDialogCancel>
            <AlertDialogAction asChild>
              <Button variant="destructive" disabled={deleteLoading} onClick={async () => {
                if (!accountToDelete) return;
                setDeleteLoading(true);
                try {
                  const res = await fetch(`/api/courrier/account?accountId=${accountToDelete.id}`, { method: 'DELETE' });
                  const data = await res.json();
                  if (!res.ok) throw new Error(data.error || 'Failed to delete account');
                  toast({ title: 'Account deleted', description: 'The account was deleted successfully.' });
                  setShowDeleteDialog(false);
                  window.location.reload();
                } catch (err) {
                  toast({ title: 'Error', description: err instanceof Error ? err.message : 'Failed to delete account', variant: 'destructive' });
                } finally {
                  setDeleteLoading(false);
                }
              }}>Delete</Button>
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  );
}