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';

/* Footer only needs useNode from @craftjs/core. Mock it following the
   DOM-harness pattern in src/state/PageContext.slug.test.tsx (no
   @testing-library/react in this repo) so we can drive `selected` across
   re-renders and observe setProp calls without a real <Editor> tree. */
let mockSelected = false;
let lastCommittedProps: { text: string } = { text: '' };
const setPropSpy = vi.fn((updater: (p: any) => void) => {
  updater(lastCommittedProps);
});

vi.mock('@craftjs/core', () => ({
  useNode: (collect?: (node: any) => any) => {
    const node = { events: { selected: mockSelected } };
    return {
      connectors: { connect: (el: any) => el, drag: (el: any) => el },
      actions: { setProp: setPropSpy },
      ...(collect ? collect(node) : {}),
    };
  },
}));

import { Footer } from './Footer';

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

function rerender(ui: React.ReactElement) {
  act(() => {
    root.render(ui);
  });
}

beforeEach(() => {
  mockSelected = false;
  lastCommittedProps = { text: 'Original' };
  setPropSpy.mockClear();
});

describe('Footer edit-guard (mirrors Heading.tsx mechanism)', () => {
  test('deselecting without a real blur still commits the in-progress edit', () => {
    mockSelected = true;
    render(<Footer text="Original" />);

    const el = container.querySelector('footer')!;
    act(() => {
      el.innerText = 'Edited footer text';
      el.dispatchEvent(new Event('input', { bubbles: true }));
    });

    // No blur event fired -- simulate selection clearing (e.g. clicking
    // elsewhere) which is the scenario that used to lose the edit.
    mockSelected = false;
    rerender(<Footer text="Original" />);

    expect(setPropSpy).toHaveBeenCalled();
    expect(lastCommittedProps.text).toBe('Edited footer text');

    container.remove();
  });

  test('a real blur still commits the edit (existing behavior preserved)', () => {
    mockSelected = true;
    render(<Footer text="Original" />);

    const el = container.querySelector('footer')!;
    act(() => {
      el.innerText = 'Blurred edit';
      el.dispatchEvent(new Event('input', { bubbles: true }));
      // React delegates onBlur via native 'focusout' (which bubbles) rather
      // than 'blur' (which doesn't) -- dispatch what React actually listens for.
      el.dispatchEvent(new FocusEvent('focusout', { bubbles: true }));
    });

    expect(setPropSpy).toHaveBeenCalled();
    expect(lastCommittedProps.text).toBe('Blurred edit');

    container.remove();
  });

  test('deselecting with no edit made does not call setProp', () => {
    mockSelected = true;
    render(<Footer text="Original" />);

    mockSelected = false;
    rerender(<Footer text="Original" />);

    expect(setPropSpy).not.toHaveBeenCalled();

    container.remove();
  });
});