'use client';

import { useEffect, useState, useMemo, useCallback } 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 {
  decodeQuotedPrintable,
  decodeBase64,
  convertCharset,
  cleanHtml,
  parseEmailHeaders,
  extractBoundary,
  extractFilename,
  extractHeader
} from '@/lib/infomaniak-mime-decoder';

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

interface Email {
  id: number;
  accountId: number;
  from: string;
  fromName?: string;
  to: string;
  subject: string;
  body: string;
  date: string;
  read: boolean;
  starred: boolean;
  folder: string;
  cc?: string;
  bcc?: string;
  flags?: string[];
}

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

interface EmailAttachment {
  filename: string;
  contentType: string;
  encoding: string;
  content: string;
}

interface ParsedEmail {
  text: string | null;
  html: string | null;
  attachments: Array<{
    filename: string;
    contentType: string;
    encoding: string;
    content: string;
  }>;
}

interface EmailMessage {
  subject: string;
  from: string;
  to: string;
  date: string;
  contentType: string;
  text: string | null;
  html: string | null;
  attachments: EmailAttachment[];
  raw: {
    headers: string;
    body: string;
  };
}

function parseFullEmail(content: string): ParsedEmail {
  try {
    // First, try to parse the email headers
    const headers = parseEmailHeaders(content);
    
    // If it's a multipart email, process each part
    if (headers.contentType?.includes('multipart')) {
      const boundary = extractBoundary(headers.contentType);
      if (!boundary) {
        throw new Error('No boundary found in multipart content');
      }

      const parts = content.split(boundary);
      const result: ParsedEmail = {
        text: null,
        html: null,
        attachments: []
      };

      for (const part of parts) {
        if (!part.trim()) continue;

        const partHeaders = parseEmailHeaders(part);
        const partContent = part.split('\r\n\r\n')[1] || '';

        // Handle HTML content
        if (partHeaders.contentType?.includes('text/html')) {
          const decoded = decodeMIME(
            partContent,
            partHeaders.encoding || '7bit',
            partHeaders.charset || 'utf-8'
          );
          result.html = cleanHtml(decoded);
        }
        // Handle plain text content
        else if (partHeaders.contentType?.includes('text/plain')) {
          const decoded = decodeMIME(
            partContent,
            partHeaders.encoding || '7bit',
            partHeaders.charset || 'utf-8'
          );
          result.text = decoded;
        }
        // Handle attachments
        else if (partHeaders.contentType && !partHeaders.contentType.includes('text/')) {
          const filename = extractFilename(partHeaders.contentType) || 'attachment';
          result.attachments.push({
            filename,
            contentType: partHeaders.contentType,
            encoding: partHeaders.encoding || '7bit',
            content: partContent
          });
        }
      }

      return result;
    }

    // If it's not multipart, handle as a single part
    const body = content.split('\r\n\r\n')[1] || '';
    const decoded = decodeMIME(
      body,
      headers.encoding || '7bit',
      headers.charset || 'utf-8'
    );

    if (headers.contentType?.includes('text/html')) {
      return {
        html: cleanHtml(decoded),
        text: null,
        attachments: []
      };
    }

    return {
      html: null,
      text: decoded,
      attachments: []
    };
  } catch (e) {
    console.error('Error parsing email:', e);
    return {
      html: null,
      text: content,
      attachments: []
    };
  }
}

function processMultipartEmail(emailRaw: string, boundary: string, mainHeaders: string): ParsedEmail {
  const parts = emailRaw.split(new RegExp(`--${boundary}(?:--)?\\s*`, 'm'));
  const result: ParsedEmail = {
    text: '',
    html: '',
    attachments: []
  };

  for (const part of parts) {
    if (!part.trim()) continue;

    const [partHeaders, ...bodyParts] = part.split(/\r?\n\r?\n/);
    const partBody = bodyParts.join('\n\n');
    const partInfo = parseEmailHeaders(partHeaders);

    if (partInfo.contentType.startsWith('text/')) {
      let decodedContent = '';
      
      if (partInfo.encoding === 'quoted-printable') {
        decodedContent = decodeQuotedPrintable(partBody, partInfo.charset);
      } else if (partInfo.encoding === 'base64') {
        decodedContent = decodeBase64(partBody, partInfo.charset);
      } else {
        decodedContent = partBody;
      }

      if (partInfo.contentType.includes('html')) {
        decodedContent = cleanHtml(decodedContent);
        result.html = decodedContent;
      } else {
        result.text = decodedContent;
      }
    } else {
      // Handle attachment
      const filename = extractFilename(partHeaders);
      result.attachments.push({
        filename,
        contentType: partInfo.contentType,
        encoding: partInfo.encoding,
        content: partBody
      });
    }
  }

  return result;
}

