'use client';

import React, { useEffect, useRef, useState } from 'react';
import 'quill/dist/quill.snow.css';
import { sanitizeHtml } from '@/lib/utils/dom-purify-config';
import { detectTextDirection } from '@/lib/utils/text-direction';
import { processHtmlContent } from '@/lib/utils/email-content';

interface RichEmailEditorProps {
  initialContent: string;
  onChange: (content: string) => void;
  placeholder?: string;
  minHeight?: string;
  maxHeight?: string;
  preserveFormatting?: boolean;
}

/**
 * Clean up problematic table structures that cause issues with quill-better-table
 */
function cleanupTableStructures(htmlContent: string, isReplyOrForward: boolean = false): string {
  if (!htmlContent) return htmlContent;
  
  try {
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = htmlContent;
    
    // Find tables with problematic nested structures
    const tables = tempDiv.querySelectorAll('table');
    
    // Check if content looks like a forwarded email or reply content
    const isForwardedEmail = 
      htmlContent.includes('---------- Forwarded message ----------') || 
      htmlContent.includes('Forwarded message') ||
      htmlContent.includes('forwarded message') ||
      (htmlContent.includes('From:') && htmlContent.includes('Date:') && htmlContent.includes('Subject:'));
    
    const isReplyEmail = 
      htmlContent.includes('wrote:') ||
      htmlContent.includes('<blockquote') ||
      htmlContent.includes('gmail_quote');
    
    // For reply/forward content, force convert ALL tables to divs to avoid Quill errors
    const shouldConvertAllTables = isReplyOrForward || isForwardedEmail || isReplyEmail;
    
    if (tables.length > 0) {
      console.log(`Found ${tables.length} tables in ${shouldConvertAllTables ? 'reply/forward' : 'regular'} content`);
      
      let convertedCount = 0;
      tables.forEach(table => {
        // In reply/forward mode, convert ALL tables to divs to avoid quill-better-table issues
        if (shouldConvertAllTables) {
          const replacementDiv = document.createElement('div');
          replacementDiv.className = 'converted-table';
          replacementDiv.style.border = '1px solid #ddd';
          replacementDiv.style.margin = '10px 0';
          replacementDiv.style.padding = '10px';
          
          // Preserve the original table structure visually
          // Create a simplified HTML representation of the table
          let tableHtml = '';
          
          // Process each row
          const rows = table.querySelectorAll('tr');
          rows.forEach(row => {
            const rowDiv = document.createElement('div');
            rowDiv.style.display = 'flex';
            rowDiv.style.flexWrap = 'wrap';
            rowDiv.style.marginBottom = '5px';
            
            // Process each cell in the row
            const cells = row.querySelectorAll('td, th');
            cells.forEach(cell => {
              const cellDiv = document.createElement('div');
              cellDiv.style.flex = '1';
              cellDiv.style.padding = '5px';
              cellDiv.style.borderBottom = '1px solid #eee';
              cellDiv.innerHTML = cell.innerHTML;
              rowDiv.appendChild(cellDiv);
            });
            
            replacementDiv.appendChild(rowDiv);
          });
          
          // If no rows were processed, just use the table's inner HTML
          if (rows.length === 0) {
            replacementDiv.innerHTML = table.innerHTML;
          }
          
          // Replace the table with the div
          if (table.parentNode) {
            table.parentNode.replaceChild(replacementDiv, table);
            convertedCount++;
          }
        } 
        // For regular content, just add width attributes to make quill-better-table happy
        else {
          // Skip simple tables that are likely to work fine with Quill
          // Check more conditions to identify simple tables
          const isSimpleTable = 
            table.rows.length <= 3 && 
            table.querySelectorAll('td, th').length <= 6 &&
            !table.querySelector('table') && // No nested tables
            !table.innerHTML.includes('rowspan') && // No rowspan
            !table.innerHTML.includes('colspan'); // No colspan
            
          if (isSimpleTable) {
            console.log('Preserving simple table structure');
            // Add width attribute
            table.setAttribute('width', '100%');
            
            // Add width to cells
            const cells = table.querySelectorAll('td, th');
            cells.forEach(cell => {
              if (cell instanceof HTMLTableCellElement && !cell.hasAttribute('width')) {
                cell.setAttribute('width', '100');
              }
            });
          } else {
            // Convert complex tables to divs
            const replacementDiv = document.createElement('div');
            replacementDiv.className = 'converted-table';
            replacementDiv.style.border = '1px solid #ddd';
            replacementDiv.style.margin = '10px 0';
            replacementDiv.style.padding = '10px';
            
            // Copy the table's innerHTML
            replacementDiv.innerHTML = table.innerHTML;
            
            // Replace the table with the div
            if (table.parentNode) {
              table.parentNode.replaceChild(replacementDiv, table);
              convertedCount++;
            }
          }
        }
      });
      
      console.log(`Converted ${convertedCount} tables to divs to prevent Quill errors`);
      return tempDiv.innerHTML;
    }
    
    return htmlContent;
  } catch (error) {
    console.error('Error cleaning up table structures:', error);
    return htmlContent;
  }
}

