import React from 'react';
import { renderToStaticMarkup } from 'react-dom/server';
import ValidationSummary from './ValidationSummary';
import { useProject } from '../context/ProjectContext';

jest.mock('../context/ProjectContext', () => ({ useProject: jest.fn() }));
const mockedUseProject = useProject as jest.Mock;

test('shows a shared blocking issue with its path in every consuming view', () => {
  mockedUseProject.mockReturnValue({
    validationPending: false,
    validationUnavailable: null,
    validation: {
      valid: false,
      errors: [{ code: 'DUPLICATE_OPTION_VALUE', path: '/project/pages/0/components/2/properties/options', message: 'Option value "dev" is duplicated.', severity: 'error' }],
      warnings: [],
    },
  });
  const markup = renderToStaticMarkup(<ValidationSummary />);
  expect(markup).toContain('role="alert"');
  expect(markup).toContain('Project validation failed');
  expect(markup).toContain('/project/pages/0/components/2/properties/options');
  expect(markup).toContain('Option value &quot;dev&quot; is duplicated.');
});

test('shows compatibility warnings without treating them as blocking errors', () => {
  mockedUseProject.mockReturnValue({
    validationPending: false,
    validationUnavailable: null,
    validation: {
      valid: true,
      errors: [],
      warnings: [{ code: 'BINDING_TRANSFORM_DEFERRED', path: '/project/bindings/0/transform', message: 'Binding transforms are modeled but are not executed in v0.1.0.', severity: 'warning' }],
    },
  });
  const markup = renderToStaticMarkup(<ValidationSummary />);
  expect(markup).toContain('role="status"');
  expect(markup).toContain('Compatibility warnings');
  expect(markup).toContain('/project/bindings/0/transform');
});