import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import { IntlProvider } from 'react-intl';
import ValidationPanel from '../index';

// No child component mocks needed - ValidationPanel renders directly

const messages = {
  'html.editor.validation.showWarnings': 'Show Warnings',
  'html.editor.validation.security': 'Security',
  'html.editor.validation.accessibility': 'Accessibility',
  'html.editor.validation.html': 'HTML',
  'html.editor.validation.css': 'CSS',
  // ValidationPanel messages from messages.js
  'htmlEditor.validation.errors': 'Errors',
  'htmlEditor.validation.warnings': 'Warnings',
  'htmlEditor.validation.info': 'Info',
  'htmlEditor.validation.securityIssues': 'Security Issues',
  'htmlEditor.validation.noIssues': 'No validation issues found',
  'htmlEditor.validation.noIssuesOfType': 'No issues of this type',
  'htmlEditor.validation.validating': 'Validating...',
  'htmlEditor.validation.lineColumn': 'Line {line}, Column {column}',
  'htmlEditor.validation.sanitizationWarnings': 'Content Sanitization Warnings',
  'htmlEditor.validation.htmlValidation': 'HTML Validation',
  'htmlEditor.validation.cssValidation': 'CSS Validation',
  'htmlEditor.validation.securityValidation': 'Security Validation',
};

const TestWrapper = ({ children }) => (
  <IntlProvider locale="en" messages={messages}>
    {children}
  </IntlProvider>
);

const mockValidation = {
  summary: {
    totalErrors: 2,
    totalWarnings: 1,
  },
  security: { issues: [{ message: 'Security issue' }] },
  accessibility: { issues: [] },
  html: { issues: [{ message: 'HTML issue' }] },
  css: { issues: [{ message: 'CSS warning', severity: 'warning' }] },
  getAllIssues: () => [
    { message: 'Security issue', category: 'security', severity: 'error' },
    { message: 'HTML issue', category: 'html', severity: 'error' },
    { message: 'CSS warning', category: 'css', severity: 'warning' },
  ],
};

describe('ValidationPanel', () => {
  it('renders correctly with errors and warnings', () => {
    render(
      <TestWrapper>
        <ValidationPanel validation={mockValidation} />
      </TestWrapper>
    );

    // Check issues are rendered (component renders issues directly)
    expect(screen.getByText('Security issue')).toBeInTheDocument();
    expect(screen.getByText('HTML issue')).toBeInTheDocument();
    expect(screen.getByText('CSS warning')).toBeInTheDocument();
  });

  it('renders all issue types', () => {
    render(
      <TestWrapper>
        <ValidationPanel validation={mockValidation} />
      </TestWrapper>
    );

    // Check that different severity issues are all rendered
    expect(screen.getByText('Security issue')).toBeInTheDocument();
    expect(screen.getByText('HTML issue')).toBeInTheDocument();
    expect(screen.getByText('CSS warning')).toBeInTheDocument();
  });

  it('handles empty validation object gracefully', () => {
    const emptyValidation = {
      summary: {},
      security: { issues: [] },
      accessibility: { issues: [] },
      html: { issues: [] },
      css: { issues: [] },
      getAllIssues: () => [],
    };

    const { container } = render(
      <TestWrapper>
        <ValidationPanel validation={emptyValidation} />
      </TestWrapper>
    );

    // Component should render but show no issues
    expect(container.querySelector('.validation-issue__message')).not.toBeInTheDocument();
  });
});
