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

// Mock i18n hook
vi.mock('@/hooks/useTranslation', () => ({
  useTranslation: () => ({
    t: (key: string) => {
      const translations: Record<string, string> = {
        'comingSoon.description': 'This feature is coming soon!',
        'comingSoon.goBack': 'Go Back',
        'comingSoon.notifyMe': 'Notify Me',
      };
      return translations[key] || key;
    },
  }),
}));

describe('ComingSoon', () => {
  it('should render the feature name', () => {
    render(<ComingSoon feature="Audio Streaming" />);

    expect(screen.getByText('Audio Streaming')).toBeInTheDocument();
  });

  it('should render the description', () => {
    render(<ComingSoon feature="Test Feature" />);

    expect(screen.getByText('This feature is coming soon!')).toBeInTheDocument();
  });

  it('should render the Notify Me button (disabled)', () => {
    render(<ComingSoon feature="Test" />);

    const notifyButton = screen.getByText('Notify Me');
    expect(notifyButton).toBeInTheDocument();
    expect(notifyButton.closest('button')).toBeDisabled();
  });

  it('should render Go Back button when onGoBack is provided', () => {
    const onGoBack = vi.fn();
    render(<ComingSoon feature="Test" onGoBack={onGoBack} />);

    const goBackButton = screen.getByText('Go Back');
    expect(goBackButton).toBeInTheDocument();
    fireEvent.click(goBackButton);
    expect(onGoBack).toHaveBeenCalledTimes(1);
  });

  it('should not render Go Back button when onGoBack is not provided', () => {
    render(<ComingSoon feature="Test" />);

    expect(screen.queryByText('Go Back')).not.toBeInTheDocument();
  });

  it('should render the logo illustration', () => {
    const { container } = render(<ComingSoon feature="Test" />);

    expect(container.querySelector('svg')).toBeInTheDocument();
  });
});