'use client';

import { useState, useRef, useEffect } from 'react';
import { 
  X, Paperclip, SendHorizontal, Loader2, Plus, ChevronDown
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import DOMPurify from 'isomorphic-dompurify';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import RichEmailEditor from '@/components/email/RichEmailEditor';
import { detectTextDirection } from '@/lib/utils/text-direction';

// Import from the centralized utils
import { 
  formatReplyEmail, 
  formatForwardedEmail
} from '@/lib/utils/email-utils';
import { EmailMessage } from '@/types/email';

/**
 * Email composer component
 * Handles new emails, replies, and forwards with a clean UI
 */
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;
    fromAccount?: string;
    attachments?: Array<{
      name: string;
      content: string;
      type: string;
    }>;
  }) => Promise<void>;
  accounts?: Array<{
    id: string;
    email: string;
    display_name?: string;
  }>;
}

export default function ComposeEmail(props: ComposeEmailProps) {
  const { initialEmail, type = 'new', onClose, onSend, accounts = [] } = props;
  
  // State for email form
  const [selectedAccount, setSelectedAccount] = useState<any>(accounts[0]);
  const [to, setTo] = useState('');
  const [cc, setCc] = useState('');
  const [bcc, setBcc] = useState('');
  const [subject, setSubject] = useState('');
  const [emailContent, setEmailContent] = useState('');
  const [showCc, setShowCc] = useState(false);
  const [showBcc, setShowBcc] = useState(false);
  const [sending, setSending] = useState(false);
  const [attachments, setAttachments] = useState<Array<{name: string; content: string; type: string;}>>([]);
  
  // Reference to editor
  const editorRef = useRef<HTMLDivElement>(null);

  // Helper function to get formatted info from email
  function getFormattedInfoForEmail(email: any) {
    // Format the subject
    const subject = email.subject || '';

    // Format the date
    const dateStr = email.date ? new Date(email.date).toLocaleString() : 'Unknown Date';
    
    // Format sender
    const fromStr = Array.isArray(email.from)
      ? email.from.map((addr: any) => {
          if (typeof addr === 'string') return addr;
          return addr.name ? `${addr.name} <${addr.address}>` : addr.address;
        }).join(', ')
      : typeof email.from === 'string'
        ? email.from
        : email.from?.address
          ? email.from.name
            ? `${email.from.name} <${email.from.address}>`
            : email.from.address
          : 'Unknown Sender';
    
    // Format recipients
    const toStr = Array.isArray(email.to)
      ? email.to.map((addr: any) => {
          if (typeof addr === 'string') return addr;
          return addr.name ? `${addr.name} <${addr.address}>` : addr.address;
        }).join(', ')
      : typeof email.to === 'string'
        ? email.to
        : '';
    
    // Format CC 
    const ccStr = Array.isArray(email.cc)
      ? email.cc.map((addr: any) => {
          if (typeof addr === 'string') return addr;
          return addr.name ? `${addr.name} <${addr.address}>` : addr.address;
        }).join(', ')
      : typeof email.cc === 'string'
        ? email.cc
        : '';

    return { fromStr, toStr, ccStr, dateStr, subject };
  }
  
  // Initialize email form based on initial email and type
  useEffect(() => {
    if (initialEmail) {
      try {
        console.log('Initializing compose with email:', {
          id: initialEmail.id,
          subject: initialEmail.subject,
          hasContent: !!initialEmail.content,
          contentType: initialEmail.content ? typeof initialEmail.content : 'none'
        });
        
        // Set default account from original email - use type assertion since accountId might be custom property
        const emailAny = initialEmail as any;
        if (emailAny.accountId && accounts?.length) {
          const account = accounts.find(a => a.id === emailAny.accountId);
          if (account) {
            setSelectedAccount(account);
          }
        }
        
        // Get recipients based on type
        if (type === 'reply' || type === 'reply-all') {
          // Get formatted data for reply
          const formatted = formatReplyEmail(initialEmail, type);
          
          // Set reply addresses
          setTo(formatted.to);
          if (formatted.cc) {
            setShowCc(true);
            setCc(formatted.cc);
          }
          
          // Set subject
          setSubject(formatted.subject);
          
          // Set content with original email - ensure we have content
          const content = formatted.content.html || formatted.content.text || '';
          
          if (!content) {
            console.warn('Reply content is empty, falling back to a basic template');
            // Provide a basic template if the content is empty
            const { fromStr, dateStr } = getFormattedInfoForEmail(initialEmail);
            const fallbackContent = `
              <div style="margin: 20px 0 10px 0; color: #666; border-bottom: 1px solid #ddd; padding-bottom: 5px;">
                On ${dateStr}, ${fromStr} wrote:
              </div>
              <blockquote style="margin: 0; padding-left: 10px; border-left: 3px solid #ddd; color: #505050; background-color: #f9f9f9; padding: 10px;">
                [Original message content could not be loaded]
              </blockquote>
            `;
            setEmailContent(fallbackContent);
          } else {
            console.log('Setting reply content:', {
              length: content.length,
              isHtml: formatted.content.isHtml,
              startsWithHtml: content.trim().startsWith('<'),
              contentType: typeof content
            });
            setEmailContent(content);
          }
          
          // Handle any attachments from reply (e.g., inline images extracted as attachments)
          if (formatted.attachments && formatted.attachments.length > 0) {
            const formattedAttachments = formatted.attachments.map(att => ({
              name: att.filename || 'attachment',
              type: att.contentType || 'application/octet-stream',
              content: att.content || ''
            }));
            setAttachments(formattedAttachments);
          }
        }
        else if (type === 'forward') {
          // Get formatted data for forward
          const formatted = formatForwardedEmail(initialEmail);
          
          // Set subject
          setSubject(formatted.subject);
          
          // Set content with original email - ensure we have content
          const content = formatted.content.html || formatted.content.text || '';
          
          if (!content) {
            console.warn('Forward content is empty, falling back to a basic template');
            // Provide a basic template if the content is empty
            const { fromStr, dateStr, subject: origSubject, toStr, ccStr } = getFormattedInfoForEmail(initialEmail);
            console.log('Creating forward fallback with:', { fromStr, dateStr, origSubject });
            const fallbackContent = `
              <div style="margin: 20px 0 10px 0; color: #666; font-family: Arial, sans-serif;">
                <div style="border-bottom: 1px solid #ccc; margin-bottom: 10px; padding-bottom: 5px;">
                  <div>---------------------------- Forwarded Message ----------------------------</div>
                </div>
                <table style="margin-bottom: 10px; font-size: 14px;">
                  <tr>
                    <td style="padding: 3px 10px 3px 0; font-weight: bold; text-align: right; vertical-align: top;">From:</td>
                    <td style="padding: 3px 0;">${fromStr}</td>
                  </tr>
                  <tr>
                    <td style="padding: 3px 10px 3px 0; font-weight: bold; text-align: right; vertical-align: top;">Date:</td>
                    <td style="padding: 3px 0;">${dateStr}</td>
                  </tr>
                  <tr>
                    <td style="padding: 3px 10px 3px 0; font-weight: bold; text-align: right; vertical-align: top;">Subject:</td>
                    <td style="padding: 3px 0;">${origSubject || ''}</td>
                  </tr>
                  <tr>
                    <td style="padding: 3px 10px 3px 0; font-weight: bold; text-align: right; vertical-align: top;">To:</td>
                    <td style="padding: 3px 0;">${toStr}</td>
                  </tr>
                  ${ccStr ? `
                  <tr>
                    <td style="padding: 3px 10px 3px 0; font-weight: bold; text-align: right; vertical-align: top;">Cc:</td>
                    <td style="padding: 3px 0;">${ccStr}</td>
                  </tr>` : ''}
                </table>
                <div style="border-bottom: 1px solid #ccc; margin-top: 5px; margin-bottom: 15px; padding-bottom: 5px;">
                  <div>----------------------------------------------------------------------</div>
                </div>
              </div>
              <div class="forwarded-content" style="margin: 0; color: #333;">
                [Original message content could not be loaded]
              </div>
            `;
            setEmailContent(fallbackContent);
          } else {
            console.log('Setting forward content:', {
              length: content.length,
              isHtml: formatted.content.isHtml
            });
            setEmailContent(content);
          }
          
          // Handle attachments for forward (original attachments + extracted inline images)
          if (formatted.attachments && formatted.attachments.length > 0) {
            console.log(`Processing ${formatted.attachments.length} attachments for forwarded email`);
            const formattedAttachments = formatted.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);
        // Provide a fallback in case of error
        setEmailContent('<p>Error loading email content</p>');
      }
    }
  }, [initialEmail, type, accounts]);
  
  // Place cursor at beginning and ensure content is scrolled to top
  useEffect(() => {
    if (editorRef.current && type !== 'new') {
      // Small delay to ensure DOM is ready
      setTimeout(() => {
        if (editorRef.current) {
          // Focus the editor
          editorRef.current.focus();
          
          // Also make sure editor container is scrolled to top
          editorRef.current.scrollTop = 0;
          
          // Find parent scrollable containers and scroll them to top
          let parent = editorRef.current.parentElement;
          while (parent) {
            if (parent.classList.contains('overflow-y-auto')) {
              parent.scrollTop = 0;
            }
            parent = parent.parentElement;
          }
        }
      }, 100);
    }
  }, [emailContent, 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,
        fromAccount: selectedAccount?.id,
        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);
    }
  };
  
  // Get compose title based on type
  const getComposeTitle = () => {
    switch(type) {
      case 'reply': return 'Reply';
      case 'reply-all': return 'Reply All';
      case 'forward': return 'Forward';
      default: return 'New Message';
    }
  };
  
  return (
    <div className="flex flex-col h-full max-h-[80vh] bg-white border rounded-md shadow-md">
      {/* Header */}
      <div className="flex items-center justify-between p-3 border-b bg-gray-50">
        <h2 className="text-lg font-medium text-gray-800">{getComposeTitle()}</h2>
        <Button variant="ghost" size="icon" onClick={onClose}>
          <X className="h-5 w-5" />
        </Button>
      </div>
      
      {/* Email Form */}
      <div className="flex-1 overflow-y-auto bg-white">
        <div className="p-2 space-y-2">
          {/* From */}
          <div className="border-b pb-1">
            <div className="flex items-center">
              <span className="w-16 text-gray-700 text-sm font-medium">From:</span>
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button 
                    variant="outline" 
                    className="w-full flex justify-between items-center h-8 px-2 py-1 text-left font-normal bg-white text-gray-800 border-gray-200"
                  >
                    <span className="truncate">
                      {selectedAccount ? 
                        (selectedAccount.display_name ? 
                          `${selectedAccount.display_name} <${selectedAccount.email}>` : 
                          selectedAccount.email) : 
                        'Select account'}
                    </span>
                    <ChevronDown className="h-4 w-4 opacity-50" />
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="start" className="w-[240px]">
                  <DropdownMenuLabel>Select account</DropdownMenuLabel>
                  <DropdownMenuSeparator />
                  {accounts.length > 0 ? (
                    accounts.map(account => (
                      <DropdownMenuItem 
                        key={account.id}
                        onClick={() => setSelectedAccount(account)}
                        className="cursor-pointer hover:bg-blue-50 focus:bg-blue-50"
                      >
                        {account.display_name ? 
                          `${account.display_name} <${account.email}>` : 
                          account.email}
                      </DropdownMenuItem>
                    ))
                  ) : (
                    <DropdownMenuItem disabled>No accounts available</DropdownMenuItem>
                  )}
                </DropdownMenuContent>
              </DropdownMenu>
            </div>
          </div>
          
          {/* Recipients */}
          <div className="border-b pb-1">
            <div className="flex items-center">
              <span className="w-16 text-gray-700 text-sm font-medium">To:</span>
              <Input 
                type="text"
                value={to}
                onChange={(e) => setTo(e.target.value)}
                placeholder="recipient@example.com"
                className="flex-1 border-0 shadow-none focus-visible:ring-0 px-0 h-8 bg-white text-gray-800"
              />
            </div>
            
            {showCc && (
              <div className="flex items-center">
                <span className="w-16 text-gray-700 text-sm font-medium">Cc:</span>
                <Input 
                  type="text"
                  value={cc}
                  onChange={(e) => setCc(e.target.value)}
                  placeholder="cc@example.com"
                  className="flex-1 border-0 shadow-none focus-visible:ring-0 px-0 h-8 bg-white text-gray-800"
                />
              </div>
            )}
            
            {showBcc && (
              <div className="flex items-center">
                <span className="w-16 text-gray-700 text-sm font-medium">Bcc:</span>
                <Input 
                  type="text"
                  value={bcc}
                  onChange={(e) => setBcc(e.target.value)}
                  placeholder="bcc@example.com"
                  className="flex-1 border-0 shadow-none focus-visible:ring-0 px-0 h-8 bg-white text-gray-800"
                />
              </div>
            )}
            
            {/* CC/BCC Toggle Links */}
            <div className="flex gap-3 ml-16">
              {!showCc && (
                <button 
                  className="text-blue-600 text-sm hover:underline"
                  onClick={() => setShowCc(true)}
                >
                  Add Cc
                </button>
              )}
              
              {!showBcc && (
                <button 
                  className="text-blue-600 text-sm hover:underline"
                  onClick={() => setShowBcc(true)}
                >
                  Add Bcc
                </button>
              )}
            </div>
          </div>
          
          {/* Subject */}
          <div className="border-b pb-1">
            <div className="flex items-center">
              <span className="w-16 text-gray-700 text-sm font-medium">Subject:</span>
              <Input 
                type="text"
                value={subject}
                onChange={(e) => setSubject(e.target.value)}
                placeholder="Subject"
                className="flex-1 border-0 shadow-none focus-visible:ring-0 px-0 h-8 bg-white text-gray-800"
              />
            </div>
          </div>
          
          {/* Message Body */}
          <RichEmailEditor
            initialContent={emailContent}
            onChange={(html) => {
              setEmailContent(html);
            }}
            placeholder="Write your message here..."
            minHeight="320px"
          />
          
          {/* Attachments */}
          {attachments.length > 0 && (
            <div className="p-2 border rounded-md bg-gray-50">
              <div className="text-sm font-medium mb-1 text-gray-700">Attachments:</div>
              {attachments.map((file, index) => (
                <div key={index} className="flex items-center justify-between text-sm py-1">
                  <span className="truncate mr-2 text-gray-800">{file.name}</span>
                  <Button 
                    variant="ghost"
                    size="sm"
                    onClick={() => handleAttachmentRemove(index)}
                    className="h-6 w-6 p-0"
                  >
                    <X className="h-4 w-4" />
                  </Button>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
      
      {/* Footer */}
      <div className="border-t p-3 flex items-center justify-between bg-gray-50">
        <div className="flex items-center gap-2">
          {/* File Input for Attachments - simpler version */}
          <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" className="cursor-pointer">
            <Button 
              variant="ghost" 
              size="sm"
              className="p-1 text-gray-700 hover:bg-gray-100"
              title="Attach files"
            >
              <Paperclip className="h-5 w-5" />
            </Button>
          </label>
        </div>
        
        <div className="flex items-center gap-2">
          <Button 
            variant="default"
            onClick={onClose}
            className="bg-red-600 hover:bg-red-700 text-white"
          >
            Cancel
          </Button>
          
          <Button
            variant="default"
            onClick={handleSend}
            disabled={sending}
            className="bg-blue-600 hover:bg-blue-700 text-white"
          >
            {sending ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                Sending
              </>
            ) : (
              <>
                <SendHorizontal className="mr-2 h-4 w-4" />
                Send
              </>
            )}
          </Button>
        </div>
      </div>
      
      {/* Styles for email content */}
      <style jsx global>{`
        [contenteditable] {
          -webkit-user-modify: read-write-plaintext-only;
          overflow-wrap: break-word;
          -webkit-line-break: after-white-space;
          -webkit-user-select: text;
          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
          font-size: 14px;
          line-height: 1.5;
          color: #333;
          background-color: #fff;
        }
        
        [contenteditable]:focus {
          outline: none;
        }
        
        [contenteditable] blockquote {
          margin: 10px 0;
          padding-left: 15px;
          border-left: 2px solid #ddd;
          color: #666;
        }
        
        [contenteditable] img {
          max-width: 100%;
          height: auto;
        }
        
        [contenteditable] table {
          border-collapse: collapse;
          width: 100%;
          max-width: 100%;
          margin-bottom: 1rem;
        }
        
        [contenteditable] th,
        [contenteditable] td {
          padding: 5px;
          border: 1px solid #ddd;
        }
        
        [contenteditable] th {
          background-color: #f8f9fa;
          font-weight: 600;
          text-align: left;
        }
        
        /* Forwarded message styles */
        .email-original-content {
          margin-top: 20px;
          color: #505050;
        }
      `}</style>
    </div>
  );
}