import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import React from 'react';
import { MemoryRouter } from 'react-router-dom';
import HelpStaff from '../HelpStaff';

vi.mock('react-i18next', () => ({
  useTranslation: () => ({
    t: (key: string, fallback?: string) => fallback || key,
  }),
}));

const renderWithRouter = (component: React.ReactElement) => {
  return render(
    React.createElement(MemoryRouter, {}, component)
  );
};

describe('HelpStaff', () => {
  it('renders the page title', () => {
    renderWithRouter(React.createElement(HelpStaff));
    expect(screen.getByText('Staff Guide')).toBeInTheDocument();
  });

  it('renders the page description', () => {
    renderWithRouter(React.createElement(HelpStaff));
    expect(screen.getByText('Manage your team members, roles, and permissions')).toBeInTheDocument();
  });

  it('renders back button', () => {
    renderWithRouter(React.createElement(HelpStaff));
    expect(screen.getByText('Back')).toBeInTheDocument();
  });

  it('renders overview section', () => {
    renderWithRouter(React.createElement(HelpStaff));
    expect(screen.getByText('Overview')).toBeInTheDocument();
    expect(screen.getByText(/manage team members who can access your business dashboard/i)).toBeInTheDocument();
  });

  it('renders understanding roles section', () => {
    renderWithRouter(React.createElement(HelpStaff));
    expect(screen.getByText('Understanding Roles')).toBeInTheDocument();
  });

  it('renders user role types', () => {
    renderWithRouter(React.createElement(HelpStaff));
    expect(screen.getByText('Owner')).toBeInTheDocument();
  });

  it('renders staff roles section', () => {
    renderWithRouter(React.createElement(HelpStaff));
    expect(screen.getByText('Staff Roles: Permission Templates')).toBeInTheDocument();
    expect(screen.getByText('Manager')).toBeInTheDocument();
  });

  it('renders need more help section', () => {
    renderWithRouter(React.createElement(HelpStaff));
    expect(screen.getByText('Need More Help?')).toBeInTheDocument();
    expect(screen.getByRole('button', { name: /contact support/i })).toBeInTheDocument();
  });
});