/**
 * EmailPreviewContent Component
 *
 * Renders the full email preview with browser bar, email header, email from, and email content
 * Based on preview-body structure from PreviewChrome component
 */

import React from 'react';
import PropTypes from 'prop-types';
import CapRow from '@capillarytech/cap-ui-library/CapRow';
import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
import { FormattedMessage } from 'react-intl';
import { removeLinksFromHtmlContent } from '../../../utils/common';
import messages from '../messages';
import {
  DESKTOP, MOBILE, TABLET, deviceAspectRatio
} from '../constants';

const EmailPreviewContent = ({
  content,
  subject,
  device,
  isUpdating,
  error,
  formatMessage,
}) => {
  // Clean HTML content by removing links
  const cleanContent = content ? removeLinksFromHtmlContent(content) : '';

  // Get device-specific iframe dimensions
  const iframeDimensions = deviceAspectRatio[device || DESKTOP](subject);

  // Render common email preview structure (browser bar, header, from)
  const renderEmailStructure = (contentSection) => (
    <CapRow className={`preview-body ${device || DESKTOP}`}>
      {/* Browser Bar */}
      <CapRow className="browser-bar">
        <CapRow className="browser-controls">
          <CapIcon type="chevron-left" />
          <CapIcon type="chevron-right" />
          <CapIcon className="refresh-icon" type="refreshCircle" size="s" />
        </CapRow>
        <CapRow className="address-bar">
          <CapLabel type="label3" className="address-bar-label">
            <FormattedMessage {...messages.browserAddressBar} />
          </CapLabel>
          <CapIcon className="browser-address-bar-icon" type="star" size="s" />
        </CapRow>
      </CapRow>

      {/* Divider */}
      <CapDivider className="preview-divider" />

      {/* Email Header */}
      <CapRow className="email-header">
        <CapIcon type="arrow-left" className="back-arrow" />
        <CapLabel type="label17" className="email-subject">{subject || ''}</CapLabel>
        <CapRow className="email-meta">
          <span><FormattedMessage {...messages.timeAgo} /></span>
          <CapRow className="dots" />
          <CapRow className="dots" />
          <CapRow className="dots" />
        </CapRow>
      </CapRow>

      {/* Email From */}
      <CapRow className="email-from">
        <CapRow className="sender-avatar" />
        <CapRow className="sender-info">
          <CapRow className="sender-name"><FormattedMessage {...messages.senderName} /></CapRow>
          <CapRow className="recipient-info">{formatMessage(messages.toMe)}</CapRow>
        </CapRow>
      </CapRow>

      {/* Email Content - Varies based on state */}
      <CapRow className="email-content">
        {contentSection}
      </CapRow>
    </CapRow>
  );

  // Determine content section based on state
  let contentSection;
  if (isUpdating) {
    // Loading state
    contentSection = (
      <CapRow className="loading-container">
        <CapSpin size="large" />
        <CapRow className="loading-text">
          {formatMessage(messages.updatingPreview)}
        </CapRow>
      </CapRow>
    );
  } else if (error) {
    // Error state
    contentSection = (
      <CapRow className="error-container">
        <CapIcon type="exclamation-circle" style={{ fontSize: '48px', color: '#ff4d4f' }} />
        <CapRow className="error-text">
          {formatMessage(messages.previewError)}
        </CapRow>
        <CapRow className="error-message">{error}</CapRow>
      </CapRow>
    );
  } else if (cleanContent) {
    // Normal state with content
    contentSection = (
      <iframe
        srcDoc={cleanContent}
        title="Email Preview"
        width={iframeDimensions.width}
        height={iframeDimensions.height}
        frameBorder="0"
      />
    );
  } else {
    // No content state
    contentSection = (
      <CapRow className="no-content">
        {formatMessage(messages.noContent)}
      </CapRow>
    );
  }

  return renderEmailStructure(contentSection);
};

EmailPreviewContent.propTypes = {
  content: PropTypes.string,
  subject: PropTypes.string,
  device: PropTypes.oneOf([DESKTOP, MOBILE, TABLET]),
  isUpdating: PropTypes.bool,
  error: PropTypes.string,
  formatMessage: PropTypes.func.isRequired,
};

EmailPreviewContent.defaultProps = {
  content: '',
  subject: '',
  device: DESKTOP,
  isUpdating: false,
  error: null,
};

export default EmailPreviewContent;
