import React from 'react';
import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
import CapRadioGroup from '@capillarytech/cap-ui-library/CapRadioGroup';
import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
import { mountWithIntl, shallowWithIntl } from '../../../../helpers/intl-enzym-test-helpers';
import { BrandIconSection } from './BrandIconSection';
import CapImageUpload from '../../../../v2Components/CapImageUpload';
import { BRAND_ICON_OPTIONS } from '../../constants';

describe('BrandIconSection', () => {
  const mockFormatMessage = jest.fn((msg) => msg?.defaultMessage || msg?.id || '');

  const mockMessages = {
    brandIconLogo: { id: 'app.webpush.brandIconLogo', defaultMessage: 'Brand Icon/Logo' },
    dontShow: { id: 'app.webpush.dontShow', defaultMessage: "Don't show" },
    uploadImage: { id: 'app.webpush.uploadImage', defaultMessage: 'Upload image' },
  };

  const mockBrandIconUpload = {
    imageSrc: '',
    uploadAsset: jest.fn(),
    setUpdateImageSrc: jest.fn(),
    updateOnReUpload: jest.fn(),
  };

  const defaultProps = {
    brandIconOption: BRAND_ICON_OPTIONS.DONT_SHOW,
    onBrandIconChange: jest.fn(),
    brandIconUpload: mockBrandIconUpload,
    isLocked: false,
    isAnyUploadActive: false,
    formatMessage: mockFormatMessage,
    messages: mockMessages,
    webPush: {},
    isFullMode: true,
  };

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

  describe('brandIconOptions array', () => {
    it('builds exactly two options: DONT_SHOW and UPLOAD_IMAGE', () => {
      const wrapper = mountWithIntl(<BrandIconSection {...defaultProps} />);
      const radioGroup = wrapper.find(CapRadioGroup);
      const options = radioGroup.prop('options');
      expect(options).toHaveLength(2);
      expect(options[0].value).toBe(BRAND_ICON_OPTIONS.DONT_SHOW);
      expect(options[1].value).toBe(BRAND_ICON_OPTIONS.UPLOAD_IMAGE);
    });

    it('does NOT include ADD_IMAGE_URL option (commented-out feature)', () => {
      const wrapper = mountWithIntl(<BrandIconSection {...defaultProps} />);
      const options = wrapper.find(CapRadioGroup).prop('options');
      const hasAddImageUrl = options.some((opt) => opt.value === BRAND_ICON_OPTIONS.ADD_IMAGE_URL);
      expect(hasAddImageUrl).toBe(false);
    });

    it('calls formatMessage for each option label', () => {
      mountWithIntl(<BrandIconSection {...defaultProps} />);
      expect(mockFormatMessage).toHaveBeenCalledWith(mockMessages.dontShow);
      expect(mockFormatMessage).toHaveBeenCalledWith(mockMessages.uploadImage);
    });
  });

  describe('CapRadioGroup rendering', () => {
    it('passes brandIconOption as value to CapRadioGroup', () => {
      const wrapper = mountWithIntl(
        <BrandIconSection {...defaultProps} brandIconOption={BRAND_ICON_OPTIONS.UPLOAD_IMAGE} />
      );
      expect(wrapper.find(CapRadioGroup).prop('value')).toBe(BRAND_ICON_OPTIONS.UPLOAD_IMAGE);
    });

    it('passes onBrandIconChange as onChange to CapRadioGroup', () => {
      const onBrandIconChange = jest.fn();
      const wrapper = mountWithIntl(
        <BrandIconSection {...defaultProps} onBrandIconChange={onBrandIconChange} />
      );
      expect(wrapper.find(CapRadioGroup).prop('onChange')).toBe(onBrandIconChange);
    });

    it('disables CapRadioGroup when isAnyUploadActive is true', () => {
      const wrapper = mountWithIntl(
        <BrandIconSection {...defaultProps} isAnyUploadActive={true} />
      );
      expect(wrapper.find(CapRadioGroup).prop('disabled')).toBe(true);
    });

    it('does not disable CapRadioGroup when isAnyUploadActive is false', () => {
      const wrapper = mountWithIntl(
        <BrandIconSection {...defaultProps} isAnyUploadActive={false} />
      );
      expect(wrapper.find(CapRadioGroup).prop('disabled')).toBe(false);
    });
  });

  describe('conditional upload section (brandIconOption === UPLOAD_IMAGE)', () => {
    it('does NOT render CapImageUpload when brandIconOption is DONT_SHOW', () => {
      const wrapper = mountWithIntl(
        <BrandIconSection {...defaultProps} brandIconOption={BRAND_ICON_OPTIONS.DONT_SHOW} />
      );
      expect(wrapper.find(CapImageUpload).exists()).toBe(false);
    });

    it('renders CapImageUpload when brandIconOption is UPLOAD_IMAGE', () => {
      const wrapper = mountWithIntl(
        <BrandIconSection {...defaultProps} brandIconOption={BRAND_ICON_OPTIONS.UPLOAD_IMAGE} />
      );
      expect(wrapper.find(CapImageUpload).exists()).toBe(true);
    });

    it('renders the upload section row with correct className', () => {
      const wrapper = mountWithIntl(
        <BrandIconSection {...defaultProps} brandIconOption={BRAND_ICON_OPTIONS.UPLOAD_IMAGE} />
      );
      expect(wrapper.find('.webpush-brand-icon-upload-section').exists()).toBe(true);
    });

    it('passes brandIconUpload.imageSrc to CapImageUpload as imageSrc', () => {
      const wrapper = mountWithIntl(
        <BrandIconSection
          {...defaultProps}
          brandIconOption={BRAND_ICON_OPTIONS.UPLOAD_IMAGE}
          brandIconUpload={{ ...mockBrandIconUpload, imageSrc: 'https://example.com/icon.png' }}
        />
      );
      expect(wrapper.find(CapImageUpload).prop('imageSrc')).toBe('https://example.com/icon.png');
    });

    it('passes brandIconUpload.uploadAsset to CapImageUpload as uploadAsset', () => {
      const uploadAsset = jest.fn();
      const wrapper = mountWithIntl(
        <BrandIconSection
          {...defaultProps}
          brandIconOption={BRAND_ICON_OPTIONS.UPLOAD_IMAGE}
          brandIconUpload={{ ...mockBrandIconUpload, uploadAsset }}
        />
      );
      expect(wrapper.find(CapImageUpload).prop('uploadAsset')).toBe(uploadAsset);
    });

    it('passes isFullMode to CapImageUpload', () => {
      const wrapper = mountWithIntl(
        <BrandIconSection
          {...defaultProps}
          brandIconOption={BRAND_ICON_OPTIONS.UPLOAD_IMAGE}
          isFullMode={false}
        />
      );
      expect(wrapper.find(CapImageUpload).prop('isFullMode')).toBe(false);
    });
  });

  describe('isLocked behavior', () => {
    it('applies pointer-events: none and opacity: 0.5 to upload row when isLocked is true', () => {
      const wrapper = mountWithIntl(
        <BrandIconSection
          {...defaultProps}
          brandIconOption={BRAND_ICON_OPTIONS.UPLOAD_IMAGE}
          isLocked={true}
        />
      );
      const uploadRow = wrapper.find('.webpush-brand-icon-upload-section').first();
      expect(uploadRow.prop('style')).toEqual({ pointerEvents: 'none', opacity: 0.5 });
    });

    it('sets aria-disabled on upload row when isLocked is true', () => {
      const wrapper = mountWithIntl(
        <BrandIconSection
          {...defaultProps}
          brandIconOption={BRAND_ICON_OPTIONS.UPLOAD_IMAGE}
          isLocked={true}
        />
      );
      const uploadRow = wrapper.find('.webpush-brand-icon-upload-section').first();
      expect(uploadRow.prop('aria-disabled')).toBe(true);
    });

    it('does NOT apply lock styles to upload row when isLocked is false', () => {
      const wrapper = mountWithIntl(
        <BrandIconSection
          {...defaultProps}
          brandIconOption={BRAND_ICON_OPTIONS.UPLOAD_IMAGE}
          isLocked={false}
        />
      );
      const uploadRow = wrapper.find('.webpush-brand-icon-upload-section').first();
      expect(uploadRow.prop('style')).toBeUndefined();
    });

    it('passes disabled=true to CapImageUpload when isLocked is true', () => {
      const wrapper = mountWithIntl(
        <BrandIconSection
          {...defaultProps}
          brandIconOption={BRAND_ICON_OPTIONS.UPLOAD_IMAGE}
          isLocked={true}
        />
      );
      expect(wrapper.find(CapImageUpload).prop('disabled')).toBe(true);
    });

    it('passes disabled=false to CapImageUpload when isLocked is false', () => {
      const wrapper = mountWithIntl(
        <BrandIconSection
          {...defaultProps}
          brandIconOption={BRAND_ICON_OPTIONS.UPLOAD_IMAGE}
          isLocked={false}
        />
      );
      expect(wrapper.find(CapImageUpload).prop('disabled')).toBe(false);
    });
  });

  describe('structural rendering', () => {
    it('always renders CapDivider regardless of brandIconOption', () => {
      const wrapperDontShow = mountWithIntl(
        <BrandIconSection {...defaultProps} brandIconOption={BRAND_ICON_OPTIONS.DONT_SHOW} />
      );
      expect(wrapperDontShow.find(CapDivider).exists()).toBe(true);

      const wrapperUpload = mountWithIntl(
        <BrandIconSection {...defaultProps} brandIconOption={BRAND_ICON_OPTIONS.UPLOAD_IMAGE} />
      );
      expect(wrapperUpload.find(CapDivider).exists()).toBe(true);
    });

    it('renders the brand icon heading row with className creatives-webpush-brand-icon', () => {
      const wrapper = mountWithIntl(<BrandIconSection {...defaultProps} />);
      expect(wrapper.find('.creatives-webpush-brand-icon').exists()).toBe(true);
    });

    it('renders CapHeading with type h4', () => {
      const wrapper = mountWithIntl(<BrandIconSection {...defaultProps} />);
      expect(wrapper.find(CapHeading).prop('type')).toBe('h4');
    });
  });

  describe('snapshot', () => {
    it('matches snapshot for DONT_SHOW state', () => {
      const wrapper = shallowWithIntl(
        <BrandIconSection {...defaultProps} brandIconOption={BRAND_ICON_OPTIONS.DONT_SHOW} />
      );
      expect(wrapper).toMatchSnapshot();
    });

    it('matches snapshot for UPLOAD_IMAGE state', () => {
      const wrapper = shallowWithIntl(
        <BrandIconSection {...defaultProps} brandIconOption={BRAND_ICON_OPTIONS.UPLOAD_IMAGE} />
      );
      expect(wrapper).toMatchSnapshot();
    });

    it('matches snapshot for locked UPLOAD_IMAGE state', () => {
      const wrapper = shallowWithIntl(
        <BrandIconSection
          {...defaultProps}
          brandIconOption={BRAND_ICON_OPTIONS.UPLOAD_IMAGE}
          isLocked={true}
        />
      );
      expect(wrapper).toMatchSnapshot();
    });
  });
});
