'use client';

import React, { useMemo, CSSProperties } from 'react';
import { renderEmailContent, normalizeEmailContent } from '@/lib/utils/email-utils';
import { EmailContent } from '@/types/email';

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

/**
 * Unified component for displaying email content in a consistent way
 * This handles both HTML and plain text content with proper styling
 */
const EmailContentDisplay: React.FC<EmailContentDisplayProps> = ({
  content,
  className = '',
  showQuotedText = true,
  type = 'auto'
}) => {
  // Normalize the content to our standard format if needed
  const normalizedContent = useMemo(() => {
    // If content is already in our EmailContent format
    if (content && 
        typeof content === 'object' && 
        'text' in content && 
        'isHtml' in content) {
      return content as EmailContent;
    }
    
    // Otherwise normalize it
    return normalizeEmailContent(content);
  }, [content]);
  
  // Render the normalized content
  const htmlContent = useMemo(() => {
    if (!normalizedContent) return '';
    
    // Override content type if specified
    let contentToRender: EmailContent = { ...normalizedContent };
    
    if (type === 'html' && !contentToRender.isHtml) {
      // Force HTML rendering for text content
      contentToRender = {
        ...contentToRender,
        isHtml: true,
        html: `<p>${contentToRender.text.replace(/\n/g, '<br>')}</p>`
      };
    } else if (type === 'text' && contentToRender.isHtml) {
      // Force text rendering
      contentToRender = {
        ...contentToRender,
        isHtml: false
      };
    }
    
    return renderEmailContent(contentToRender);
  }, [normalizedContent, type]);
  
  // Apply quoted text styling if needed
  const containerStyle: CSSProperties = showQuotedText 
    ? {} 
    : { maxHeight: '400px', overflowY: 'auto' };
  
  return (
    <div 
      className={`email-content-display ${className} ${showQuotedText ? 'quoted-text' : ''}`}
      style={containerStyle}
    >
      <div 
        className="email-content-inner"
        dangerouslySetInnerHTML={{ __html: htmlContent }} 
      />
      
      <style jsx>{`
        .email-content-display {
          width: 100%;
        }
        
        .email-content-display.quoted-text {
          opacity: 0.85;
          font-size: 0.95em;
        }
        
        .email-content-inner :global(img) {
          max-width: 100%;
          height: auto;
        }
        
        .email-content-inner :global(table) {
          max-width: 100%;
          border-collapse: collapse;
          margin-bottom: 1rem;
        }
        
        .email-content-inner :global(td),
        .email-content-inner :global(th) {
          padding: 0.5rem;
          border: 1px solid #ddd;
        }
      `}</style>
    </div>
  );
};

export default EmailContentDisplay;