import React from 'react';
import { act } from 'react-dom/test-utils';
import { mountWithIntl, shallowWithIntl } from '../../../../../helpers/intl-enzym-test-helpers';
import DevicePreviewContent from '../DevicePreviewContent';
import PreviewControls from '../PreviewControls';
import NotificationContainer from '../NotificationContainer';
import {
  OS_MACOS,
  OS_IOS,
  OS_IPADOS,
  OS_WINDOWS,
  OS_ANDROID_MOBILE,
  OS_ANDROID_TABLET,
  BROWSER_CHROME,
  BROWSER_FIREFOX,
  BROWSER_EDGE,
  BROWSER_SAFARI,
  BROWSER_OPERA,
  NOTIFICATION_STATE_COLLAPSED,
  NOTIFICATION_STATE_EXPANDED,
  DEFAULT_OS,
  DEFAULT_BROWSER,
  DEFAULT_STATE,
} from '../constants';
import {
  getBrowserOptionsForOS,
  getResolvedVariant,
  coerceStateForVariant,
  getSupportedStates,
} from '../config/notificationMappings';

// Mock PreviewControls to avoid complex CapSelect interactions
jest.mock('../PreviewControls', () => {
  const React = require('react');
  return function MockPreviewControls({
    selectedOS,
    selectedBrowser,
    selectedState,
    onOSChange,
    onBrowserChange,
    onStateChange,
  }) {
    return (
      <div className="mock-preview-controls">
        <button
          className="mock-os-change"
          onClick={() => onOSChange && onOSChange('Windows')}
          data-testid="mock-os-change"
        >
          Change OS
        </button>
        <button
          className="mock-browser-change"
          onClick={() => onBrowserChange && onBrowserChange('Firefox')}
          data-testid="mock-browser-change"
        >
          Change Browser
        </button>
        <button
          className="mock-state-change"
          onClick={() => onStateChange && onStateChange('Expanded')}
          data-testid="mock-state-change"
        >
          Change State
        </button>
        <div data-testid="selected-os">{selectedOS}</div>
        <div data-testid="selected-browser">{selectedBrowser}</div>
        <div data-testid="selected-state">{selectedState}</div>
      </div>
    );
  };
});

// Mock NotificationContainer to focus on DevicePreviewContent logic
jest.mock('../NotificationContainer', () => {
  const React = require('react');
  return function MockNotificationContainer({ notificationTitle, notificationBody }) {
    return (
      <div className="mock-notification-container">
        <div className="notification-title">{notificationTitle}</div>
        <div className="notification-body">{notificationBody}</div>
      </div>
    );
  };
});

