'use client';

import { useEffect, useState, useMemo, useCallback, useRef } from 'react';
import React from 'react';
import { useRouter } from 'next/navigation';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Checkbox } from '@/components/ui/checkbox';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { 
  MoreVertical, Settings, Plus as PlusIcon, Trash2, Edit, Mail, 
  Inbox, Send, Star, Trash, Plus, ChevronLeft, ChevronRight, 
  Search, ChevronDown, Folder, ChevronUp, Reply, Forward, ReplyAll, 
  MoreHorizontal, FolderOpen, X, Paperclip, MessageSquare, Copy, EyeOff, 
  AlertOctagon, Archive, RefreshCw
} from 'lucide-react';
import { ScrollArea } from '@/components/ui/scroll-area';
import { useSession } from 'next-auth/react';
import DOMPurify from 'isomorphic-dompurify';
import ComposeEmail from '@/components/ComposeEmail';
import { decodeEmail, cleanHtml } from '@/lib/mail-parser-wrapper';
import { Attachment as MailParserAttachment } from 'mailparser';
import { LoadingFix } from './loading-fix';

export interface Account {
  id: number;
  name: string;
  email: string;
  color: string;
  folders?: string[];
}

export interface Email {
  id: string;
  from: string;
  fromName?: string;
  to: string;
  subject: string;
  content: string;
  preview?: string;  // Preview content for list view
  body?: string;     // For backward compatibility
  date: string;
  read: boolean;
  starred: boolean;
  attachments?: { name: string; url: string }[];
  folder: string;
  cc?: string;
  bcc?: string;
  contentFetched?: boolean; // Track if full content has been fetched
}

interface Attachment {
  name: string;
  type: string;
  content: string;
  encoding: string;
}

interface ParsedEmailContent {
  headers: string;
  body: string;
  html?: string;
  text?: string;
  attachments?: Array<{
    filename: string;
    content: string;
    contentType: string;
  }>;
}

interface ParsedEmailMetadata {
  subject: string;
  from: string;
  to: string;
  date: string;
  contentType: string;
  text: string | null;
  html: string | null;
  raw: {
    headers: string;
    body: string;
  };
}

function splitEmailHeadersAndBody(emailBody: string): { headers: string; body: string } {
  const [headers, ...bodyParts] = emailBody.split('\r\n\r\n');
  return {
    headers: headers || '',
    body: bodyParts.join('\r\n\r\n')
  };
}

function EmailContent({ email }: { email: Email }) {
  const [content, setContent] = useState<React.ReactNode>(null);
  const [error, setError] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [debugInfo, setDebugInfo] = useState<string | null>(null);

  useEffect(() => {
    let mounted = true;

    async function loadContent() {
      if (!email) return;
      
      setIsLoading(true);
      setDebugInfo(null);
      try {
        console.log('Loading content for email:', email.id);
        
        // Check if we need to fetch full content
        if (!email.content || email.content.length === 0) {
          console.log('Fetching full content for email:', email.id);
          
          const response = await fetch(`/api/courrier/${email.id}?folder=${encodeURIComponent(email.folder || 'INBOX')}`);
          
          if (!response.ok) {
            throw new Error(`Failed to fetch email content: ${response.status}`);
          }
          
          const fullContent = await response.json();
          
          if (mounted) {
            // Update the email content with the fetched full content
            email.content = fullContent.content;
            
            // Render the content
            const sanitizedHtml = DOMPurify.sanitize(fullContent.content);
            setContent(
              <div 
                className="email-content prose prose-sm max-w-none dark:prose-invert"
                dangerouslySetInnerHTML={{ __html: sanitizedHtml }}
              />
            );
            setDebugInfo('Rendered fetched HTML content');
            setError(null);
            setIsLoading(false);
          }
          return;
        }
        
        // Use existing content if available
        console.log('Using existing content for email');
        
        const formattedEmail = email.content.trim();
        if (!formattedEmail) {
          console.log('Empty content for email:', email.id);
          if (mounted) {
            setContent(<div className="text-gray-500">Email content is empty</div>);
            setDebugInfo('Email content is empty string');
            setIsLoading(false);
          }
          return;
        }

        // Check if content is already HTML
        if (formattedEmail.startsWith('<') && formattedEmail.endsWith('>')) {
          // Content is likely HTML, sanitize and display directly
          const sanitizedHtml = DOMPurify.sanitize(formattedEmail);
          setContent(
            <div 
              className="email-content prose prose-sm max-w-none dark:prose-invert"
              dangerouslySetInnerHTML={{ __html: sanitizedHtml }}
            />
          );
          setDebugInfo('Rendered existing HTML content');
        } else {
          // Use mailparser for more complex formats
          console.log('Parsing email content');
          const parsedEmail = await decodeEmail(formattedEmail);
          
          if (parsedEmail.html) {
            const sanitizedHtml = DOMPurify.sanitize(parsedEmail.html);
            setContent(
              <div 
                className="email-content prose prose-sm max-w-none dark:prose-invert"
                dangerouslySetInnerHTML={{ __html: sanitizedHtml }}
              />
            );
            setDebugInfo('Rendered HTML content from parser');
          } else if (parsedEmail.text) {
            setContent(
              <div className="email-content whitespace-pre-wrap">
                {parsedEmail.text}
              </div>
            );
            setDebugInfo('Rendered text content from parser');
          } else {
            setContent(<div className="text-gray-500">No displayable content available</div>);
            setDebugInfo('No HTML or text content in parsed email');
          }
        }
        
        setError(null);
      } catch (err) {
        console.error('Error rendering email content:', err);
        if (mounted) {
          setError('Error rendering email content. Please try again.');
          setDebugInfo(err instanceof Error ? err.message : 'Unknown error');
          setContent(null);
        }
      } finally {
        if (mounted) {
          setIsLoading(false);
        }
      }
    }

    loadContent();

    return () => {
      mounted = false;
    };
  }, [email?.id, email?.content, email?.folder]);

  if (isLoading) {
    return (
      <div className="flex items-center justify-center py-8">
        <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
        <span className="ml-3 text-gray-500">Loading email content...</span>
      </div>
    );
  }

  if (error) {
    return (
      <div className="text-red-500 p-4">
        <div>{error}</div>
        {debugInfo && (
          <div className="mt-2 text-xs text-gray-500">
            Debug info: {debugInfo}
          </div>
        )}
      </div>
    );
  }

  return (
    <>
      {content || <div className="text-gray-500">No content available</div>}
      {debugInfo && process.env.NODE_ENV !== 'production' && (
        <div className="mt-4 p-2 border border-gray-200 rounded text-xs text-gray-500">
          Debug: {debugInfo}
        </div>
      )}
    </>
  );
}

function renderEmailContent(email: Email) {
  return <EmailContent email={email} />;
}

