/**
 * ViberPreviewContent Component
 *
 * Renders Viber message preview on Android and iOS device mockups
 * Uses SMS device frame and navigation bar
 * Body content follows TemplatePreview Viber structure
 */

import React from 'react';
import PropTypes from 'prop-types';
import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
import CapImage from '@capillarytech/cap-ui-library/CapImage';
import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
import CapRow from '@capillarytech/cap-ui-library/CapRow';
import { ANDROID, IOS, ANDROID_DEVICE_NAME, IOS_DEVICE_NAME, VIBER_ACCOUNT_NAME } from '../constants';
import messages from '../messages';
import videoPlay from '../../../assets/videoPlay.svg';

// Import device mockup images (same as SMS)
const smsMobileAndroid = require('../../../assets/Android.png');
const smsMobileIos = require('../../../assets/iOS.png');

const ViberPreviewContent = ({
  content,
  device,
  isUpdating,
  error,
  formatMessage,
  accountName,
  brandName,
  showHeader,
}) => {
  // Get device image based on device type
  const deviceImage = device === ANDROID ? smsMobileAndroid : smsMobileIos;
  const deviceName = device === ANDROID ? ANDROID_DEVICE_NAME : IOS_DEVICE_NAME;

  // Extract Viber content
  const viberContent = content?.viberPreviewContent || {};
  const {
    messageContent = '',
    imageURL = '',
    videoParams = {},
    buttonText = '',
  } = viberContent;

  // Get account name (first letter for icon)
  const accountIcon = (accountName || brandName || 'V')[0]?.toUpperCase();
  const displayBrandName = brandName || accountName || VIBER_ACCOUNT_NAME;
  // Get current time for timestamp
  const currentTime = new Date();
  const hours = currentTime.getHours();
  const minutes = currentTime.getMinutes();
  const ampm = hours >= 12 ? 'PM' : 'AM';
  const displayHours = hours % 12 || 12;
  const displayMinutes = minutes < 10 ? `0${minutes}` : minutes;
  const timestamp = `${displayHours}:${displayMinutes} ${ampm}`;
  // Render loading state
  if (isUpdating) {
    return (
      <CapRow type='flex' align='middle' justify='center' className="sms-device-container">
        <CapImage
          className="sms-device-image"
          src={deviceImage}
          alt={`${deviceName} Device`}
        />
        <CapRow className={`sms-content-overlay sms-content-overlay-${device} viber-content-overlay`}>
          <CapRow type='flex' vertical noWrap align='middle' justify='center' className="sms-loading-container">
            <CapSpin size="large" />
            <CapRow useLegacy className="sms-loading-text">
              {formatMessage(messages.updatingPreview)}
            </CapRow>
          </CapRow>
        </CapRow>
      </CapRow>
    );
  }

  // Render error state
  if (error) {
    return (
      <CapRow type='flex' align='middle' justify='center' className="sms-device-container">
        <CapImage
          className="sms-device-image"
          src={deviceImage}
          alt={`${deviceName} Device`}
        />
        <CapRow className={`sms-content-overlay sms-content-overlay-${device} viber-content-overlay`}>
          <CapRow className="sms-error-container">
            <CapIcon type="exclamation-circle" className="exclamation-circle" />
            <CapRow useLegacy className="sms-error-text">
              {formatMessage(messages.previewError)}
            </CapRow>
            <CapRow useLegacy className="sms-error-message">{error}</CapRow>
          </CapRow>
        </CapRow>
      </CapRow>
    );
  }

  // Check if there's any content to display
  const hasContent = messageContent || imageURL || videoParams?.viberVideoSrc || buttonText;

  // Render normal Viber preview
  return (
    <CapRow type='flex' align='middle' justify='center' className="sms-device-container">
      {/* Device Background Image */}
      <CapImage
        className="sms-device-image"
        src={deviceImage}
        alt={`${deviceName} Device`}
      />

      {/* Content Overlay */}
      <CapRow className={`sms-content-overlay sms-content-overlay-${device} ${device === ANDROID ? 'viber-content-overlay' : ''} viber-preview viber-${device}`}>
        {/* Navigation Bar (same as SMS) */}
        <CapRow type='flex' className={`sms-navigation-bar ${device === ANDROID && !showHeader ? 'viber-navigation-bar' : ''}`}>
          <CapIcon type="chevron-left" className="sms-back-arrow" />
          <CapLabel type="label16" className="sms-sender-id">
            {displayBrandName}
          </CapLabel>
          <CapIcon type="info" className="sms-menu-icon viber-menu-icon" />
        </CapRow>

        {/* Viber Message Container */}
        {hasContent && (
          <CapRow className={`viber-message-container ${device !== ANDROID ? 'viber-message-container-ios' : ''}`}>
            {/* Brand Name Display (from TemplatePreview line 1136) */}
            <CapRow type="flex" align="middle" className="msg-container viber-preview">
              {/* Account Icon (from TemplatePreview line 1146-1160) */}
              <CapRow type='flex' className="viber-account-icon">
                {accountIcon}
              </CapRow>

              {/* Message Bubble (from TemplatePreview line 1161-1223) */}
              <CapRow useLegacy className="message-pop align-left viber-message-pop">
                {/* Text Viber preview */}
                {messageContent && (
                  <CapLabel type="label15" className="viber-message-text">{messageContent}</CapLabel>
                )}

                {/* Image Viber preview */}
                {imageURL && (
                  <CapImage
                    src={imageURL}
                    className="viber-image-preview"
                    alt="Viber image preview"
                  />
                )}

                {/* Video Viber preview */}
                {videoParams?.viberVideoSrc && (
                  <CapTooltip
                    title={formatMessage(messages.videoPreviewTooltip)}
                  >
                    <CapRow useLegacy className="video-preview">
                      <CapImage
                        src={videoParams?.viberVideoPreviewImg || videoParams?.viberVideoSrc}
                        className="viber-video-preview"
                        alt={formatMessage(messages.previewGenerated)}
                      />
                      <CapRow type="flex" className="icon-position">
                        <CapImage
                          src={videoPlay}
                          alt="Play video"
                        />
                      </CapRow>
                    </CapRow>
                  </CapTooltip>
                )}

                {/* Button Viber preview */}
                {buttonText && (
                  <CapLabel className="viber-button-base">
                    <p className="viber-button-card-text">
                      {buttonText}
                    </p>
                  </CapLabel>
                )}
                <CapLabel type="label1" className="viber-timestamp">
                  {timestamp}
                </CapLabel>
                <CapRow useLegacy className="empty-placeholder" />
              </CapRow>

            </CapRow>

          </CapRow>
        )}

        {/* No Content State */}
        {!hasContent && (
          <CapRow useLegacy className="viber-message-container">
            <CapRow useLegacy className="sms-message-bubble">
              <CapRow useLegacy className="sms-message-text">
                {formatMessage(messages.noContent)}
              </CapRow>
            </CapRow>
          </CapRow>
        )}
      </CapRow>
    </CapRow>
  );
};

ViberPreviewContent.propTypes = {
  content: PropTypes.shape({
    viberPreviewContent: PropTypes.shape({
      messageContent: PropTypes.string,
      imageURL: PropTypes.string,
      videoParams: PropTypes.shape({
        viberVideoSrc: PropTypes.string,
        viberVideoPreviewImg: PropTypes.string,
      }),
      buttonText: PropTypes.string,
    }),
  }),
  device: PropTypes.oneOf([ANDROID, IOS]),
  isUpdating: PropTypes.bool,
  error: PropTypes.string,
  formatMessage: PropTypes.func.isRequired,
  accountName: PropTypes.string,
  brandName: PropTypes.string,
  showHeader: PropTypes.bool,
};

ViberPreviewContent.defaultProps = {
  content: {},
  device: ANDROID,
  isUpdating: false,
  error: null,
  accountName: null,
  brandName: null,
  showHeader: true,
};

export default ViberPreviewContent;
