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

/* Same DOM-harness pattern as Footer.editguard.test.tsx: mock @craftjs/core's
   useEditor so we can drive editor state without a real <Editor> tree. */
let mockNodes: Record<string, { data: { nodes: string[] } }> = {};
let mockDraggedSize = 0;

vi.mock('@craftjs/core', () => ({
  useEditor: (collect: (state: any) => any) =>
    collect({
      nodes: mockNodes,
      events: { dragged: { size: mockDraggedSize } },
    }),
}));

import { EmptyCanvasHint } from './Canvas';

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);
  });
}

beforeEach(() => {
  mockNodes = {};
  mockDraggedSize = 0;
});

describe('EmptyCanvasHint', () => {
  test('renders nothing before ROOT has mounted (no root node yet)', () => {
    render(<EmptyCanvasHint />);
    expect(container.querySelector('.empty-canvas-hint')).toBeNull();
    container.remove();
  });

  test('renders the hint once ROOT exists with zero children', () => {
    mockNodes = { ROOT: { data: { nodes: [] } } };
    render(<EmptyCanvasHint />);
    expect(container.querySelector('.empty-canvas-hint')).not.toBeNull();
    expect(container.textContent).toContain('Drag blocks from the left panel');
    container.remove();
  });

  test('hides once the page has content', () => {
    mockNodes = { ROOT: { data: { nodes: ['node-1'] } } };
    render(<EmptyCanvasHint />);
    expect(container.querySelector('.empty-canvas-hint')).toBeNull();
    container.remove();
  });

  test('hides while a drag is in progress, even on an empty root', () => {
    mockNodes = { ROOT: { data: { nodes: [] } } };
    mockDraggedSize = 1;
    render(<EmptyCanvasHint />);
    expect(container.querySelector('.empty-canvas-hint')).toBeNull();
    container.remove();
  });
});