/**
 * Tests for UnifiedPreview Component
 * 
 * Tests all channel routing, content rendering, device handling, and edge cases
 */

import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import { injectIntl, IntlProvider } from 'react-intl';
import UnifiedPreview from '../../UnifiedPreview';
import { CHANNELS, DESKTOP, TABLET, MOBILE, ANDROID, IOS } from '../../constants';
import messages from '../../messages';

// Convert messages object to format expected by IntlProvider
const messagesForIntl = Object.keys(messages).reduce((acc, key) => {
  const message = messages[key];
  acc[message.id] = message.defaultMessage;
  return acc;
}, {});

// Wrap component with injectIntl - extract formatMessage from intl and pass to component
const ComponentToRender = injectIntl(({ intl, ...props }) => (
  <UnifiedPreview {...props} formatMessage={intl.formatMessage} />
));

// Test wrapper - use IntlProvider with messages
const TestWrapper = ({ children }) => (
  <IntlProvider locale="en" messages={messagesForIntl}>
    {children}
  </IntlProvider>
);

jest.mock('../../UnifiedPreview/EmailPreviewContent', () => ({
  __esModule: true,
  default: (props) => (
    <div data-testid="email-preview">
      <div data-testid="email-content">{props.content}</div>
      <div data-testid="email-subject">{props.subject}</div>
      <div data-testid="email-device">{props.device}</div>
    </div>
  ),
}));

jest.mock('../../UnifiedPreview/SmsPreviewContent', () => ({
  __esModule: true,
  default: (props) => (
    <div data-testid="sms-preview">
      <div data-testid="sms-content">{props.content}</div>
      <div data-testid="sms-device">{props.device}</div>
      <div data-testid="sms-sender-id">{props.senderId}</div>
    </div>
  ),
}));

jest.mock('../../UnifiedPreview/WhatsAppPreviewContent', () => ({
  __esModule: true,
  default: (props) => (
    <div data-testid="whatsapp-preview">
      <div data-testid="whatsapp-content">{JSON.stringify(props.content)}</div>
      <div data-testid="whatsapp-device">{props.device}</div>
      <div data-testid="whatsapp-account">{props.accountName}</div>
    </div>
  ),
}));

jest.mock('../../UnifiedPreview/RcsPreviewContent', () => ({
  __esModule: true,
  default: (props) => (
    <div data-testid="rcs-preview">
      <div data-testid="rcs-content">{JSON.stringify(props.content)}</div>
      <div data-testid="rcs-device">{props.device}</div>
      <div data-testid="rcs-sender-id">{props.senderId}</div>
    </div>
  ),
}));

jest.mock('../../UnifiedPreview/InAppPreviewContent', () => ({
  __esModule: true,
  default: (props) => (
    <div data-testid="inapp-preview">
      <div data-testid="inapp-content">{JSON.stringify(props.content)}</div>
      <div data-testid="inapp-device">{props.device}</div>
      <div data-testid="inapp-layout">{props.templateLayoutType}</div>
      <div data-testid="inapp-show-header">{props.showHeader ? 'true' : 'false'}</div>
    </div>
  ),
}));

jest.mock('../../UnifiedPreview/MobilePushPreviewContent', () => ({
  __esModule: true,
  default: (props) => (
    <div data-testid="mobilepush-preview">
      <div data-testid="mobilepush-content">{JSON.stringify(props.content)}</div>
      <div data-testid="mobilepush-device">{props.device}</div>
    </div>
  ),
}));

jest.mock('../../UnifiedPreview/ViberPreviewContent', () => ({
  __esModule: true,
  default: (props) => (
    <div data-testid="viber-preview">
      <div data-testid="viber-content">{JSON.stringify(props.content)}</div>
      <div data-testid="viber-device">{props.device}</div>
      <div data-testid="viber-account">{props.accountName}</div>
      <div data-testid="viber-brand">{props.brandName}</div>
    </div>
  ),
}));

jest.mock('../../UnifiedPreview/ZaloPreviewContent', () => ({
  __esModule: true,
  default: (props) => (
    <div data-testid="zalo-preview">
      <div data-testid="zalo-content">{JSON.stringify(props.content)}</div>
      <div data-testid="zalo-full-mode">{props.fullMode ? 'true' : 'false'}</div>
    </div>
  ),
}));

