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

describe('App — extended', () => {
  it('header shows "FormIQ" heading', () => {
    render(<App />);
    expect(screen.getByRole('heading', { name: /FormIQ/i })).toBeInTheDocument();
  });

  it('header shows "WordPress" badge', () => {
    render(<App />);
    expect(screen.getByText('WordPress')).toBeInTheDocument();
  });

  it('dashboard stat cards all show "0" as initial value', () => {
    render(<App />);
    // "Free" is also a bold value, so query specifically by bold stat values
    const zeros = screen.getAllByText('0');
    // Forms Generated = 0, Documents Indexed = 0
    expect(zeros.length).toBeGreaterThanOrEqual(2);
  });

  it('only dashboard content is visible on initial render; forms/settings are not', () => {
    render(<App />);
    // Dashboard landmarks should be present
    expect(screen.getByText('Forms Generated')).toBeInTheDocument();
    // Forms and Settings placeholder text should NOT exist yet
    expect(screen.queryByText('Form builder coming soon.')).not.toBeInTheDocument();
    expect(screen.queryByText('Settings panel coming soon.')).not.toBeInTheDocument();
  });

  it('switching to Forms tab hides dashboard and shows forms placeholder', () => {
    render(<App />);
    fireEvent.click(screen.getByRole('button', { name: /forms/i }));
    expect(screen.getByText('Form builder coming soon.')).toBeInTheDocument();
    expect(screen.queryByText('Forms Generated')).not.toBeInTheDocument();
  });

  it('switching to Settings tab hides dashboard and shows settings placeholder', () => {
    render(<App />);
    fireEvent.click(screen.getByRole('button', { name: /settings/i }));
    expect(screen.getByText('Settings panel coming soon.')).toBeInTheDocument();
    expect(screen.queryByText('Forms Generated')).not.toBeInTheDocument();
  });

  it('cycling through all 3 tabs shows correct content for each', () => {
    render(<App />);

    // Dashboard (default)
    expect(screen.getByText('Forms Generated')).toBeInTheDocument();

    // Forms tab
    fireEvent.click(screen.getByRole('button', { name: /forms/i }));
    expect(screen.getByText('Form builder coming soon.')).toBeInTheDocument();
    expect(screen.queryByText('Forms Generated')).not.toBeInTheDocument();

    // Settings tab
    fireEvent.click(screen.getByRole('button', { name: /settings/i }));
    expect(screen.getByText('Settings panel coming soon.')).toBeInTheDocument();
    expect(screen.queryByText('Form builder coming soon.')).not.toBeInTheDocument();

    // Back to Dashboard
    fireEvent.click(screen.getByRole('button', { name: /dashboard/i }));
    expect(screen.getByText('Forms Generated')).toBeInTheDocument();
    expect(screen.queryByText('Settings panel coming soon.')).not.toBeInTheDocument();
  });
});