/* @vitest-environment jsdom */

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

import type {
  CanvasLayer,
  QuickEditPanelState,
} from './ImageCanvasEditorTypes';
import { ImageCanvasQuickEditPanelView } from './ImageCanvasQuickEditPanelView';

function createLayer(): CanvasLayer {
  return {
    id: 'layer-a',
    resourceId: 'resource-a',
    title: '源图',
    src: 'data:image/png;base64,c291cmNl',
    x: 0,
    y: 0,
    width: 320,
    height: 180,
    originalWidth: 320,
    originalHeight: 180,
    zIndex: 1,
    sourceType: 'uploaded',
  };
}

function QuickEditPanelHarness({
  initialPanel,
  onSubmit = vi.fn(),
}: {
  initialPanel: QuickEditPanelState;
  onSubmit?: () => void;
}) {
  const [panel, setPanel] = useState<QuickEditPanelState | null>(initialPanel);

  return panel ? (
    <div>
      <ImageCanvasQuickEditPanelView
        panel={panel}
        sourceLayer={createLayer()}
        style={{ left: 10, top: 20 }}
        sizeOptions={['1024x1024', '2048x1152']}
        modelOptions={[
          { label: 'nanobanana2', value: 'nano' },
          { label: 'gpt-image-2', value: 'gpt' },
        ]}
        setQuickEditPanel={setPanel}
        onSubmit={onSubmit}
      />
      <output aria-label="当前提示词">{panel.prompt}</output>
      <output aria-label="当前尺寸">{panel.size}</output>
      <output aria-label="当前模型">{panel.model}</output>
      <output aria-label="当前状态">{panel.status}</output>
      <output aria-label="当前错误">{panel.errorMessage ?? '-'}</output>
    </div>
  ) : (
    <output aria-label="面板状态">closed</output>
  );
}

describe('ImageCanvasQuickEditPanelView', () => {
  it('updates prompt, size, model and clears failed state', () => {
    render(
      <QuickEditPanelHarness
        initialPanel={{
          sourceLayerId: 'layer-a',
          prompt: '旧提示',
          size: '1024x1024',
          model: 'nano',
          status: 'failed',
          errorMessage: '失败原因',
        }}
      />,
    );

    fireEvent.change(screen.getByLabelText('快速编辑提示词'), {
      target: { value: '新提示' },
    });
    fireEvent.change(screen.getByLabelText('快速编辑尺寸'), {
      target: { value: '2048x1152' },
    });
    fireEvent.change(screen.getByLabelText('快速编辑模型'), {
      target: { value: 'gpt' },
    });

    expect(screen.getByLabelText('当前提示词').textContent).toBe('新提示');
    expect(screen.getByLabelText('当前尺寸').textContent).toBe('2048x1152');
    expect(screen.getByLabelText('当前模型').textContent).toBe('gpt');
    expect(screen.getByLabelText('当前状态').textContent).toBe('idle');
    expect(screen.getByLabelText('当前错误').textContent).toBe('-');
  });

  it('submits and closes through its interface', () => {
    const submitQuickEdit = vi.fn();
    render(
      <QuickEditPanelHarness
        initialPanel={{
          sourceLayerId: 'layer-a',
          prompt: '提示',
          size: '1024x1024',
          model: 'nano',
          status: 'idle',
        }}
        onSubmit={submitQuickEdit}
      />,
    );

    fireEvent.click(screen.getByRole('button', { name: '生成' }));
    fireEvent.click(screen.getByRole('button', { name: '关闭快速编辑图片' }));

    expect(submitQuickEdit).toHaveBeenCalledTimes(1);
    expect(screen.getByLabelText('面板状态').textContent).toBe('closed');
  });
});