function renderAttachments(attachments: MailParserAttachment[]) {
  if (!attachments.length) return null;

  return (
    <div className="mt-4 border-t border-gray-200 pt-4">
      <h3 className="text-sm font-medium text-gray-900 mb-2">Attachments</h3>
      <div className="space-y-2">
        {attachments.map((attachment, index) => (
          <div key={index} className="flex items-center gap-2 p-2 bg-gray-50 rounded">
            <Paperclip className="h-4 w-4 text-gray-400" />
            <span className="text-sm text-gray-600">{attachment.filename || 'unnamed_attachment'}</span>
            <span className="text-xs text-gray-400">
              {attachment.size ? `(${Math.round(attachment.size / 1024)} KB)` : ''}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}

// Define the exact folder names from IMAP
type MailFolder = string;

// Map IMAP folders to sidebar items with icons
const getFolderIcon = (folder: string) => {
  switch (folder.toLowerCase()) {
    case 'inbox':
      return Inbox;
    case 'sent':
      return Send;
    case 'drafts':
      return Edit;
    case 'trash':
      return Trash;
    case 'spam':
      return AlertOctagon;
    case 'archive':
    case 'archives':
      return Archive;
    default:
      return Folder;
  }
};

// Update the initialSidebarItems to be empty since we're using folders under Accounts now
const initialSidebarItems: any[] = []; // Remove the default Inbox item

function formatDate(date: Date | null): string {
  if (!date) return '';
  return new Intl.DateTimeFormat('fr-FR', {
    day: '2-digit',
    month: '2-digit',
    year: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  }).format(date);
}

function ReplyContent({ email, type }: { email: Email; type: 'reply' | 'reply-all' | 'forward' }) {
  const [content, setContent] = useState<string>('');
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    let mounted = true;

    async function loadReplyContent() {
      try {
        if (!email.content) {
          if (mounted) setContent('');
          return;
        }

        const decoded = await decodeEmail(email.content);
        
        if (mounted) {
          let formattedContent = '';
          
          if (type === 'forward') {
            formattedContent = `
              <div class="forwarded-message">
                <p>---------- Forwarded message ---------</p>
                <p>From: ${decoded.from || ''}</p>
                <p>Date: ${formatDate(decoded.date ? new Date(decoded.date) : null)}</p>
                <p>Subject: ${decoded.subject || ''}</p>
                <p>To: ${decoded.to || ''}</p>
                <br>
                ${decoded.html || `<pre>${decoded.text || ''}</pre>`}
              </div>
            `;
          } else {
            formattedContent = `
              <div class="quoted-message">
                <p>On ${formatDate(decoded.date ? new Date(decoded.date) : null)}, ${decoded.from || ''} wrote:</p>
                <blockquote>
                  ${decoded.html || `<pre>${decoded.text || ''}</pre>`}
                </blockquote>
              </div>
            `;
          }

          setContent(formattedContent);
          setError(null);
        }
      } catch (err) {
        console.error('Error generating reply body:', err);
        if (mounted) {
          setError('Error generating reply content. Please try again.');
          setContent('');
        }
      }
    }

    loadReplyContent();

    return () => {
      mounted = false;
    };
  }, [email.content, type]);

  if (error) {
    return <div className="text-red-500">{error}</div>;
  }

  return <div dangerouslySetInnerHTML={{ __html: content }} />;
}

// Update the getReplyBody function to use the new component
function getReplyBody(email: Email, type: 'reply' | 'reply-all' | 'forward' = 'reply') {
  return <ReplyContent email={email} type={type} />;
}

function EmailPreview({ email }: { email: Email }) {
  const [preview, setPreview] = useState<string>('');
  const [error, setError] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    let mounted = true;

    async function loadPreview() {
      if (!email) {
        if (mounted) setPreview('No content available');
        return;
      }

      // If email already has a preview, use it directly
      if (email.preview) {
        if (mounted) setPreview(email.preview);
        return;
      }

      setIsLoading(true);
      try {
        // If we have the content already, extract preview from it
        if (email.content) {
          const plainText = email.content.replace(/<[^>]*>/g, ' ').trim();
          if (mounted) {
            setPreview(plainText.substring(0, 150) + '...');
          }
        } else {
          // Fallback to using parser for older emails
          const decoded = await decodeEmail(email.content || '');
          if (mounted) {
            if (decoded.text) {
              setPreview(decoded.text.substring(0, 150) + '...');
            } else if (decoded.html) {
              const cleanText = decoded.html.replace(/<[^>]*>/g, ' ').trim();
              setPreview(cleanText.substring(0, 150) + '...');
            } else {
              setPreview('No preview available');
            }
          }
        }
        
        if (mounted) {
          setError(null);
        }
      } catch (err) {
        console.error('Error generating email preview:', err);
        if (mounted) {
          setError('Error generating preview');
          setPreview('');
        }
      } finally {
        if (mounted) setIsLoading(false);
      }
    }

    loadPreview();

    return () => {
      mounted = false;
    };
  }, [email]);

  if (isLoading) {
    return <span className="text-gray-400">Loading preview...</span>;
  }

  if (error) {
    return <span className="text-red-500 text-xs">{error}</span>;
  }

  return <span className="text-xs text-gray-500 line-clamp-2">{preview}</span>;
}

// Update the generateEmailPreview function to use the new component
function generateEmailPreview(email: Email) {
  return <EmailPreview email={email} />;
}

