/* @vitest-environment jsdom */

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

import { UnifiedCreationPage } from './UnifiedCreationPage';
import { getUnifiedCreationSpec } from './unifiedCreationSpecs';

describe('UnifiedCreationPage', () => {
  test('按后端字段 spec 暴露统一创作页字段契约', () => {
    const onBack = vi.fn();

    render(
      <UnifiedCreationPage
        spec={getUnifiedCreationSpec('wooden-fish')}
        onBack={onBack}
      >
        <div>敲木鱼工作台</div>
      </UnifiedCreationPage>,
    );

    const root = screen
      .getByText('敲木鱼工作台')
      .closest('.unified-creation-page');
    expect(root?.getAttribute('data-play-id')).toBe('wooden-fish');
    expect(root?.getAttribute('data-field-kinds')).toBe(
      'text,image,audio,text',
    );
    expect(root?.getAttribute('data-workspace-stage')).toBe(
      'wooden-fish-workspace',
    );
    expect(root?.getAttribute('data-generation-stage')).toBe(
      'wooden-fish-generating',
    );
    expect(root?.getAttribute('data-result-stage')).toBe('wooden-fish-result');

    const fields = screen.getAllByTestId('unified-creation-field');
    expect(fields.map((field) => field.getAttribute('data-field-id'))).toEqual([
      'hitObjectPrompt',
      'hitObjectReferenceImage',
      'hitSoundAsset',
      'floatingWords',
    ]);
    expect(fields[2]?.getAttribute('data-field-kind')).toBe('audio');
    expect(fields[3]?.getAttribute('data-required')).toBe('true');
    expect(screen.getByTestId('unified-creation-play-badge').textContent).toBe(
      'wooden-fish',
    );
    fireEvent.click(screen.getByRole('button', { name: '返回' }));
    expect(onBack).toHaveBeenCalledTimes(1);
    expect(screen.queryByLabelText('创作字段')).toBeNull();
    expect(screen.queryByTestId('unified-creation-visible-field')).toBeNull();
    expect(
      screen
        .getByText('敲木鱼工作台')
        .closest('.unified-creation-page__content')
        ?.className,
    ).toContain('flex');
    expect(
      screen
        .getByText('敲木鱼工作台')
        .closest('.unified-creation-page__content')
        ?.className,
    ).toContain('min-h-max');
    expect(
      screen
        .getByText('敲木鱼工作台')
        .closest('.unified-creation-page__content')
        ?.className,
    ).not.toContain('min-h-0');
    expect(root?.className).toContain('overflow-y-auto');
  });
});