'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';

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

// Improved MIME Decoder Implementation for Infomaniak
function extractBoundary(headers: string): string | null {
  const boundaryMatch = headers.match(/boundary="?([^"\r\n;]+)"?/i) || 
                       headers.match(/boundary=([^\r\n;]+)/i);
  
  return boundaryMatch ? boundaryMatch[1].trim() : null;
}

function decodeQuotedPrintable(text: string, charset: string): string {
  if (!text) return '';
  
  // Replace soft line breaks (=\r\n or =\n or =\r)
  let decoded = text.replace(/=(?:\r\n|\n|\r)/g, '');
  
  // Replace quoted-printable encoded characters (including non-ASCII characters)
  decoded = decoded.replace(/=([0-9A-F]{2})/gi, (match, p1) => {
    return String.fromCharCode(parseInt(p1, 16));
  });
  
  // Handle character encoding
  try {
    // For browsers with TextDecoder support
    if (typeof TextDecoder !== 'undefined') {
      // Convert string to array of byte values
      const bytes = new Uint8Array(Array.from(decoded).map(c => c.charCodeAt(0)));
      return new TextDecoder(charset).decode(bytes);
    }
    
    // Fallback for older browsers or when charset handling is not critical
    return decoded;
  } catch (e) {
    console.warn('Charset conversion error:', e);
    return decoded;
  }
}

function parseFullEmail(emailRaw: string) {
  // Check if this is a multipart message by looking for boundary definition
  const boundaryMatch = emailRaw.match(/boundary="?([^"\r\n;]+)"?/i) || 
                       emailRaw.match(/boundary=([^\r\n;]+)/i);
  
  if (boundaryMatch) {
    const boundary = boundaryMatch[1].trim();
    
    // Check if there's a preamble before the first boundary
    let mainHeaders = '';
    let mainContent = emailRaw;
    
    // Extract the headers before the first boundary if they exist
    const firstBoundaryPos = emailRaw.indexOf('--' + boundary);
    if (firstBoundaryPos > 0) {
      const headerSeparatorPos = emailRaw.indexOf('\r\n\r\n');
      if (headerSeparatorPos > 0 && headerSeparatorPos < firstBoundaryPos) {
        mainHeaders = emailRaw.substring(0, headerSeparatorPos);
      }
    }
    
    return processMultipartEmail(emailRaw, boundary, mainHeaders);
  } else {
    // This is a single part message
    return processSinglePartEmail(emailRaw);
  }
}

function processMultipartEmail(emailRaw: string, boundary: string, mainHeaders: string = ''): { 
  text: string; 
  html: string; 
  attachments: { filename: string; contentType: string; encoding: string; content: string; }[];
  headers?: string;
} {
  const result = {
    text: '',
    html: '',
    attachments: [] as { filename: string; contentType: string; encoding: string; content: string; }[],
    headers: mainHeaders
  };
  
  // Split by boundary (more robust pattern)
  const boundaryRegex = new RegExp(`--${boundary}(?:--)?(\\r?\\n|$)`, 'g');
  
  // Get all boundary positions
  const matches = Array.from(emailRaw.matchAll(boundaryRegex));
  const boundaryPositions = matches.map(match => match.index!);
  
  // Extract content between boundaries
  for (let i = 0; i < boundaryPositions.length - 1; i++) {
    const startPos = boundaryPositions[i] + matches[i][0].length;
    const endPos = boundaryPositions[i + 1];
    
    if (endPos > startPos) {
      const partContent = emailRaw.substring(startPos, endPos).trim();
      
      if (partContent) {
        const decoded = processSinglePartEmail(partContent);
        
        if (decoded.contentType.includes('text/plain')) {
          result.text = decoded.text || '';
        } else if (decoded.contentType.includes('text/html')) {
          result.html = cleanHtml(decoded.html || '');
        } else if (
          decoded.contentType.startsWith('image/') || 
          decoded.contentType.startsWith('application/')
        ) {
          const filename = extractFilename(partContent);
          result.attachments.push({
            filename,
            contentType: decoded.contentType,
            encoding: decoded.raw?.headers ? parseEmailHeaders(decoded.raw.headers).encoding : '7bit',
            content: decoded.raw?.body || ''
          });
        }
      }
    }
  }
  
  return result;
}

