/**
 * Tests for DeviceFrame Component
 * 
 * Tests device frame rendering for desktop, tablet, and mobile
 */

import React from 'react';
import { render, screen } from '@testing-library/react';
import DeviceFrame from '../../UnifiedPreview/DeviceFrame';
import { DESKTOP, TABLET, MOBILE } from '../../constants';

describe('DeviceFrame', () => {
  const defaultProps = {
    device: DESKTOP,
    children: <div data-testid="frame-content">Test Content</div>,
  };

  describe('Desktop Frame', () => {
    it('should render desktop frame', () => {
      const props = {
        ...defaultProps,
        device: DESKTOP,
      };

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

      expect(container.querySelector('.device-frame-desktop')).toBeTruthy();
    });

    it('should render desktop chrome with dots', () => {
      const props = {
        ...defaultProps,
        device: DESKTOP,
      };

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

      expect(container.querySelector('.desktop-chrome')).toBeTruthy();
      expect(container.querySelector('.chrome-dots')).toBeTruthy();
      expect(container.querySelector('.dot-close')).toBeTruthy();
      expect(container.querySelector('.dot-minimize')).toBeTruthy();
      expect(container.querySelector('.dot-maximize')).toBeTruthy();
    });

    it('should render desktop address bar', () => {
      const props = {
        ...defaultProps,
        device: DESKTOP,
      };

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

      expect(container.querySelector('.chrome-address-bar')).toBeTruthy();
    });

    it('should render children in desktop frame', () => {
      const props = {
        ...defaultProps,
        device: DESKTOP,
      };

      render(<DeviceFrame {...props} />);

      expect(screen.getByTestId('frame-content')).toBeTruthy();
      expect(screen.getByText('Test Content')).toBeTruthy();
    });
  });

  describe('Tablet Frame', () => {
    it('should render tablet frame', () => {
      const props = {
        ...defaultProps,
        device: TABLET,
      };

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

      expect(container.querySelector('.device-frame-tablet')).toBeTruthy();
    });

    it('should render tablet chrome with camera', () => {
      const props = {
        ...defaultProps,
        device: TABLET,
      };

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

      expect(container.querySelector('.tablet-chrome')).toBeTruthy();
      expect(container.querySelector('.tablet-camera')).toBeTruthy();
    });

    it('should render tablet footer with home button', () => {
      const props = {
        ...defaultProps,
        device: TABLET,
      };

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

      expect(container.querySelector('.tablet-footer')).toBeTruthy();
      expect(container.querySelector('.home-button')).toBeTruthy();
    });

    it('should render children in tablet frame', () => {
      const props = {
        ...defaultProps,
        device: TABLET,
      };

      render(<DeviceFrame {...props} />);

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

    it('should not render desktop chrome for tablet', () => {
      const props = {
        ...defaultProps,
        device: TABLET,
      };

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

      expect(container.querySelector('.desktop-chrome')).toBeFalsy();
    });

    it('should not render mobile chrome for tablet', () => {
      const props = {
        ...defaultProps,
        device: TABLET,
      };

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

      expect(container.querySelector('.mobile-chrome')).toBeFalsy();
    });
  });

  describe('Mobile Frame', () => {
    it('should render mobile frame', () => {
      const props = {
        ...defaultProps,
        device: MOBILE,
      };

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

      expect(container.querySelector('.device-frame-mobile')).toBeTruthy();
    });

    it('should render mobile chrome with notch', () => {
      const props = {
        ...defaultProps,
        device: MOBILE,
      };

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

      expect(container.querySelector('.mobile-chrome')).toBeTruthy();
      expect(container.querySelector('.mobile-notch')).toBeTruthy();
    });

    it('should render mobile footer with home indicator', () => {
      const props = {
        ...defaultProps,
        device: MOBILE,
      };

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

      expect(container.querySelector('.mobile-footer')).toBeTruthy();
      expect(container.querySelector('.home-indicator')).toBeTruthy();
    });

    it('should render children in mobile frame', () => {
      const props = {
        ...defaultProps,
        device: MOBILE,
      };

      render(<DeviceFrame {...props} />);

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

    it('should not render desktop chrome for mobile', () => {
      const props = {
        ...defaultProps,
        device: MOBILE,
      };

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

      expect(container.querySelector('.desktop-chrome')).toBeFalsy();
    });

    it('should not render tablet chrome for mobile', () => {
      const props = {
        ...defaultProps,
        device: MOBILE,
      };

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

      expect(container.querySelector('.tablet-chrome')).toBeFalsy();
    });
  });

  describe('Content Area', () => {
    it('should render device-content div for all devices', () => {
      const devices = [DESKTOP, TABLET, MOBILE];

      devices.forEach((device) => {
        const { container, unmount } = render(
          <DeviceFrame device={device} children={<div>Content</div>} />
        );
        expect(container.querySelector('.device-content')).toBeTruthy();
        unmount();
      });
    });

    it('should render multiple children', () => {
      const props = {
        ...defaultProps,
        children: [
          <div key="1" data-testid="child-1">Child 1</div>,
          <div key="2" data-testid="child-2">Child 2</div>,
        ],
      };

      render(<DeviceFrame {...props} />);

      expect(screen.getByTestId('child-1')).toBeTruthy();
      expect(screen.getByTestId('child-2')).toBeTruthy();
    });

    it('should render complex children structure', () => {
      const props = {
        ...defaultProps,
        children: (
          <div>
            <h1>Title</h1>
            <p>Paragraph</p>
          </div>
        ),
      };

      render(<DeviceFrame {...props} />);

      expect(screen.getByText('Title')).toBeTruthy();
      expect(screen.getByText('Paragraph')).toBeTruthy();
    });
  });

  describe('Custom ClassName', () => {
    it('should apply custom className', () => {
      const props = {
        ...defaultProps,
        className: 'custom-frame-class',
      };

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

      expect(container.querySelector('.custom-frame-class')).toBeTruthy();
    });

    it('should combine custom className with default', () => {
      const props = {
        ...defaultProps,
        className: 'custom-class',
      };

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

      const frame = container.querySelector('.unified-preview-frame');
      expect(frame).toBeTruthy();
      expect(frame.className).toContain('custom-class');
    });

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

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

      expect(container.querySelector('.unified-preview-frame')).toBeTruthy();
    });

    it('should handle undefined className', () => {
      const props = {
        ...defaultProps,
        className: undefined,
      };

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

      expect(container.querySelector('.unified-preview-frame')).toBeTruthy();
    });
  });

  describe('Default Device', () => {
    it('should default to desktop when device is not recognized', () => {
      const props = {
        ...defaultProps,
        device: 'UNKNOWN_DEVICE',
      };

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

      // Should default to desktop
      expect(container.querySelector('.device-frame-desktop')).toBeTruthy();
    });
  });

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

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

      expect(container.querySelector('.device-content')).toBeTruthy();
    });

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

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

      expect(container.querySelector('.device-content')).toBeTruthy();
    });

    it('should handle undefined children', () => {
      const props = {
        device: DESKTOP,
        children: undefined,
      };

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

      expect(container.querySelector('.device-content')).toBeTruthy();
    });
  });

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

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

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