/**
 * ContentOverlay Tests
 *
 * Tests for InApp HTML content overlay component
 */

import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import ContentOverlay from '../ContentOverlay';
import { LAYOUT_TYPES } from '../constants';
import { DEVICE_TYPES } from '../../../constants';

describe('ContentOverlay', () => {
  describe('Rendering', () => {
    it('renders without crashing', () => {
      render(<ContentOverlay />);
      const overlay = document.querySelector('.content-overlay');
      expect(overlay).toBeInTheDocument();
    });

    it('renders with default props', () => {
      render(<ContentOverlay />);
      const overlay = document.querySelector('.content-overlay');
      expect(overlay).toBeInTheDocument();
      expect(overlay).toHaveClass('content-overlay--popup');
    });

    it('renders screen area container', () => {
      render(<ContentOverlay />);
      const screenArea = document.querySelector('.content-overlay__screen-area');
      expect(screenArea).toBeInTheDocument();
    });

    it('applies custom className', () => {
      render(<ContentOverlay className="custom-class" />);
      const overlay = document.querySelector('.content-overlay');
      expect(overlay).toHaveClass('custom-class');
    });
  });

  describe('Layout Types', () => {
    it('renders with MODAL layout type', () => {
      render(<ContentOverlay layoutType={LAYOUT_TYPES.MODAL} />);
      const overlay = document.querySelector('.content-overlay');
      expect(overlay).toHaveClass('content-overlay--popup');
    });

    it('renders with HEADER layout type', () => {
      render(<ContentOverlay layoutType={LAYOUT_TYPES.HEADER} />);
      const overlay = document.querySelector('.content-overlay');
      expect(overlay).toHaveClass('content-overlay--header');
    });

    it('renders with FOOTER layout type', () => {
      render(<ContentOverlay layoutType={LAYOUT_TYPES.FOOTER} />);
      const overlay = document.querySelector('.content-overlay');
      expect(overlay).toHaveClass('content-overlay--footer');
    });

    it('renders with FULLSCREEN layout type', () => {
      render(<ContentOverlay layoutType={LAYOUT_TYPES.FULLSCREEN} />);
      const overlay = document.querySelector('.content-overlay');
      expect(overlay).toHaveClass('content-overlay--fullscreen');
    });
  });

  describe('Device Types', () => {
    it('renders with ANDROID device', () => {
      render(<ContentOverlay device={DEVICE_TYPES.ANDROID} />);
      const screenArea = document.querySelector('.content-overlay__screen-area');
      expect(screenArea).toBeInTheDocument();
    });

    it('renders with IOS device', () => {
      render(<ContentOverlay device={DEVICE_TYPES.IOS} />);
      const screenArea = document.querySelector('.content-overlay__screen-area');
      expect(screenArea).toBeInTheDocument();
    });

    it('defaults to ANDROID device when invalid device provided', () => {
      render(<ContentOverlay device="INVALID" />);
      const screenArea = document.querySelector('.content-overlay__screen-area');
      expect(screenArea).toBeInTheDocument();
    });
  });

  describe('Empty State', () => {
    it('shows empty state when no content provided', () => {
      render(<ContentOverlay />);
      expect(screen.getByText('HTML content will appear here')).toBeInTheDocument();
    });

    it('shows empty state when content is empty string', () => {
      render(<ContentOverlay content="" />);
      expect(screen.getByText('HTML content will appear here')).toBeInTheDocument();
    });

    it('shows empty state when content is whitespace only', () => {
      render(<ContentOverlay content="   " />);
      expect(screen.getByText('HTML content will appear here')).toBeInTheDocument();
    });

    it('displays layout type in empty state', () => {
      render(<ContentOverlay layoutType={LAYOUT_TYPES.MODAL} />);
      expect(screen.getByText('POPUP')).toBeInTheDocument();
    });

    it('shows icon in empty state', () => {
      render(<ContentOverlay />);
      expect(screen.getByText('📱')).toBeInTheDocument();
    });
  });

  describe('Content Rendering', () => {
    it('renders iframe when content is provided', () => {
      render(<ContentOverlay content="<p>Test content</p>" />);
      const iframe = document.querySelector('iframe');
      expect(iframe).toBeInTheDocument();
    });

    it('sets iframe srcDoc with HTML content', () => {
      const htmlContent = '<p>Hello World</p>';
      render(<ContentOverlay content={htmlContent} />);
      const iframe = document.querySelector('iframe');
      expect(iframe).toHaveAttribute('srcDoc', htmlContent);
    });

    it('sets iframe title', () => {
      render(<ContentOverlay content="<p>Test</p>" />);
      const iframe = document.querySelector('iframe');
      expect(iframe).toHaveAttribute('title', 'InApp HTML Preview');
    });

    it('sets iframe sandbox attribute', () => {
      render(<ContentOverlay content="<p>Test</p>" />);
      const iframe = document.querySelector('iframe');
      expect(iframe).toHaveAttribute('sandbox', 'allow-scripts allow-same-origin');
    });

    it('hides empty state when content is provided', () => {
      render(<ContentOverlay content="<p>Test</p>" />);
      expect(screen.queryByText('HTML content will appear here')).not.toBeInTheDocument();
    });
  });

  describe('Styling', () => {
    it('applies screen area positioning styles', () => {
      render(<ContentOverlay />);
      const screenArea = document.querySelector('.content-overlay__screen-area');
      const styles = window.getComputedStyle(screenArea);
      expect(styles.position).toBe('absolute');
    });

    it('applies overlay positioning styles', () => {
      render(<ContentOverlay />);
      const overlay = document.querySelector('.content-overlay');
      // Check that the overlay element exists and has the correct CSS class
      expect(overlay).toBeInTheDocument();
      expect(overlay).toHaveClass('content-overlay');
      expect(overlay).toHaveClass('content-overlay--popup'); // default layout type is MODAL which maps to 'popup' class

      // Check that inline styles from getOverlayStyles() are applied
      const inlineStyles = overlay.style;
      expect(inlineStyles.top).toBe('50%');
      expect(inlineStyles.left).toBe('50%');
      expect(inlineStyles.transform).toBe('translate(-50%, -50%)');
    });

    it('does not apply inline iframe styles (SCSS-managed)', () => {
      render(<ContentOverlay content="<p>Test</p>" />);
      const iframe = document.querySelector('iframe');

      // Verify iframe styling is managed by SCSS, not inline styles
      // The iframe should have no inline style attribute since all styling
      // (width: 100%, height: 100%, border: none, display: block, backgroundColor)
      // is handled via the .content-overlay iframe CSS rule in _inAppPreviewPane.scss
      expect(iframe.style.cssText).toBe('');
      expect(iframe.hasAttribute('style')).toBe(false);

      // Ensure no inline style properties are set
      expect(iframe.style.width).toBe('');
      expect(iframe.style.height).toBe('');
      expect(iframe.style.border).toBe('');
      expect(iframe.style.display).toBe('');
      expect(iframe.style.backgroundColor).toBe('');
    });
  });

  describe('Props Forwarding', () => {
    it('forwards additional props to overlay container', () => {
      render(<ContentOverlay data-testid="custom-overlay" />);
      const overlay = screen.getByTestId('custom-overlay');
      expect(overlay).toBeInTheDocument();
    });

    it('forwards aria attributes', () => {
      render(<ContentOverlay aria-label="Preview overlay" />);
      const overlay = document.querySelector('.content-overlay');
      expect(overlay).toHaveAttribute('aria-label', 'Preview overlay');
    });

    it('forwards data attributes', () => {
      render(<ContentOverlay data-preview="true" />);
      const overlay = document.querySelector('.content-overlay');
      expect(overlay).toHaveAttribute('data-preview', 'true');
    });
  });

  describe('Content Variations', () => {
    it('renders simple HTML content', () => {
      render(<ContentOverlay content="<p>Simple text</p>" />);
      const iframe = document.querySelector('iframe');
      expect(iframe).toHaveAttribute('srcDoc', '<p>Simple text</p>');
    });

    it('renders complex HTML content', () => {
      const complexHtml = `
        <div>
          <h1>Title</h1>
          <p>Paragraph</p>
          <button>Click me</button>
        </div>
      `;
      render(<ContentOverlay content={complexHtml} />);
      const iframe = document.querySelector('iframe');
      expect(iframe).toHaveAttribute('srcDoc', complexHtml);
    });

    it('renders HTML with inline styles', () => {
      const styledHtml = '<div style="color: red;">Styled content</div>';
      render(<ContentOverlay content={styledHtml} />);
      const iframe = document.querySelector('iframe');
      expect(iframe).toHaveAttribute('srcDoc', styledHtml);
    });

    it('renders HTML with CSS', () => {
      const htmlWithCss = '<style>p { color: blue; }</style><p>Blue text</p>';
      render(<ContentOverlay content={htmlWithCss} />);
      const iframe = document.querySelector('iframe');
      expect(iframe).toHaveAttribute('srcDoc', htmlWithCss);
    });
  });

  describe('Layout Type Combinations', () => {
    it('renders modal layout with Android device', () => {
      render(
        <ContentOverlay
          layoutType={LAYOUT_TYPES.MODAL}
          device={DEVICE_TYPES.ANDROID}
          content="<p>Modal Android</p>"
        />
      );
      const overlay = document.querySelector('.content-overlay--popup');
      expect(overlay).toBeInTheDocument();
    });

    it('renders header layout with iOS device', () => {
      render(
        <ContentOverlay
          layoutType={LAYOUT_TYPES.HEADER}
          device={DEVICE_TYPES.IOS}
          content="<p>Header iOS</p>"
        />
      );
      const overlay = document.querySelector('.content-overlay--header');
      expect(overlay).toBeInTheDocument();
    });

    it('renders footer layout with content', () => {
      render(
        <ContentOverlay
          layoutType={LAYOUT_TYPES.FOOTER}
          content="<p>Footer content</p>"
        />
      );
      const overlay = document.querySelector('.content-overlay--footer');
      const iframe = document.querySelector('iframe');
      expect(overlay).toBeInTheDocument();
      expect(iframe).toBeInTheDocument();
    });

    it('renders fullscreen layout with content', () => {
      render(
        <ContentOverlay
          layoutType={LAYOUT_TYPES.FULLSCREEN}
          content="<p>Fullscreen content</p>"
        />
      );
      const overlay = document.querySelector('.content-overlay--fullscreen');
      const iframe = document.querySelector('iframe');
      expect(overlay).toBeInTheDocument();
      expect(iframe).toBeInTheDocument();
    });
  });

  describe('Edge Cases', () => {
    it('handles null content', () => {
      render(<ContentOverlay content={null} />);
      expect(screen.getByText('HTML content will appear here')).toBeInTheDocument();
    });

    it('handles undefined content', () => {
      render(<ContentOverlay content={undefined} />);
      expect(screen.getByText('HTML content will appear here')).toBeInTheDocument();
    });

    it('handles very long content', () => {
      const longContent = '<p>' + 'a'.repeat(10000) + '</p>';
      render(<ContentOverlay content={longContent} />);
      const iframe = document.querySelector('iframe');
      expect(iframe).toBeInTheDocument();
    });

    it('handles content with special characters', () => {
      const specialContent = '<p>Special: & < > " \'</p>';
      render(<ContentOverlay content={specialContent} />);
      const iframe = document.querySelector('iframe');
      expect(iframe).toHaveAttribute('srcDoc', specialContent);
    });

    it('handles content with unicode characters', () => {
      const unicodeContent = '<p>Unicode: 你好 مرحبا 🎉</p>';
      render(<ContentOverlay content={unicodeContent} />);
      const iframe = document.querySelector('iframe');
      expect(iframe).toHaveAttribute('srcDoc', unicodeContent);
    });
  });

  describe('Accessibility', () => {
    it('provides iframe title for screen readers', () => {
      render(<ContentOverlay content="<p>Test</p>" />);
      const iframe = document.querySelector('iframe');
      expect(iframe).toHaveAttribute('title');
    });

    it('empty state is readable', () => {
      render(<ContentOverlay />);
      const text = screen.getByText('HTML content will appear here');
      expect(text).toBeVisible();
    });
  });

  describe('Component Structure', () => {
    it('maintains correct DOM hierarchy', () => {
      render(<ContentOverlay content="<p>Test</p>" />);
      const screenArea = document.querySelector('.content-overlay__screen-area');
      const overlay = document.querySelector('.content-overlay');
      const iframe = document.querySelector('iframe');

      expect(screenArea).toBeInTheDocument();
      expect(overlay).toBeInTheDocument();
      expect(iframe).toBeInTheDocument();
      expect(overlay.parentElement).toBe(screenArea);
      expect(iframe.parentElement).toBe(overlay);
    });

    it('applies correct CSS classes', () => {
      render(<ContentOverlay layoutType={LAYOUT_TYPES.MODAL} className="custom" />);
      const overlay = document.querySelector('.content-overlay');

      expect(overlay).toHaveClass('content-overlay');
      expect(overlay).toHaveClass('content-overlay--popup');
      expect(overlay).toHaveClass('custom');
    });
  });

  describe('PropTypes Validation', () => {
    // These tests verify the component accepts the expected prop types
    it('accepts valid layoutType values', () => {
      const { rerender } = render(<ContentOverlay layoutType={LAYOUT_TYPES.MODAL} />);
      expect(document.querySelector('.content-overlay')).toBeInTheDocument();

      rerender(<ContentOverlay layoutType={LAYOUT_TYPES.HEADER} />);
      expect(document.querySelector('.content-overlay')).toBeInTheDocument();

      rerender(<ContentOverlay layoutType={LAYOUT_TYPES.FOOTER} />);
      expect(document.querySelector('.content-overlay')).toBeInTheDocument();

      rerender(<ContentOverlay layoutType={LAYOUT_TYPES.FULLSCREEN} />);
      expect(document.querySelector('.content-overlay')).toBeInTheDocument();
    });

    it('accepts valid device values', () => {
      const { rerender } = render(<ContentOverlay device={DEVICE_TYPES.ANDROID} />);
      expect(document.querySelector('.content-overlay')).toBeInTheDocument();

      rerender(<ContentOverlay device={DEVICE_TYPES.IOS} />);
      expect(document.querySelector('.content-overlay')).toBeInTheDocument();
    });

    it('accepts string content', () => {
      render(<ContentOverlay content="String content" />);
      expect(document.querySelector('iframe')).toBeInTheDocument();
    });

    it('accepts string className', () => {
      render(<ContentOverlay className="test-class" />);
      expect(document.querySelector('.test-class')).toBeInTheDocument();
    });
  });
});