function processSinglePartEmail(rawEmail: string) {
  // Split headers and body
  const headerBodySplit = rawEmail.split(/\r?\n\r?\n/);
  const headers = headerBodySplit[0];
  const body = headerBodySplit.slice(1).join('\n\n');
  
  // Parse headers to get content type, encoding, etc.
  const emailInfo = parseEmailHeaders(headers);
  
  // Decode the body based on its encoding
  const decodedBody = decodeMIME(body, emailInfo.encoding, emailInfo.charset);
  
  return {
    subject: extractHeader(headers, 'Subject'),
    from: extractHeader(headers, 'From'),
    to: extractHeader(headers, 'To'),
    date: extractHeader(headers, 'Date'),
    contentType: emailInfo.contentType,
    text: emailInfo.contentType.includes('html') ? null : decodedBody,
    html: emailInfo.contentType.includes('html') ? decodedBody : null,
    raw: {
      headers,
      body
    }
  };
}

function extractHeader(headers: string, headerName: string): string {
  const regex = new RegExp(`^${headerName}:\\s*(.+?)(?:\\r?\\n(?!\\s)|$)`, 'im');
  const match = headers.match(regex);
  return match ? match[1].trim() : '';
}

function extractFilename(headers: string): string {
  const filenameMatch = headers.match(/filename="?([^"\r\n;]+)"?/i);
  return filenameMatch ? filenameMatch[1].trim() : 'attachment';
}

