/**
 * Tests for ShadowDOMManager
 */

import { ShadowDOMManager } from '../ShadowDOMManager';

describe('ShadowDOMManager', () => {
  let manager: ShadowDOMManager;

  beforeEach(() => {
    // Clear any existing shadow hosts
    const existing = document.querySelector('#conversioniq-shadow-host');
    if (existing) {
      existing.remove();
    }
  });

  afterEach(() => {
    if (manager) {
      manager.destroy();
    }
  });

  describe('Initialization', () => {
    it('should initialize with shadow host', () => {
      manager = new ShadowDOMManager();

      const shadowHost = document.querySelector('#conversioniq-shadow-host');
      expect(shadowHost).toBeTruthy();
      expect(shadowHost?.tagName).toBe('DIV');
    });

    it('should create shadow DOM with closed mode', () => {
      manager = new ShadowDOMManager();

      const shadowHost = document.querySelector('#conversioniq-shadow-host') as HTMLElement;
      expect(shadowHost).toBeTruthy();

      // In closed mode, shadowRoot is not accessible from outside
      expect((shadowHost as any).shadowRoot).toBeNull();
    });

    it('should position shadow host off-screen initially', () => {
      manager = new ShadowDOMManager();

      const shadowHost = document.querySelector('#conversioniq-shadow-host') as HTMLElement;
      const styles = shadowHost.style;

      expect(styles.position).toBe('fixed');
      expect(styles.top).toBe('-9999px');
      expect(styles.left).toBe('-9999px');
    });

    it('should have zero components initially', () => {
      manager = new ShadowDOMManager();

      expect(manager.getComponentCount()).toBe(0);
      expect(manager.hasVisibleComponents()).toBe(false);
    });
  });

  describe('Modal Creation', () => {
    beforeEach(() => {
      manager = new ShadowDOMManager();
    });

    it('should create a modal with content', () => {
      const modal = manager.createModal({
        content: 'Test modal content'
      });

      expect(modal).toBeTruthy();
      expect(modal.className).toContain('ciq-modal-overlay');
    });

    it('should create a modal with title', () => {
      const modal = manager.createModal({
        title: 'Test Title',
        content: 'Test content'
      });

      expect(modal).toBeTruthy();
      expect(modal.querySelector('.ciq-modal-title')).toBeTruthy();
      expect(modal.querySelector('.ciq-modal-title')?.textContent).toBe('Test Title');
    });

    it('should sanitize text content by default', () => {
      const modal = manager.createModal({
        content: '<script>alert("xss")</script>Safe text'
      });

      const body = modal.querySelector('.ciq-modal-body');
      expect(body?.innerHTML).not.toContain('<script>');
      expect(body?.textContent).toContain('Safe text');
    });

    it('should allow HTML when explicitly enabled', () => {
      const modal = manager.createModal({
        content: '<strong>Bold text</strong>',
        allowHTML: true
      });

      const body = modal.querySelector('.ciq-modal-body');
      expect(body?.innerHTML).toContain('<strong>');
      expect(body?.querySelector('strong')).toBeTruthy();
    });

    it('should apply custom className', () => {
      const modal = manager.createModal({
        content: 'Test',
        className: 'custom-modal'
      });

      expect(modal.classList.contains('custom-modal')).toBe(true);
    });

    it('should apply custom width and height', () => {
      const modal = manager.createModal({
        content: 'Test',
        width: '800px',
        height: '600px'
      });

      const modalElement = modal.querySelector('.ciq-modal') as HTMLElement;
      expect(modalElement.style.width).toBe('800px');
      expect(modalElement.style.height).toBe('600px');
    });

    it('should track created modals', () => {
      expect(manager.getComponentCount()).toBe(0);

      manager.createModal({ content: 'Test 1' });
      expect(manager.getComponentCount()).toBe(1);

      manager.createModal({ content: 'Test 2' });
      expect(manager.getComponentCount()).toBe(2);
    });

    it('should be closeable by default', () => {
      const modal = manager.createModal({
        content: 'Test'
      });

      // Click on overlay to close
      modal.click();

      // Component should be scheduled for removal
      setTimeout(() => {
        expect(manager.getComponentCount()).toBe(0);
      }, 300);
    });

    it('should be persistent when configured', () => {
      const modal = manager.createModal({
        content: 'Test',
        persistent: true
      });

      // Click on overlay - should not close
      modal.click();

      expect(manager.getComponentCount()).toBe(1);
    });
  });

  describe('Notification Creation', () => {
    beforeEach(() => {
      manager = new ShadowDOMManager();
      jest.useFakeTimers();
    });

    afterEach(() => {
      jest.useRealTimers();
    });

    it('should create a notification with message', () => {
      const notification = manager.createNotification({
        message: 'Test notification'
      });

      expect(notification).toBeTruthy();
      expect(notification.className).toContain('ciq-notification');
      expect(notification.textContent).toBe('Test notification');
    });

    it('should apply notification type classes', () => {
      const success = manager.createNotification({
        message: 'Success',
        type: 'success'
      });
      expect(success.className).toContain('ciq-success');

      const error = manager.createNotification({
        message: 'Error',
        type: 'error'
      });
      expect(error.className).toContain('ciq-error');

      const warning = manager.createNotification({
        message: 'Warning',
        type: 'warning'
      });
      expect(warning.className).toContain('ciq-warning');
    });

    it('should auto-hide after default duration', () => {
      manager.createNotification({
        message: 'Test'
      });

      expect(manager.getComponentCount()).toBe(1);

      // Advance time by default duration (4000ms)
      jest.advanceTimersByTime(4000);

      // Give time for animation
      jest.advanceTimersByTime(200);

      expect(manager.getComponentCount()).toBe(0);
    });

    it('should auto-hide after custom duration', () => {
      manager.createNotification({
        message: 'Test',
        duration: 2000
      });

      expect(manager.getComponentCount()).toBe(1);

      jest.advanceTimersByTime(2000);
      jest.advanceTimersByTime(200);

      expect(manager.getComponentCount()).toBe(0);
    });

    it('should not auto-hide when duration is 0', () => {
      manager.createNotification({
        message: 'Test',
        duration: 0
      });

      expect(manager.getComponentCount()).toBe(1);

      // Advance a lot of time
      jest.advanceTimersByTime(10000);

      // Should still be visible
      expect(manager.getComponentCount()).toBe(1);
    });
  });

  describe('Show/Hide Components', () => {
    beforeEach(() => {
      manager = new ShadowDOMManager();
      jest.useFakeTimers();
    });

    afterEach(() => {
      jest.useRealTimers();
    });

    it('should show modal and make shadow host visible', () => {
      const modal = manager.createModal({ content: 'Test' });
      manager.show(modal);

      const shadowHost = document.querySelector('#conversioniq-shadow-host') as HTMLElement;

      // Should be positioned to cover viewport
      expect(shadowHost.style.top).toBe('0px');
      expect(shadowHost.style.left).toBe('0px');
    });

    it('should add show class to component', () => {
      const modal = manager.createModal({ content: 'Test' });

      expect(modal.classList.contains('ciq-show')).toBe(false);

      manager.show(modal);

      // requestAnimationFrame is called
      jest.runAllTimers();

      expect(modal.classList.contains('ciq-show')).toBe(true);
    });

    it('should hide component by element', () => {
      const modal = manager.createModal({ content: 'Test' });
      manager.show(modal);

      expect(manager.getComponentCount()).toBe(1);

      manager.hide(modal);

      // Wait for animation
      jest.advanceTimersByTime(200);

      expect(manager.getComponentCount()).toBe(0);
    });

    it('should hide shadow host when all components are hidden', () => {
      const modal = manager.createModal({ content: 'Test' });
      manager.show(modal);

      const shadowHost = document.querySelector('#conversioniq-shadow-host') as HTMLElement;
      expect(shadowHost.style.top).toBe('0px');

      manager.hide(modal);
      jest.advanceTimersByTime(200);

      // Should be off-screen again
      expect(shadowHost.style.top).toBe('-9999px');
    });

    it('should hide all components', () => {
      manager.createModal({ content: 'Modal 1' });
      manager.createModal({ content: 'Modal 2' });
      manager.createNotification({ message: 'Notification' });

      expect(manager.getComponentCount()).toBe(3);

      manager.hideAll();

      jest.advanceTimersByTime(200);

      expect(manager.getComponentCount()).toBe(0);
    });
  });

  describe('Style Management', () => {
    beforeEach(() => {
      manager = new ShadowDOMManager();
    });

    it('should allow updating styles', () => {
      // Should not throw
      manager.updateStyles('.custom-class { color: red; }');
    });

    it('should handle invalid CSS gracefully', () => {
      // Should not throw
      manager.updateStyles('invalid css {{{');
    });
  });

  describe('Component Queries', () => {
    beforeEach(() => {
      manager = new ShadowDOMManager();
    });

    it('should report if components are visible', () => {
      expect(manager.hasVisibleComponents()).toBe(false);

      manager.createModal({ content: 'Test' });
      expect(manager.hasVisibleComponents()).toBe(true);
    });

    it('should return component count', () => {
      expect(manager.getComponentCount()).toBe(0);

      manager.createModal({ content: 'Test 1' });
      expect(manager.getComponentCount()).toBe(1);

      manager.createModal({ content: 'Test 2' });
      manager.createNotification({ message: 'Test' });
      expect(manager.getComponentCount()).toBe(3);
    });
  });

  describe('Cleanup', () => {
    beforeEach(() => {
      manager = new ShadowDOMManager();
      jest.useFakeTimers();
    });

    afterEach(() => {
      jest.useRealTimers();
    });

    it('should destroy all components', () => {
      manager.createModal({ content: 'Modal' });
      manager.createNotification({ message: 'Notification' });

      expect(manager.getComponentCount()).toBeGreaterThan(0);

      manager.destroy();

      jest.advanceTimersByTime(300);

      expect(manager.getComponentCount()).toBe(0);
    });

    it('should remove shadow host from DOM', () => {
      manager.destroy();

      jest.advanceTimersByTime(300);

      const shadowHost = document.querySelector('#conversioniq-shadow-host');
      expect(shadowHost).toBeNull();
    });
  });

  describe('XSS Protection', () => {
    beforeEach(() => {
      manager = new ShadowDOMManager();
    });

    it('should sanitize modal content by default', () => {
      const modal = manager.createModal({
        content: '<img src=x onerror="alert(1)">'
      });

      const body = modal.querySelector('.ciq-modal-body');
      // Content should be text-encoded, not executable HTML
      expect(body?.querySelector('img')).toBeNull(); // No actual img element
      expect(body?.textContent).toContain('<img'); // But the text is there
    });

    it('should sanitize notification messages', () => {
      const notification = manager.createNotification({
        message: '<script>alert("xss")</script>Message'
      });

      expect(notification.innerHTML).not.toContain('<script>');
      expect(notification.textContent).toContain('Message');
    });

    it('should sanitize modal titles', () => {
      const modal = manager.createModal({
        title: '<script>alert("xss")</script>Title',
        content: 'Content'
      });

      const title = modal.querySelector('.ciq-modal-title');
      expect(title?.innerHTML).not.toContain('<script>');
      expect(title?.textContent).toContain('Title');
    });
  });
});