'use client';

import { useState, useRef, useEffect } from 'react';
import { 
  X, Paperclip, ChevronDown, ChevronUp, SendHorizontal, Loader2
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from '@/components/ui/card';
import DOMPurify from 'isomorphic-dompurify';
import { Label } from '@/components/ui/label';

// Import sub-components
import ComposeEmailHeader from './ComposeEmailHeader';
import ComposeEmailForm from './ComposeEmailForm';
import ComposeEmailFooter from './ComposeEmailFooter';
import RichEmailEditor from './RichEmailEditor';
import QuotedEmailContent from './QuotedEmailContent';

// Import ONLY from the centralized formatter
import { 
  formatReplyEmail, 
  formatForwardedEmail, 
  formatEmailAddresses,
  type EmailMessage,
  type EmailAddress
} from '@/lib/utils/email-formatter';

/**
 * CENTRAL EMAIL COMPOSER COMPONENT
 * 
 * This is the unified, centralized email composer component used throughout the application.
 * It handles new emails, replies, and forwards with proper text direction.
 * 
 * All code that needs to compose emails should import this component from:
 * @/components/email/ComposeEmail
 * 
 * It uses the centralized email formatter from @/lib/utils/email-formatter.ts
 * for consistent handling of email content and text direction.
 */

// Define interface for the legacy props
interface LegacyComposeEmailProps {
  showCompose: boolean;
  setShowCompose: (show: boolean) => void;
  composeTo: string;
  setComposeTo: (to: string) => void;
  composeCc: string;
  setComposeCc: (cc: string) => void;
  composeBcc: string;
  setComposeBcc: (bcc: string) => void;
  composeSubject: string;
  setComposeSubject: (subject: string) => void;
  composeBody: string;
  setComposeBody: (body: string) => void;
  showCc: boolean;
  setShowCc: (show: boolean) => void;
  showBcc: boolean;
  setShowBcc: (show: boolean) => void;
  attachments: any[];
  setAttachments: (attachments: any[]) => void;
  handleSend: () => Promise<void>;
  originalEmail?: {
    content: string;
    type: 'reply' | 'reply-all' | 'forward';
  };
  onSend: (email: any) => Promise<void>;
  onCancel: () => void;
  replyTo?: any | null;
  forwardFrom?: any | null;
}

// Define interface for the modern props
interface ComposeEmailProps {
  initialEmail?: EmailMessage | null;
  type?: 'new' | 'reply' | 'reply-all' | 'forward';
  onClose: () => void;
  onSend: (emailData: {
    to: string;
    cc?: string;
    bcc?: string;
    subject: string;
    body: string;
    attachments?: Array<{
      name: string;
      content: string;
      type: string;
    }>;
  }) => Promise<void>;
}

// Union type for handling both types of props
type ComposeEmailAllProps = ComposeEmailProps | LegacyComposeEmailProps;

// Type guard to check if props are legacy
function isLegacyProps(
  props: ComposeEmailAllProps
): props is LegacyComposeEmailProps {
  return 'showCompose' in props;
}

// Helper function to adapt EmailMessage to QuotedEmailContent props format
function EmailMessageToQuotedContentAdapter({
  email, 
  type
}: {
  email: EmailMessage, 
  type: 'reply' | 'reply-all' | 'forward'
}) {
  // Get the email content
  const content = email.content || email.html || email.text || '';
  
  // Get the sender
  const sender = email.from && email.from.length > 0 
    ? { 
        name: email.from[0].name, 
        email: email.from[0].address 
      } 
    : { email: 'unknown@example.com' };
  
  // Map the type to what QuotedEmailContent expects
  const mappedType = type === 'reply-all' ? 'reply' : type;
  
  return (
    <QuotedEmailContent
      content={content}
      sender={sender}
      date={email.date}
      type={mappedType}
    />
  );
}

export default function ComposeEmail(props: ComposeEmailAllProps) {
  // Handle legacy props by adapting them to new component
  if (isLegacyProps(props)) {
    return <LegacyAdapter {...props} />;
  }
  
  // Continue with modern implementation for new props
  const { initialEmail, type = 'new', onClose, onSend } = props;
  
  // Email form state
  const [to, setTo] = useState<string>('');
  const [cc, setCc] = useState<string>('');
  const [bcc, setBcc] = useState<string>('');
  const [subject, setSubject] = useState<string>('');
  const [emailContent, setEmailContent] = useState<string>('');
  const [showCc, setShowCc] = useState<boolean>(false);
  const [showBcc, setShowBcc] = useState<boolean>(false);
  const [sending, setSending] = useState<boolean>(false);
  const [attachments, setAttachments] = useState<Array<{
    name: string;
    content: string;
    type: string;
  }>>([]);
  
  // Initialize the form when replying to or forwarding an email
  useEffect(() => {
    if (initialEmail && type !== 'new') {
      try {
        // Set recipients based on type
        if (type === 'reply' || type === 'reply-all') {
          // Reply goes to the original sender
          setTo(formatEmailAddresses(initialEmail.from || []));
          
          // For reply-all, include all original recipients in CC
          if (type === 'reply-all') {
            const allRecipients = [
              ...(initialEmail.to || []),
              ...(initialEmail.cc || [])
            ];
            // Filter out the current user if they were a recipient
            // This would need some user context to properly implement
            setCc(formatEmailAddresses(allRecipients));
          }
          
          // Set subject with Re: prefix
          const subjectBase = initialEmail.subject || '(No subject)';
          const subject = subjectBase.match(/^Re:/i) ? subjectBase : `Re: ${subjectBase}`;
          setSubject(subject);
          
          // Format the reply content with the quoted message included directly
          const content = initialEmail.content || initialEmail.html || initialEmail.text || '';
          const sender = initialEmail.from && initialEmail.from.length > 0 
            ? initialEmail.from[0].name || initialEmail.from[0].address 
            : 'Unknown sender';
          const date = initialEmail.date ? 
            (typeof initialEmail.date === 'string' ? new Date(initialEmail.date) : initialEmail.date) : 
            new Date();
          
          // Format date for display
          const formattedDate = date.toLocaleString('en-US', {
            weekday: 'short',
            year: 'numeric',
            month: 'short',
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
          });
          
          // Create reply content with quote
          const replyContent = `
            <div><br></div>
            <div><br></div>
            <div><br></div>
            <div><br></div>
            <div style="font-weight: 400; color: #555; margin: 20px 0 8px 0; font-size: 13px;">On ${formattedDate}, ${sender} wrote:</div>
            <blockquote style="margin: 0; padding: 10px 0 10px 15px; border-left: 2px solid #ddd; color: #505050; background-color: #f9f9f9; border-radius: 4px;">
              <div style="font-size: 13px;">
                ${content}
              </div>
            </blockquote>
          `;
          
          setEmailContent(replyContent);
          
          // Show CC field if there are CC recipients
          if (initialEmail.cc && initialEmail.cc.length > 0) {
            setShowCc(true);
          }
        } 
        else if (type === 'forward') {
          // Set subject with Fwd: prefix
          const subjectBase = initialEmail.subject || '(No subject)';
          const subject = subjectBase.match(/^(Fwd|FW|Forward):/i) ? subjectBase : `Fwd: ${subjectBase}`;
          setSubject(subject);
          
          // Format the forward content with the original email included directly
          const content = initialEmail.content || initialEmail.html || initialEmail.text || '';
          const fromString = formatEmailAddresses(initialEmail.from || []);
          const toString = formatEmailAddresses(initialEmail.to || []);
          const date = initialEmail.date ? 
            (typeof initialEmail.date === 'string' ? new Date(initialEmail.date) : initialEmail.date) : 
            new Date();
          
          // Format date for display
          const formattedDate = date.toLocaleString('en-US', {
            weekday: 'short',
            year: 'numeric',
            month: 'short',
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
          });
          
          // Create forwarded content
          const forwardContent = `
            <div><br></div>
            <div><br></div>
            <div><br></div>
            <div><br></div>
            <div style="border-top: 1px solid #ccc; margin-top: 10px; padding-top: 10px;">
              <div style="font-family: Arial, sans-serif; color: #333;">
                <div style="margin-bottom: 15px;">
                  <div>---------- Forwarded message ---------</div>
                  <div><b>From:</b> ${fromString}</div>
                  <div><b>Date:</b> ${formattedDate}</div>
                  <div><b>Subject:</b> ${initialEmail.subject || ''}</div>
                  <div><b>To:</b> ${toString}</div>
                </div>
                <div class="email-original-content">
                  ${content}
                </div>
              </div>
            </div>
          `;
          
          setEmailContent(forwardContent);
          
          // If the original email has attachments, we should include them
          if (initialEmail.attachments && initialEmail.attachments.length > 0) {
            const formattedAttachments = initialEmail.attachments.map(att => ({
              name: att.filename || 'attachment',
              type: att.contentType || 'application/octet-stream',
              content: att.content || ''
            }));
            setAttachments(formattedAttachments);
          }
        }
      } catch (error) {
        console.error('Error initializing compose form:', error);
      }
    }
  }, [initialEmail, type]);
  
  // Handle file attachments
  const handleAttachmentAdd = async (files: FileList) => {
    const newAttachments = Array.from(files).map(file => ({
      name: file.name,
      type: file.type,
      content: URL.createObjectURL(file)
    }));
    
    setAttachments(prev => [...prev, ...newAttachments]);
  };
  
  const handleAttachmentRemove = (index: number) => {
    setAttachments(prev => prev.filter((_, i) => i !== index));
  };
  
  // Handle sending email
  const handleSend = async () => {
    if (!to) {
      alert('Please specify at least one recipient');
      return;
    }
    
    setSending(true);
    
    try {
      await onSend({
        to,
        cc: cc || undefined,
        bcc: bcc || undefined,
        subject,
        body: emailContent,
        attachments
      });
      
      // Reset form and close
      onClose();
    } catch (error) {
      console.error('Error sending email:', error);
      alert('Failed to send email. Please try again.');
    } finally {
      setSending(false);
    }
  };
  
  // Additional effect to ensure we scroll to the top and focus the editor
  useEffect(() => {
    // Focus the editor and ensure it's scrolled to the top
    const editorContainer = document.querySelector('.ql-editor') as HTMLElement;
    if (editorContainer) {
      // Set timeout to ensure DOM is fully rendered
      setTimeout(() => {
        // Focus the editor
        editorContainer.focus();
        
        // Make sure all scroll containers are at the top
        editorContainer.scrollTop = 0;
        
        // Find all possible scrollable parent containers
        const scrollContainers = [
          document.querySelector('.ql-container') as HTMLElement,
          document.querySelector('.rich-email-editor-container') as HTMLElement,
          document.querySelector('.h-full.flex.flex-col.p-6') as HTMLElement
        ];
        
        // Scroll all containers to top
        scrollContainers.forEach(container => {
          if (container) {
            container.scrollTop = 0;
          }
        });
      }, 100);
    }
  }, []);
  
  return (
    <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 bg-white rounded-lg shadow-xl flex flex-col">
        {/* Modal Header */}
        <div className="flex items-center justify-between px-4 py-2 border-b border-gray-200">
          <h3 className="text-lg font-medium text-gray-900">
            {type === 'reply' ? 'Reply' : type === 'forward' ? 'Forward' : type === 'reply-all' ? 'Reply All' : 'New Message'}
          </h3>
          <Button
            variant="ghost"
            size="icon"
            className="hover:bg-gray-100 rounded-full"
            onClick={onClose}
          >
            <X className="h-5 w-5 text-gray-500" />
          </Button>
        </div>

        {/* Modal Body */}
        <div className="flex-1 overflow-hidden">
          <div className="flex flex-col p-4 space-y-3 overflow-y-auto">
            {/* To Field */}
            <div>
              <Label htmlFor="to" className="block text-sm font-medium text-gray-700">To</Label>
              <Input
                id="to"
                value={to}
                onChange={(e) => setTo(e.target.value)}
                placeholder="recipient@example.com"
                className="w-full mt-1 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={cc}
                  onChange={(e) => setCc(e.target.value)}
                  placeholder="cc@example.com"
                  className="w-full mt-1 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={bcc}
                  onChange={(e) => setBcc(e.target.value)}
                  placeholder="bcc@example.com"
                  className="w-full mt-1 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={subject}
                onChange={(e) => setSubject(e.target.value)}
                placeholder="Enter subject"
                className="w-full mt-1 border-gray-300 text-gray-900"
              />
            </div>

            {/* Message Body */}
            <div className="min-h-[300px] flex flex-col">
              <Label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-1">Message</Label>
              <RichEmailEditor
                initialContent={emailContent}
                onChange={setEmailContent}
                minHeight="300px"
                maxHeight="400px"
                preserveFormatting={true}
              />
            </div>
            
            {/* Attachments */}
            {attachments.length > 0 && (
              <div className="border rounded-md p-3">
                <h3 className="text-sm font-medium mb-2 text-gray-700">Attachments</h3>
                <div className="space-y-2">
                  {attachments.map((file, index) => (
                    <div key={index} className="flex items-center justify-between text-sm border rounded p-2">
                      <span className="truncate max-w-[200px] text-gray-800">{file.name}</span>
                      <Button 
                        variant="ghost"
                        size="sm"
                        onClick={() => handleAttachmentRemove(index)}
                        className="h-6 w-6 p-0 text-gray-500 hover:text-gray-700"
                      >
                        <X className="h-4 w-4" />
                      </Button>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>
        </div>

        {/* Modal Footer */}
        <div className="flex items-center justify-between px-4 py-2 border-t border-gray-200">
          <div className="flex items-center gap-2">
            {/* File Input for Attachments */}
            <input
              type="file"
              id="file-attachment"
              className="hidden"
              multiple
              onChange={(e) => {
                if (e.target.files && e.target.files.length > 0) {
                  handleAttachmentAdd(e.target.files);
                }
              }}
            />
            <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>
            {sending && <span className="text-xs text-gray-500 ml-2">Preparing attachment...</span>}
          </div>
          <div className="flex items-center gap-3">
            <Button 
              variant="ghost"
              className="text-gray-600 hover:text-gray-700 hover:bg-gray-100"
              onClick={onClose}
              disabled={sending}
            >
              Cancel
            </Button>
            <Button
              className="bg-blue-600 text-white hover:bg-blue-700"
              onClick={handleSend}
              disabled={sending}
            >
              {sending ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Sending...
                </>
              ) : (
                <>
                  <SendHorizontal className="mr-2 h-4 w-4" />
                  Send
                </>
              )}
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}

// Legacy adapter to maintain backward compatibility
function LegacyAdapter({
  showCompose,
  setShowCompose,
  composeTo,
  setComposeTo,
  composeCc,
  setComposeCc,
  composeBcc,
  setComposeBcc,
  composeSubject,
  setComposeSubject,
  composeBody,
  setComposeBody,
  showCc,
  setShowCc,
  showBcc,
  setShowBcc,
  attachments,
  setAttachments,
  handleSend,
  originalEmail,
  onSend,
  onCancel,
  replyTo,
  forwardFrom
}: LegacyComposeEmailProps) {
  const [sending, setSending] = useState(false);
  
  // Determine the type based on legacy props
  const determineType = (): 'new' | 'reply' | 'reply-all' | 'forward' => {
    if (originalEmail?.type === 'forward') return 'forward';
    if (originalEmail?.type === 'reply-all') return 'reply-all';
    if (originalEmail?.type === 'reply') return 'reply';
    if (replyTo) return 'reply';
    if (forwardFrom) return 'forward';
    return 'new';
  };
  
  // Format legacy content on mount if necessary
  useEffect(() => {
    // Only format if we have original email and no content was set yet
    if ((originalEmail || replyTo || forwardFrom) && 
       (!composeBody || composeBody === '<p></p>' || composeBody === '<br>')) {
      
      const type = determineType();
      
      if (type === 'reply' || type === 'reply-all') {
        // For reply, format with sender info and original content
        const content = originalEmail?.content || '';
        const sender = replyTo?.name || replyTo?.email || 'Unknown sender';
        const date = new Date().toLocaleString('en-US', {
          weekday: 'short',
          year: 'numeric', 
          month: 'short',
          day: 'numeric',
          hour: '2-digit',
          minute: '2-digit'
        });
        
        const replyContent = `
          <div><br></div>
          <div><br></div>
          <div><br></div>
          <div><br></div>
          <div style="font-weight: 400; color: #555; margin: 20px 0 8px 0; font-size: 13px;">On ${date}, ${sender} wrote:</div>
          <blockquote style="margin: 0; padding: 10px 0 10px 15px; border-left: 2px solid #ddd; color: #505050; background-color: #f9f9f9; border-radius: 4px;">
            <div style="font-size: 13px;">
              ${content}
            </div>
          </blockquote>
        `;
        
        setComposeBody(replyContent);
      }
      else if (type === 'forward') {
        // For forward, format with original message details
        const content = originalEmail?.content || '';
        const fromString = forwardFrom?.name || forwardFrom?.email || 'Unknown';
        const toString = 'Recipients';
        const date = new Date().toLocaleString('en-US', {
          weekday: 'short',
          year: 'numeric',
          month: 'short',
          day: 'numeric',
          hour: '2-digit',
          minute: '2-digit'
        });
        
        const forwardContent = `
          <div><br></div>
          <div><br></div>
          <div><br></div>
          <div><br></div>
          <div style="border-top: 1px solid #ccc; margin-top: 10px; padding-top: 10px;">
            <div style="font-family: Arial, sans-serif; color: #333;">
              <div style="margin-bottom: 15px;">
                <div>---------- Forwarded message ---------</div>
                <div><b>From:</b> ${fromString}</div>
                <div><b>Date:</b> ${date}</div>
                <div><b>Subject:</b> ${composeSubject || ''}</div>
                <div><b>To:</b> ${toString}</div>
              </div>
              <div class="email-original-content">
                ${content}
              </div>
            </div>
          </div>
        `;
        
        setComposeBody(forwardContent);
      }
    }
  }, [originalEmail, replyTo, forwardFrom, composeBody, determineType, composeSubject]);
  
  // Converts attachments to the expected format
  const convertAttachments = () => {
    return attachments.map(att => ({
      name: att.name || att.filename || 'attachment',
      content: att.content || '',
      type: att.type || att.contentType || 'application/octet-stream'
    }));
  };
  
  // Handle sending in the legacy format
  const handleLegacySend = async () => {
    setSending(true);
    
    try {
      if (onSend) {
        // New API
        await onSend({
          to: composeTo,
          cc: composeCc,
          bcc: composeBcc,
          subject: composeSubject,
          body: composeBody,
          attachments: convertAttachments()
        });
      } else if (handleSend) {
        // Old API
        await handleSend();
      }
      
      // Close compose window
      setShowCompose(false);
    } catch (error) {
      console.error('Error sending email:', error);
      alert('Failed to send email. Please try again.');
    } finally {
      setSending(false);
    }
  };
  
  // Handle file selection for legacy interface
  const handleFileSelection = (files: FileList) => {
    const newAttachments = Array.from(files).map(file => ({
      name: file.name,
      type: file.type,
      content: URL.createObjectURL(file),
      size: file.size
    }));
    
    setAttachments([...attachments, ...newAttachments]);
  };
  
  if (!showCompose) return null;
  
  return (
    <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 bg-white rounded-lg shadow-xl flex flex-col">
        {/* Modal Header */}
        <div className="flex items-center justify-between px-4 py-2 border-b border-gray-200">
          <h3 className="text-lg font-medium text-gray-900">
            {determineType() === 'reply' ? 'Reply' : determineType() === 'forward' ? 'Forward' : determineType() === 'reply-all' ? 'Reply All' : 'New Message'}
          </h3>
          <Button
            variant="ghost"
            size="icon"
            className="hover:bg-gray-100 rounded-full"
            onClick={() => {
              if (onCancel) onCancel();
              setShowCompose(false);
            }}
          >
            <X className="h-5 w-5 text-gray-500" />
          </Button>
        </div>

        {/* Modal Body */}
        <div className="flex-1 overflow-hidden">
          <div className="flex flex-col p-4 space-y-3 overflow-y-auto">
            {/* 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 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 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 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 border-gray-300 text-gray-900"
              />
            </div>

            {/* Message Body */}
            <div className="min-h-[300px] flex flex-col">
              <Label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-1">Message</Label>
              <RichEmailEditor
                initialContent={composeBody}
                onChange={setComposeBody}
                minHeight="300px"
                maxHeight="400px"
                preserveFormatting={true}
              />
            </div>
            
            {/* Attachments */}
            {attachments.length > 0 && (
              <div className="border rounded-md p-3">
                <h3 className="text-sm font-medium mb-2 text-gray-700">Attachments</h3>
                <div className="space-y-2">
                  {attachments.map((file, index) => (
                    <div key={index} className="flex items-center justify-between text-sm border rounded p-2">
                      <span className="truncate max-w-[200px] text-gray-800">{file.name || file.filename}</span>
                      <Button 
                        variant="ghost"
                        size="sm"
                        onClick={() => setAttachments(attachments.filter((_, i) => i !== index))}
                        className="h-6 w-6 p-0 text-gray-500 hover:text-gray-700"
                      >
                        <X className="h-4 w-4" />
                      </Button>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>
        </div>

        {/* Modal Footer */}
        <div className="flex items-center justify-between px-4 py-2 border-t border-gray-200">
          <div className="flex items-center gap-2">
            {/* File Input for Attachments */}
            <input
              type="file"
              id="file-attachment-legacy"
              className="hidden"
              multiple
              onChange={(e) => {
                if (e.target.files && e.target.files.length > 0) {
                  handleFileSelection(e.target.files);
                }
              }}
            />
            <label htmlFor="file-attachment-legacy">
              <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-legacy')?.click();
                }}
              >
                <Paperclip className="h-4 w-4 text-gray-600" />
              </Button>
            </label>
            {sending && <span className="text-xs text-gray-500 ml-2">Preparing attachment...</span>}
          </div>
          <div className="flex items-center gap-3">
            <Button 
              variant="ghost"
              className="text-gray-600 hover:text-gray-700 hover:bg-gray-100"
              onClick={() => {
                if (onCancel) onCancel();
                setShowCompose(false);
              }}
              disabled={sending}
            >
              Cancel
            </Button>
            <Button
              className="bg-blue-600 text-white hover:bg-blue-700"
              onClick={handleLegacySend}
              disabled={sending}
            >
              {sending ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Sending...
                </>
              ) : (
                <>
                  <SendHorizontal className="mr-2 h-4 w-4" />
                  Send
                </>
              )}
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
} 