import React from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import androidArrowUpIcon from '../assets/android-arrow-up.svg';
import { BROWSER_DISPLAY_NAMES_ANDROID } from '../constants';
import messages from '../../messages';

/**
 * AndroidMobileExpanded Component
 * 
 * Renders the expanded state for Android mobile notifications.
 * Layout structure:
 * - Wrapper (contains all content except arrow):
 *   - Header: Browser icon | Browser name, URL, timestamp (all inline in same row) | Brand icon
 *   - Body: Title text (bold) → Body text (limited to 4 lines with ellipsis) → Media image (if visible)
 * - Arrow icon (^ ) - sibling to wrapper, aligned to top
 */
const AndroidMobileExpanded = ({
  icon,
  selectedBrowser,
  notificationTitle,
  notificationBody,
  displayUrl,
  brandIcon,
  shouldShowBrandIcon,
  shouldShowBrandIconExpanded,
  mediaImageUrl,
  enableCtas = false,
  ctaButtons = [],
}) => {
  // Get browser display name
  const getBrowserDisplayName = (browser) => {
    return BROWSER_DISPLAY_NAMES_ANDROID[browser] || browser;
  };

  const showBrandIcon = (shouldShowBrandIconExpanded || shouldShowBrandIcon) && brandIcon;

  return (
    <>
      {/* Browser icon as separate column, aligned to top */}
      <div className="android-mobile-expanded-icon">
        <div className="notification-icon-container">
          <img src={icon} alt={selectedBrowser} className="notification-icon" />
        </div>
      </div>
      
      <div className="android-mobile-expanded-wrapper">
        {/* Top section: header + title with brand icon column */}
        <div className="android-mobile-expanded-top">
          <div className="android-mobile-expanded-top-content">
            <div className="android-mobile-expanded-header">
              <div className="android-mobile-expanded-header-content">
                <span className="android-mobile-expanded-browser-name">
                  {getBrowserDisplayName(selectedBrowser)}
                </span>
                <span className="android-mobile-expanded-domain-time">
                  <span className="android-mobile-expanded-domain">{displayUrl}</span>
                  <span className="android-mobile-expanded-time">
                  <FormattedMessage {...messages.notificationTime} />
                </span>
                </span>
              </div>
            </div>

            <div className="android-mobile-expanded-title">{notificationTitle}</div>
          </div>

          {showBrandIcon && (
            <div className="notification-brand-icon-container android-mobile-chrome-brand-icon">
              <img src={brandIcon} alt="Brand icon" className="notification-brand-icon" />
            </div>
          )}
        </div>

        {/* Body container: title, body, media */}
        <div className="android-mobile-expanded-body">
          {/* Body text (limited to 4 lines) */}
          <div className="android-mobile-expanded-body-text">{notificationBody}</div>

          {/* Media image at bottom (if visible) */}
          {mediaImageUrl && (
            <div className="android-mobile-expanded-media">
              <img
                src={mediaImageUrl}
                alt="Notification media"
                className="android-mobile-expanded-media-image"
              />
            </div>
          )}
        </div>
      </div>
      
      {/* Arrow icon as sibling to wrapper */}
      <div className="notification-action-arrow android-mobile-expanded-arrow">
        <img src={androidArrowUpIcon} alt="Collapse" className="android-mobile-expanded-arrow-icon" />
      </div>

      {/* CTA buttons container - direct child of notification-container, below the three vertical components */}
      {enableCtas && ctaButtons && ctaButtons.length > 0 && (
        <div className="android-mobile-expanded-cta-container">
          {ctaButtons.map((button, index) => (
            <React.Fragment key={button.id}>
              {index > 0 && (
                <div className="android-mobile-expanded-cta-divider"></div>
              )}
              <button
                type="button"
                className={`android-mobile-expanded-cta-button ${
                  ctaButtons.length === 1 ? 'android-mobile-expanded-cta-button-single' : ''
                }`}
                aria-label={button.label}
              >
                <span className="android-mobile-expanded-cta-button-text">
                  {button.label}
                </span>
              </button>
            </React.Fragment>
          ))}
        </div>
      )}
    </>
  );
};

AndroidMobileExpanded.propTypes = {
  icon: PropTypes.string.isRequired,
  selectedBrowser: PropTypes.string.isRequired,
  notificationTitle: PropTypes.string,
  notificationBody: PropTypes.string,
  displayUrl: PropTypes.string,
  brandIcon: PropTypes.string,
  shouldShowBrandIcon: PropTypes.bool,
  shouldShowBrandIconExpanded: PropTypes.bool,
  mediaImageUrl: PropTypes.string,
  enableCtas: PropTypes.bool,
  ctaButtons: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.string.isRequired,
      label: PropTypes.string.isRequired,
    })
  ),
};

export default AndroidMobileExpanded;