export default function CourrierPage() {
  const router = useRouter();
  const { data: session } = useSession();
  const [loading, setLoading] = useState(true);
  const [accounts, setAccounts] = useState<Account[]>([
    { id: 0, name: 'All', email: '', color: 'bg-gray-400' },
    { id: 1, name: 'Mail Account', email: '', color: 'bg-blue-500' }
  ]);
  const [selectedAccount, setSelectedAccount] = useState<Account | null>(null);
  const [currentView, setCurrentView] = useState<MailFolder>('INBOX');
  const [showCompose, setShowCompose] = useState(false);
  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
  const [selectedEmails, setSelectedEmails] = useState<string[]>([]);
  const [showBulkActions, setShowBulkActions] = useState(false);
  const [showBcc, setShowBcc] = useState(false);
  const [emails, setEmails] = useState<Email[]>([]);
  const [error, setError] = useState<string | null>(null);
  const [composeSubject, setComposeSubject] = useState('');
  const [composeTo, setComposeTo] = useState('');
  const [composeCc, setComposeCc] = useState('');
  const [composeBcc, setComposeBcc] = useState('');
  const [composeBody, setComposeBody] = useState('');
  const [selectedEmail, setSelectedEmail] = useState<Email | null>(null);
  const [sidebarOpen, setSidebarOpen] = useState(true);
  const [foldersOpen, setFoldersOpen] = useState(true);
  const [showSettings, setShowSettings] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');
  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
  const [composeOpen, setComposeOpen] = useState(false);
  const [accountsDropdownOpen, setAccountsDropdownOpen] = useState(true);
  const [foldersDropdownOpen, setFoldersDropdownOpen] = useState(false);
  const [showAccountActions, setShowAccountActions] = useState<number | null>(null);
  const [showEmailActions, setShowEmailActions] = useState(false);
  const [deleteType, setDeleteType] = useState<'email' | 'emails' | 'account'>('email');
  const [itemToDelete, setItemToDelete] = useState<number | null>(null);
  const [showCc, setShowCc] = useState(false);
  const [contentLoading, setContentLoading] = useState(false);
  const [attachments, setAttachments] = useState<Attachment[]>([]);
  const [folders, setFolders] = useState<string[]>([]);
  const [unreadCount, setUnreadCount] = useState(0);
  const [availableFolders, setAvailableFolders] = useState<string[]>([]);
  const [sidebarItems, setSidebarItems] = useState(initialSidebarItems);
  const [page, setPage] = useState(1);
  const [hasMore, setHasMore] = useState(true);
  const [isLoadingMore, setIsLoadingMore] = useState(false);
  const [isLoadingInitial, setIsLoadingInitial] = useState(true);
  const [isLoadingSearch, setIsLoadingSearch] = useState(false);
  const [isLoadingCompose, setIsLoadingCompose] = useState(false);
  const [isLoadingReply, setIsLoadingReply] = useState(false);
  const [isLoadingForward, setIsLoadingForward] = useState(false);
  const [isLoadingDelete, setIsLoadingDelete] = useState(false);
  const [isLoadingMove, setIsLoadingMove] = useState(false);
  const [isLoadingStar, setIsLoadingStar] = useState(false);
  const [isLoadingUnstar, setIsLoadingUnstar] = useState(false);
  const [isLoadingMarkRead, setIsLoadingMarkRead] = useState(false);
  const [isLoadingMarkUnread, setIsLoadingMarkUnread] = useState(false);
  const [isLoadingRefresh, setIsLoadingRefresh] = useState(false);
  const emailsPerPage = 20;
  const [isSearching, setIsSearching] = useState(false);
  const [searchResults, setSearchResults] = useState<Email[]>([]);
  const [showSearchResults, setShowSearchResults] = useState(false);
  const [isComposing, setIsComposing] = useState(false);
  const [composeEmail, setComposeEmail] = useState({
    to: '',
    subject: '',
    body: '',
  });
  const [isSending, setIsSending] = useState(false);
  const [isReplying, setIsReplying] = useState(false);
  const [isForwarding, setIsForwarding] = useState(false);
  const [replyToEmail, setReplyToEmail] = useState<Email | null>(null);
  const [forwardEmail, setForwardEmail] = useState<Email | null>(null);
  const [replyBody, setReplyBody] = useState('');
  const [forwardBody, setForwardBody] = useState('');
  const [replyAttachments, setReplyAttachments] = useState<File[]>([]);
  const [forwardAttachments, setForwardAttachments] = useState<File[]>([]);
  const [isSendingReply, setIsSendingReply] = useState(false);
  const [isSendingForward, setIsSendingForward] = useState(false);
  const [isDeleting, setIsDeleting] = useState(false);
  const [isMoving, setIsMoving] = useState(false);
  const [isStarring, setIsStarring] = useState(false);
  const [isUnstarring, setIsUnstarring] = useState(false);
  const [isMarkingRead, setIsMarkingRead] = useState(false);
  const [isMarkingUnread, setIsMarkingUnread] = useState(false);
  const [isRefreshing, setIsRefreshing] = useState(false);
  const composeBodyRef = useRef<HTMLDivElement>(null);
  const [originalEmail, setOriginalEmail] = useState<{
    content: string;
    type: 'reply' | 'reply-all' | 'forward';
  } | null>(null);

  // Debug logging for email distribution
  useEffect(() => {
    const emailsByFolder = emails.reduce((acc, email) => {
      acc[email.folder] = (acc[email.folder] || 0) + 1;
      return acc;
    }, {} as Record<string, number>);
    
    console.log('Emails by folder:', emailsByFolder);
    console.log('Current view:', currentView);
  }, [emails, currentView]);

  // Move getSelectedEmail inside the component
  const getSelectedEmail = () => {
    return emails.find(email => email.id === selectedEmail?.id);
  };

  // Add an effect to detect and fix stuck loading states
  useEffect(() => {
    let timeoutId: NodeJS.Timeout | null = null;
    
    // If we have emails but loading state is still true after emails load, it's likely stuck
    if (emails.length > 0 && (loading || isLoadingInitial)) {
      console.log('[DEBUG] Detected potential stuck loading state, setting recovery timeout');
      
      // Set a timeout to automatically reset the loading state
      timeoutId = setTimeout(() => {
        // Double check if still stuck
        if (emails.length > 0 && (loading || isLoadingInitial)) {
          console.log('[DEBUG] Confirmed stuck loading state, auto-resetting');
          setLoading(false);
          setIsLoadingInitial(false);
        }
      }, 3000); // 3 second timeout
    }
    
    // Cleanup
    return () => {
      if (timeoutId) {
        clearTimeout(timeoutId);
      }
    };
  }, [emails.length, loading, isLoadingInitial]);

  // Single initialization effect that loads emails correctly on first page load
  useEffect(() => {
    const loadInitialData = async () => {
      try {
        console.log('[DEBUG] Starting initial email data loading...');
        setLoading(true);
        setIsLoadingInitial(true);
        
        // Check credentials first
        console.log('[DEBUG] Checking credentials...');
        const credResponse = await fetch('/api/courrier');
        if (!credResponse.ok) {
          const errorData = await credResponse.json();
          if (errorData.error === 'No stored credentials found') {
            console.log('[DEBUG] No credentials found, redirecting to login');
            router.push('/courrier/login');
            return;
          }
          throw new Error(errorData.error || 'Failed to check credentials');
        }
        
        try {
          // Try to get user email from credentials
          const credsData = await credResponse.json();
          console.log('[DEBUG] Credentials response:', { 
            hasEmail: !!credsData.email,
            status: credResponse.status
          });
          
          if (credsData.email) {
            console.log('[DEBUG] Got email from credentials:', credsData.email);
            setAccounts(prev => prev.map(account => 
              account.id === 1 
                ? { 
                    ...account, 
                    name: credsData.email, 
                    email: credsData.email
                  } 
                : account
            ));
          }
        } catch (error) {
          console.warn('[DEBUG] Error getting email from credentials:', error);
        }
        
        // First do a quick request just for folders
        try {
          console.log('[DEBUG] Preloading folders...');
          const folderResponse = await fetch('/api/courrier?folder=INBOX&page=1&limit=1');
          if (folderResponse.ok) {
            const folderData = await folderResponse.json();
            console.log('[DEBUG] Folder data:', { 
              folders: folderData.folders?.length || 0,
              emails: folderData.emails?.length || 0 
            });
            
            if (folderData.folders && folderData.folders.length > 0) {
              setAvailableFolders(folderData.folders);
              setAccounts(prev => prev.map(account => 
                account.id === 1 
                  ? { ...account, folders: folderData.folders } 
                  : account
              ));
            }
          }
        } catch (error) {
          console.warn('[DEBUG] Error preloading folders:', error);
        }
        
        // Then load emails (forced fetch with timestamp)
        console.log('[DEBUG] Fetching emails...');
        const timestamp = Date.now();
        const emailResponse = await fetch(
          `/api/courrier?folder=${encodeURIComponent(currentView)}&page=${page}&limit=${emailsPerPage}&_t=${timestamp}`, 
          { cache: 'no-store' }
        );
        
        if (!emailResponse.ok) {
          throw new Error('Failed to load emails');
        }
        
        const data = await emailResponse.json();
        console.log(`[DEBUG] Loaded ${data.emails?.length || 0} emails, response status: ${emailResponse.status}`);
        
        // Set available folders if present
        if (data.folders) {
          console.log('[DEBUG] Setting folders from initialization:', data.folders.length);
          setAvailableFolders(data.folders);
          
          // Update the mail account with folders
          setAccounts(prev => {
            console.log('[DEBUG] Updating accounts with folders');
            return prev.map(account => 
              account.id === 1 
                ? { ...account, folders: data.folders } 
                : account
            );
          });
        } else {
          console.warn('[DEBUG] No folders returned from API during initialization');
        }
        
        // Process emails and sort by date
        console.log('[DEBUG] Processing emails...');
        const processedEmails = (data.emails || [])
          .map((email: any) => {
            // Add proper handling for from field which might be an array or object
            let fromText = '';
            let fromName = '';
            let toText = '';
            let ccText = '';
            let bccText = '';
            
            // Handle 'from' field
            if (email.from) {
              if (Array.isArray(email.from)) {
                if (email.from.length > 0) {
                  if (typeof email.from[0] === 'object') {
                    fromText = email.from[0].address || '';
                    fromName = email.from[0].name || email.from[0].address?.split('@')[0] || '';
                  } else {
                    fromText = email.from[0] || '';
                    fromName = fromText.split('@')[0] || '';
                  }
                }
              } 
              else if (typeof email.from === 'object') {
                fromText = email.from.address || '';
                fromName = email.from.name || email.from.address?.split('@')[0] || '';
              } 
              else if (typeof email.from === 'string') {
                fromText = email.from;
                fromName = email.fromName || email.from.split('@')[0] || '';
              }
            }
            
            // Handle 'to' field
            if (email.to) {
              if (Array.isArray(email.to)) {
                if (email.to.length > 0) {
                  if (typeof email.to[0] === 'object') {
                    toText = email.to.map((t: any) => t.address || '').join(', ');
                  } else {
                    toText = email.to.join(', ');
                  }
                }
              } 
              else if (typeof email.to === 'object') {
                toText = email.to.address || '';
              } 
              else if (typeof email.to === 'string') {
                toText = email.to;
              }
            }
            
            // Handle 'cc' field
            if (email.cc) {
              if (Array.isArray(email.cc)) {
                if (email.cc.length > 0) {
                  if (typeof email.cc[0] === 'object') {
                    ccText = email.cc.map((c: any) => c.address || '').join(', ');
                  } else {
                    ccText = email.cc.join(', ');
                  }
                }
              } 
              else if (typeof email.cc === 'object') {
                ccText = email.cc.address || '';
              } 
              else if (typeof email.cc === 'string') {
                ccText = email.cc;
              }
            }
            
            // Handle 'bcc' field
            if (email.bcc) {
              if (Array.isArray(email.bcc)) {
                if (email.bcc.length > 0) {
                  if (typeof email.bcc[0] === 'object') {
                    bccText = email.bcc.map((b: any) => b.address || '').join(', ');
                  } else {
                    bccText = email.bcc.join(', ');
                  }
                }
              } 
              else if (typeof email.bcc === 'object') {
                bccText = email.bcc.address || '';
              } 
              else if (typeof email.bcc === 'string') {
                bccText = email.bcc;
              }
            }
            
            return {
              id: email.id,
              accountId: 1,
              from: fromText,
              fromName: fromName,
              to: toText,
              subject: email.subject || '(No subject)',
              content: email.content || '',
              preview: email.preview || '',
              date: email.date || new Date().toISOString(),
              read: email.read || false,
              starred: email.starred || false,
              folder: email.folder || currentView,
              cc: ccText,
              bcc: bccText,
              flags: email.flags || [],
              hasAttachments: email.hasAttachments || false
            };
          })
          .sort((a: Email, b: Email) => new Date(b.date).getTime() - new Date(a.date).getTime());
        
        // Set emails
        console.log('[DEBUG] Setting emails state with', processedEmails.length, 'emails');
        setEmails(processedEmails);
        
        // Update unread count for inbox
        if (currentView === 'INBOX') {
          const unreadInboxEmails = processedEmails.filter(
            (email: Email) => !email.read && email.folder === 'INBOX'
          ).length;
          setUnreadCount(unreadInboxEmails);
        }
        
        // Update pagination
        setHasMore(data.hasMore);
        setError(null);
        console.log('[DEBUG] Initial load complete, setting loading states to false');
      } catch (err) {
        console.error('[DEBUG] Error loading initial data:', err);
        setError(err instanceof Error ? err.message : 'Failed to load data');
      } finally {
        console.log('[DEBUG] Setting loading state to false in finally block');
        // Ensure we reset the loading state after a short delay to make sure React has processed state updates
        setTimeout(() => {
          setLoading(false);
          setIsLoadingInitial(false);
        }, 100);
      }
    };
    
    loadInitialData();
  }, [router, currentView, page, emailsPerPage]);

  // Fix the type issue with the session email
  useEffect(() => {
    if (session?.user?.email) {
      setAccounts(prev => prev.map(account => 
        account.id === 1 
          ? { 
              ...account, 
              name: session.user.email || 'Mail Account', 
              email: session.user.email || ''
            } 
          : account
      ));
    }
  }, [session?.user?.email]);

  // Get account color
  const getAccountColor = (accountId: number) => {
    const account = accounts.find(acc => acc.id === accountId);
    return account ? account.color : 'bg-gray-500';
  };

  // Update handleEmailSelect to handle the from field correctly
  const handleEmailSelect = async (emailId: string) => {
    try {
      setContentLoading(true);
      
      // Find the email in the current list
      const selectedEmail = emails.find(email => email.id === emailId);
      
      if (!selectedEmail) {
        throw new Error('Email not found in list');
      }
      
      // Check if we need to fetch full content
      if (!selectedEmail.content || selectedEmail.content.length === 0) {
        console.log('[DEBUG] Fetching full content for email:', emailId);
        
        try {
          const response = await fetch(`/api/courrier/${emailId}?folder=${encodeURIComponent(selectedEmail.folder || 'INBOX')}`);
          
          if (!response.ok) {
            throw new Error(`Failed to fetch email content: ${response.status}`);
          }
          
          const fullContent = await response.json();
          
          // Update the email content with the fetched full content
          selectedEmail.content = fullContent.content;
          selectedEmail.contentFetched = true;
          
          // Update the email in the list too so we don't refetch
          setEmails(prevEmails => 
            prevEmails.map(email => 
              email.id === emailId 
                ? { ...email, content: fullContent.content, contentFetched: true }
                : email
            )
          );
          
          console.log('[DEBUG] Successfully fetched full content for email:', emailId);
        } catch (error) {
          console.error('[DEBUG] Error fetching full content:', error);
        }
      }
      
      // Set selected email from our existing data (which now includes full content)
      setSelectedEmail(selectedEmail);
      
      // Try to mark as read in the background if not already read
      if (!selectedEmail.read) {
        try {
          // Use the new API endpoint
          await fetch(`/api/courrier/${emailId}`, {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({ action: 'mark-read' }),
          });
          
          // Update read status in the list
          setEmails(prevEmails => 
            prevEmails.map(email => 
              email.id === emailId 
                ? { ...email, read: true }
                : email
            )
          );
        } catch (error) {
          console.error('Error marking email as read:', error);
        }
      }
    } catch (error) {
      console.error('Error selecting email:', error);
      setError('Failed to select email. Please try again.');
    } finally {
      setContentLoading(false);
    }
  };

  // Add these improved handlers
  const handleEmailCheckbox = (e: React.ChangeEvent<HTMLInputElement>, emailId: number) => {
    e.stopPropagation();
    if (e.target.checked) {
      setSelectedEmails([...selectedEmails, emailId.toString()]);
    } else {
      setSelectedEmails(selectedEmails.filter(id => id !== emailId.toString()));
    }
  };

  // Handles marking an individual email as read/unread
  const handleMarkAsRead = (emailId: string, isRead: boolean) => {
    setEmails(emails.map(email =>
      email.id.toString() === emailId ? { ...email, read: isRead } : email
    ));
  };

  // Handles bulk actions for selected emails
  const handleBulkAction = async (action: 'delete' | 'mark-read' | 'mark-unread' | 'archive') => {
    if (action === 'delete') {
      setDeleteType('emails');
      setShowDeleteConfirm(true);
      return;
    }

    try {
      const response = await fetch('/api/courrier/bulk-actions', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          emailIds: selectedEmails,
          action: action
        }),
      });

      if (!response.ok) {
        throw new Error('Failed to perform bulk action');
      }

      // Update local state based on the action
      setEmails(emails.map(email => {
        if (selectedEmails.includes(email.id.toString())) {
          switch (action) {
            case 'mark-read':
              return { ...email, read: true };
            case 'mark-unread':
              return { ...email, read: false };
            case 'archive':
              return { ...email, folder: 'Archive' };
            default:
              return email;
          }
        }
        return email;
      }));

      // Clear selection after successful action
      setSelectedEmails([]);
    } catch (error) {
      console.error('Error performing bulk action:', error);
      alert('Failed to perform bulk action. Please try again.');
    }
  };

  // Add handleDeleteConfirm function
  const handleDeleteConfirm = async () => {
    try {
      const response = await fetch('/api/courrier/bulk-actions', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          emailIds: selectedEmails,
          action: 'delete'
        }),
      });

      if (!response.ok) {
        throw new Error('Failed to delete emails');
      }

      // Remove deleted emails from state
      setEmails(emails.filter(email => !selectedEmails.includes(email.id.toString())));
      setSelectedEmails([]);
    } catch (error) {
      console.error('Error deleting emails:', error);
      alert('Failed to delete emails. Please try again.');
    } finally {
      setShowDeleteConfirm(false);
    }
  };

  // Add infinite scroll handler
  const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
    const target = e.currentTarget;
    if (
      target.scrollHeight - target.scrollTop === target.clientHeight &&
      !isLoadingMore &&
      hasMore
    ) {
      setPage(prev => prev + 1);
      loadEmails(true);
    }
  }, [isLoadingMore, hasMore]);

  // Sort emails by date (most recent first)
  const sortedEmails = useMemo(() => {
    return [...emails].sort((a, b) => {
      return new Date(b.date).getTime() - new Date(a.date).getTime();
    });
  }, [emails]);

  const toggleSelectAll = () => {
    if (selectedEmails.length === emails.length) {
      setSelectedEmails([]);
    } else {
      setSelectedEmails(emails.map(email => email.id.toString()));
    }
  };

  // Update filtered emails to use sortedEmails
  const filteredEmails = useMemo(() => {
    if (!searchQuery) return sortedEmails;
    
    const query = searchQuery.toLowerCase();
    return sortedEmails.filter(email => 
      email.subject.toLowerCase().includes(query) ||
      email.from.toLowerCase().includes(query) ||
      email.to.toLowerCase().includes(query) ||
      email.content.toLowerCase().includes(query)
    );
  }, [sortedEmails, searchQuery]);

  // Update the email list to use filtered emails
  const renderEmailList = () => {
    console.log('[DEBUG] Rendering email list with state:', {
      loading,
      isLoadingInitial,
      emailCount: emails.length,
      filteredEmailCount: filteredEmails.length,
      searchQuery: searchQuery.length > 0 ? searchQuery : 'empty',
      selectedEmails: selectedEmails.length
    });
    
    return (
      <div className="w-[320px] bg-white/95 backdrop-blur-sm border-r border-gray-100 flex flex-col">
        {renderEmailListHeader()}
        {renderBulkActionsToolbar()}
        
        <div 
          className="flex-1 overflow-y-auto"
          onScroll={handleScroll}
        >
          {/* Always show emails when available, regardless of loading state */}
          {filteredEmails.length > 0 ? (
            <div className="divide-y divide-gray-100">
              {filteredEmails.map((email) => renderEmailListItem(email))}
              {(isLoadingMore || loading) && (
                <div className="flex items-center justify-center p-4">
                  <div className="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-blue-500 mr-2"></div>
                  <span className="text-xs text-gray-500">Refreshing...</span>
                </div>
              )}
            </div>
          ) : isLoadingInitial || (loading && emails.length === 0) ? (
            <div className="flex items-center justify-center h-64">
              <div className="flex flex-col items-center">
                <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500 mb-4"></div>
                <p className="text-sm text-gray-500">Loading emails...</p>
              </div>
            </div>
          ) : (
            <div className="flex flex-col items-center justify-center h-64">
              <Mail className="h-12 w-12 text-gray-400 mb-3" />
              <p className="text-gray-700 text-base font-medium mb-1">
                {searchQuery ? 'No emails match your search' : 'No emails in this folder'}
              </p>
              {error && (
                <p className="text-red-500 text-sm mt-2">{error}</p>
              )}
              <p className="text-gray-500 text-sm mt-3"><strong>Folder:</strong> {currentView}</p>
              <p className="text-gray-500 text-sm mt-1"><strong>Total emails:</strong> {emails.length}</p>
              <Button 
                variant="default" 
                size="sm" 
                className="mt-5 bg-blue-600 hover:bg-blue-700"
                onClick={() => {
                  console.log('[DEBUG] Manual refresh clicked');
                  setLoading(true);
                  loadEmails();
                }}
              >
                <RefreshCw className="h-4 w-4 mr-2" /> Refresh Folder
              </Button>
            </div>
          )}
        </div>
      </div>
    );
  };

  // Update the email count in the header to show filtered count
  const renderEmailListHeader = () => (
    <div className="border-b border-gray-100">
      <div className="px-4 py-3 flex items-center justify-between">
        <div className="relative flex-1">
          <Search className="absolute left-2 top-2 h-4 w-4 text-gray-400" />
          <Input
            type="search"
            placeholder="Search in folder..."
            className="pl-8 h-8 bg-gray-50"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
          />
        </div>
      </div>
      <div className="flex items-center justify-between px-4 h-10">
        <div className="flex items-center gap-2">
          <Checkbox
            checked={filteredEmails.length > 0 && selectedEmails.length === filteredEmails.length}
            onCheckedChange={toggleSelectAll}
            className="mt-0.5"
          />
          <h2 className="text-base font-semibold text-gray-900">
            {currentView.charAt(0).toUpperCase() + currentView.slice(1).toLowerCase()}
          </h2>
        </div>
        <span className="text-sm text-gray-600">
          {searchQuery ? `${filteredEmails.length} of ${emails.length} emails` : `${emails.length} emails`}
        </span>
      </div>
    </div>
  );

  // Update the bulk actions toolbar to include confirmation dialog
  const renderBulkActionsToolbar = () => {
    if (selectedEmails.length === 0) return null;

    return (
      <div className="bg-white border-b border-gray-100 px-4 py-2">
        <div className="flex items-center gap-2 mb-2">
          <span className="text-sm text-gray-600">
            {selectedEmails.length} selected
          </span>
        </div>
        <div className="flex items-center gap-1.5">
          <Button
            variant="ghost"
            size="sm"
            className="text-gray-600 hover:text-gray-900 h-8 px-2"
            onClick={() => {
              const allSelectedRead = selectedEmails.every(id => 
                emails.find(email => email.id.toString() === id)?.read
              );
              handleBulkAction(allSelectedRead ? 'mark-unread' : 'mark-read');
            }}
          >
            <EyeOff className="h-4 w-4 mr-1" />
            <span className="text-sm">
              {selectedEmails.every(id => 
                emails.find(email => email.id.toString() === id)?.read
              ) ? 'Unread' : 'Read'}
            </span>
          </Button>
          <Button
            variant="ghost"
            size="sm"
            className="text-gray-600 hover:text-gray-900 h-8 px-2"
            onClick={() => handleBulkAction('archive')}
          >
            <Archive className="h-4 w-4 mr-1" />
            <span className="text-sm">Archive</span>
          </Button>
          <Button
            variant="ghost"
            size="sm"
            className="text-red-600 hover:text-red-700 h-8 px-2"
            onClick={() => handleBulkAction('delete')}
          >
            <Trash2 className="h-4 w-4 mr-1" />
            <span className="text-sm">Delete</span>
          </Button>
        </div>
      </div>
    );
  };

  // Keep only one renderEmailListWrapper function that includes both panels
  const renderEmailListWrapper = () => (
    <div className="flex-1 flex overflow-hidden">
      {/* Email list panel */}
      {renderEmailList()}

      {/* Preview panel - will automatically take remaining space */}
      <div className="flex-1 bg-white/95 backdrop-blur-sm flex flex-col">
        {selectedEmail ? (
          <>
            {/* Email actions header */}
            <div className="flex-none px-4 py-3 border-b border-gray-100">
              <div className="flex items-center gap-4">
                <div className="flex items-center gap-2 min-w-0 flex-1">
                  <Button
                    variant="ghost"
                    size="icon"
                    onClick={() => setSelectedEmail(null)}
                    className="md:hidden flex-shrink-0"
                  >
                    <ChevronLeft className="h-5 w-5" />
                  </Button>
                  <div className="min-w-0 max-w-[500px]">
                    <h2 className="text-lg font-semibold text-gray-900 truncate">
                      {selectedEmail.subject}
                    </h2>
                  </div>
                </div>
                <div className="flex items-center gap-1 flex-shrink-0 ml-auto">
                  <div className="flex items-center border-l border-gray-200 pl-4">
                    <Button
                      variant="ghost"
                      size="icon"
                      className="text-gray-400 hover:text-gray-900 h-9 w-9"
                      onClick={() => handleReply('reply')}
                    >
                      <Reply className="h-4 w-4" />
                    </Button>
                    <Button
                      variant="ghost"
                      size="icon"
                      className="text-gray-400 hover:text-gray-900 h-9 w-9"
                      onClick={() => handleReply('reply-all')}
                    >
                      <ReplyAll className="h-4 w-4" />
                    </Button>
                    <Button
                      variant="ghost"
                      size="icon"
                      className="text-gray-400 hover:text-gray-900 h-9 w-9"
                      onClick={() => handleReply('forward')}
                    >
                      <Forward className="h-4 w-4" />
                    </Button>
                    <Button
                      variant="ghost"
                      size="icon"
                      className="text-gray-400 hover:text-gray-900 h-9 w-9"
                      onClick={(e) => toggleStarred(selectedEmail.id, e)}
                    >
                      <Star className={`h-4 w-4 ${selectedEmail.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
                    </Button>
                    <Button
                      variant="ghost"
                      size="icon"
                      className="text-gray-400 hover:text-gray-900 h-9 w-9"
                      onClick={() => {/* Add to folder logic */}}
                    >
                      <FolderOpen className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
              </div>
            </div>

            {/* Scrollable content area */}
            <ScrollArea className="flex-1 p-6">
              {contentLoading ? (
                <div className="flex flex-col items-center justify-center h-64">
                  <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500 mb-4"></div>
                  <p className="text-sm text-gray-500">Loading email content...</p>
                </div>
              ) : (
                <>
                  <div className="flex items-center gap-4 mb-6">
                    <Avatar className="h-10 w-10">
                      <AvatarFallback>
                        {selectedEmail.fromName?.charAt(0) || selectedEmail.from?.charAt(0) || '?'}
                      </AvatarFallback>
                    </Avatar>
                    <div className="flex-1">
                      <p className="font-medium text-gray-900">
                        {selectedEmail.fromName || 'Unknown'} {selectedEmail.from && <span className="text-gray-500">&lt;{selectedEmail.from}&gt;</span>}
                      </p>
                      <p className="text-sm text-gray-500">
                        to {selectedEmail.to || 'No recipients'}
                      </p>
                      {selectedEmail.cc && (
                        <p className="text-sm text-gray-500">
                          cc {selectedEmail.cc}
                        </p>
                      )}
                    </div>
                    <div className="text-sm text-gray-500 whitespace-nowrap">
                      {formatDate(new Date(selectedEmail.date))}
                    </div>
                  </div>

                  <div className="prose max-w-none">
                    {renderEmailContent(selectedEmail)}
                  </div>
                </>
              )}
            </ScrollArea>
          </>
        ) : (
          <div className="flex flex-col items-center justify-center h-full">
            <Mail className="h-12 w-12 text-gray-400 mb-4" />
            <p className="text-gray-500">Select an email to view its contents</p>
          </div>
        )}
      </div>
    </div>
  );

  // Update the email list item to safely display the fromName
  const renderEmailListItem = (email: Email) => (
    <div
      key={email.id}
      className={`p-3 hover:bg-gray-50/50 transition-colors cursor-pointer flex items-start gap-3 ${
        selectedEmail?.id === email.id ? 'bg-gray-50/80' : ''
      }`}
      onClick={() => handleEmailSelect(email.id)}
    >
      <div className="flex-none pt-1">
        <Checkbox
          checked={selectedEmails.includes(email.id)}
          onCheckedChange={(checked) => toggleEmailSelection(email.id)}
          onClick={(e) => e.stopPropagation()}
          className="mt-0.5"
        />
      </div>
      <div className="flex-1 min-w-0">
        <div className="flex items-center justify-between gap-2 mb-1">
          <div className="flex items-center gap-2 min-w-0">
            <span className={`text-sm truncate ${!email.read ? 'font-semibold text-gray-900' : 'text-gray-600'}`}>
              {email.fromName || email.from || 'Unknown'}
            </span>
            {!email.read && (
              <span className="w-1.5 h-1.5 bg-blue-600 rounded-full flex-shrink-0"></span>
            )}
          </div>
          <span className="text-xs text-gray-500 whitespace-nowrap">
            {formatDate(new Date(email.date))}
          </span>
        </div>
        <h3 className={`text-sm truncate mb-0.5 ${!email.read ? 'text-gray-900' : 'text-gray-600'}`}>
          {email.subject || '(No subject)'}
        </h3>
        <EmailPreview email={email} />
      </div>
      <div className="flex-none flex items-center gap-1">
        {email.starred && (
          <Star className="h-4 w-4 text-yellow-400 fill-yellow-400" />
        )}
        {email.attachments && email.attachments.length > 0 && (
          <Paperclip className="h-4 w-4 text-gray-400" />
        )}
      </div>
    </div>
  );

  const handleMailboxChange = async (newMailbox: string) => {
    setCurrentView(newMailbox);
    setSelectedEmails([]);
    setSearchQuery('');
    setEmails([]);
    setLoading(true);
    setError(null);
    setHasMore(true);
    setPage(1);

    try {
      // Optimize the request by adding a timeout
      const controller = new AbortController();
      const timeoutId = setTimeout(() => controller.abort(), 10000); // 10 second timeout

      const response = await fetch(`/api/courrier?folder=${encodeURIComponent(newMailbox)}&page=1&limit=${emailsPerPage}`, {
        signal: controller.signal
      });

      clearTimeout(timeoutId);

      if (!response.ok) {
        throw new Error('Failed to fetch emails');
      }

      const data = await response.json();
      
      // Process emails more efficiently
      const processedEmails = data.emails.map((email: any) => ({
        id: Number(email.id),
        accountId: 1,
        from: email.from || '',
        fromName: email.fromName || email.from?.split('@')[0] || '',
        to: email.to || '',
        subject: email.subject || '(No subject)',
        body: email.body || '',
        date: email.date || new Date().toISOString(),
        read: email.read || false,
        starred: email.starred || false,
        folder: email.folder || newMailbox,
        cc: email.cc || '',
        bcc: email.bcc || '',
        flags: email.flags || [],
        raw: email.body || ''
      }));

      setEmails(processedEmails);
      setHasMore(processedEmails.length === emailsPerPage);

      // If folders are returned, update them
      if (data.folders && data.folders.length > 0) {
        setAvailableFolders(data.folders);
        
        // Update the mail account with folders
        setAccounts(prev => prev.map(account => 
          account.id === 1 
            ? { ...account, folders: data.folders } 
            : account
        ));
      }

      // Only update unread count if we're in the Inbox folder
      if (newMailbox === 'INBOX') {
        const unreadInboxEmails = processedEmails.filter(
          (email: Email) => !email.read && email.folder === 'INBOX'
        ).length;
        setUnreadCount(unreadInboxEmails);
      }
    } catch (error) {
      console.error('Error fetching emails:', error);
      setError(error instanceof Error ? error.message : 'Failed to fetch emails');
    } finally {
      setLoading(false);
    }
  };

  // Update the renderSidebarNav function to handle empty items or display other navigation options
  const renderSidebarNav = () => (
    <nav className="p-3">
      {sidebarItems.length > 0 ? (
        <ul className="space-y-0.5 px-2">
          {sidebarItems.map((item) => (
            <li key={item.view}>
              <Button 
                variant={currentView === item.view ? 'secondary' : 'ghost'}
                className={`w-full justify-start py-2 ${
                  currentView === item.view ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'
                }`}
                onClick={() => {
                  setCurrentView(item.view);
                  setSelectedEmail(null);
                }}
              >
                <div className="flex items-center justify-between w-full">
                  <div className="flex items-center">
                    <item.icon className="h-4 w-4 mr-2" />
                    <span>{item.label}</span>
                  </div>
                  {item.view === 'INBOX' && unreadCount > 0 && (
                    <span className="ml-auto bg-blue-600 text-white text-xs px-2 py-0.5 rounded-full">
                      {unreadCount}
                    </span>
                  )}
                </div>
              </Button>
            </li>
          ))}
        </ul>
      ) : (
        // If needed, you can add other navigation items here that aren't folders
        <div className="px-2 py-2">
          {/* This section is empty since we're now using folders under accounts */}
        </div>
      )}
    </nav>
  );

  // Update handleReply to include body property for backward compatibility
  const handleReply = async (type: 'reply' | 'reply-all' | 'forward') => {
    if (!selectedEmail) return;
    
    try {
      // Ensure we have full content before proceeding
      if (!selectedEmail.content || selectedEmail.content.length === 0) {
        console.log('[DEBUG] Need to fetch content before reply/forward');
        setContentLoading(true);
        
        try {
          const response = await fetch(`/api/courrier/${selectedEmail.id}?folder=${encodeURIComponent(selectedEmail.folder || 'INBOX')}`);
          
          if (!response.ok) {
            throw new Error(`Failed to fetch email content: ${response.status}`);
          }
          
          const fullContent = await response.json();
          
          // Update the email content with the fetched full content
          selectedEmail.content = fullContent.content;
          selectedEmail.contentFetched = true;
          
          // Update the email in the list too so we don't refetch
          setEmails(prevEmails => 
            prevEmails.map(email => 
              email.id === selectedEmail.id 
                ? { ...email, content: fullContent.content, contentFetched: true }
                : email
            )
          );
          
          console.log('[DEBUG] Successfully fetched content for reply/forward');
        } catch (error) {
          console.error('[DEBUG] Error fetching content for reply:', error);
          alert('Failed to load email content for reply. Please try again.');
          setContentLoading(false);
          return; // Exit if we couldn't get the content
        }
        
        setContentLoading(false);
      }
      
      const getReplyTo = () => {
        if (type === 'forward') return '';
        return selectedEmail.from;
      };

      const getReplyCc = () => {
        if (type !== 'reply-all') return '';
        return selectedEmail.cc || '';
      };

      const getReplySubject = () => {
        const subject = selectedEmail.subject || '';
        if (type === 'forward') {
          return subject.startsWith('Fwd:') ? subject : `Fwd: ${subject}`;
        }
        return subject.startsWith('Re:') ? subject : `Re: ${subject}`;
      };

      // Add body property for backward compatibility
      const emailWithBody = {
        ...selectedEmail,
        body: selectedEmail.content // Add body property that maps to content
      };

      // Set the appropriate flags
      setIsReplying(type === 'reply' || type === 'reply-all');
      setIsForwarding(type === 'forward');

      // Update the compose form
      setComposeTo(getReplyTo());
      setComposeCc(getReplyCc());
      setComposeSubject(getReplySubject());
      setComposeBcc('');
      setShowCompose(true);
      setShowCc(type === 'reply-all');
      setShowBcc(false);
      setAttachments([]);

      // Pass the email with both content and body properties
      setReplyToEmail(emailWithBody);
      setForwardEmail(type === 'forward' ? emailWithBody : null);

    } catch (error) {
      console.error('Error preparing reply:', error);
    }
  };

  // Update toggleStarred to use string IDs
  const toggleStarred = async (emailId: string, e?: React.MouseEvent) => {
    if (e) {
      e.stopPropagation();
    }

    const email = emails.find(e => e.id === emailId);
    if (!email) return;

    try {
      const response = await fetch('/api/courrier/toggle-star', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ emailId, starred: !email.starred }),
      });

      if (!response.ok) {
        throw new Error('Failed to toggle star');
      }

      // Update email in state
      setEmails(emails.map(e => 
        e.id === emailId ? { ...e, starred: !e.starred } : e
      ));
    } catch (error) {
      console.error('Error toggling star:', error);
    }
  };

  // Add back the handleSend function
  const handleSend = async () => {
    if (!composeTo) {
      alert('Please specify at least one recipient');
      return;
    }

    try {
      const response = await fetch('/api/courrier/send', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          to: composeTo,
          cc: composeCc,
          bcc: composeBcc,
          subject: composeSubject,
          body: composeBody,
          attachments: attachments,
        }),
      });

      const data = await response.json();

      if (!response.ok) {
        if (data.error === 'Attachment size limit exceeded') {
          alert(`Error: ${data.error}\nThe following files are too large:\n${data.details.oversizedFiles.join('\n')}`);
        } else {
          alert(`Error sending email: ${data.error}`);
        }
        return;
      }

      // Clear compose form and close modal
      setComposeTo('');
      setComposeCc('');
      setComposeBcc('');
      setComposeSubject('');
      setComposeBody('');
      setAttachments([]);
      setShowCompose(false);
    } catch (error) {
      console.error('Error sending email:', error);
      alert('Failed to send email. Please try again.');
    }
  };

  // Add back the renderDeleteConfirmDialog function
  const renderDeleteConfirmDialog = () => (
    <AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Delete Emails</AlertDialogTitle>
          <AlertDialogDescription>
            Are you sure you want to delete {selectedEmails.length} selected email{selectedEmails.length > 1 ? 's' : ''}? This action cannot be undone.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction onClick={handleDeleteConfirm}>Delete</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );

  const toggleEmailSelection = (emailId: string) => {
    setSelectedEmails((prev) =>
      prev.includes(emailId)
        ? prev.filter((id) => id !== emailId)
        : [...prev, emailId]
    );
  };

  const searchEmails = (query: string) => {
    setSearchQuery(query.trim());
  };

  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const query = e.target.value;
    setSearchQuery(query);
  };

  const renderEmailPreview = (email: Email) => {
    if (!email) return null;
    return (
      <div className="p-4">
        <h2 className="text-lg font-semibold mb-2">{email.subject}</h2>
        <div className="text-sm text-gray-600">
          {renderEmailContent(email)}
        </div>
      </div>
    );
  };

  // Update loadEmails to store the full content from the API response
  const loadEmails = async (isLoadMore = false) => {
    try {
      // Skip if already loading
      if (isLoadingInitial || isLoadingMore) {
        console.log('[DEBUG] Skipping loadEmails - already loading');
        return;
      }
      
      console.log(`[DEBUG] Loading emails for folder: ${currentView}, page: ${page}, isLoadMore: ${isLoadMore}`);
      
      if (isLoadMore) {
        setIsLoadingMore(true);
      } else {
        setLoading(true);
      }
      
      // Fetch emails with timestamp for cache busting
      const timestamp = Date.now();
      try {
        const response = await fetch(
          `/api/courrier?folder=${encodeURIComponent(currentView)}&page=${page}&limit=${emailsPerPage}&_t=${timestamp}`, 
          { cache: 'no-store' }
        );
        
        if (!response.ok) {
          console.error('[DEBUG] API response error:', response.status, response.statusText);
          throw new Error('Failed to load emails');
        }
        
        const data = await response.json();
        console.log('[DEBUG] API response:', {
          emailCount: data.emails?.length || 0,
          folderCount: data.folders?.length || 0,
          hasMore: data.hasMore,
          total: data.total
        });
        
        // Set available folders
        if (data.folders) {
          console.log('[DEBUG] Setting available folders:', data.folders.length);
          setAvailableFolders(data.folders);
          
          // Update the mail account with folders
          setAccounts(prev => prev.map(account => 
            account.id === 1 
              ? { ...account, folders: data.folders } 
              : account
          ));
        } else {
          console.warn('[DEBUG] No folders returned from API');
        }
        
        // Process and sort emails
        const processedEmails = (data.emails || [])
          .map((email: any) => {
            // Add proper handling for from field which might be an array or object
            let fromText = '';
            let fromName = '';
            let toText = '';
            let ccText = '';
            let bccText = '';
            
            // Handle 'from' field
            if (email.from) {
              if (Array.isArray(email.from)) {
                if (email.from.length > 0) {
                  if (typeof email.from[0] === 'object') {
                    fromText = email.from[0].address || '';
                    fromName = email.from[0].name || email.from[0].address?.split('@')[0] || '';
                  } else {
                    fromText = email.from[0] || '';
                    fromName = fromText.split('@')[0] || '';
                  }
                }
              } 
              else if (typeof email.from === 'object') {
                fromText = email.from.address || '';
                fromName = email.from.name || email.from.address?.split('@')[0] || '';
              } 
              else if (typeof email.from === 'string') {
                fromText = email.from;
                fromName = email.fromName || email.from.split('@')[0] || '';
              }
            }
            
            // Handle 'to' field
            if (email.to) {
              if (Array.isArray(email.to)) {
                if (email.to.length > 0) {
                  if (typeof email.to[0] === 'object') {
                    toText = email.to.map((t: any) => t.address || '').join(', ');
                  } else {
                    toText = email.to.join(', ');
                  }
                }
              } 
              else if (typeof email.to === 'object') {
                toText = email.to.address || '';
              } 
              else if (typeof email.to === 'string') {
                toText = email.to;
              }
            }
            
            // Handle 'cc' field
            if (email.cc) {
              if (Array.isArray(email.cc)) {
                if (email.cc.length > 0) {
                  if (typeof email.cc[0] === 'object') {
                    ccText = email.cc.map((c: any) => c.address || '').join(', ');
                  } else {
                    ccText = email.cc.join(', ');
                  }
                }
              } 
              else if (typeof email.cc === 'object') {
                ccText = email.cc.address || '';
              } 
              else if (typeof email.cc === 'string') {
                ccText = email.cc;
              }
            }
            
            // Handle 'bcc' field
            if (email.bcc) {
              if (Array.isArray(email.bcc)) {
                if (email.bcc.length > 0) {
                  if (typeof email.bcc[0] === 'object') {
                    bccText = email.bcc.map((b: any) => b.address || '').join(', ');
                  } else {
                    bccText = email.bcc.join(', ');
                  }
                }
              } 
              else if (typeof email.bcc === 'object') {
                bccText = email.bcc.address || '';
              } 
              else if (typeof email.bcc === 'string') {
                bccText = email.bcc;
              }
            }
            
            return {
              id: email.id,
              accountId: 1,
              from: fromText,
              fromName: fromName,
              to: toText,
              subject: email.subject || '(No subject)',
              content: email.content || '',
              preview: email.preview || '',
              date: email.date || new Date().toISOString(),
              read: email.read || false,
              starred: email.starred || false,
              folder: email.folder || currentView,
              cc: ccText,
              bcc: bccText,
              flags: email.flags || [],
              hasAttachments: email.hasAttachments || false
            };
          })
          .sort((a: Email, b: Email) => new Date(b.date).getTime() - new Date(a.date).getTime());
        
        // Set emails appropriately
        console.log('[DEBUG] Setting emails state with', processedEmails.length, 'emails');
        setEmails(prev => {
          if (isLoadMore) {
            // Filter out duplicates when appending
            const existingIds = new Set(prev.map(email => email.id));
            const uniqueNewEmails = processedEmails.filter((email: Email) => !existingIds.has(email.id));
            return [...prev, ...uniqueNewEmails];
          } else {
            return processedEmails;
          }
        });
        
        // Update unread count
        if (currentView === 'INBOX') {
          const unreadInboxEmails = processedEmails.filter(
            (email: Email) => !email.read && email.folder === 'INBOX'
          ).length;
          setUnreadCount(unreadInboxEmails);
        }
        
        setHasMore(data.hasMore);
        setError(null);
      } catch (err) {
        console.error('[DEBUG] Error in fetch emails:', err);
        setError('Failed to load emails');
        throw err; // Rethrow to ensure the finally block still runs
      }
    } catch (err) {
      console.error('[DEBUG] Error loading emails:', err);
      setError('Failed to load emails');
    } finally {
      console.log('[DEBUG] Setting loading states to false in loadEmails finally block');
      // Ensure we reset the loading state after a short delay to make sure React has processed state updates
      setTimeout(() => {
        setLoading(false);
        setIsLoadingMore(false);
        setIsLoadingInitial(false);
      }, 100);
    }
  };
  
  // Add back the view change effect
  useEffect(() => {
    setPage(1); // Reset page when view changes
    setHasMore(true);
    loadEmails();
  }, [currentView]);

  // Create a function to load folders that will be available throughout the component
  const loadFolders = async () => {
    console.log('[DEBUG] Explicitly loading folders from standalone function...');
    
    try {
      // Make a specific request just to get folders
      const timestamp = Date.now(); // Cache busting
      const response = await fetch(`/api/courrier?folder=INBOX&page=1&limit=1&skipCache=true&_t=${timestamp}`, {
        headers: {
          'Cache-Control': 'no-cache, no-store, must-revalidate',
          'Pragma': 'no-cache'
        }
      });
      
      if (response.ok) {
        const data = await response.json();
        console.log('[DEBUG] Folder response data:', JSON.stringify(data, null, 2));
        
        // Check for mailboxes field (from IMAP) and use it if available
        const folders = data.mailboxes || data.folders || [];
        
        if (folders && folders.length > 0) {
          console.log('[DEBUG] Successfully loaded folders:', folders);
          
          setAvailableFolders(folders);
          
          // Update the mail account with folders
          setAccounts(prev => {
            console.log('[DEBUG] Updating account with folders:', folders);
            return prev.map(account => 
              account.id === 1 
                ? { ...account, folders: folders } 
                : account
            );
          });
        } else {
          console.warn('[DEBUG] No folders found in response. Response data:', data);
        }
      } else {
        console.error('[DEBUG] Folder request failed:', response.status);
      }
    } catch (error) {
      console.error('[DEBUG] Error explicitly loading folders:', error);
    }
  };

  // Improve the folder loading logic with a delay and better reliability
  useEffect(() => {
    let isMounted = true; // For cleanup
    
    // Only load if we don't have folders yet and we're not already loading
    if ((!accounts[1]?.folders || accounts[1]?.folders?.length === 0) && !loading) {
      console.log('[DEBUG] Triggering folder load in useEffect...');
      
      // Set a small delay to ensure other loading operations have completed
      setTimeout(() => {
        if (!isMounted) return;
        loadFolders();
      }, 500); // 500ms delay
    }
    
    return () => {
      isMounted = false;
    };
  }, [accounts, loading]);

  // Add a new function to fetch the IMAP credentials email
  const fetchImapCredentials = async () => {
    try {
      console.log("[DEBUG] Fetching IMAP credentials...");
      const response = await fetch("/api/courrier/credentials", {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          "Cache-Control": "no-cache"
        },
      });

      console.log("[DEBUG] IMAP credentials response status:", response.status);
      
      if (!response.ok) {
        const errorData = await response.json().catch(() => ({}));
        console.error("[DEBUG] Error fetching IMAP credentials:", response.status, errorData);
        throw new Error(`Failed to fetch IMAP credentials: ${response.status}`);
      }

      const data = await response.json();
      console.log("[DEBUG] IMAP credentials data:", data);

      if (data && data.credentials && data.credentials.email) {
        console.log("[DEBUG] Setting account with IMAP email:", data.credentials.email);
        setAccounts(prev => prev.map(account => 
          account.id === 1 
            ? { 
                ...account, 
                name: data.credentials.email,
                email: data.credentials.email
              } 
            : account
        ));
        
        // After setting the account email, explicitly load folders
        setTimeout(() => {
          console.log("[DEBUG] Triggering folder load after setting account");
          loadFolders();
        }, 1000);
      } else {
        console.log("[DEBUG] No valid IMAP credentials found in response:", data);
      }
    } catch (error) {
      console.error("[DEBUG] Error in fetchImapCredentials:", error);
    }
  };

  // Call it once on component mount
  useEffect(() => {
    fetchImapCredentials();
  }, []);

  // Add ref for tracking component mount status
  const isComponentMounted = useRef(true);
  
  // Add a cleanup effect to reset states on unmount/remount
  useEffect(() => {
    // Reset isComponentMounted value on mount
    isComponentMounted.current = true;
    
    // Reset loading states when component mounts
    const timeoutId = setTimeout(() => {
      if (isComponentMounted.current && (loading || isLoadingInitial)) {
        console.log('[DEBUG] Reset loading states on mount');
        setLoading(false);
        setIsLoadingInitial(false);
      }
    }, 5000); // Longer timeout to avoid race conditions
    
    // Return cleanup function
    return () => {
      console.log('[DEBUG] Component unmounting, clearing states');
      isComponentMounted.current = false;
      clearTimeout(timeoutId);
      // No need to set states during unmount as component is gone
    };
  }, []); // Empty dependency array

  if (error) {
    return (
      <div className="flex h-[calc(100vh-theme(spacing.12))] items-center justify-center bg-gray-100 mt-12">
        <div className="text-center max-w-md mx-auto px-4">
          <Mail className="h-12 w-12 mb-4 text-red-400 mx-auto" />
          <p className="text-red-500 mb-4">{error}</p>
          <Button 
            variant="outline"
            onClick={() => window.location.reload()}
            className="mx-auto"
          >
            Try Again
          </Button>
        </div>
      </div>
    );
  }

  if (isLoadingInitial && !emails.length) {
    return (
      <div className="flex h-[calc(100vh-theme(spacing.12))] items-center justify-center bg-gray-100 mt-12">
        <div className="text-center">
          <div className="flex flex-col items-center">
            <div className="animate-spin rounded-full h-10 w-10 border-t-2 border-b-2 border-blue-500 mb-4"></div>
            <p className="text-gray-700">Loading your emails...</p>
          </div>
        </div>
      </div>
    );
  }

  return (
    <>
      {/* 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">
            {/* Sidebar */}
            <div className={`${sidebarOpen ? 'w-60' : 'w-16'} bg-white/95 backdrop-blur-sm border-r border-gray-100 flex flex-col transition-all duration-300 ease-in-out
                          ${mobileSidebarOpen ? 'fixed inset-y-0 left-0 z-40' : 'hidden'} md:block`}>
              {/* Courrier Title */}
              <div className="p-3 border-b border-gray-100">
                <div className="flex items-center gap-2">
                  <Mail className="h-6 w-6 text-gray-600" />
                  <span className="text-xl font-semibold text-gray-900">COURRIER</span>
                </div>
              </div>

              {/* Compose button and refresh button */}
              <div className="p-2 border-b border-gray-100 flex items-center gap-2">
                <Button 
                  className="flex-1 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center justify-center transition-all py-1.5 text-sm"
                  onClick={() => {
                    setShowCompose(true);
                    setComposeTo('');
                    setComposeCc('');
                    setComposeBcc('');
                    setComposeSubject('');
                    setComposeBody('');
                    setShowCc(false);
                    setShowBcc(false);
                  }}
                >
                  <div className="flex items-center gap-2">
                    <PlusIcon className="h-3.5 w-3.5" />
                    <span>Compose</span>
                  </div>
                </Button>
                <Button 
                  variant="ghost" 
                  size="icon"
                  className="h-9 w-9 text-gray-400 hover:text-gray-600"
                  onClick={() => {
                    setLoading(true);
                    loadEmails();
                  }}
                >
                  <RefreshCw className="h-4 w-4" />
                </Button>
              </div>

              {/* Accounts Section */}
              <div className="p-3 border-b border-gray-100">
                <Button 
                  variant="ghost"
                  className="w-full justify-between mb-2 text-sm font-medium text-gray-500"
                  onClick={() => setAccountsDropdownOpen(!accountsDropdownOpen)}
                >
                  <span>Accounts</span>
                  {accountsDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
                </Button>
                
                {accountsDropdownOpen && (
                  <div className="space-y-1 pl-2">
                    {accounts.map(account => (
                      <div key={account.id} className="relative group">
                        <Button
                          variant="ghost"
                          className="w-full justify-between px-2 py-1.5 text-sm group"
                          onClick={() => setSelectedAccount(account)}
                        >
                          <div className="flex items-center gap-2">
                            <div className={`w-2.5 h-2.5 rounded-full ${account.color}`}></div>
                            <span className="font-medium text-gray-700">{account.name}</span>
                          </div>
                        </Button>
                        
                        {/* Show folders for email accounts (not for "All" account) without the "Folders" header */}
                        {account.id !== 0 && (
                          <div className="pl-4 mt-1 mb-2 space-y-0.5 border-l border-gray-200">
                            {account.folders && account.folders.length > 0 ? (
                              account.folders.map((folder) => (
                                <Button
                                  key={folder}
                                  variant="ghost"
                                  className={`w-full justify-start py-1 px-2 text-xs ${
                                    currentView === folder ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'
                                  }`}
                                  onClick={(e) => {
                                    e.stopPropagation();
                                    handleMailboxChange(folder);
                                  }}
                                >
                                  <div className="flex items-center justify-between w-full gap-1.5">
                                    <div className="flex items-center gap-1.5">
                                      {React.createElement(getFolderIcon(folder), { className: "h-3.5 w-3.5" })}
                                      <span className="truncate">{folder}</span>
                                    </div>
                                    {folder === 'INBOX' && unreadCount > 0 && (
                                      <span className="ml-auto bg-blue-600 text-white text-xs px-1.5 py-0.5 rounded-full text-[10px]">
                                        {unreadCount}
                                      </span>
                                    )}
                                  </div>
                                </Button>
                              ))
                            ) : (
                              <div className="px-2 py-2">
                                <div className="flex flex-col space-y-2">
                                  {/* Create placeholder folder items with shimmer effect */}
                                  {Array.from({ length: 5 }).map((_, index) => (
                                    <div key={index} className="flex items-center gap-1.5 animate-pulse">
                                      <div className="h-3.5 w-3.5 bg-gray-200 rounded-sm"></div>
                                      <div className="h-3 w-24 bg-gray-200 rounded"></div>
                                    </div>
                                  ))}
                                </div>
                              </div>
                            )}
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                )}
              </div>

              {/* Navigation */}
              {renderSidebarNav()}
            </div>

            {/* Main content area */}
            <div className="flex-1 flex overflow-hidden">
              {/* Email list panel */}
              {renderEmailListWrapper()}
            </div>
          </div>
        </div>
      </main>

      {/* Compose Email Modal */}
      <ComposeEmail
        showCompose={showCompose}
        setShowCompose={setShowCompose}
        composeTo={composeTo}
        setComposeTo={setComposeTo}
        composeCc={composeCc}
        setComposeCc={setComposeCc}
        composeBcc={composeBcc}
        setComposeBcc={setComposeBcc}
        composeSubject={composeSubject}
        setComposeSubject={setComposeSubject}
        composeBody={composeBody}
        setComposeBody={setComposeBody}
        showCc={showCc}
        setShowCc={setShowCc}
        showBcc={showBcc}
        setShowBcc={setShowBcc}
        attachments={attachments}
        setAttachments={setAttachments}
        handleSend={handleSend}
        replyTo={isReplying ? selectedEmail : null}
        forwardFrom={isForwarding ? selectedEmail : null}
        onSend={(email) => {
          console.log('Email sent:', email);
          setShowCompose(false);
          setIsReplying(false);
          setIsForwarding(false);
        }}
        onCancel={() => {
          setShowCompose(false);
          setComposeTo('');
          setComposeCc('');
          setComposeBcc('');
          setComposeSubject('');
          setComposeBody('');
          setShowCc(false);
          setShowBcc(false);
          setAttachments([]);
          setIsReplying(false);
          setIsForwarding(false);
        }}
      />
      {renderDeleteConfirmDialog()}
      
      {/* Debug tools - only shown in development mode */}
      {process.env.NODE_ENV !== 'production' && (
        <LoadingFix
          loading={loading}
          isLoadingInitial={isLoadingInitial}
          setLoading={setLoading}
          setIsLoadingInitial={setIsLoadingInitial}
          setEmails={setEmails}
          loadEmails={loadEmails}
          emails={emails}
        />
      )}
    </>
  );
}