'use client';

import React from 'react';
import EmailContentDisplay from './EmailContentDisplay';

interface QuotedEmailContentProps {
  content: string;
  sender: {
    name?: string;
    email: string;
  };
  date: Date | 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,
  type,
  className = ''
}) => {
  // Format the date
  const formatDate = (date: Date | string) => {
    if (!date) return '';
    
    const dateObj = typeof date === 'string' ? new Date(date) : date;
    
    try {
      return dateObj.toLocaleString('en-US', {
        weekday: 'short',
        year: 'numeric',
        month: 'short',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
      });
    } catch (e) {
      return typeof date === 'string' ? date : date.toString();
    }
  };
  
  // Format sender info
  const senderName = sender.name || sender.email;
  const formattedDate = formatDate(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 would be passed as a prop if needed */}</div>
          <div><b>To:</b> {/* Recipients would be passed as a prop if needed */}</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;