'use client';

import React, { useMemo } from 'react';
import { EmailContent } from '@/types/email';
import { processContentWithDirection } from '@/lib/utils/text-direction';

interface EmailContentDisplayProps {
  content: EmailContent | null | undefined;
  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 with centralized utility
  const processedContent = useMemo(() => {
    // Default empty content
    if (!content) {
      return {
        text: '',
        html: '<div class="text-gray-400">No content available</div>',
        direction: 'ltr' as const
      };
    }

    // For text-only display, convert plain text to HTML first
    if (type === 'text') {
      const textContent = content.text || '';
      const formattedText = textContent
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/\n/g, '<br>');
      
      return processContentWithDirection(formattedText);
    }
    
    // For auto mode, let the centralized function handle the content
    return processContentWithDirection(content);
  }, [content, type]);
  
  // Handle quoted text display
  const displayHTML = useMemo(() => {
    if (!showQuotedText) {
      // This is simplified - a more robust approach would parse and handle
      // quoted sections more intelligently
      return processedContent.html.replace(/<blockquote[^>]*>[\s\S]*?<\/blockquote>/gi, 
        '<div class="text-gray-400">[Quoted text hidden]</div>');
    }
    return processedContent.html;
  }, [processedContent.html, showQuotedText]);
  
  return (
    <div className={`email-content-display ${className}`}>
      <div 
        className="email-content-inner"
        dangerouslySetInnerHTML={{ __html: displayHTML }} 
      />
      
      {/* Debug output if enabled */}
      {debug && (
        <div className="mt-4 p-2 text-xs bg-gray-100 border rounded">
          <p><strong>Content Type:</strong> {content?.isHtml ? 'HTML' : 'Text'}</p>
          <p><strong>Direction:</strong> {processedContent.direction}</p>
          <p><strong>HTML Length:</strong> {content?.html?.length || 0}</p>
          <p><strong>Text Length:</strong> {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;