import { describe, it, expect, vi } from 'vitest';
import { render, fireEvent } from '@testing-library/svelte';
import AboutDialog from '$lib/components/AboutDialog.svelte';

vi.mock('@tauri-apps/api/app', () => ({
  getVersion: vi.fn().mockResolvedValue('0.2.1'),
}));

describe('AboutDialog', () => {
  it('renders the About tab by default', () => {
    const { getByText } = render(AboutDialog, {
      props: { onClose: vi.fn() },
    });
    expect(getByText('GUI Video Clipper')).toBeTruthy();
    expect(getByText('by cottongin')).toBeTruthy();
  });

  it('shows two tabs: About and Shortcuts', () => {
    const { getByRole } = render(AboutDialog, {
      props: { onClose: vi.fn() },
    });
    const tablist = getByRole('tablist');
    expect(tablist).toBeTruthy();
    expect(tablist.querySelectorAll('[role="tab"]')).toHaveLength(2);
  });

  it('switches to Shortcuts tab on click', async () => {
    const { getByText, getAllByText } = render(AboutDialog, {
      props: { onClose: vi.fn() },
    });
    const shortcutsTab = getByText('Shortcuts');
    await fireEvent.click(shortcutsTab);

    expect(getAllByText('Play / Pause').length).toBeGreaterThan(0);
    expect(getByText('Toggle mode')).toBeTruthy();
    expect(getByText('Player Mode')).toBeTruthy();
    expect(getByText('Clipper Mode')).toBeTruthy();
  });

  it('switches back to About tab', async () => {
    const { getByText, getByRole } = render(AboutDialog, {
      props: { onClose: vi.fn() },
    });
    await fireEvent.click(getByRole('tab', { name: 'Shortcuts' }));
    await fireEvent.click(getByRole('tab', { name: 'About' }));

    expect(getByText('GUI Video Clipper')).toBeTruthy();
    expect(getByText('by cottongin')).toBeTruthy();
  });

  it('calls onClose when Close button is clicked', async () => {
    const onClose = vi.fn();
    const { getByText } = render(AboutDialog, {
      props: { onClose },
    });
    await fireEvent.click(getByText('Close'));
    expect(onClose).toHaveBeenCalled();
  });
});