import React from 'react';
import renderer from 'react-test-renderer';
import { render, screen } from '../../../utils/test-utils';
import { getRCSContent, getRcsStatusType, getTemplateStatusType } from '../utils';
import { RCS, RCS_BUTTON_TYPES, STATUS_OPTIONS, RCS_STATUSES } from '../constants';
import { mockData } from './mockData';

describe('RCS utils - renderRcsSuggestionsPreview', () => {
  const templateBase = {
    versions: {
      base: {
        content: {
          [RCS]: {
            rcsContent: {
              cardContent: [
                {
                  title: 'T',
                  description: 'D',
                  suggestions: [],
                },
              ],
            },
          },
        },
      },
    },
  };

  it('renders divider and QUICK_REPLY suggestion with small-link icon', () => {
    const template = JSON.parse(JSON.stringify(templateBase));
    template.versions.base.content[RCS].rcsContent.cardContent[0].suggestions = [
      { type: RCS_BUTTON_TYPES.QUICK_REPLY, text: 'Reply' },
    ];
    render(getRCSContent(template));
    expect(document.querySelectorAll('.whatsapp-divider').length).toBeGreaterThan(0);
    const labels = document.querySelectorAll('.rcs-cta-preview');
    expect(labels.length).toBe(1);
    expect(labels[0].textContent).toContain('Reply');
  });

  it('renders CTA suggestion with launch icon', () => {
    const template = JSON.parse(JSON.stringify(templateBase));
    template.versions.base.content[RCS].rcsContent.cardContent[0].suggestions = [
      { type: RCS_BUTTON_TYPES.CTA, text: 'Visit' },
    ];
    render(getRCSContent(template));
    const labels = document.querySelectorAll('.rcs-cta-preview');
    expect(labels.length).toBe(1);
    expect(labels[0].textContent).toContain('Visit');
  });

  it('renders PHONE_NUMBER suggestion with call icon', () => {
    const template = JSON.parse(JSON.stringify(templateBase));
    template.versions.base.content[RCS].rcsContent.cardContent[0].suggestions = [
      { type: RCS_BUTTON_TYPES.PHONE_NUMBER, text: 'Call' },
    ];
    render(getRCSContent(template));
    const labels = document.querySelectorAll('.rcs-cta-preview');
    expect(labels.length).toBe(1);
    expect(labels[0].textContent).toContain('Call');
  });
});

describe('RCS utils', () => {
  describe('getRCSContent', () => {
    it('renders RCS content with image and CTA suggestion', () => {
      const template = mockData.editData1.templateDetails;
      const tree = renderer.create(getRCSContent(template)).toJSON();
      expect(tree).toMatchSnapshot();
    });

    it('renders RCS content with no media', () => {
      const template = mockData.editData3.templateDetails;
      const tree = renderer.create(getRCSContent(template)).toJSON();
      expect(tree).toMatchSnapshot();
    });

    it('renders RCS content with multiple suggestion types', () => {
      const template = JSON.parse(JSON.stringify(mockData.editData1.templateDetails));
      template.versions.base.content.RCS.rcsContent.cardContent[0].suggestions = [
        { type: RCS_BUTTON_TYPES.QUICK_REPLY, text: 'Quick Reply' },
        { type: RCS_BUTTON_TYPES.CTA, text: 'URL Action' },
        { type: RCS_BUTTON_TYPES.PHONE_NUMBER, text: 'Call Now' },
      ];
      const tree = renderer.create(getRCSContent(template)).toJSON();
      expect(tree).toMatchSnapshot();
    });

    it('renders RCS content with missing cardContent', () => {
      const template = { versions: { base: { content: { RCS: { rcsContent: {} } } } } };
      const tree = renderer.create(getRCSContent(template)).toJSON();
      expect(tree).toMatchSnapshot();
    });

    it('renders RCS content with empty template', () => {
      const tree = renderer.create(getRCSContent({})).toJSON();
      expect(tree).toMatchSnapshot();
    });
  });

  describe('getRcsStatusType', () => {
    it('returns pending for awaitingApproval', () => {
      expect(getRcsStatusType(RCS_STATUSES.awaitingApproval)).toBe(RCS_STATUSES.pending);
    });
    it('returns pending for pending', () => {
      expect(getRcsStatusType(RCS_STATUSES.pending)).toBe(RCS_STATUSES.pending);
    });
    it('returns rejected for rejected', () => {
      expect(getRcsStatusType(RCS_STATUSES.rejected)).toBe(RCS_STATUSES.rejected);
    });
    it('returns unavailable for unavailable', () => {
      expect(getRcsStatusType(RCS_STATUSES.unavailable)).toBe(RCS_STATUSES.unavailable);
    });
    it('returns approved for approved', () => {
      expect(getRcsStatusType(RCS_STATUSES.approved)).toBe(RCS_STATUSES.approved);
    });
    it('returns rejected for unknown status', () => {
      expect(getRcsStatusType('some_unknown_status')).toBe(RCS_STATUSES.rejected);
    });
  });

  describe('getTemplateStatusType', () => {
    it('returns success for approved', () => {
      expect(getTemplateStatusType(RCS_STATUSES.approved)).toBe('success');
    });
    it('returns error for rejected', () => {
      expect(getTemplateStatusType(RCS_STATUSES.rejected)).toBe('error');
    });
    it('returns warning for pending', () => {
      expect(getTemplateStatusType(RCS_STATUSES.pending)).toBe('warning');
    });
    it('returns warning for unavailable', () => {
      expect(getTemplateStatusType(RCS_STATUSES.unavailable)).toBe('warning');
    });
    it('returns warning for unknown status', () => {
      expect(getTemplateStatusType('some_unknown_status')).toBe('warning');
    });
  });
});
