/* @vitest-environment jsdom */

import { fireEvent, render, screen, within } from '@testing-library/react';
import { describe, expect, it, vi } from 'vitest';

import type { CanvasLayer } from './ImageCanvasEditorTypes';
import { ImageCanvasMetadataModalView } from './ImageCanvasMetadataModalView';

function createLayer(overrides: Partial<CanvasLayer> = {}): CanvasLayer {
  return {
    id: 'layer-1',
    resourceId: 'resource-1',
    title: '生成主图',
    src: 'data:image/png;base64,layer',
    x: 0,
    y: 0,
    width: 320,
    height: 240,
    originalWidth: 1024,
    originalHeight: 768,
    zIndex: 1,
    sourceType: 'generated',
    ...overrides,
  };
}

describe('ImageCanvasMetadataModalView', () => {
  it('renders generated layer metadata with generation inputs and references', () => {
    render(
      <ImageCanvasMetadataModalView
        layer={createLayer({
          model: 'gpt-image-2',
          provider: 'VectorEngine',
          taskId: 'gpt-image-2-task-123',
          objectKey: 'generated/object.png',
          generationInputs: {
            fields: [{ title: '生成提示词', value: '清爽游戏按钮' }],
            references: [
              {
                title: '参考图',
                label: '角色立绘',
                src: 'data:image/png;base64,reference',
              },
            ],
          },
        })}
        onClose={vi.fn()}
      />,
    );

    const dialog = screen.getByRole('dialog', { name: '图片信息' });

    expect(within(dialog).queryByText('生成主图')).toBeNull();
    expect(within(dialog).getByText('生成图片')).toBeTruthy();
    expect(within(dialog).getByText('生成提示词')).toBeTruthy();
    expect(within(dialog).getByText('清爽游戏按钮')).toBeTruthy();
    expect(within(dialog).getByText('参考图')).toBeTruthy();
    expect(within(dialog).getByText('角色立绘')).toBeTruthy();
    expect(within(dialog).getByText('gpt-image-2')).toBeTruthy();
    expect(within(dialog).getByText('1024 x 768 px')).toBeTruthy();
    expect(within(dialog).queryByText('Provider')).toBeNull();
    expect(within(dialog).queryByText(/VectorEngine/u)).toBeNull();
    expect(within(dialog).queryByText(/task-/u)).toBeNull();
    expect(within(dialog).getByText('123')).toBeTruthy();
    expect(within(dialog).getByText('generated/object.png')).toBeTruthy();
  });

  it('renders upload fallback values and closes through the modal shell', () => {
    const onClose = vi.fn();
    render(
      <ImageCanvasMetadataModalView
        layer={createLayer({
          title: '上传素材',
          sourceType: 'uploaded',
          model: null,
          provider: null,
          taskId: null,
          objectKey: null,
          assetObjectId: 'asset-object-1',
          generationInputs: null,
        })}
        onClose={onClose}
      />,
    );

    const dialog = screen.getByRole('dialog', { name: '图片信息' });

    expect(within(dialog).queryByText('上传素材')).toBeNull();
    expect(within(dialog).getByText('上传图片')).toBeTruthy();
    expect(within(dialog).getAllByText('-').length).toBeGreaterThanOrEqual(3);
    expect(within(dialog).getByText('asset-object-1')).toBeTruthy();

    fireEvent.click(within(dialog).getByRole('button', { name: '关闭图片信息' }));

    expect(onClose).toHaveBeenCalledTimes(1);
  });

  it('does not render a dialog when no layer is selected', () => {
    render(<ImageCanvasMetadataModalView layer={null} onClose={vi.fn()} />);

    expect(screen.queryByRole('dialog', { name: '图片信息' })).toBeNull();
  });
});