const RichEmailEditor: React.FC<RichEmailEditorProps> = ({
  initialContent,
  onChange,
  placeholder = 'Write your message here...',
  minHeight = '200px',
  maxHeight = 'calc(100vh - 400px)',
  preserveFormatting = false,
}) => {
  const editorRef = useRef<HTMLDivElement>(null);
  const toolbarRef = useRef<HTMLDivElement>(null);
  const quillRef = useRef<any>(null);
  const [isReady, setIsReady] = useState(false);
  const [isReplyOrForward, setIsReplyOrForward] = useState(false);

  // Initialize Quill editor when component mounts
  useEffect(() => {
    // Import Quill dynamically (client-side only)
    const initializeQuill = async () => {
      if (!editorRef.current || !toolbarRef.current) return;
      
      // First, detect if content is reply/forward to determine editor mode
      const contentIsReplyOrForward = initialContent ? (
        initialContent.includes('wrote:') || 
        initialContent.includes('<blockquote') ||
        initialContent.includes('Forwarded message') ||
        initialContent.includes('---------- Forwarded message ----------')
      ) : false;
      
      // Store this information for future reference
      setIsReplyOrForward(contentIsReplyOrForward);
      
      console.log('Initializing editor in', contentIsReplyOrForward ? 'reply/forward' : 'compose', 'mode');
      
      const Quill = (await import('quill')).default;
      
      // Import quill-better-table conditionally based on content type
      let tableModule = null;
      if (!contentIsReplyOrForward) {
        // Only try to load table module for regular content, not for replies/forwards
        try {
          const QuillBetterTable = await import('quill-better-table');
          
          // Register the table module if available and not in reply/forward mode
          if (QuillBetterTable && QuillBetterTable.default) {
            Quill.register({
              'modules/better-table': QuillBetterTable.default
            }, true);
            tableModule = QuillBetterTable.default;
            console.log('Better Table module registered successfully');
          }
        } catch (err) {
          console.warn('Table module not available:', err);
        }
      } else {
        console.log('Skipping better-table module for reply/forward content');
      }
      
      // Define custom formats/modules with table support
      const emailToolbarOptions = [
        ['bold', 'italic', 'underline', 'strike'],
        [{ 'color': [] }, { 'background': [] }],
        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
        [{ 'indent': '-1'}, { 'indent': '+1' }],
        [{ 'align': [] }],
        [{ 'direction': 'rtl' }], // Add direction to toolbar
        ['link'],
        ['clean'],
      ];

      // Create new Quill instance with the DOM element and custom toolbar
      const editorElement = editorRef.current;
      quillRef.current = new Quill(editorElement, {
        modules: {
          toolbar: {
            container: toolbarRef.current,
            handlers: {
              // Add any custom toolbar handlers here
            }
          },
          clipboard: {
            matchVisual: false // Disable clipboard matching for better HTML handling
          },
          // Only enable better-table for regular content, not for replies/forwards
          'better-table': tableModule && !contentIsReplyOrForward ? true : false,
        },
        placeholder: placeholder,
        theme: 'snow',
      });

      // Set initial content properly
      if (initialContent) {
        try {
          console.log('Setting initial content in editor', { 
            length: initialContent.length,
            startsWithHtml: initialContent.trim().startsWith('<'),
            containsForwardedMessage: initialContent.includes('---------- Forwarded message ----------'),
            containsReplyIndicator: initialContent.includes('wrote:'),
            hasBlockquote: initialContent.includes('<blockquote')
          });
          
          // Process HTML content using centralized utility with special settings for replies/forwards
          const processed = processHtmlContent(initialContent, {
            sanitize: true,
            preserveReplyFormat: contentIsReplyOrForward
          });
          const sanitizedContent = processed.sanitizedContent;
          const direction = processed.direction; // Use direction from processed result
          
          // Log sanitized content details for debugging
          console.log('Sanitized content details:', {
            length: sanitizedContent.length,
            isEmpty: sanitizedContent.trim().length === 0,
            startsWithDiv: sanitizedContent.trim().startsWith('<div'),
            containsForwardedMessage: sanitizedContent.includes('---------- Forwarded message ----------'),
            containsQuoteHeader: sanitizedContent.includes('wrote:'),
            hasTable: sanitizedContent.includes('<table'),
            hasBlockquote: sanitizedContent.includes('<blockquote'),
            isReplyOrForward: contentIsReplyOrForward,
            firstNChars: sanitizedContent.substring(0, 100).replace(/\n/g, '\\n')
          });
          
          // Check if sanitized content is valid
          if (sanitizedContent.trim().length === 0) {
            console.warn('Sanitized content is empty after processing, using fallback approach');
            // Try to extract text content if HTML processing failed
            try {
              const tempDiv = document.createElement('div');
              tempDiv.innerHTML = initialContent;
              const textContent = tempDiv.textContent || tempDiv.innerText || 'Empty content';
              
              // Set text directly to ensure something displays
              quillRef.current.setText(textContent);
            } catch (e) {
              console.error('Text extraction fallback failed:', e);
              quillRef.current.setText('Error loading content');
            }
          } else {
            // Special handling for reply or forwarded content
            if (contentIsReplyOrForward) {
              console.log('Using special handling for reply/forward content');
              
              // For reply/forward content, convert ALL tables to divs
              const cleanedContent = cleanupTableStructures(sanitizedContent, true);
              
              // Use direct innerHTML setting with minimal processing for reply/forward content
              quillRef.current.root.innerHTML = cleanedContent;
            } else {
              // For regular content, use normal processing
              const cleanedContent = cleanupTableStructures(sanitizedContent, false);
              
              // Use direct innerHTML setting for regular content
              quillRef.current.root.innerHTML = cleanedContent;
            }
            
            // Set the direction for the content
            if (quillRef.current && quillRef.current.format) {
              quillRef.current.format('direction', direction);
              if (direction === 'rtl') {
                quillRef.current.format('align', 'right');
              }
            } else {
              console.warn('Cannot format content: editor not fully initialized');
            }
          }
          
          // Set cursor at the beginning
          quillRef.current.setSelection(0, 0);
          
          // Ensure the cursor and scroll position is at the top of the editor
          if (editorRef.current) {
            editorRef.current.scrollTop = 0;
            
            // Find and scroll parent containers that might have scroll
            const scrollable = [
              editorRef.current.closest('.ql-container'),
              editorRef.current.closest('.rich-email-editor-container'),
              editorRef.current.closest('.overflow-y-auto'),
              document.querySelector('.overflow-y-auto')
            ];
            
            scrollable.forEach(el => {
              if (el instanceof HTMLElement) {
                el.scrollTop = 0;
              }
            });
          }
        } catch (err) {
          console.error('Error setting initial content:', err);
          
          // Enhanced fallback mechanism for complex content
          try {
            // First try to extract text from HTML
            const tempDiv = document.createElement('div');
            tempDiv.innerHTML = initialContent;
            const textContent = tempDiv.textContent || tempDiv.innerText || '';
            
            if (textContent.trim()) {
              console.log('Using extracted text fallback, length:', textContent.length);
              quillRef.current.setText(textContent);
            } else {
              // If text extraction fails or returns empty, provide a message
              console.log('Using empty content fallback');
              quillRef.current.setText('Unable to load original content');
            }
          } catch (e) {
            console.error('All fallbacks failed:', e);
            quillRef.current.setText('Error loading content');
          }
        }
      }

      // Add change listener
      quillRef.current.on('text-change', () => {
        const html = quillRef.current.root.innerHTML;
        onChange(html);
      });

      // Improve editor layout
      const editorContainer = editorElement.closest('.ql-container');
      if (editorContainer) {
        editorContainer.classList.add('email-editor-container');
      }

      setIsReady(true);
    };

    initializeQuill().catch(err => {
      console.error('Failed to initialize Quill editor:', err);
    });

    // Clean up on unmount
    return () => {
      if (quillRef.current) {
        // Clean up any event listeners or resources
        quillRef.current.off('text-change');
      }
    };
  }, []);

  // Update content from props if changed externally - using a simpler approach
  useEffect(() => {
    if (quillRef.current && isReady && initialContent) {
      const currentContent = quillRef.current.root.innerHTML;
      
      // Only update if content changed to avoid editor position reset
      if (initialContent !== currentContent) {
        try {
          console.log('Updating content in editor:', { 
            contentLength: initialContent.length,
            startsWithHtml: initialContent.trim().startsWith('<'),
            containsForwardedMessage: initialContent.includes('---------- Forwarded message ----------'),
            containsQuoteHeader: initialContent.includes('wrote:'),
            hasBlockquote: initialContent.includes('<blockquote'),
            hasTable: initialContent.includes('<table'),
            firstNChars: initialContent.substring(0, 100).replace(/\n/g, '\\n')
          });
          
          // Check if content is reply or forward to use special handling
          const contentIsReplyOrForward = 
            initialContent.includes('wrote:') || 
            initialContent.includes('<blockquote') ||
            initialContent.includes('Forwarded message') ||
            initialContent.includes('---------- Forwarded message ----------');
            
          // If content type changed (from reply to regular or vice versa), we need to reload
          if (contentIsReplyOrForward !== isReplyOrForward) {
            console.log('Content type changed from', isReplyOrForward ? 'reply/forward' : 'regular',
                       'to', contentIsReplyOrForward ? 'reply/forward' : 'regular',
                       '- reloading editor');
            setIsReplyOrForward(contentIsReplyOrForward);
            // Force a complete re-initialization of the editor by unmounting
            if (quillRef.current) {
              quillRef.current.off('text-change');
              quillRef.current = null;
            }
            setIsReady(false);
            return;
          }
          
          // Process HTML content using centralized utility
          const processed = processHtmlContent(initialContent, {
            sanitize: true,
            preserveReplyFormat: contentIsReplyOrForward
          });
          const sanitizedContent = processed.sanitizedContent;
          const direction = processed.direction; // Use direction from processed result
          
          // Log sanitized content details for debugging
          console.log('Sanitized content details:', {
            length: sanitizedContent.length,
            isEmpty: sanitizedContent.trim().length === 0,
            startsWithDiv: sanitizedContent.trim().startsWith('<div'),
            containsForwardedMessage: sanitizedContent.includes('---------- Forwarded message ----------'),
            containsQuoteHeader: sanitizedContent.includes('wrote:'),
            hasTable: sanitizedContent.includes('<table'),
            hasBlockquote: sanitizedContent.includes('<blockquote'),
            isReplyOrForward: contentIsReplyOrForward,
            firstNChars: sanitizedContent.substring(0, 100).replace(/\n/g, '\\n')
          });
          
          // Check if content is valid HTML
          if (sanitizedContent.trim().length === 0) {
            console.warn('Sanitized content is empty, using original content');
            // If sanitized content is empty, try to extract text from original
            const tempDiv = document.createElement('div');
            tempDiv.innerHTML = initialContent;
            const textContent = tempDiv.textContent || tempDiv.innerText || '';
            
            // Create simple HTML with text content
            if (quillRef.current) {
              quillRef.current.setText(textContent || 'No content available');
            }
          } else {
            // Process content based on type
            if (contentIsReplyOrForward) {
              console.log('Using special handling for reply/forward content update');
              
              // For reply/forward content, convert ALL tables to divs
              const cleanedContent = cleanupTableStructures(sanitizedContent, true);
              
              // Set content without table handling
              if (quillRef.current && quillRef.current.root) {
                quillRef.current.root.innerHTML = cleanedContent;
                
                // Delay applying formatting to ensure Quill is fully ready
                setTimeout(() => {
                  if (quillRef.current) {
                    try {
                      // Set the direction for the content
                      quillRef.current.format('direction', direction);
                      if (direction === 'rtl') {
                        quillRef.current.format('align', 'right');
                      }
                      
                      // Force update
                      quillRef.current.update();
                      
                      // Set selection to beginning
                      quillRef.current.setSelection(0, 0);
                    } catch (innerError) {
                      console.error('Error applying delayed formatting:', innerError);
                    }
                  }
                }, 100);
              }
            } else {
              // For regular content, use normal processing
              const cleanedContent = cleanupTableStructures(sanitizedContent, false);
              
              if (quillRef.current && quillRef.current.root) {
                quillRef.current.root.innerHTML = cleanedContent;
                
                // Safely apply formatting
                try {
                  quillRef.current.format('direction', direction);
                  if (direction === 'rtl') {
                    quillRef.current.format('align', 'right');
                  }
                  
                  // Force update
                  quillRef.current.update();
                  
                  // Set selection to beginning
                  quillRef.current.setSelection(0, 0);
                } catch (formatError) {
                  console.error('Error applying formatting:', formatError);
                }
              }
            }
          }
        } catch (err) {
          console.error('Error updating content:', err);
          // Safer fallback that avoids clipboard API
          try {
            // Extract basic text if everything else fails
            const tempDiv = document.createElement('div');
            tempDiv.innerHTML = initialContent;
            const textContent = tempDiv.textContent || tempDiv.innerText || '';
            
            if (quillRef.current) {
              quillRef.current.setText(textContent || 'Error loading content');
            }
          } catch (e) {
            console.error('All fallbacks failed:', e);
            // Last resort
            if (quillRef.current) {
              quillRef.current.setText('Error loading content');
            }
          }
        }
      }
    }
  }, [initialContent, isReady, isReplyOrForward]);

  return (
    <div className="rich-email-editor-wrapper">
      {/* Custom toolbar container */}
      <div ref={toolbarRef} className="ql-toolbar ql-snow">
        <span className="ql-formats">
          <button className="ql-bold"></button>
          <button className="ql-italic"></button>
          <button className="ql-underline"></button>
          <button className="ql-strike"></button>
        </span>
        <span className="ql-formats">
          <select className="ql-color"></select>
          <select className="ql-background"></select>
        </span>
        <span className="ql-formats">
          <button className="ql-list" value="ordered"></button>
          <button className="ql-list" value="bullet"></button>
        </span>
        <span className="ql-formats">
          <button className="ql-indent" value="-1"></button>
          <button className="ql-indent" value="+1"></button>
        </span>
        <span className="ql-formats">
          <select className="ql-align"></select>
        </span>
        <span className="ql-formats">
          <button className="ql-direction" value="rtl"></button>
        </span>
        <span className="ql-formats">
          <button className="ql-link"></button>
        </span>
        <span className="ql-formats">
          <button className="ql-clean"></button>
        </span>
      </div>
      
      {/* Editor container with improved scrolling */}
      <div className="rich-email-editor-container">
        <div 
          ref={editorRef} 
          className="quill-editor"
        />
        
        {/* Loading indicator */}
        {!isReady && (
          <div className="flex items-center justify-center py-8">
            <div className="h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent"></div>
          </div>
        )}
      </div>
      
      {/* Custom styles for email context */}
      <style jsx>{`
        .rich-email-editor-wrapper {
          display: flex;
          flex-direction: column;
          width: 100%;
          height: 100%;
          overflow: hidden;
          border-radius: 6px;
          flex: 1;
          border: 1px solid #e2e8f0;
        }
        
        .rich-email-editor-container {
          display: flex;
          flex-direction: column;
          width: 100%;
          height: 100%;
          overflow: auto;
          flex: 1;
          position: relative;
        }
        
        .quill-editor {
          width: 100%;
          min-height: ${minHeight};
          max-height: ${maxHeight};
          overflow-y: auto;
          overflow-x: hidden;
        }
        
        /* Hide the editor until it's ready */
        .quill-editor ${!isReady ? '{ display: none; }' : ''}
        
        /* Hide duplicate toolbar */
        :global(.ql-toolbar.ql-snow + .ql-toolbar.ql-snow) {
          display: none !important;
        }
        
        /* Add RTL support styles */
        :global([dir="rtl"] .ql-editor) {
          text-align: right;
          direction: rtl;
        }
        
        :global(.ql-editor[dir="rtl"]) {
          text-align: right;
          direction: rtl;
        }
        
        :global(.ql-container) {
          border: none !important;
          height: auto !important;
          min-height: ${minHeight};
          max-height: none !important;
          overflow: visible;
        }
        
        :global(.ql-editor) {
          padding: 12px;
          min-height: ${minHeight};
          overflow-y: auto !important;
          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
          font-size: 14px;
          line-height: 1.5;
          color: #333 !important;
        }
        
        /* Ensure all text is visible */
        :global(.ql-editor p),
        :global(.ql-editor div),
        :global(.ql-editor span),
        :global(.ql-editor li) {
          color: #333 !important;
        }
        
        /* Ensure placeholder text is visible but distinct */
        :global(.ql-editor.ql-blank::before) {
          color: #aaa !important;
          font-style: italic !important;
        }
        
        /* Force blockquote styling */
        :global(.ql-editor blockquote) {
          border-left: 2px solid #ddd !important;
          margin: 0 !important;
          padding: 10px 0 10px 15px !important;
          color: #505050 !important;
          background-color: #f9f9f9 !important;
          border-radius: 4px !important;
          font-size: 13px !important;
        }
        
        /* RTL blockquote styling */
        :global(.ql-editor[dir="rtl"] blockquote),
        :global([dir="rtl"] .ql-editor blockquote) {
          border-left: none !important;
          border-right: 2px solid #ddd !important;
          padding: 10px 15px 10px 0 !important;
        }
        
        /* Fix table rendering */
        :global(.ql-editor table) {
          width: 100% !important;
          border-collapse: collapse !important;
          table-layout: fixed !important;
          margin: 10px 0 !important;
          border: 1px solid #ddd !important;
        }
        
        :global(.ql-editor td), 
        :global(.ql-editor th) {
          border: 1px solid #ddd !important;
          padding: 6px 8px !important;
          overflow-wrap: break-word !important;
          word-break: break-word !important;
          min-width: 30px !important;
          font-size: 13px !important;
        }
        
        /* Email quote styling */
        :global(.email-original-content) {
          margin-top: 20px !important;
          padding-top: 10px !important;
          border-top: 1px solid #ddd !important;
          color: #555 !important;
          font-size: 13px !important;
        }
        
        /* Fix quoted paragraphs */
        :global(.ql-editor blockquote p) {
          margin-bottom: 8px !important;
          margin-top: 0 !important;
        }
        
        /* Fix for reply headers */
        :global(.ql-editor div[style*="font-weight: 400"]) {
          margin-top: 20px !important;
          margin-bottom: 8px !important;
          color: #555 !important;
          font-size: 13px !important;
        }
      `}</style>
    </div>
  );
};

export default RichEmailEditor;