function parseEmailHeaders(headers: string): { contentType: string; encoding: string; charset: string } {
  const result = {
    contentType: 'text/plain',
    encoding: '7bit',
    charset: 'utf-8'
  };
  
  // Extract content type and charset
  const contentTypeMatch = headers.match(/Content-Type:\s*([^;]+)(?:;\s*charset=([^;"\r\n]+)|(?:;\s*charset="([^"]+)"))?/i);
  if (contentTypeMatch) {
    result.contentType = contentTypeMatch[1].trim().toLowerCase();
    if (contentTypeMatch[2]) {
      result.charset = contentTypeMatch[2].trim().toLowerCase();
    } else if (contentTypeMatch[3]) {
      result.charset = contentTypeMatch[3].trim().toLowerCase();
    }
  }
  
  // Extract content transfer encoding
  const encodingMatch = headers.match(/Content-Transfer-Encoding:\s*([^\s;\r\n]+)/i);
  if (encodingMatch) {
    result.encoding = encodingMatch[1].trim().toLowerCase();
  }
  
  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 decodeBase64(text: string, charset: string): string {
  const cleanText = text.replace(/\s/g, '');
  
  let binaryString;
  try {
    binaryString = atob(cleanText);
  } catch (e) {
    console.error('Base64 decoding error:', e);
    return text;
  }
  
  return convertCharset(binaryString, charset);
}

function convertCharset(text: string, fromCharset: string): string {
  try {
    if (typeof TextDecoder !== 'undefined') {
      const bytes = new Uint8Array(text.length);
      for (let i = 0; i < text.length; i++) {
        bytes[i] = text.charCodeAt(i) & 0xFF;
      }
      
      let normalizedCharset = fromCharset.toLowerCase();
      
      // Normalize charset names
      if (normalizedCharset === 'iso-8859-1' || normalizedCharset === 'latin1') {
        normalizedCharset = 'iso-8859-1';
      } else if (normalizedCharset === 'windows-1252' || normalizedCharset === 'cp1252') {
        normalizedCharset = 'windows-1252';
      }
      
      const decoder = new TextDecoder(normalizedCharset);
      return decoder.decode(bytes);
    }
    
    // Fallback for older browsers or unsupported charsets
    if (fromCharset.toLowerCase() === 'iso-8859-1' || fromCharset.toLowerCase() === 'windows-1252') {
      return text
        .replace(/\xC3\xA0/g, 'à')
        .replace(/\xC3\xA2/g, 'â')
        .replace(/\xC3\xA9/g, 'é')
        .replace(/\xC3\xA8/g, 'è')
        .replace(/\xC3\xAA/g, 'ê')
        .replace(/\xC3\xAB/g, 'ë')
        .replace(/\xC3\xB4/g, 'ô')
        .replace(/\xC3\xB9/g, 'ù')
        .replace(/\xC3\xBB/g, 'û')
        .replace(/\xC3\x80/g, 'À')
        .replace(/\xC3\x89/g, 'É')
        .replace(/\xC3\x87/g, 'Ç')
        .replace(/\xC2\xA0/g, ' ');
    }
    
    return text;
  } catch (e) {
    console.error('Character set conversion error:', e, 'charset:', fromCharset);
    return text;
  }
}

function extractHtmlBody(htmlContent: string): string {
  const bodyMatch = htmlContent.match(/<body[^>]*>([\s\S]*?)<\/body>/i);
  return bodyMatch ? bodyMatch[1] : htmlContent;
}

function cleanHtml(html: string): string {
  if (!html) return '';
  
  return html
    // Fix common Infomaniak-specific character encodings
    .replace(/=C2=A0/g, ' ')  // non-breaking space
    .replace(/=E2=80=93/g, '\u2013')  // en dash
    .replace(/=E2=80=94/g, '\u2014')  // em dash
    .replace(/=E2=80=98/g, '\u2018')  // left single quote
    .replace(/=E2=80=99/g, '\u2019')  // right single quote
    .replace(/=E2=80=9C/g, '\u201C')  // left double quote
    .replace(/=E2=80=9D/g, '\u201D')  // right double quote
    .replace(/=C3=A0/g, 'à')
    .replace(/=C3=A2/g, 'â')
    .replace(/=C3=A9/g, 'é')
    .replace(/=C3=A8/g, 'è')
    .replace(/=C3=AA/g, 'ê')
    .replace(/=C3=AB/g, 'ë')
    .replace(/=C3=B4/g, 'ô')
    .replace(/=C3=B9/g, 'ù')
    .replace(/=C3=xBB/g, 'û')
    .replace(/=C3=80/g, 'À')
    .replace(/=C3=89/g, 'É')
    .replace(/=C3=87/g, 'Ç')
    // Clean up HTML entities
    .replace(/&Atilde;&sect;/g, 'ç')
    .replace(/&Atilde;&copy;/g, 'é')
    .replace(/&Atilde;&uml;/g, 'ë')
    .replace(/&Atilde;&ordf;/g, 'ª')
    .replace(/&Atilde;&laquo;/g, '«')
    .replace(/&Atilde;&raquo;/g, '»')
    .replace(/&nbsp;/g, ' ')
    .replace(/\xA0/g, ' ');
}

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

// Add this helper function
const renderEmailContent = (email: Email) => {
  const decodedContent = decodeMimeContent(email.body);
  if (email.body.includes('Content-Type: text/html')) {
    return <div dangerouslySetInnerHTML={{ __html: decodedContent }} />;
  }
  return <div className="whitespace-pre-wrap">{decodedContent}</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 MailPage() {
  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 || []
      }));

      // Update unread count for 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);
        });
      }
    }
  };

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

  // Update the toggleStarred function
  const toggleStarred = async (emailId: number, e: React.MouseEvent) => {
    e.stopPropagation();
    
    // Update the email in state
    setEmails(prevEmails => 
      prevEmails.map(email => 
        email.id === emailId 
          ? { ...email, starred: !email.starred }
          : email
      )
    );

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

      if (!response.ok) {
        throw new Error('Failed to toggle star');
      }
    } catch (error) {
      console.error('Error toggling star:', error);
      // Revert the change if the server request fails
      setEmails(prevEmails => 
        prevEmails.map(email => 
          email.id === emailId 
            ? { ...email, starred: !email.starred }
            : email
        )
      );
    }
  };

  // Handle reply with MIME encoding
  const handleReply = async (type: 'reply' | 'replyAll' | 'forward') => {
    const selectedEmailData = getSelectedEmail();
    if (!selectedEmailData) return;

    setShowCompose(true);
    const subject = `${type === 'forward' ? 'Fwd: ' : 'Re: '}${selectedEmailData.subject}`;
    let to = '';
    let cc = '';
    let content = '';

    // Parse the original email content using MIME decoder
    const parsedEmail = parseFullEmail(selectedEmailData.body);
    const decodedBody = parsedEmail?.text || parsedEmail?.html || selectedEmailData.body;

    // Format the date properly
    const emailDate = new Date(selectedEmailData.date).toLocaleString('en-US', {
      weekday: 'short',
      year: 'numeric',
      month: 'short',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit',
      hour12: true
    });

    switch (type) {
      case 'reply':
        to = selectedEmailData.from;
        content = `\n\nOn ${emailDate}, ${selectedEmailData.fromName} wrote:\n> ${decodedBody.split('\n').join('\n> ')}`;
        break;

      case 'replyAll':
        to = selectedEmailData.from;
        
        // Get our email address from the selected account
        const ourEmail = accounts.find(acc => acc.id === selectedEmailData.accountId)?.email || '';
        
        // Handle CC addresses
        const ccList = new Set<string>();
        
        // Add original TO recipients (except ourselves and the person we're replying to)
        selectedEmailData.to.split(',')
          .map(addr => addr.trim())
          .filter(addr => addr !== ourEmail && addr !== selectedEmailData.from)
          .forEach(addr => ccList.add(addr));
        
        // Add original CC recipients (if any)
        if (selectedEmailData.cc) {
          selectedEmailData.cc.split(',')
            .map(addr => addr.trim())
            .filter(addr => addr !== ourEmail && addr !== selectedEmailData.from)
            .forEach(addr => ccList.add(addr));
        }
        
        // Convert Set to string
        cc = Array.from(ccList).join(', ');
        
        // If we have CC recipients, show the CC field
        if (cc) {
          setShowCc(true);
        }
        
        content = `\n\nOn ${emailDate}, ${selectedEmailData.fromName} wrote:\n> ${decodedBody.split('\n').join('\n> ')}`;
        break;

      case 'forward':
        // Safely handle attachments
        const attachments = parsedEmail?.attachments || [];
        const attachmentInfo = attachments.length > 0 
          ? '\n\n-------- Attachments --------\n' + 
            attachments.map(att => att.filename).join('\n')
          : '';

        content = `\n\n---------- Forwarded message ----------\n` +
                  `From: ${selectedEmailData.fromName} <${selectedEmailData.from}>\n` +
                  `Date: ${emailDate}\n` +
                  `Subject: ${selectedEmailData.subject}\n` +
                  `To: ${selectedEmailData.to}\n` +
                  (selectedEmailData.cc ? `Cc: ${selectedEmailData.cc}\n` : '') +
                  `\n\n${decodedBody}${attachmentInfo}`;

        // Handle attachments if present
        if (attachments.length > 0) {
          handleForwardedAttachments(attachments);
        }
        break;
    }

    // Set the form state
    setComposeSubject(subject);
    setComposeTo(to);
    setComposeCc(cc);
    setComposeBody(content);
  };

  // Handle forwarded attachments
  const handleForwardedAttachments = (attachments: Array<{
    filename: string;
    contentType: string;
    encoding: string;
    content: string;
  }>) => {
    try {
      // Store attachment information in state
      setAttachments(attachments.map(att => ({
        name: att.filename,
        type: att.contentType,
        content: att.content,
        encoding: att.encoding
      })));
    } catch (error) {
      console.error('Error handling attachments:', error);
    }
  };

  // Modified send function to handle MIME encoding
  const handleSend = async () => {
    try {
      // Create multipart message
      const boundary = `----=_Part_${Date.now()}`;
      let mimeContent = [
        `Content-Type: multipart/mixed; boundary="${boundary}"`,
        '',
        `--${boundary}`,
        'Content-Type: text/plain; charset=utf-8',
        'Content-Transfer-Encoding: 7bit',
        '',
        composeBody,
        ''
      ];

      // Add attachments if any
      if (attachments && attachments.length > 0) {
        for (const attachment of attachments) {
          mimeContent = mimeContent.concat([
            `--${boundary}`,
            `Content-Type: ${attachment.type}`,
            `Content-Transfer-Encoding: ${attachment.encoding}`,
            `Content-Disposition: attachment; filename="${attachment.name}"`,
            '',
            attachment.content,
            ''
          ]);
        }
      }

      // Close the multipart message
      mimeContent.push(`--${boundary}--`);

      // Send the email with MIME content
      await fetch('/api/mail/send', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          to: composeTo,
          cc: composeCc,
          bcc: composeBcc,
          subject: composeSubject,
          body: mimeContent.join('\r\n'),
          attachments: attachments
        })
      });

      // Clear the form
      setShowCompose(false);
      setComposeTo('');
      setComposeCc('');
      setComposeBcc('');
      setComposeSubject('');
      setComposeBody('');
      setShowCc(false);
      setShowBcc(false);
      setAttachments([]);

    } catch (error) {
      console.error('Error sending email:', error);
    }
  };

  const handleBulkDelete = () => {
    setDeleteType('emails');
    setShowDeleteConfirm(true);
  };

  const handleDeleteConfirm = async () => {
    try {
      if (selectedEmails.length > 0) {
        await fetch('/api/mail/delete', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ emailIds: selectedEmails })
        });
        setEmails(emails.filter(email => !selectedEmails.includes(email.id.toString())));
        setSelectedEmails([]);
        setShowBulkActions(false);
      }
    } catch (error) {
      console.error('Error deleting emails:', error);
    }
    setShowDeleteConfirm(false);
  };

  const handleAccountAction = (accountId: number, action: 'edit' | 'delete') => {
    setShowAccountActions(null);
    if (action === 'delete') {
      setDeleteType('account');
      setItemToDelete(accountId);
      setShowDeleteConfirm(true);
    }
  };

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

  const handleFileAttachment = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files) {
      setAttachments(Array.from(e.target.files).map(file => ({
        name: file.name,
        type: file.type,
        content: URL.createObjectURL(file),
        encoding: 'base64'
      })));
    }
  };

  // Add debug logging to help track the filtering
  useEffect(() => {
    console.log('Current view:', currentView);
    console.log('Total emails:', emails.length);
    console.log('Filter criteria:', {
      starred: emails.filter(e => e.starred).length,
      sent: emails.filter(e => e.folder === 'Sent').length,
      trash: emails.filter(e => e.folder === 'Trash').length,
      spam: emails.filter(e => e.folder === 'Spam').length,
      drafts: emails.filter(e => e.folder === 'Drafts').length,
      archives: emails.filter(e => e.folder === 'Archives' || e.folder === 'Archive').length
    });
  }, [currentView, emails]);

  // Add a function to move to trash
  const moveToTrash = async (emailId: number) => {
    // Update the email in state
    setEmails(prevEmails => 
      prevEmails.map(email => 
        email.id === emailId 
          ? { ...email, read: true, starred: false, folder: 'Trash' }
          : email
      )
    );

    try {
      const response = await fetch('/api/mail/move-to-trash', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ emailId })
      });

      if (!response.ok) {
        throw new Error('Failed to move to trash');
      }
    } catch (error) {
      console.error('Error moving to trash:', error);
      // Revert the change if the server request fails
      setEmails(prevEmails => 
        prevEmails.map(email => 
          email.id === emailId 
            ? { ...email, read: false, starred: true, folder: 'starred' }
            : email
        )
      );
    }
  };

  // Add this debug component to help us see what's happening
  const DebugInfo = () => {
    if (process.env.NODE_ENV !== 'development') return null;
    
    return (
      <div className="fixed bottom-4 right-4 bg-black/80 text-white p-4 rounded-lg text-xs">
        <div>Current view: {currentView}</div>
        <div>Total emails: {emails.length}</div>
        <div>Categories present: {
          [...new Set(emails.map(e => e.folder))].join(', ')
        }</div>
        <div>Flags present: {
          [...new Set(emails.flatMap(e => e.flags || []))].join(', ')
        }</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]);

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

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

  // Render the email list using sorted emails
  const renderEmailList = () => (
    <div className="w-[320px] bg-white/95 backdrop-blur-sm border-r border-gray-100 flex flex-col">
      {/* Email list header */}
      <div className="p-4 border-b border-gray-100">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-4">
            <h2 className="text-lg font-semibold text-gray-800">
              {currentView === 'INBOX' ? 'Inbox' :
               currentView === 'starred' ? 'Starred' :
               currentView.charAt(0).toUpperCase() + currentView.slice(1)}
            </h2>
          </div>
          <div className="text-sm text-gray-500">
            {emails.length} emails
          </div>
        </div>
      </div>

      {/* Email list with scroll handler */}
      <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>
        ) : emails.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">
              {currentView === 'INBOX' && 'No emails in inbox'}
              {currentView === 'starred' && 'No starred emails'}
              {currentView === 'Sent' && 'No sent emails'}
              {currentView === 'Trash' && 'No emails in trash'}
              {currentView === 'Drafts' && 'No drafts'}
              {currentView === 'Spam' && 'No spam emails'}
              {(currentView === 'Archives' || currentView === 'Archive') && 'No archived emails'}
            </p>
          </div>
        ) : (
          <div className="divide-y divide-gray-100">
            {sortedEmails.map((email) => (
              <div
                key={email.id}
                className={`flex flex-col p-3 hover:bg-gray-50 cursor-pointer ${
                  selectedEmail?.id === email.id ? 'bg-blue-50' : ''
                } ${!email.read ? 'bg-blue-50/20' : ''}`}
                onClick={() => handleEmailSelect(email.id)}
              >
                <div className="flex items-center justify-between mb-1">
                  <div className="flex items-center gap-3">
                    <Checkbox
                      checked={selectedEmails.includes(email.id.toString())}
                      onClick={(e) => e.stopPropagation()}
                      onCheckedChange={(checked) => {
                        if (checked) {
                          setSelectedEmails([...selectedEmails, email.id.toString()]);
                        } else {
                          setSelectedEmails(selectedEmails.filter(id => id !== email.id.toString()));
                        }
                      }}
                    />
                    <span className="text-sm font-medium text-gray-900">
                      {currentView === 'Sent' ? email.to : (email.fromName || email.from)}
                    </span>
                  </div>
                  <div className="flex items-center gap-2">
                    <span className="text-xs text-gray-500">
                      {formatDate(email.date)}
                    </span>
                    {/* Show folder badge if it doesn't match current view */}
                    {email.folder !== currentView && currentView === 'starred' && (
                      <span className="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded">
                        {email.folder}
                      </span>
                    )}
                    <Button
                      variant="ghost"
                      size="sm"
                      className="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>
                <div className="ml-8">
                  <h3 className={`text-sm ${!email.read ? 'font-semibold' : ''} text-gray-900 mb-0.5`}>
                    {email.subject || '(No subject)'}
                  </h3>
                  <p className="text-xs text-gray-500 line-clamp-1">
                    {email.body.replace(/<[^>]*>/g, '').substring(0, 100)}...
                  </p>
                </div>
                {/* Debug info - only in development */}
                {process.env.NODE_ENV === 'development' && (
                  <div className="ml-8 mt-1 text-xs text-gray-400">
                    Folder: {email.folder}
                  </div>
                )}
              </div>
            ))}
            {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>
  );

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

  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={() => loadEmails()}
            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 */}
          {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 p-4 border-b border-gray-100">
                  <div className="flex items-center justify-between">
              <div className="flex items-center gap-2">
                <Button
                  variant="ghost"
                        size="icon"
                        onClick={() => setSelectedEmail(null)}
                        className="md:hidden"
                      >
                        <ChevronLeft className="h-5 w-5" />
                </Button>
                      <h2 className="text-xl font-semibold text-gray-900 truncate">
                        {selectedEmail.subject}
                      </h2>
              </div>
                <div className="flex items-center gap-2">
                  <Button
                    variant="ghost"
                    size="icon"
                    className="text-gray-400 hover:text-gray-900"
                    onClick={() => handleReply('reply')}
                  >
                    <Reply className="h-5 w-5" />
                  </Button>
                  <Button
                    variant="ghost"
                    size="icon"
                    className="text-gray-400 hover:text-gray-900"
                    onClick={() => handleReply('replyAll')}
                  >
                    <ReplyAll className="h-5 w-5" />
                  </Button>
                  <Button
                    variant="ghost"
                    size="icon"
                    className="text-gray-400 hover:text-gray-900"
                    onClick={() => handleReply('forward')}
                  >
                    <Forward className="h-5 w-5" />
                  </Button>
                  <Button
                    variant="ghost"
                    size="icon"
                    className="text-gray-400 hover:text-gray-900"
                        onClick={(e) => toggleStarred(selectedEmail.id, e)}
                      >
                        <Star className={`h-5 w-5 ${selectedEmail.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
                  </Button>
                  <Button
                    variant="ghost"
                    size="icon"
                    className="text-gray-400 hover:text-gray-900"
                        onClick={() => {/* Add to folder logic */}}
                      >
                        <FolderOpen className="h-5 w-5" />
                      </Button>
                      <Button
                        variant="ghost"
                        size="icon"
                        className="text-gray-400 hover:text-gray-900"
                        onClick={() => {/* Mark as spam logic */}}
                      >
                        <MessageSquare className="h-5 w-5" />
                  </Button>
                    </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">
                    {(() => {
                      try {
                        const parsed = parseFullEmail(selectedEmail.body);
                        return (
                          <div>
                            {/* Display HTML content if available, otherwise fallback to text */}
                            <div dangerouslySetInnerHTML={{ 
                              __html: parsed.html || parsed.text || decodeMimeContent(selectedEmail.body) 
                            }} />
                            
                            {/* Display attachments if present */}
                            {parsed.attachments && parsed.attachments.length > 0 && (
                              <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="grid grid-cols-2 gap-4">
                                  {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>
                            )}
                          </div>
                        );
                      } catch (e) {
                        console.error('Error parsing email:', e);
                        return selectedEmail.body;
                      }
                    })()}
                  </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>
    </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>
      )}

      {/* Add debug info in development */}
      <DebugInfo />
    </>
  );
}