'use client';

import React, { useMemo } from 'react';
import { EmailContent } from '@/types/email';
import { formatEmailContent } from '@/lib/utils/email-content';

interface EmailContentDisplayProps {
  content: EmailContent | string | null;
  className?: string;
  showQuotedText?: boolean;
  type?: 'html' | 'text' | 'auto';
  debug?: boolean;
}

/**
 * Unified component for displaying email content in a consistent way
 * This handles both HTML and plain text content with proper styling and RTL support
 */
const EmailContentDisplay: React.FC<EmailContentDisplayProps> = ({
  content,
  className = '',
  showQuotedText = true,
  type = 'auto',
  debug = false
}) => {
  // Process content if provided
  const processedContent = useMemo(() => {
    if (!content) {
      console.log('EmailContentDisplay: No content provided');
      return { __html: '<div class="email-content-empty">No content available</div>' };
    }
    
    try {
      console.log('EmailContentDisplay processing:', {
        contentType: typeof content,
        isNull: content === null,
        isString: typeof content === 'string',
        isObject: typeof content === 'object',
        length: typeof content === 'string' ? content.length : null
      });
      
      let formattedContent: string;
      
      // If it's a string, we need to determine if it's HTML or plain text
      if (typeof content === 'string') {
        formattedContent = formatEmailContent({ content });
      } 
      // If it's an EmailContent object
      else {
        formattedContent = formatEmailContent({ content });
      }
      
      console.log('EmailContentDisplay processed result length:', formattedContent.length);
      return { __html: formattedContent };
    } catch (error) {
      console.error('Error processing email content:', error);
      return { __html: '<div class="email-content-error">Error displaying email content</div>' };
    }
  }, [content]);
  
  // Handle quoted text display
  const displayHTML = useMemo(() => {
    if (!showQuotedText) {
      // Hide quoted text (usually in blockquotes)
      // This is simplified - a more robust approach would parse and handle
      // quoted sections more intelligently
      const htmlWithoutQuotes = processedContent.__html.replace(/<blockquote[^>]*>[\s\S]*?<\/blockquote>/gi, 
        '<div class="text-gray-400">[Quoted text hidden]</div>');
      return { __html: htmlWithoutQuotes };
    }
    return processedContent;
  }, [processedContent, showQuotedText]);
  
  return (
    <div className={`email-content-display ${className}`}>
      <div 
        className="email-content-inner"
        dangerouslySetInnerHTML={displayHTML} 
      />
      
      {/* Debug output if enabled */}
      {debug && (
        <div className="mt-4 p-2 text-xs bg-gray-100 border rounded">
          <p><strong>Content Type:</strong> {typeof content === 'string' ? 'Text' : 'HTML'}</p>
          <p><strong>HTML Length:</strong> {typeof content === 'string' ? content.length : content?.html?.length || 0}</p>
          <p><strong>Text Length:</strong> {typeof content === 'string' ? content.length : content?.text?.length || 0}</p>
        </div>
      )}
      
      <style jsx>{`
        .email-content-display {
          width: 100%;
        }
        
        .email-content-inner img {
          max-width: 100%;
          height: auto;
        }
        
        .email-content-inner blockquote {
          margin: 10px 0;
          padding-left: 15px;
          border-left: 2px solid #ddd;
          color: #666;
          background-color: #f9f9f9;
          border-radius: 4px;
        }
        
        /* RTL blockquote styling will be handled by the direction attribute now */
        [dir="rtl"] blockquote {
          padding-left: 0;
          padding-right: 15px;
          border-left: none;
          border-right: 2px solid #ddd;
        }
      `}</style>
    </div>
  );
};

export default EmailContentDisplay;