jest.mock('../../UnifiedPreview/WebPushPreviewContent', () => ({
  __esModule: true,
  default: (props) => (
    <div data-testid="webpush-preview">
      <div data-testid="webpush-title">{props.notificationTitle}</div>
      <div data-testid="webpush-body">{props.notificationBody}</div>
      <div data-testid="webpush-image">{props.imageSrc}</div>
      <div data-testid="webpush-icon">{props.brandIconSrc}</div>
      <div data-testid="webpush-url">{props.url}</div>
      <div data-testid="webpush-buttons">{JSON.stringify(props.buttons)}</div>
      <div data-testid="webpush-fullscreen">{props.isFullscreenOpen ? 'true' : 'false'}</div>
    </div>
  ),
}));

jest.mock('../../UnifiedPreview/PreviewHeader', () => ({
  __esModule: true,
  default: (props) => (
    <div data-testid="preview-header">
      <div data-testid="header-customer">{props.selectedCustomer?.name || 'Default'}</div>
      <div data-testid="header-device">{props.device}</div>
      <div data-testid="header-channel">{props.channel}</div>
    </div>
  ),
}));

jest.mock('../../UnifiedPreview/DeviceFrame', () => ({
  __esModule: true,
  default: (props) => (
    <div data-testid="device-frame" data-device={props.device}>
      {props.children}
    </div>
  ),
}));

