'use client';

import React from 'react';
import EmailContentDisplay from '@/components/email/EmailContentDisplay';
import { formatEmailDate } from '@/lib/utils/email-utils';
import { EmailContent } from '@/types/email';

interface QuotedEmailContentProps {
  content: EmailContent | string;
  sender: {
    name?: string;
    email: string;
  };
  date: Date | string;
  subject?: string;
  recipients?: string;
  type: 'reply' | 'forward';
  className?: string;
}

/**
 * Component for displaying properly formatted quoted email content in replies and forwards
 */
const QuotedEmailContent: React.FC<QuotedEmailContentProps> = ({
  content,
  sender,
  date,
  subject,
  recipients,
  type,
  className = ''
}) => {
  // Format sender info
  const senderName = sender.name || sender.email;
  const formattedDate = formatEmailDate(date);
  
  // Create header based on type
  const renderQuoteHeader = () => {
    if (type === 'reply') {
      return (
        <div className="quote-header">
          On {formattedDate}, {senderName} wrote:
        </div>
      );
    } else {
      return (
        <div className="forward-header">
          <div>---------- Forwarded message ---------</div>
          <div><b>From:</b> {senderName} &lt;{sender.email}&gt;</div>
          <div><b>Date:</b> {formattedDate}</div>
          <div><b>Subject:</b> {subject || '(No subject)'}</div>
          <div><b>To:</b> {recipients || 'Undisclosed recipients'}</div>
        </div>
      );
    }
  };
  
  return (
    <div className={`quoted-email-container ${className}`}>
      {renderQuoteHeader()}
      <div className="quoted-content">
        <EmailContentDisplay 
          content={content}
          type="auto"
          className="quoted-email-body"
          showQuotedText={true}
        />
      </div>
      
      <style jsx>{`
        .quoted-email-container {
          margin-top: 20px;
          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
        }
        
        .quote-header {
          color: #555;
          font-size: 13px;
          margin: 10px 0;
          font-weight: 400;
        }
        
        .forward-header {
          color: #555;
          font-size: 13px;
          margin-bottom: 15px;
          font-family: Arial, sans-serif;
        }
        
        .forward-header div {
          margin-bottom: 2px;
        }
        
        .quoted-content {
          border-left: 2px solid #ddd;
          padding: 0 0 0 15px;
          margin: 10px 0;
          color: #505050;
        }
        
        :global(.quoted-email-body) {
          font-size: 13px;
          line-height: 1.5;
        }
        
        :global(.quoted-email-body table) {
          border-collapse: collapse;
          width: 100%;
          max-width: 100%;
          margin-bottom: 1rem;
        }
        
        :global(.quoted-email-body th),
        :global(.quoted-email-body td) {
          padding: 0.5rem;
          vertical-align: top;
          border: 1px solid #dee2e6;
        }
        
        :global(.quoted-email-body th) {
          font-weight: 600;
          text-align: left;
          background-color: #f8f9fa;
        }
      `}</style>
    </div>
  );
};

export default QuotedEmailContent;