'use client';

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

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
 */
const EmailContentDisplay: React.FC<EmailContentDisplayProps> = ({
  content,
  className = '',
  showQuotedText = true,
  type = 'auto',
  debug = false
}) => {
  // Basic fallback for missing content
  const safeContent = content || {
    text: 'No content available',
    html: '',
    isHtml: false,
    direction: 'ltr'
  };
  
  // Render the content with basic error handling
  const htmlContent = useMemo(() => {
    try {
      return renderEmailContent(safeContent);
    } catch (error) {
      console.error('Error rendering content:', error);
      return `<div class="error-message p-4 text-red-500">Error rendering email content</div>`;
    }
  }, [safeContent, 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 }} 
      />
      
      {/* Debug output if enabled */}
      {debug && (
        <div className="content-debug mt-4 p-2 text-xs bg-gray-100 border rounded">
          <p><strong>Content Type:</strong> {safeContent.isHtml ? 'HTML' : 'Text'}</p>
          <p><strong>Direction:</strong> {safeContent.direction}</p>
          <p><strong>Has HTML:</strong> {!!safeContent.html}</p>
          <p><strong>Text Length:</strong> {safeContent.text?.length || 0}</p>
        </div>
      )}
      
      <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;
        }
        
        .content-debug {
          font-family: monospace;
          color: #666;
        }
      `}</style>
    </div>
  );
};

export default EmailContentDisplay;