function decodeMIME(text: string, encoding?: string, charset: string = 'utf-8'): string {
  if (!text) return '';
  
  // Normalize encoding and charset
  encoding = (encoding || '').toLowerCase();
  charset = (charset || 'utf-8').toLowerCase();
  
  try {
    // Handle different encoding types
    if (encoding === 'quoted-printable') {
      return decodeQuotedPrintable(text, charset);
    } else if (encoding === 'base64') {
      return decodeBase64(text, charset);
    } else if (encoding === '7bit' || encoding === '8bit' || encoding === 'binary') {
      // For these encodings, we still need to handle the character set
      return convertCharset(text, charset);
    } else {
      // Unknown encoding, return as is but still handle charset
      return convertCharset(text, charset);
    }
  } catch (error) {
    console.error('Error decoding MIME:', error);
    return text;
  }
}

function decodeMimeContent(content: string): string {
  if (!content) return '';

  // Check if this is an Infomaniak multipart message
  if (content.includes('Content-Type: multipart/')) {
    const boundary = content.match(/boundary="([^"]+)"/)?.[1];
    if (boundary) {
      const parts = content.split('--' + boundary);
      let htmlContent = '';
      let textContent = '';

      parts.forEach(part => {
        if (part.includes('Content-Type: text/html')) {
          const match = part.match(/\r?\n\r?\n([\s\S]+?)(?=\r?\n--)/);
          if (match) {
            htmlContent = cleanHtml(match[1]);
          }
        } else if (part.includes('Content-Type: text/plain')) {
          const match = part.match(/\r?\n\r?\n([\s\S]+?)(?=\r?\n--)/);
          if (match) {
            textContent = cleanHtml(match[1]);
          }
        }
      });

      // Prefer HTML content if available
      return htmlContent || textContent;
    }
  }

  // If not multipart or no boundary found, clean the content directly
  return cleanHtml(content);
}

function renderEmailContent(email: Email) {
  try {
    // First, parse the full email to get headers and body
    const parsed = parseFullEmail(email.body);
    
    // If we have HTML content, render it
    if (parsed.html) {
      return (
        <div 
          className="prose max-w-none"
          dangerouslySetInnerHTML={{ __html: parsed.html }}
        />
      );
    }
    
    // If we have text content, render it
    if (parsed.text) {
      return (
        <div className="whitespace-pre-wrap font-sans text-base leading-relaxed">
          {parsed.text.split('\n').map((line, i) => (
            <p key={i} className="mb-2">{line}</p>
          ))}
        </div>
      );
    }

    // If we have attachments, display them
    if (parsed.attachments && parsed.attachments.length > 0) {
      return (
        <div className="mt-6 border-t border-gray-200 pt-6">
          <h3 className="text-sm font-semibold text-gray-900 mb-4">Attachments</h3>
          <div className="space-y-2">
            {parsed.attachments.map((attachment, index) => (
              <div key={index} className="flex items-center space-x-2 p-2 border rounded">
                <Paperclip className="h-4 w-4 text-gray-400" />
                <span className="text-sm text-gray-600 truncate">
                  {attachment.filename}
                </span>
              </div>
            ))}
          </div>
        </div>
      );
    }

    // If we couldn't parse the content, try to decode and clean the raw body
    const decodedBody = decodeMIME(email.body, 'quoted-printable', 'utf-8');
    const cleanedContent = cleanHtml(decodedBody);

    return (
      <div className="whitespace-pre-wrap font-sans text-base leading-relaxed">
        {cleanedContent.split('\n').map((line, i) => (
          <p key={i} className="mb-2">{line}</p>
        ))}
      </div>
    );
  } catch (e) {
    console.error('Error rendering email content:', e);
    return (
      <div className="text-red-500">
        Error rendering email content. Please try again later.
      </div>
    );
  }
}

