import { describe, test, expect, vi } from 'vitest';
import React from 'react';
import { createRoot, Root } from 'react-dom/client';
import { act } from 'react-dom/test-utils';

vi.mock('@craftjs/core', () => ({
  useEditor: () => ({ actions: { setProp: vi.fn() }, query: {} }),
}));

import { HtmlStylePanel } from './HtmlStylePanel';

let container: HTMLDivElement;
let root: Root;

function render(ui: React.ReactElement) {
  container = document.createElement('div');
  document.body.appendChild(container);
  act(() => {
    root = createRoot(container);
    root.render(ui);
  });
}

describe('HtmlStylePanel', () => {
  test('renders the Edit HTML control', () => {
    render(<HtmlStylePanel selectedId="n1" nodeProps={{ code: '<p>x</p>', style: {} }} />);
    expect(container.textContent).toContain('Edit HTML');
  });

  test('renders NO colour or style controls (they never reach the live page)', () => {
    render(<HtmlStylePanel selectedId="n1" nodeProps={{ code: '<p>x</p>', style: {} }} />);
    expect(container.querySelector('input[type="color"]')).toBeNull();
    expect(container.textContent).not.toContain('Background');
    expect(container.textContent).not.toContain('Text Color');
    expect(container.textContent).not.toContain('Padding');
    expect(container.textContent).not.toContain('Border Radius');
  });

  test('renders the security advisory', () => {
    render(<HtmlStylePanel selectedId="n1" nodeProps={{ code: '<p>x</p>', style: {} }} />);
    expect(container.textContent).toContain('Use this block with care.');
    expect(container.textContent).toContain('Scripts and event handlers are stripped');
  });
});
