// @vitest-environment jsdom
import { describe, it, expect, vi } from 'vitest';
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import { MediaPickerDialog } from './MediaPickerDialog.js';

vi.mock('../lib/media-client.js', () => ({
  createHostMediaClient: () => ({
    upload: async () => ({ key: 'media/a', url: 'https://cdn/a.png', size: 1, width: 4, height: 4 }),
    list: async () => ({ items: [{ key: 'media/a', url: 'https://cdn/a.png', size: 1, width: 4, height: 4 }] }),
    remove: async () => {},
  }),
}));

describe('MediaPickerDialog', () => {
  it('does not call onSelect until alt step completes', async () => {
    const onSelect = vi.fn();
    render(<MediaPickerDialog onSelect={onSelect} />);
    fireEvent.click(screen.getByRole('button', { name: /insert media/i }));
    const pick = await screen.findByRole('button', { name: /select media\/a/i });
    fireEvent.click(pick);
    expect(onSelect).not.toHaveBeenCalled();
    expect(screen.getByLabelText(/alt text/i)).toBeTruthy();
    expect(screen.getByRole('button', { name: /insert image/i })).toBeTruthy();
  });

  it('calls onSelect with item and typed alt after Insert image', async () => {
    const onSelect = vi.fn();
    render(<MediaPickerDialog onSelect={onSelect} />);
    fireEvent.click(screen.getByRole('button', { name: /insert media/i }));
    const pick = await screen.findByRole('button', { name: /select media\/a/i });
    fireEvent.click(pick);
    fireEvent.change(screen.getByLabelText(/alt text/i), { target: { value: 'a cat' } });
    fireEvent.click(screen.getByRole('button', { name: /insert image/i }));
    await waitFor(() =>
      expect(onSelect).toHaveBeenCalledWith(
        expect.objectContaining({ url: 'https://cdn/a.png', width: 4, height: 4 }),
        'a cat',
      ),
    );
  });

  it('calls onSelect with empty alt for decorative images', async () => {
    const onSelect = vi.fn();
    render(<MediaPickerDialog onSelect={onSelect} />);
    fireEvent.click(screen.getByRole('button', { name: /insert media/i }));
    const pick = await screen.findByRole('button', { name: /select media\/a/i });
    fireEvent.click(pick);
    fireEvent.click(screen.getByRole('button', { name: /insert image/i }));
    await waitFor(() =>
      expect(onSelect).toHaveBeenCalledWith(
        expect.objectContaining({ url: 'https://cdn/a.png', width: 4, height: 4 }),
        '',
      ),
    );
  });
});