// Add this helper function
const decodeEmailContent = (content: string, charset: string = 'utf-8') => {
  return convertCharset(content, charset);
};

function cleanEmailContent(content: string): string {
  // Remove or fix malformed URLs
  return content.replace(/=3D"(http[^"]+)"/g, (match, url) => {
    try {
      return `"${decodeURIComponent(url)}"`;
    } catch {
      return '';
    }
  });
}

// 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;
  }
};

// Initial sidebar items - only INBOX
const initialSidebarItems = [
  {
    view: 'INBOX' as MailFolder,
    label: 'Inbox',
    icon: Inbox,
    folder: 'INBOX'
  }
];

export default function CourrierPage() {
  const router = useRouter();
  const [loading, setLoading] = useState(true);
  const [accounts, setAccounts] = useState<Account[]>([
    { id: 0, name: 'All', email: '', color: 'bg-gray-500' },
    { id: 1, name: 'Mail', email: 'alma@governance-labs.org', 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(false);
  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 emailsPerPage = 24;

  // 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);
  };

  // Check for stored credentials
  useEffect(() => {
    const checkCredentials = async () => {
      try {
        console.log('Checking for stored credentials...');
        const response = await fetch('/api/mail');
        if (!response.ok) {
          const errorData = await response.json();
          console.log('API response error:', errorData);
          if (errorData.error === 'No stored credentials found') {
            console.log('No credentials found, redirecting to login...');
            router.push('/mail/login');
            return;
          }
          throw new Error(errorData.error || 'Failed to check credentials');
        }
        console.log('Credentials verified, loading emails...');
        setLoading(false);
        loadEmails();
      } catch (err) {
        console.error('Error checking credentials:', err);
        setError(err instanceof Error ? err.message : 'Failed to check credentials');
        setLoading(false);
      }
    };

    checkCredentials();
  }, [router]);

  // Update the loadEmails function
  const loadEmails = async (isLoadMore = false) => {
    try {
      if (isLoadMore) {
        setIsLoadingMore(true);
      } else {
        setLoading(true);
      }
      setError(null);
      
      const response = await fetch(`/api/mail?folder=${currentView}&page=${page}&limit=${emailsPerPage}`);
      if (!response.ok) {
        throw new Error('Failed to load emails');
      }
      
      const data = await response.json();
      
      // Get available folders from the API response
      if (data.folders) {
        setAvailableFolders(data.folders);
      }
      
      // Process emails keeping exact folder names
      const processedEmails = (data.emails || []).map((email: any) => ({
        id: Number(email.id),
        accountId: 1,
        from: email.from || '',
        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 || 'INBOX',
        cc: email.cc,
        bcc: email.bcc,
        flags: email.flags || []
      }));

      // Only update unread count if we're in the Inbox folder
      if (currentView === 'INBOX') {
        const unreadInboxEmails = processedEmails.filter(
          (email: Email) => !email.read && email.folder === 'INBOX'
        ).length;
        setUnreadCount(unreadInboxEmails);
      }
      
      // Update emails state based on whether we're loading more
      if (isLoadMore) {
        setEmails(prev => [...prev, ...processedEmails]);
      } else {
        setEmails(processedEmails);
      }

      // Update hasMore state based on the number of emails received
      setHasMore(processedEmails.length === emailsPerPage);
      
    } catch (err) {
      console.error('Error loading emails:', err);
      setError(err instanceof Error ? err.message : 'Failed to load emails');
    } finally {
      setLoading(false);
      setIsLoadingMore(false);
    }
  };

  // Add an effect to reload emails when the view changes
  useEffect(() => {
    setPage(1); // Reset page when view changes
    setHasMore(true);
    loadEmails();
  }, [currentView]);

  // Format date for display
  const formatDate = (dateString: string) => {
    const date = new Date(dateString);
    const now = new Date();
    
    if (date.toDateString() === now.toDateString()) {
      return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
    } else {
      return date.toLocaleDateString([], { month: 'short', day: 'numeric' });
    }
  };

  // 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 set selectedEmail correctly
  const handleEmailSelect = (emailId: number) => {
    const email = emails.find(e => e.id === emailId);
    if (email) {
      setSelectedEmail(email);
      if (!email.read) {
        // Mark as read in state
        setEmails(emails.map(e => 
          e.id === emailId ? { ...e, read: true } : e
        ));
        
        // Update read status on server
        fetch('/api/mail/mark-read', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ emailId })
        }).catch(error => {
          console.error('Error marking email as read:', error);
        });
      }
    }
  };

  // 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/mail/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/mail/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()));
    }
  };

  // Add filtered emails based on search query
  const filteredEmails = useMemo(() => {
    if (!searchQuery) return emails;
    
    const query = searchQuery.toLowerCase();
    return emails.filter(email => 
      email.subject.toLowerCase().includes(query) ||
      email.from.toLowerCase().includes(query) ||
      email.to.toLowerCase().includes(query) ||
      email.body.toLowerCase().includes(query)
    );
  }, [emails, searchQuery]);

  // Update the email list to use filtered emails
  const renderEmailList = () => (
    <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}
      >
        {loading ? (
          <div className="flex 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"></div>
          </div>
        ) : filteredEmails.length === 0 ? (
          <div className="flex flex-col items-center justify-center h-64">
            <Mail className="h-8 w-8 text-gray-400 mb-2" />
            <p className="text-gray-500 text-sm">
              {searchQuery ? 'No emails match your search' : 'No emails in this folder'}
            </p>
          </div>
        ) : (
          <div className="divide-y divide-gray-100">
            {filteredEmails.map((email) => renderEmailListItem(email))}
            {isLoadingMore && (
              <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"></div>
              </div>
            )}
          </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-2">
        <div className="relative">
          <Search className="absolute left-2 top-2.5 h-4 w-4 text-gray-400" />
          <Input
            type="search"
            placeholder="Search in folder..."
            className="pl-8 h-9 bg-gray-50"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
          />
        </div>
      </div>
      <div className="flex items-center justify-between px-4 h-14">
        <div className="flex items-center gap-3">
          <Checkbox
            checked={filteredEmails.length > 0 && selectedEmails.length === filteredEmails.length}
            onCheckedChange={toggleSelectAll}
            className="mt-0.5"
          />
          <h2 className="text-base font-semibold text-gray-900">Inbox</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('replyAll')}
                    >
                      <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">
              <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>
                  <p className="font-medium text-gray-900">
                    {selectedEmail.fromName || selectedEmail.from}
                  </p>
                  <p className="text-sm text-gray-500">
                    to {selectedEmail.to}
                  </p>
                </div>
                <div className="ml-auto text-sm text-gray-500">
                  {formatDate(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 sidebar items when available folders change
  useEffect(() => {
    if (availableFolders.length > 0) {
      const newItems = [
        ...initialSidebarItems,
        ...availableFolders
          .filter(folder => !['INBOX'].includes(folder)) // Exclude folders already in initial items
          .map(folder => ({
            view: folder as MailFolder,
            label: folder.charAt(0).toUpperCase() + folder.slice(1).toLowerCase(),
            icon: getFolderIcon(folder),
            folder: folder
          }))
      ];
      setSidebarItems(newItems);
    }
  }, [availableFolders]);

  // Update the email list item to match header checkbox alignment
  const renderEmailListItem = (email: Email) => (
    <div
      key={email.id}
      className={`flex items-center gap-3 px-4 py-2 hover:bg-gray-50/80 cursor-pointer ${
        selectedEmail?.id === email.id ? 'bg-blue-50/50' : ''
      } ${!email.read ? 'bg-blue-50/20' : ''}`}
      onClick={() => handleEmailSelect(email.id)}
    >
      <Checkbox
        checked={selectedEmails.includes(email.id.toString())}
        onCheckedChange={(checked) => {
          const e = { target: { checked }, stopPropagation: () => {} } as React.ChangeEvent<HTMLInputElement>;
          handleEmailCheckbox(e, email.id);
        }}
        onClick={(e) => e.stopPropagation()}
        className="mt-0.5"
      />
      <div className="flex-1 min-w-0">
        <div className="flex items-center justify-between gap-2">
          <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'}`}>
              {currentView === 'Sent' ? email.to : (
                (() => {
                  const fromMatch = email.from.match(/^([^<]+)\s*<([^>]+)>$/);
                  return fromMatch ? fromMatch[1].trim() : email.from;
                })()
              )}
            </span>
          </div>
          <div className="flex items-center gap-2 flex-shrink-0">
            <span className="text-xs text-gray-500 whitespace-nowrap">
              {formatDate(email.date)}
            </span>
            <Button
              variant="ghost"
              size="icon"
              className="h-6 w-6 text-gray-400 hover:text-yellow-400"
              onClick={(e) => toggleStarred(email.id, e)}
            >
              <Star className={`h-4 w-4 ${email.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
            </Button>
          </div>
        </div>
        <h3 className="text-sm text-gray-900 truncate">
          {email.subject || '(No subject)'}
        </h3>
        <div className="text-xs text-gray-500 truncate">
          {(() => {
            // Get clean preview of the actual message content
            let preview = '';
            try {
              const parsed = parseFullEmail(email.body);
              
              // Try to get content from parsed email
              preview = (parsed.text || parsed.html || '')
                .replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '')
                .replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '')
                .replace(/<[^>]+>/g, '')
                .replace(/&nbsp;|&zwnj;|&raquo;|&laquo;|&gt;/g, ' ')
                .replace(/\s+/g, ' ')
                .trim();

              // If no preview from parsed content, try direct body
              if (!preview) {
                preview = email.body
                  .replace(/<[^>]+>/g, '')
                  .replace(/&nbsp;|&zwnj;|&raquo;|&laquo;|&gt;/g, ' ')
                  .replace(/\s+/g, ' ')
                  .trim();
              }

              // Remove email artifacts and clean up
              preview = preview
                .replace(/^>+/gm, '')
                .replace(/Content-Type:[^\n]+/g, '')
                .replace(/Content-Transfer-Encoding:[^\n]+/g, '')
                .replace(/--[a-zA-Z0-9]+(-[a-zA-Z0-9]+)?/g, '')
                .replace(/boundary=[^\n]+/g, '')
                .replace(/charset=[^\n]+/g, '')
                .replace(/[\r\n]+/g, ' ')
                .trim();

              // Take first 100 characters
              preview = preview.substring(0, 100);
              
              // Try to end at a complete word
              if (preview.length === 100) {
                const lastSpace = preview.lastIndexOf(' ');
                if (lastSpace > 80) {
                  preview = preview.substring(0, lastSpace);
                }
                preview += '...';
              }

            } catch (e) {
              console.error('Error generating preview:', e);
              preview = '';
            }
            
            return preview || 'No preview available';
          })()}
        </div>
      </div>
    </div>
  );

  // Render the sidebar navigation
  const renderSidebarNav = () => (
    <nav className="p-3">
      <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>
    </nav>
  );

  // Add attachment handling functions
  const handleFileAttachment = async (e: React.ChangeEvent<HTMLInputElement>) => {
    if (!e.target.files) return;
    
    const newAttachments: Attachment[] = [];
    const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB in bytes
    const oversizedFiles: string[] = [];
    
    for (const file of e.target.files) {
      if (file.size > MAX_FILE_SIZE) {
        oversizedFiles.push(file.name);
        continue;
      }

      try {
        // Read file as base64
        const base64Content = await new Promise<string>((resolve) => {
          const reader = new FileReader();
          reader.onloadend = () => {
            const base64 = reader.result as string;
            resolve(base64.split(',')[1]); // Remove data URL prefix
          };
          reader.readAsDataURL(file);
        });

        newAttachments.push({
          name: file.name,
          type: file.type,
          content: base64Content,
          encoding: 'base64'
        });
      } catch (error) {
        console.error('Error processing attachment:', error);
      }
    }

    if (oversizedFiles.length > 0) {
      alert(`The following files exceed the 10MB size limit and were not attached:\n${oversizedFiles.join('\n')}`);
    }

    if (newAttachments.length > 0) {
      setAttachments([...attachments, ...newAttachments]);
    }
  };

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

    try {
      const response = await fetch('/api/mail/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 toggleStarred function
  const toggleStarred = async (emailId: number, e?: React.MouseEvent) => {
    if (e) {
      e.stopPropagation();
    }

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

    try {
      const response = await fetch('/api/mail/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 handleReply function
  const handleReply = (type: 'reply' | 'replyAll' | 'forward') => {
    if (!selectedEmail) return;

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

    const getReplyTo = () => {
      switch (type) {
        case 'reply':
          return selectedEmail.from;
        case 'replyAll':
          // For Reply All, only put the original sender in To
          return selectedEmail.from;
        case 'forward':
          return '';
      }
    };

    const getReplyCc = () => {
      if (type === 'replyAll') {
        // For Reply All, put all other recipients in CC, excluding the sender and current user
        const allRecipients = new Set([
          ...(selectedEmail.to?.split(',') || []),
          ...(selectedEmail.cc?.split(',') || [])
        ]);
        // Remove the sender and current user from CC
        allRecipients.delete(selectedEmail.from);
        allRecipients.delete(accounts[1]?.email);
        return Array.from(allRecipients)
          .map(email => email.trim())
          .filter(email => email) // Remove empty strings
          .join(', ');
      }
      return '';
    };

    const getReplyBody = () => {
      try {
        const parsed = parseFullEmail(selectedEmail.body);
        let originalContent = '';
        
        // Get the content from either HTML or text part
        if (parsed.html) {
          // Convert HTML to plain text for the reply
          originalContent = parsed.html
            .replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '')
            .replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '')
            .replace(/<br\s*\/?>/gi, '\n')
            .replace(/<div[^>]*>/gi, '\n')
            .replace(/<\/div>/gi, '')
            .replace(/<p[^>]*>/gi, '\n')
            .replace(/<\/p>/gi, '')
            .replace(/<[^>]+>/g, '')
            .replace(/&nbsp;|&zwnj;|&raquo;|&laquo;|&gt;/g, match => {
              switch (match) {
                case '&nbsp;': return ' ';
                case '&zwnj;': return '';
                case '&raquo;': return '»';
                case '&laquo;': return '«';
                case '&gt;': return '>';
                case '&lt;': return '<';
                case '&amp;': return '&';
                default: return match;
              }
            })
            .replace(/^\s+$/gm, '')
            .replace(/\n{3,}/g, '\n\n')
            .trim();
        } else if (parsed.text) {
          originalContent = parsed.text.trim();
        } else {
          // Fallback to raw body if parsing fails
          originalContent = selectedEmail.body
            .replace(/<[^>]+>/g, '')
            .trim();
        }

        // Clean up the content
        originalContent = originalContent
          .split('\n')
          .map(line => line.trim())
          .filter(line => {
            // Remove email client signatures and headers
            return !line.match(/^(From|To|Sent|Subject|Date|Cc|Bcc):/i) &&
                   !line.match(/^-{2,}/) &&
                   !line.match(/^_{2,}/) &&
                   !line.match(/^={2,}/) &&
                   !line.match(/^This (email|message) has been/i) &&
                   !line.match(/^Disclaimer/i) &&
                   !line.match(/^[*_-]{3,}/) &&
                   !line.match(/^Envoyé depuis/i) &&
                   !line.match(/^Envoyé à partir de/i) &&
                   !line.match(/^Sent from/i) &&
                   !line.match(/^Outlook pour/i) &&
                   !line.match(/^De :/i) &&
                   !line.match(/^À :/i) &&
                   !line.match(/^Objet :/i);
          })
          .join('\n')
          .trim();

        // Format the reply
        const date = new Date(selectedEmail.date);
        const formattedDate = date.toLocaleString('en-GB', {
          day: '2-digit',
          month: '2-digit',
          year: 'numeric',
          hour: '2-digit',
          minute: '2-digit',
          hour12: false
        });

        let replyHeader = '';
        if (type === 'forward') {
          replyHeader = `\n\n---------- Forwarded message ----------\n`;
          replyHeader += `From: ${selectedEmail.from}\n`;
          replyHeader += `Date: ${formattedDate}\n`;
          replyHeader += `Subject: ${selectedEmail.subject}\n`;
          replyHeader += `To: ${selectedEmail.to}\n`;
          if (selectedEmail.cc) {
            replyHeader += `Cc: ${selectedEmail.cc}\n`;
          }
          replyHeader += `\n`;
        } else {
          // Simple header for reply and reply all
          replyHeader = `\n\nOn ${formattedDate}, ${selectedEmail.from} wrote:\n`;
        }

        // Indent the original content
        const indentedContent = originalContent
          .split('\n')
          .map(line => line ? `> ${line}` : '>')  // Keep empty lines as '>' for better readability
          .join('\n');

        return `${replyHeader}${indentedContent}`;
      } catch (error) {
        console.error('Error formatting reply:', error);
        return `\n\nOn ${new Date(selectedEmail.date).toLocaleString()}, ${selectedEmail.from} wrote:\n> ${selectedEmail.body}`;
      }
    };

    // Open compose modal with reply details
    setShowCompose(true);
    setComposeTo(getReplyTo());
    setComposeSubject(getReplySubject());
    setComposeBody(getReplyBody());
    setComposeCc(getReplyCc());
    setComposeBcc('');
    // Show CC field automatically for Reply All
    setShowCc(type === 'replyAll');
    setShowBcc(false);
    setAttachments([]);
  };

  // Add the confirmation dialog component
  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 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/mail?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.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 || []
      }));

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

      // 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 (err) {
      if (err instanceof Error) {
        if (err.name === 'AbortError') {
          setError('Request timed out. Please try again.');
        } else {
          setError(err.message);
        }
      } else {
        setError('Failed to fetch emails');
      }
    } finally {
      setLoading(false);
    }
  };

  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>
    );
  }

  return (
    <>
      {/* Main layout */}
      <div className="flex h-[calc(100vh-theme(spacing.12))] bg-gray-50 text-gray-900 overflow-hidden mt-12">
        {/* 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"
              onClick={() => handleMailboxChange('INBOX')}
              className="text-gray-600 hover:text-gray-900 hover:bg-gray-100"
            >
              <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 flex-col items-start">
                        <div className="flex items-center gap-2">
                          <div className={`w-2.5 h-2.5 rounded-full ${account.color}`}></div>
                          <span className="font-medium">{account.name}</span>
                        </div>
                        <span className="text-xs text-gray-500 ml-4">{account.email}</span>
                      </div>
                    </Button>
                  </div>
                ))}
              </div>
            )}
          </div>

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

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

      {/* Compose Email Modal */}
      {showCompose && (
        <div className="fixed inset-0 bg-gray-600/30 backdrop-blur-sm z-50 flex items-center justify-center">
          <div className="w-full max-w-2xl h-[80vh] bg-white rounded-xl shadow-xl flex flex-col mx-4">
            {/* Modal Header */}
            <div className="flex items-center justify-between px-6 py-3 border-b border-gray-200">
              <h3 className="text-lg font-semibold text-gray-900">
                {composeSubject.startsWith('Re:') ? 'Reply' : 
                 composeSubject.startsWith('Fwd:') ? 'Forward' : 'New Message'}
              </h3>
              <Button
                variant="ghost"
                size="icon"
                className="hover:bg-gray-100 rounded-full"
                onClick={() => {
                  setShowCompose(false);
                  setComposeTo('');
                  setComposeCc('');
                  setComposeBcc('');
                  setComposeSubject('');
                  setComposeBody('');
                  setShowCc(false);
                  setShowBcc(false);
                }}
              >
                <X className="h-5 w-5 text-gray-500" />
              </Button>
            </div>

            {/* Modal Body */}
            <div className="flex-1 overflow-y-auto">
              <div className="p-6 space-y-4">
                {/* To Field */}
                <div>
                  <Label htmlFor="to" className="block text-sm font-medium text-gray-700">To</Label>
                  <Input
                    id="to"
                    value={composeTo}
                    onChange={(e) => setComposeTo(e.target.value)}
                    placeholder="recipient@example.com"
                    className="w-full mt-1 bg-white border-gray-300 text-gray-900"
                  />
                </div>

                {/* CC/BCC Toggle Buttons */}
                <div className="flex items-center gap-4">
                  <button
                    type="button"
                    className="text-blue-600 hover:text-blue-700 text-sm font-medium"
                    onClick={() => setShowCc(!showCc)}
                  >
                    {showCc ? 'Hide Cc' : 'Add Cc'}
                  </button>
                  <button
                    type="button"
                    className="text-blue-600 hover:text-blue-700 text-sm font-medium"
                    onClick={() => setShowBcc(!showBcc)}
                  >
                    {showBcc ? 'Hide Bcc' : 'Add Bcc'}
                  </button>
                </div>

                {/* CC Field */}
                {showCc && (
                  <div>
                    <Label htmlFor="cc" className="block text-sm font-medium text-gray-700">Cc</Label>
                    <Input
                      id="cc"
                      value={composeCc}
                      onChange={(e) => setComposeCc(e.target.value)}
                      placeholder="cc@example.com"
                      className="w-full mt-1 bg-white border-gray-300 text-gray-900"
                    />
                  </div>
                )}

                {/* BCC Field */}
                {showBcc && (
                  <div>
                    <Label htmlFor="bcc" className="block text-sm font-medium text-gray-700">Bcc</Label>
                    <Input
                      id="bcc"
                      value={composeBcc}
                      onChange={(e) => setComposeBcc(e.target.value)}
                      placeholder="bcc@example.com"
                      className="w-full mt-1 bg-white border-gray-300 text-gray-900"
                    />
                  </div>
                )}

                {/* Subject Field */}
                <div>
                  <Label htmlFor="subject" className="block text-sm font-medium text-gray-700">Subject</Label>
                  <Input
                    id="subject"
                    value={composeSubject}
                    onChange={(e) => setComposeSubject(e.target.value)}
                    placeholder="Enter subject"
                    className="w-full mt-1 bg-white border-gray-300 text-gray-900"
                  />
                </div>

                {/* Message Body */}
                <div>
                  <Label htmlFor="message" className="block text-sm font-medium text-gray-700">Message</Label>
                  <Textarea
                    id="message"
                    value={composeBody}
                    onChange={(e) => setComposeBody(e.target.value)}
                    placeholder="Write your message..."
                    className="w-full mt-1 min-h-[200px] bg-white border-gray-300 text-gray-900 resize-none"
                  />
                </div>
              </div>
            </div>

            {/* Modal Footer */}
            <div className="flex items-center justify-between px-6 py-3 border-t border-gray-200 bg-white">
              <div className="flex items-center gap-2">
                {/* File Input for Attachments */}
                <input
                  type="file"
                  id="file-attachment"
                  className="hidden"
                  multiple
                  onChange={handleFileAttachment}
                />
                <label htmlFor="file-attachment">
                  <Button 
                    variant="outline" 
                    size="icon"
                    className="rounded-full bg-white hover:bg-gray-100 border-gray-300"
                    onClick={(e) => {
                      e.preventDefault();
                      document.getElementById('file-attachment')?.click();
                    }}
                  >
                    <Paperclip className="h-4 w-4 text-gray-600" />
                  </Button>
                </label>
              </div>
              <div className="flex items-center gap-3">
                <Button 
                  variant="ghost"
                  className="text-gray-600 hover:text-gray-700 hover:bg-gray-100"
                  onClick={() => setShowCompose(false)}
                >
                  Cancel
                </Button>
                <Button
                  className="bg-blue-600 text-white hover:bg-blue-700"
                  onClick={handleSend}
                >
                  Send
                </Button>
              </div>
            </div>
          </div>
        </div>
      )}
      {renderDeleteConfirmDialog()}
    </>
  );
}