describe('DevicePreviewContent', () => {
  const defaultProps = {
    notificationTitle: 'Test Notification Title',
    notificationBody: 'Test notification body text',
    url: 'https://www.example.com',
    imageSrc: 'https://example.com/image.jpg',
    brandIconSrc: 'https://example.com/icon.png',
  };

  beforeEach(() => {
    jest.clearAllMocks();
  });

  describe('Basic Rendering', () => {
    it('should render correctly with default props', () => {
      const wrapper = shallowWithIntl(<DevicePreviewContent {...defaultProps} />);
      expect(wrapper).toMatchSnapshot();
    });

    it('should render with minimal props', () => {
      const wrapper = mountWithIntl(<DevicePreviewContent />);
      expect(wrapper.exists()).toBe(true);
    });

    it('should render PreviewControls with correct props', () => {
      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
      const previewControls = wrapper.find(PreviewControls);
      expect(previewControls.exists()).toBe(true);
      expect(previewControls.prop('selectedOS')).toBe(DEFAULT_OS);
      expect(previewControls.prop('selectedBrowser')).toBe(DEFAULT_BROWSER);
      expect(previewControls.prop('selectedState')).toBe(DEFAULT_STATE);
      expect(previewControls.prop('layoutMode')).toBe('compact');
      expect(previewControls.prop('showStateDropdown')).toBe(true);
    });

    it('should render device frame container', () => {
      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
      const container = wrapper.find('.device-preview-container');
      expect(container.exists()).toBe(true);
    });

    it('should render device frame wrapper', () => {
      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
      const frameWrapper = wrapper.find('.device-frame-wrapper');
      expect(frameWrapper.exists()).toBe(true);
    });

    it('should render device frame image', () => {
      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
      const frameImage = wrapper.find('.device-frame');
      expect(frameImage.exists()).toBe(true);
      expect(frameImage.prop('alt')).toContain(DEFAULT_OS);
    });
  });

  describe('Initial State', () => {
    it('should initialize with default OS, browser, and state', () => {
      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
      const controls = wrapper.find(PreviewControls);
      expect(controls.prop('selectedOS')).toBe(DEFAULT_OS);
      expect(controls.prop('selectedBrowser')).toBe(DEFAULT_BROWSER);
      expect(controls.prop('selectedState')).toBe(DEFAULT_STATE);
    });
  });

  describe('OS Selection and Browser Options', () => {
    it('should update OS when handleOSChange is called', () => {
      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
      const controls = wrapper.find(PreviewControls);
      
      // Simulate OS change
      act(() => {
        controls.prop('onOSChange')(OS_WINDOWS);
      });
      wrapper.update();
      
      const updatedControls = wrapper.find(PreviewControls);
      expect(updatedControls.prop('selectedOS')).toBe(OS_WINDOWS);
    });

    it('should filter browser options based on selected OS', () => {
      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
      
      // macOS should have all browsers including Safari
      act(() => {
        wrapper.find(PreviewControls).prop('onOSChange')(OS_MACOS);
      });
      wrapper.update();
      let browserOptions = wrapper.find(PreviewControls).prop('browserOptions');
      expect(browserOptions.some(opt => opt.value === BROWSER_SAFARI)).toBe(true);
      
      // Windows should not have Safari
      act(() => {
        wrapper.find(PreviewControls).prop('onOSChange')(OS_WINDOWS);
      });
      wrapper.update();
      browserOptions = wrapper.find(PreviewControls).prop('browserOptions');
      expect(browserOptions.some(opt => opt.value === BROWSER_SAFARI)).toBe(false);
    });

    it('should coerce browser when OS changes to unsupported browser', () => {
      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
      
      // Start with macOS and Safari
      act(() => {
        wrapper.find(PreviewControls).prop('onOSChange')(OS_MACOS);
        wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_SAFARI);
      });
      wrapper.update();
      expect(wrapper.find(PreviewControls).prop('selectedBrowser')).toBe(BROWSER_SAFARI);
      
      // Change to Windows (Safari not supported)
      act(() => {
        wrapper.find(PreviewControls).prop('onOSChange')(OS_WINDOWS);
      });
      wrapper.update();
      
      // Browser should be coerced to first available option (Chrome)
      const browserOptions = getBrowserOptionsForOS(OS_WINDOWS);
      expect(wrapper.find(PreviewControls).prop('selectedBrowser')).toBe(browserOptions[0].value);
    });

    it('should handle OS change for iOS', () => {
      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
      act(() => {

        wrapper.find(PreviewControls).prop('onOSChange')(OS_IOS);

      });

      wrapper.update();
      expect(wrapper.find(PreviewControls).prop('selectedOS')).toBe(OS_IOS);
    });

    it('should handle OS change for iPadOS', () => {
      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
      act(() => {

        wrapper.find(PreviewControls).prop('onOSChange')(OS_IPADOS);

      });

      wrapper.update();
      expect(wrapper.find(PreviewControls).prop('selectedOS')).toBe(OS_IPADOS);
    });

    it('should handle OS change for Android Mobile', () => {
      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
      act(() => {

        wrapper.find(PreviewControls).prop('onOSChange')(OS_ANDROID_MOBILE);

      });

      wrapper.update();
      expect(wrapper.find(PreviewControls).prop('selectedOS')).toBe(OS_ANDROID_MOBILE);
    });

    it('should handle OS change for Android Tablet', () => {
      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
      act(() => {

        wrapper.find(PreviewControls).prop('onOSChange')(OS_ANDROID_TABLET);

      });

      wrapper.update();
      expect(wrapper.find(PreviewControls).prop('selectedOS')).toBe(OS_ANDROID_TABLET);
    });
  });

  describe('Browser Selection', () => {
    it('should update browser when handleBrowserChange is called', () => {
      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
      const controls = wrapper.find(PreviewControls);
      
      act(() => {

      
        controls.prop('onBrowserChange')(BROWSER_FIREFOX);

      
      });

      
      wrapper.update();
      
      const updatedControls = wrapper.find(PreviewControls);
      expect(updatedControls.prop('selectedBrowser')).toBe(BROWSER_FIREFOX);
    });

    it('should handle browser change for Chrome', () => {
      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
      act(() => {

        wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_CHROME);

      });

      wrapper.update();
      expect(wrapper.find(PreviewControls).prop('selectedBrowser')).toBe(BROWSER_CHROME);
    });

    it('should handle browser change for Firefox', () => {
      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
      act(() => {

        wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_FIREFOX);

      });

      wrapper.update();
      expect(wrapper.find(PreviewControls).prop('selectedBrowser')).toBe(BROWSER_FIREFOX);
    });

    it('should handle browser change for Edge', () => {
      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
      act(() => {

        wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_EDGE);

      });

      wrapper.update();
      expect(wrapper.find(PreviewControls).prop('selectedBrowser')).toBe(BROWSER_EDGE);
    });

    it('should handle browser change for Opera', () => {
      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
      act(() => {

        wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_OPERA);

      });

      wrapper.update();
      expect(wrapper.find(PreviewControls).prop('selectedBrowser')).toBe(BROWSER_OPERA);
    });
  });

  describe('State Selection and Coercion', () => {
    it('should update state when handleStateChange is called', () => {
      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
      const controls = wrapper.find(PreviewControls);
      
      // Set up macOS Chrome which supports Expanded
      act(() => {
        wrapper.find(PreviewControls).prop('onOSChange')(OS_MACOS);
        wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_CHROME);
      });
      wrapper.update();
      
      act(() => {

      
        controls.prop('onStateChange')(NOTIFICATION_STATE_EXPANDED);

      
      });

      
      wrapper.update();
      
      const updatedControls = wrapper.find(PreviewControls);
      expect(updatedControls.prop('selectedState')).toBe(NOTIFICATION_STATE_EXPANDED);
    });

    it('should coerce state when OS/Browser combination does not support current state', () => {
      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
      
      // Set up macOS Chrome with Expanded state
      act(() => {
        wrapper.find(PreviewControls).prop('onOSChange')(OS_MACOS);
        wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_CHROME);
        wrapper.find(PreviewControls).prop('onStateChange')(NOTIFICATION_STATE_EXPANDED);
      });
      wrapper.update();
      expect(wrapper.find(PreviewControls).prop('selectedState')).toBe(NOTIFICATION_STATE_EXPANDED);
      
      // Change to iOS Chrome which only supports Collapsed
      act(() => {
        wrapper.find(PreviewControls).prop('onOSChange')(OS_IOS);
        wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_CHROME);
      });
      wrapper.update();
      
      // State should be coerced to Collapsed
      expect(wrapper.find(PreviewControls).prop('selectedState')).toBe(NOTIFICATION_STATE_COLLAPSED);
    });

    it('should filter state options based on OS/Browser combination', () => {
      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
      
      // macOS Chrome supports both Collapsed and Expanded
      act(() => {
        wrapper.find(PreviewControls).prop('onOSChange')(OS_MACOS);
        wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_CHROME);
      });
      wrapper.update();
      let stateOptions = wrapper.find(PreviewControls).prop('stateOptions');
      expect(stateOptions.length).toBeGreaterThanOrEqual(1);
      expect(stateOptions.some(opt => opt.value === NOTIFICATION_STATE_COLLAPSED)).toBe(true);
      
      // iOS Chrome only supports Collapsed
      act(() => {
        wrapper.find(PreviewControls).prop('onOSChange')(OS_IOS);
        wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_CHROME);
      });
      wrapper.update();
      stateOptions = wrapper.find(PreviewControls).prop('stateOptions');
      expect(stateOptions.some(opt => opt.value === NOTIFICATION_STATE_COLLAPSED)).toBe(true);
    });
  });

  describe('Device Frame Asset Selection', () => {
    it('should use topSvg for macOS', () => {
      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
      act(() => {

        wrapper.find(PreviewControls).prop('onOSChange')(OS_MACOS);

      });

      wrapper.update();
      
      const frameImage = wrapper.find('.device-frame');
      expect(frameImage.prop('src')).toBeDefined();
      expect(frameImage.prop('alt')).toContain(OS_MACOS);
    });

    it('should use topSvg for Windows', () => {
      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
      act(() => {

        wrapper.find(PreviewControls).prop('onOSChange')(OS_WINDOWS);

      });

      wrapper.update();
      
      const frameImage = wrapper.find('.device-frame');
      expect(frameImage.prop('src')).toBeDefined();
      expect(frameImage.prop('alt')).toContain(OS_WINDOWS);
    });

    it('should use iosSvg for iOS', () => {
      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
      act(() => {

        wrapper.find(PreviewControls).prop('onOSChange')(OS_IOS);

      });

      wrapper.update();
      
      const frameImage = wrapper.find('.device-frame');
      expect(frameImage.prop('src')).toBeDefined();
      expect(frameImage.prop('alt')).toContain(OS_IOS);
    });

    it('should use iosSvg for Android Mobile', () => {
      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
      act(() => {

        wrapper.find(PreviewControls).prop('onOSChange')(OS_ANDROID_MOBILE);

      });

      wrapper.update();
      
      const frameImage = wrapper.find('.device-frame');
      expect(frameImage.prop('src')).toBeDefined();
      expect(frameImage.prop('alt')).toContain(OS_ANDROID_MOBILE);
    });

    it('should use lightSvg for iPadOS', () => {
      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
      act(() => {

        wrapper.find(PreviewControls).prop('onOSChange')(OS_IPADOS);

      });

      wrapper.update();
      
      const frameImage = wrapper.find('.device-frame');
      expect(frameImage.prop('src')).toBeDefined();
      expect(frameImage.prop('alt')).toContain(OS_IPADOS);
    });

    it('should use lightSvg for Android Tablet', () => {
      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
      act(() => {

        wrapper.find(PreviewControls).prop('onOSChange')(OS_ANDROID_TABLET);

      });

      wrapper.update();
      
      const frameImage = wrapper.find('.device-frame');
      expect(frameImage.prop('src')).toBeDefined();
      expect(frameImage.prop('alt')).toContain(OS_ANDROID_TABLET);
    });

    it('should fallback to topSvg for unknown OS', () => {
      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
      // Force an unknown OS by directly calling the handler with invalid value
      // This tests the fallback in DEVICE_ASSET_MAP
      const frameImage = wrapper.find('.device-frame');
      expect(frameImage.prop('src')).toBeDefined();
    });
  });

  describe('Notification Position Calculation', () => {
    it('should calculate position from variant configuration for macOS Chrome Collapsed', () => {
      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
      wrapper.find(PreviewControls).prop('onOSChange')(OS_MACOS);
      wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_CHROME);
      act(() => {

        wrapper.find(PreviewControls).prop('onStateChange')(NOTIFICATION_STATE_COLLAPSED);

      });

      wrapper.update();
      
      const resolvedVariant = getResolvedVariant(OS_MACOS, BROWSER_CHROME, NOTIFICATION_STATE_COLLAPSED);
      const expectedPosition = resolvedVariant?.stateConfig?.position?.custom || { x: 0, y: 0 };
      
      const notificationWrapper = wrapper.find('.device-notification-wrapper');
      const style = notificationWrapper.prop('style');
      expect(style.left).toBe(`${expectedPosition.x}px`);
      expect(style.top).toBe(`${expectedPosition.y}px`);
    });

    it('should calculate position from variant configuration for macOS Chrome Expanded', () => {
      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
      wrapper.find(PreviewControls).prop('onOSChange')(OS_MACOS);
      wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_CHROME);
      act(() => {

        wrapper.find(PreviewControls).prop('onStateChange')(NOTIFICATION_STATE_EXPANDED);

      });

      wrapper.update();
      
      const resolvedVariant = getResolvedVariant(OS_MACOS, BROWSER_CHROME, NOTIFICATION_STATE_EXPANDED);
      const expectedPosition = resolvedVariant?.stateConfig?.position?.custom || { x: 0, y: 0 };
      
      const notificationWrapper = wrapper.find('.device-notification-wrapper');
      const style = notificationWrapper.prop('style');
      expect(style.left).toBe(`${expectedPosition.x}px`);
      expect(style.top).toBe(`${expectedPosition.y}px`);
    });

    it('should calculate position with bottom property for Windows Chrome', () => {
      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
      wrapper.find(PreviewControls).prop('onOSChange')(OS_WINDOWS);
      wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_CHROME);
      act(() => {

        wrapper.find(PreviewControls).prop('onStateChange')(NOTIFICATION_STATE_COLLAPSED);

      });

      wrapper.update();
      
      const resolvedVariant = getResolvedVariant(OS_WINDOWS, BROWSER_CHROME, NOTIFICATION_STATE_COLLAPSED);
      const expectedPosition = resolvedVariant?.stateConfig?.position?.custom || { x: 0, y: 0 };
      
      const notificationWrapper = wrapper.find('.device-notification-wrapper');
      const style = notificationWrapper.prop('style');
      expect(style.left).toBe(`${expectedPosition.x}px`);
      if (expectedPosition.bottom !== undefined) {
        expect(style.bottom).toBe(`${expectedPosition.bottom}px`);
        expect(style.top).toBeUndefined();
      } else {
        expect(style.top).toBe(`${expectedPosition.y || 0}px`);
      }
    });

    it('should use fallback position (0, 0) when variant has no position config', () => {
      // This tests the fallback when position.custom is not defined
      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
      
      const notificationWrapper = wrapper.find('.device-notification-wrapper');
      const style = notificationWrapper.prop('style');
      expect(style.left).toBeDefined();
      expect(style.top !== undefined || style.bottom !== undefined).toBe(true);
    });

    it('should update position when OS changes', () => {
      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
      
      // macOS Chrome position
      act(() => {
        wrapper.find(PreviewControls).prop('onOSChange')(OS_MACOS);
        wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_CHROME);
      });
      wrapper.update();
      const position1 = wrapper.find('.device-notification-wrapper').prop('style');
      
      // Windows Chrome position (uses bottom instead of top)
      act(() => {
        wrapper.find(PreviewControls).prop('onOSChange')(OS_WINDOWS);
        wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_CHROME);
      });
      wrapper.update();
      const position2 = wrapper.find('.device-notification-wrapper').prop('style');
      
      // Both should have valid positions calculated
      expect(position1.left).toBeDefined();
      expect(position2.left).toBeDefined();
      // Windows uses bottom positioning, macOS uses top - verify the difference
      expect(position1.top !== undefined || position1.bottom !== undefined).toBe(true);
      expect(position2.top !== undefined || position2.bottom !== undefined).toBe(true);
      // macOS should use top, Windows should use bottom
      const resolvedVariant1 = getResolvedVariant(OS_MACOS, BROWSER_CHROME, NOTIFICATION_STATE_COLLAPSED);
      const resolvedVariant2 = getResolvedVariant(OS_WINDOWS, BROWSER_CHROME, NOTIFICATION_STATE_COLLAPSED);
      if (resolvedVariant1?.stateConfig?.position?.custom?.bottom === undefined &&
          resolvedVariant2?.stateConfig?.position?.custom?.bottom !== undefined) {
        // macOS uses top, Windows uses bottom
        expect(position1.top).toBeDefined();
        expect(position2.bottom).toBeDefined();
      }
    });

    it('should update position when browser changes', () => {
      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
      
      wrapper.find(PreviewControls).prop('onOSChange')(OS_MACOS);
      act(() => {

        wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_CHROME);

      });

      wrapper.update();
      const position1 = wrapper.find('.device-notification-wrapper').prop('style');
      
      act(() => {

      
        wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_FIREFOX);

      
      });

      
      wrapper.update();
      const position2 = wrapper.find('.device-notification-wrapper').prop('style');
      
      // Both should have valid positions
      expect(position1.left).toBeDefined();
      expect(position2.left).toBeDefined();
    });

    it('should update position when state changes', () => {
      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
      
      wrapper.find(PreviewControls).prop('onOSChange')(OS_MACOS);
      wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_CHROME);
      act(() => {

        wrapper.find(PreviewControls).prop('onStateChange')(NOTIFICATION_STATE_COLLAPSED);

      });

      wrapper.update();
      const position1 = wrapper.find('.device-notification-wrapper').prop('style');
      
      act(() => {

      
        wrapper.find(PreviewControls).prop('onStateChange')(NOTIFICATION_STATE_EXPANDED);

      
      });

      
      wrapper.update();
      const position2 = wrapper.find('.device-notification-wrapper').prop('style');
      
      // Both should have valid positions
      expect(position1.left).toBeDefined();
      expect(position2.left).toBeDefined();
    });
  });

  describe('NotificationContainer Rendering', () => {
    it('should render NotificationContainer when variant is resolved', () => {
      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
      wrapper.find(PreviewControls).prop('onOSChange')(OS_MACOS);
      act(() => {

        wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_CHROME);

      });

      wrapper.update();
      
      const notificationContainer = wrapper.find(NotificationContainer);
      expect(notificationContainer.exists()).toBe(true);
    });

    it('should render NotificationContainer for the default resolved variant', () => {
      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
      const notificationContainer = wrapper.find(NotificationContainer);
      expect(notificationContainer.exists()).toBe(true);
    });

    it('should pass correct props to NotificationContainer', () => {
      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
      wrapper.find(PreviewControls).prop('onOSChange')(OS_MACOS);
      wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_CHROME);
      act(() => {

        wrapper.find(PreviewControls).prop('onStateChange')(NOTIFICATION_STATE_COLLAPSED);

      });

      wrapper.update();
      
      const notificationContainer = wrapper.find(NotificationContainer);
      expect(notificationContainer.prop('notificationTitle')).toBe(defaultProps.notificationTitle);
      expect(notificationContainer.prop('notificationBody')).toBe(defaultProps.notificationBody);
      expect(notificationContainer.prop('url')).toBe(defaultProps.url);
      expect(notificationContainer.prop('selectedOS')).toBe(OS_MACOS);
      expect(notificationContainer.prop('selectedBrowser')).toBe(BROWSER_CHROME);
      expect(notificationContainer.prop('imageSrc')).toBe(defaultProps.imageSrc);
      expect(notificationContainer.prop('brandIconSrc')).toBe(defaultProps.brandIconSrc);
    });

    it('should pass resolved variant state to NotificationContainer', () => {
      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
      wrapper.find(PreviewControls).prop('onOSChange')(OS_MACOS);
      wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_CHROME);
      act(() => {

        wrapper.find(PreviewControls).prop('onStateChange')(NOTIFICATION_STATE_COLLAPSED);

      });

      wrapper.update();
      
      const resolvedVariant = getResolvedVariant(OS_MACOS, BROWSER_CHROME, NOTIFICATION_STATE_COLLAPSED);
      const notificationContainer = wrapper.find(NotificationContainer);
      
      expect(notificationContainer.prop('notificationState')).toBe(resolvedVariant.stateKey);
      expect(notificationContainer.prop('icon')).toBe(resolvedVariant.variant.icon);
      expect(notificationContainer.prop('supportsExpanded')).toBe(resolvedVariant.stateConfig.supportsExpanded);
      expect(notificationContainer.prop('enableMedia')).toBe(resolvedVariant.stateConfig.showMedia);
      expect(notificationContainer.prop('enableCtas')).toBe(false);
      expect(notificationContainer.prop('className')).toBe(resolvedVariant.variant.notificationClassName);
    });
  });

  describe('Combined OS/Browser/State Combinations', () => {
    const testCombinations = [
      { os: OS_MACOS, browser: BROWSER_CHROME, state: NOTIFICATION_STATE_COLLAPSED },
      { os: OS_MACOS, browser: BROWSER_CHROME, state: NOTIFICATION_STATE_EXPANDED },
      { os: OS_MACOS, browser: BROWSER_FIREFOX, state: NOTIFICATION_STATE_COLLAPSED },
      { os: OS_MACOS, browser: BROWSER_SAFARI, state: NOTIFICATION_STATE_COLLAPSED },
      { os: OS_WINDOWS, browser: BROWSER_CHROME, state: NOTIFICATION_STATE_COLLAPSED },
      { os: OS_WINDOWS, browser: BROWSER_CHROME, state: NOTIFICATION_STATE_EXPANDED },
      { os: OS_IOS, browser: BROWSER_CHROME, state: NOTIFICATION_STATE_COLLAPSED },
      { os: OS_IOS, browser: BROWSER_SAFARI, state: NOTIFICATION_STATE_COLLAPSED },
      { os: OS_ANDROID_MOBILE, browser: BROWSER_CHROME, state: NOTIFICATION_STATE_COLLAPSED },
      { os: OS_ANDROID_MOBILE, browser: BROWSER_CHROME, state: NOTIFICATION_STATE_EXPANDED },
      { os: OS_IPADOS, browser: BROWSER_CHROME, state: NOTIFICATION_STATE_COLLAPSED },
      { os: OS_ANDROID_TABLET, browser: BROWSER_CHROME, state: NOTIFICATION_STATE_COLLAPSED },
    ];

    testCombinations.forEach(({ os, browser, state }) => {
      it(`should handle ${os} + ${browser} + ${state} combination`, () => {
        const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
        
        wrapper.find(PreviewControls).prop('onOSChange')(os);
        wrapper.find(PreviewControls).prop('onBrowserChange')(browser);
        act(() => {

          wrapper.find(PreviewControls).prop('onStateChange')(state);

        });

        wrapper.update();
        
        const controls = wrapper.find(PreviewControls);
        expect(controls.prop('selectedOS')).toBe(os);
        expect(controls.prop('selectedBrowser')).toBe(browser);
        
        // State might be coerced if not supported
        const supportedStates = getSupportedStates(os, browser);
        if (supportedStates.includes(state)) {
          expect(controls.prop('selectedState')).toBe(state);
        } else {
          expect(supportedStates).toContain(controls.prop('selectedState'));
        }
        
        // Position should be calculated
        const notificationWrapper = wrapper.find('.device-notification-wrapper');
        expect(notificationWrapper.exists()).toBe(true);
        const style = notificationWrapper.prop('style');
        expect(style).toBeDefined();
        expect(style.position).toBe('absolute');
        expect(style.left).toBeDefined();
      });
    });
  });

  describe('CSS Classes and Styling', () => {
    it('should apply preview-unavailable class when variant is not resolved', () => {
      // This would require an unsupported combination
      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
      const notificationWrapper = wrapper.find('.device-notification-wrapper');
      
      // For default macOS Chrome, variant should be resolved
      const resolvedVariant = getResolvedVariant(DEFAULT_OS, DEFAULT_BROWSER, DEFAULT_STATE);
      if (resolvedVariant) {
        expect(notificationWrapper.hasClass('preview-unavailable')).toBe(false);
      }
    });

    it('should apply correct z-index to notification wrapper', () => {
      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
      const notificationWrapper = wrapper.find('.device-notification-wrapper');
      const style = notificationWrapper.prop('style');
      expect(style.zIndex).toBe(10);
    });

    it('should apply absolute positioning to notification wrapper', () => {
      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
      const notificationWrapper = wrapper.find('.device-notification-wrapper');
      const style = notificationWrapper.prop('style');
      expect(style.position).toBe('absolute');
    });
  });

  describe('Edge Cases', () => {
    it('should handle empty notification title and body', () => {
      const wrapper = mountWithIntl(
        <DevicePreviewContent
          notificationTitle=""
          notificationBody=""
          url=""
        />
      );
      expect(wrapper.exists()).toBe(true);
      const notificationContainer = wrapper.find(NotificationContainer);
      expect(notificationContainer.prop('notificationTitle')).toBe('');
      expect(notificationContainer.prop('notificationBody')).toBe('');
    });

    it('should handle missing imageSrc and brandIconSrc', () => {
      const wrapper = mountWithIntl(
        <DevicePreviewContent
          notificationTitle="Test"
          notificationBody="Test"
          url="https://example.com"
        />
      );
      const notificationContainer = wrapper.find(NotificationContainer);
      expect(notificationContainer.prop('imageSrc')).toBe('');
      expect(notificationContainer.prop('brandIconSrc')).toBe('');
    });

    it('should handle rapid OS/Browser/State changes', () => {
      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
      
      // Rapidly change combinations
      wrapper.find(PreviewControls).prop('onOSChange')(OS_MACOS);
      wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_CHROME);
      act(() => {

        wrapper.find(PreviewControls).prop('onStateChange')(NOTIFICATION_STATE_EXPANDED);

      });

      wrapper.update();
      
      wrapper.find(PreviewControls).prop('onOSChange')(OS_WINDOWS);
      wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_FIREFOX);
      act(() => {

        wrapper.find(PreviewControls).prop('onStateChange')(NOTIFICATION_STATE_COLLAPSED);

      });

      wrapper.update();
      
      wrapper.find(PreviewControls).prop('onOSChange')(OS_IOS);
      act(() => {

        wrapper.find(PreviewControls).prop('onBrowserChange')(BROWSER_SAFARI);

      });

      wrapper.update();
      
      const controls = wrapper.find(PreviewControls);
      expect(controls.prop('selectedOS')).toBe(OS_IOS);
      expect(controls.prop('selectedBrowser')).toBe(BROWSER_SAFARI);
    });
  });

  describe('Refs and DOM Elements', () => {
    it('should create refs for device frame and notification', () => {
      const wrapper = mountWithIntl(<DevicePreviewContent {...defaultProps} />);
      
      const deviceFrame = wrapper.find('.device-frame');
      expect(deviceFrame.exists()).toBe(true);
      
      const notificationWrapper = wrapper.find('.device-notification-wrapper');
      expect(notificationWrapper.exists()).toBe(true);
    });
  });
});

