// @vitest-environment jsdom

import React from 'react';
import { cleanup, fireEvent, render, screen } from '@testing-library/react';
import { afterEach, describe, expect, it } from 'vitest';
import App from './App';

describe('App bilingual UI', () => {
  afterEach(() => {
    cleanup();
  });

  it('defaults to Chinese and switches to English from the language toggle', async () => {
    render(<App />);

    expect(screen.getByLabelText('switch-ui-language-zh')).toHaveAttribute('aria-pressed', 'true');
    expect(screen.getByText('字幕语言')).toBeInTheDocument();
    expect(screen.getAllByText('上传视频').length).toBeGreaterThan(0);

    fireEvent.click(screen.getByLabelText('switch-ui-language-en'));

    expect(screen.getByLabelText('switch-ui-language-en')).toHaveAttribute('aria-pressed', 'true');
    expect(screen.getByText('Subtitle Language')).toBeInTheDocument();
    expect(screen.getAllByText('Upload Video').length).toBeGreaterThan(0);
  });

  it('shows the upload workbench header and keeps the language switcher visible', () => {
    render(<App />);

    expect(screen.getByRole('banner')).toBeInTheDocument();
    expect(screen.getByLabelText('switch-ui-language-zh')).toBeInTheDocument();
    expect(screen.getByLabelText('switch-ui-language-en')).toBeInTheDocument();

    fireEvent.click(screen.getByLabelText('switch-ui-language-en'));

    expect(screen.getByRole('heading', { name: 'Upload & prepare' })).toBeInTheDocument();
    expect(screen.getByText('Everything you need to start translation is visible right away.')).toBeInTheDocument();
    expect(screen.getByText('Video Translate')).toBeInTheDocument();
  });

  it('renders the upload shell with compact first-fold copy', () => {
    render(<App />);

    fireEvent.click(screen.getByLabelText('switch-ui-language-en'));

    expect(screen.getByRole('heading', { name: 'Upload & prepare' })).toBeInTheDocument();
    expect(
      screen.getByText('Everything you need to start translation is visible right away.'),
    ).toBeInTheDocument();
  });
});