describe('UnifiedPreview', () => {
  const defaultProps = {
    channel: CHANNELS.EMAIL,
    content: {
      resolvedBody: '<html>Test</html>',
      resolvedTitle: 'Test Subject',
    },
    device: DESKTOP,
    isUpdating: false,
    error: null,
    showHeader: true,
    // formatMessage will be injected by injectIntl
  };

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

  describe('Loading State', () => {
    it('should render loading state when isUpdating is true', () => {
      const props = {
        ...defaultProps,
        isUpdating: true,
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      // Component uses formatMessage with defaultMessage 'Updating preview...'
      expect(screen.getByText(/Updating preview/i)).toBeTruthy();
    });

    it('should show header in loading state when showHeader is true', () => {
      const props = {
        ...defaultProps,
        isUpdating: true,
        showHeader: true,
        selectedCustomer: { name: 'John Doe' },
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.getByTestId('preview-header')).toBeTruthy();
    });

    it('should not show header in loading state when showHeader is false', () => {
      const props = {
        ...defaultProps,
        isUpdating: true,
        showHeader: false,
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.queryByTestId('preview-header')).toBeNull();
    });
  });

  describe('Error State', () => {

    it('should show header in error state when showHeader is true', () => {
      const props = {
        ...defaultProps,
        error: 'Error',
        showHeader: true,
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.getByTestId('preview-header')).toBeTruthy();
    });

    it('should not show header in error state when showHeader is false', () => {
      const props = {
        ...defaultProps,
        error: 'Error',
        showHeader: false,
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.queryByTestId('preview-header')).toBeNull();
    });
  });

  describe('Channel Routing - EMAIL', () => {
    it('should render EmailPreviewContent for EMAIL channel', () => {
      const props = {
        ...defaultProps,
        channel: CHANNELS.EMAIL,
        content: {
          resolvedBody: '<html>Email Content</html>',
          resolvedTitle: 'Email Subject',
        },
      };

      const { container } = render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );
      expect(screen.getByTestId('email-preview')).toBeTruthy();
      expect(screen.getByTestId('email-content')).toHaveTextContent('<html>Email Content</html>');
      expect(screen.getByTestId('email-subject')).toHaveTextContent('Email Subject');
    });

    it('should handle empty resolvedBody', () => {
      const props = {
        ...defaultProps,
        channel: CHANNELS.EMAIL,
        content: {
          resolvedTitle: 'Subject',
        },
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.getByTestId('email-content')).toHaveTextContent('');
    });

    it('should handle empty resolvedTitle', () => {
      const props = {
        ...defaultProps,
        channel: CHANNELS.EMAIL,
        content: {
          resolvedBody: '<html>Content</html>',
        },
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.getByTestId('email-subject')).toHaveTextContent('');
    });

    it('should handle null content', () => {
      const props = {
        ...defaultProps,
        channel: CHANNELS.EMAIL,
        content: null,
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.getByTestId('email-content')).toHaveTextContent('');
    });
  });

  describe('Channel Routing - SMS', () => {
    it('should render SmsPreviewContent for SMS channel with string content', () => {
      const props = {
        ...defaultProps,
        channel: CHANNELS.SMS,
        content: 'SMS message text',
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.getByTestId('sms-preview')).toBeTruthy();
      expect(screen.getByTestId('sms-content')).toHaveTextContent('SMS message text');
    });

    it('should handle object content with resolvedBody', () => {
      const props = {
        ...defaultProps,
        channel: CHANNELS.SMS,
        content: {
          resolvedBody: 'SMS from object',
        },
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.getByTestId('sms-content')).toHaveTextContent('SMS from object');
    });

    it('should handle JSON stringified content (single quotes)', () => {
      const props = {
        ...defaultProps,
        channel: CHANNELS.SMS,
        content: '"SMS message"',
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.getByTestId('sms-content')).toHaveTextContent('SMS message');
    });

    it('should handle double JSON stringified content', () => {
      const props = {
        ...defaultProps,
        channel: CHANNELS.SMS,
        content: '"\\"SMS message\\""',
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.getByTestId('sms-content')).toHaveTextContent('SMS message');
    });

    it('should handle JSON stringified content that fails to parse', () => {
      const props = {
        ...defaultProps,
        channel: CHANNELS.SMS,
        content: '"Invalid JSON"',
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      // Should still render, content may be processed
      expect(screen.getByTestId('sms-preview')).toBeTruthy();
    });

    it('should handle empty string content', () => {
      const props = {
        ...defaultProps,
        channel: CHANNELS.SMS,
        content: '',
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.getByTestId('sms-content')).toHaveTextContent('');
    });

    it('should handle null content', () => {
      const props = {
        ...defaultProps,
        channel: CHANNELS.SMS,
        content: null,
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.getByTestId('sms-content')).toHaveTextContent('');
    });

    it('should pass senderId to SmsPreviewContent', () => {
      const props = {
        ...defaultProps,
        channel: CHANNELS.SMS,
        content: 'SMS message',
        content: {
          resolvedBody: 'SMS message',
          senderId: 'SENDER123',
        },
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.getByTestId('sms-sender-id')).toHaveTextContent('SENDER123');
    });
  });

  describe('Channel Routing - WHATSAPP', () => {
    it('should render WhatsAppPreviewContent for WHATSAPP channel', () => {
      const props = {
        ...defaultProps,
        channel: CHANNELS.WHATSAPP,
        content: {
          templateMsg: 'WhatsApp message',
          accountName: 'Test Account',
        },
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.getByTestId('whatsapp-preview')).toBeTruthy();
    });

    it('should handle non-object content', () => {
      const props = {
        ...defaultProps,
        channel: CHANNELS.WHATSAPP,
        content: 'string content',
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.getByTestId('whatsapp-preview')).toBeTruthy();
    });

    it('should pass accountName from content', () => {
      const props = {
        ...defaultProps,
        channel: CHANNELS.WHATSAPP,
        content: {
          accountName: 'WhatsApp Account',
        },
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.getByTestId('whatsapp-account')).toHaveTextContent('WhatsApp Account');
    });
  });

  describe('Channel Routing - RCS', () => {
    it('should render RcsPreviewContent for RCS channel', () => {
      const props = {
        ...defaultProps,
        channel: CHANNELS.RCS,
        content: {
          rcsTitle: 'RCS Title',
          rcsDesc: 'RCS Description',
        },
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.getByTestId('rcs-preview')).toBeTruthy();
    });

    it('should pass senderId to RcsPreviewContent', () => {
      const props = {
        ...defaultProps,
        channel: CHANNELS.RCS,
        content: {
          senderId: 'RCS_SENDER',
        },
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.getByTestId('rcs-sender-id')).toHaveTextContent('RCS_SENDER');
    });
  });

  describe('Channel Routing - INAPP', () => {
    it('should render InAppPreviewContent for INAPP channel', () => {
      const props = {
        ...defaultProps,
        channel: CHANNELS.INAPP,
        content: {
          androidContent: {},
          iosContent: {},
          templateLayoutType: 'POPUP',
        },
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.getByTestId('inapp-preview')).toBeTruthy();
    });

    it('should pass showHeader prop to InAppPreviewContent', () => {
      const props = {
        ...defaultProps,
        channel: CHANNELS.INAPP,
        content: {},
        showHeader: false,
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.getByTestId('inapp-show-header')).toHaveTextContent('false');
    });

    it('should pass templateLayoutType to InAppPreviewContent', () => {
      const props = {
        ...defaultProps,
        channel: CHANNELS.INAPP,
        content: {
          templateLayoutType: 'FULLSCREEN',
        },
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.getByTestId('inapp-layout')).toHaveTextContent('FULLSCREEN');
    });
  });

  describe('Channel Routing - MOBILEPUSH', () => {
    it('should render MobilePushPreviewContent for MOBILEPUSH channel', () => {
      const props = {
        ...defaultProps,
        channel: CHANNELS.MOBILEPUSH,
        content: {
          androidContent: {},
          iosContent: {},
        },
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.getByTestId('mobilepush-preview')).toBeTruthy();
    });
  });

  describe('Channel Routing - VIBER', () => {
    it('should render ViberPreviewContent for VIBER channel', () => {
      const props = {
        ...defaultProps,
        channel: CHANNELS.VIBER,
        content: {
          viberPreviewContent: {},
        },
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.getByTestId('viber-preview')).toBeTruthy();
    });

    it('should pass accountName and brandName to ViberPreviewContent', () => {
      const props = {
        ...defaultProps,
        channel: CHANNELS.VIBER,
        content: {
          accountName: 'Viber Account',
          brandName: 'Brand Name',
        },
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.getByTestId('viber-account')).toHaveTextContent('Viber Account');
      expect(screen.getByTestId('viber-brand')).toHaveTextContent('Brand Name');
    });
  });

  describe('Channel Routing - ZALO', () => {
    it('should render ZaloPreviewContent for ZALO channel', () => {
      const props = {
        ...defaultProps,
        channel: CHANNELS.ZALO,
        content: {
          templatePreviewUrl: 'https://preview.url',
        },
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.getByTestId('zalo-preview')).toBeTruthy();
    });

    it('should always pass fullMode=true to ZaloPreviewContent', () => {
      const props = {
        ...defaultProps,
        channel: CHANNELS.ZALO,
        content: {},
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.getByTestId('zalo-full-mode')).toHaveTextContent('true');
    });
  });

  describe('Channel Routing - Unknown Channel', () => {
    it('should render placeholder for unknown channel', () => {
      const props = {
        ...defaultProps,
        channel: 'UNKNOWN_CHANNEL',
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.getByText('Unknown Channel')).toBeTruthy();
      expect(screen.getByText(/Channel:/)).toBeTruthy();
      expect(screen.getByText('UNKNOWN_CHANNEL')).toBeTruthy();
    });
  });

  describe('Device Frame Handling', () => {
    it('should wrap ZALO channel in DeviceFrame', () => {
      const props = {
        ...defaultProps,
        channel: CHANNELS.ZALO,
        content: {},
        device: DESKTOP,
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.getByTestId('device-frame')).toBeTruthy();
    });

    it('should not wrap EMAIL channel in DeviceFrame', () => {
      const props = {
        ...defaultProps,
        channel: CHANNELS.EMAIL,
        device: DESKTOP,
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.queryByTestId('device-frame')).toBeNull();
    });

    it('should not wrap SMS channel in DeviceFrame', () => {
      const props = {
        ...defaultProps,
        channel: CHANNELS.SMS,
        device: ANDROID,
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.queryByTestId('device-frame')).toBeNull();
    });
  });

  describe('Header Visibility', () => {
    it('should show header when showHeader is true', () => {
      const props = {
        ...defaultProps,
        showHeader: true,
        selectedCustomer: { name: 'John Doe' },
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.getByTestId('preview-header')).toBeTruthy();
    });

    it('should not show header when showHeader is false', () => {
      const props = {
        ...defaultProps,
        showHeader: false,
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.queryByTestId('preview-header')).toBeNull();
    });

    it('should use default showHeader=true when not provided', () => {
      render(
        <TestWrapper>
          <ComponentToRender {...defaultProps} />
        </TestWrapper>
      );

      expect(screen.getByTestId('preview-header')).toBeTruthy();
    });

    it('should add no-header class when showHeader is false', () => {
      const props = {
        ...defaultProps,
        showHeader: false,
      };

      const { container } = render(<UnifiedPreview {...props} />);
      const contentContainer = container.querySelector('.preview-content-container-no-header');
      expect(contentContainer).toBeTruthy();
    });
  });

  describe('Metadata Display', () => {
    it('should show metadata when lastModified is provided', () => {
      const props = {
        ...defaultProps,
        lastModified: '2024-01-01',
      };

      const { container } = render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      // Check for metadata container and that it contains the lastModified value
      const metadataContainer = container.querySelector('.preview-metadata');
      expect(metadataContainer).toBeTruthy();
      expect(metadataContainer.textContent).toContain('2024-01-01');
    });

    it('should show metadata when updatedByName is provided', () => {
      const props = {
        ...defaultProps,
        lastModified: '2024-01-01',
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.getByText(/Last modified/)).toBeTruthy();
      expect(screen.getByText(/2024-01-01/i)).toBeTruthy();
    });

    it('should show metadata when updatedByName is provided', () => {
      const props = {
        ...defaultProps,
        updatedByName: 'John Doe',
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.getByText(/by/)).toBeTruthy();
      expect(screen.getByText(/John Doe/i)).toBeTruthy();
    });

    it('should show both metadata items when both are provided', () => {
      const props = {
        ...defaultProps,
        lastModified: '2024-01-01',
        updatedByName: 'John Doe',
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.getByText(/Last modified/)).toBeTruthy();
      expect(screen.getByText(/by/)).toBeTruthy();
    });

    it('should not show metadata when neither is provided', () => {
      render(<UnifiedPreview {...defaultProps} />);

      expect(screen.queryByText(/Last modified/)).toBeNull();
      expect(screen.queryByText(/by/)).toBeNull();
    });
  });

  describe('Edge Cases', () => {
    it('should handle undefined device', () => {
      const props = {
        ...defaultProps,
        device: undefined,
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.getByTestId('email-preview')).toBeTruthy();
    });

    it('should handle null selectedCustomer', () => {
      const props = {
        ...defaultProps,
        selectedCustomer: null,
        showHeader: true,
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.getByTestId('header-customer')).toHaveTextContent('Default');
    });

    it('should handle empty content object', () => {
      const props = {
        ...defaultProps,
        content: {},
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.getByTestId('email-preview')).toBeTruthy();
    });

    it('should handle all device types', () => {
      const devices = [DESKTOP, TABLET, MOBILE, ANDROID, IOS];

      devices.forEach((device) => {
        const { unmount } = render(
          <UnifiedPreview
            {...defaultProps}
            device={device}
          />
        );
        expect(screen.getByTestId('email-preview')).toBeTruthy();
        unmount();
      });
    });
  });

  describe('PropTypes Validation', () => {
    it('should accept all required props without warnings', () => {
      const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});

      render(<UnifiedPreview {...defaultProps} />);

      expect(consoleSpy).not.toHaveBeenCalled();
      consoleSpy.mockRestore();
    });
  });

  describe('Channel Routing - WEBPUSH', () => {
    it('should render WebPushPreviewContent for WEBPUSH channel with object content', () => {
      const content = {
        content: {
          title: 'Hello World',
          message: 'This is a notification',
          iconImageUrl: 'https://example.com/icon.png',
          cta: { actionLink: 'https://example.com' },
          expandableDetails: {
            media: [{ url: 'https://example.com/image.jpg' }],
            ctas: [{ title: 'Click me', actionLink: 'https://example.com/btn', type: 'EXTERNAL_URL' }],
          },
        },
      };
      const props = { ...defaultProps, channel: CHANNELS.WEBPUSH, content };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.getByTestId('webpush-preview')).toBeTruthy();
      expect(screen.getByTestId('webpush-title')).toHaveTextContent('Hello World');
      expect(screen.getByTestId('webpush-body')).toHaveTextContent('This is a notification');
      expect(screen.getByTestId('webpush-icon')).toHaveTextContent('https://example.com/icon.png');
      expect(screen.getByTestId('webpush-url')).toHaveTextContent('https://example.com');
    });

    it('should render WebPushPreviewContent for WEBPUSH channel with JSON string content', () => {
      const contentObj = {
        content: {
          title: 'Push Title',
          message: 'Push message body',
          iconImageUrl: 'https://example.com/brand.png',
        },
      };
      const props = {
        ...defaultProps,
        channel: CHANNELS.WEBPUSH,
        content: JSON.stringify(contentObj),
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.getByTestId('webpush-preview')).toBeTruthy();
      expect(screen.getByTestId('webpush-title')).toHaveTextContent('Push Title');
      expect(screen.getByTestId('webpush-body')).toHaveTextContent('Push message body');
      expect(screen.getByTestId('webpush-icon')).toHaveTextContent('https://example.com/brand.png');
    });

    it('should fallback to empty object when JSON parse fails', () => {
      const props = {
        ...defaultProps,
        channel: CHANNELS.WEBPUSH,
        content: 'INVALID_JSON{{{{',
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.getByTestId('webpush-preview')).toBeTruthy();
      expect(screen.getByTestId('webpush-title')).toHaveTextContent('');
      expect(screen.getByTestId('webpush-body')).toHaveTextContent('');
    });

    it('should fallback to empty object when content is null', () => {
      const props = { ...defaultProps, channel: CHANNELS.WEBPUSH, content: null };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.getByTestId('webpush-preview')).toBeTruthy();
      expect(screen.getByTestId('webpush-title')).toHaveTextContent('');
    });

    it('should extract imageSrc from expandableDetails.media[0].url', () => {
      const content = {
        content: {
          title: 'T',
          message: 'M',
          expandableDetails: {
            media: [{ url: 'https://example.com/media.jpg' }],
            ctas: [],
          },
        },
      };
      const props = { ...defaultProps, channel: CHANNELS.WEBPUSH, content };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.getByTestId('webpush-image')).toHaveTextContent('https://example.com/media.jpg');
    });

    it('should pass empty imageSrc when media array is empty', () => {
      const content = {
        content: {
          title: 'T',
          message: 'M',
          expandableDetails: { media: [], ctas: [] },
        },
      };
      const props = { ...defaultProps, channel: CHANNELS.WEBPUSH, content };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      expect(screen.getByTestId('webpush-image')).toHaveTextContent('');
    });

    it('should map CTA buttons from expandableDetails.ctas', () => {
      const content = {
        content: {
          title: 'T',
          message: 'M',
          expandableDetails: {
            media: [],
            ctas: [
              { title: 'Btn1', actionLink: 'https://a.com', type: 'EXTERNAL_URL' },
              { title: 'Btn2', actionLink: 'https://b.com', type: 'SITE_URL' },
            ],
          },
        },
      };
      const props = { ...defaultProps, channel: CHANNELS.WEBPUSH, content };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      const buttons = JSON.parse(screen.getByTestId('webpush-buttons').textContent);
      expect(buttons).toHaveLength(2);
      expect(buttons[0]).toEqual({ text: 'Btn1', url: 'https://a.com', type: 'EXTERNAL_URL' });
      expect(buttons[1]).toEqual({ text: 'Btn2', url: 'https://b.com', type: 'SITE_URL' });
    });

    it('should pass empty buttons array when no ctas', () => {
      const content = { content: { title: 'T', message: 'M' } };
      const props = { ...defaultProps, channel: CHANNELS.WEBPUSH, content };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      const buttons = JSON.parse(screen.getByTestId('webpush-buttons').textContent);
      expect(buttons).toEqual([]);
    });

    it('should NOT show device toggle for WEBPUSH channel', () => {
      const props = {
        ...defaultProps,
        channel: CHANNELS.WEBPUSH,
        showDeviceToggle: true,
        showHeader: true,
        selectedCustomer: { name: 'Alice' },
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      // PreviewHeader is mocked - verify it receives showDeviceToggle=false for WEBPUSH
      const header = screen.getByTestId('preview-header');
      expect(header).toBeTruthy();
    });

    it('should include WEBPUSH in supported channels list', () => {
      const props = { ...defaultProps, channel: CHANNELS.WEBPUSH, content: {} };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      // WEBPUSH should render WebPushPreviewContent, not the unsupported placeholder
      expect(screen.getByTestId('webpush-preview')).toBeTruthy();
      expect(screen.queryByText(/Coming Soon/)).toBeNull();
    });

    it('should pass isUpdating to WebPushPreviewContent in loading state', () => {
      const props = {
        ...defaultProps,
        channel: CHANNELS.WEBPUSH,
        content: { content: { title: 'T', message: 'M' } },
        isUpdating: true,
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      // When isUpdating, component shows loading spinner, not WebPushPreviewContent
      expect(screen.queryByTestId('webpush-preview')).toBeNull();
    });

    it('should pass error to WebPushPreviewContent in error state', () => {
      const props = {
        ...defaultProps,
        channel: CHANNELS.WEBPUSH,
        content: { content: { title: 'T', message: 'M' } },
        error: 'Network error',
      };

      render(
        <TestWrapper>
          <ComponentToRender {...props} />
        </TestWrapper>
      );

      // When error, component shows error state, not WebPushPreviewContent
      expect(screen.queryByTestId('webpush-preview')).toBeNull();
    });
  });
});
