/**
 * AdminSectionHeader Component Tests
 * 
 * Tests for the AdminSectionHeader component that provides a semantic header
 * for sections within admin pages.
 */

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

// Mock the SectionHeader component
vi.mock('@/ui/SectionHeader', () => ({
  SectionHeader: ({ title, description, actions, variant }: any) => (
    <div data-testid="section-header" data-variant={variant}>
      <h2>{title}</h2>
      {description && <p>{description}</p>}
      {actions && <div data-testid="actions">{actions}</div>}
    </div>
  ),
}));

describe('AdminSectionHeader', () => {
  it('should render with title only', () => {
    render(
      <AdminSectionHeader title="User Statistics" />
    );

    expect(screen.getByText('User Statistics')).toBeTruthy();
  });

  it('should render with title and description', () => {
    render(
      <AdminSectionHeader
        title="User Statistics"
        description="Overview of user activity and engagement"
      />
    );

    expect(screen.getByText('User Statistics')).toBeTruthy();
    expect(screen.getByText('Overview of user activity and engagement')).toBeTruthy();
  });

  it('should render with title, description, and actions', () => {
    const actions = <button data-testid="action-btn">Refresh</button>;

    render(
      <AdminSectionHeader
        title="User Statistics"
        description="Overview of user activity"
        actions={actions}
      />
    );

    expect(screen.getByText('User Statistics')).toBeTruthy();
    expect(screen.getByText('Overview of user activity')).toBeTruthy();
    expect(screen.getByTestId('action-btn')).toBeTruthy();
    expect(screen.getByText('Refresh')).toBeTruthy();
  });

  it('should render with multiple action buttons', () => {
    const actions = (
      <div>
        <button>Export</button>
        <button>Filter</button>
        <button>Sort</button>
      </div>
    );

    render(
      <AdminSectionHeader
        title="Data Table"
        description="Manage your data"
        actions={actions}
      />
    );

    expect(screen.getByText('Data Table')).toBeTruthy();
    expect(screen.getByText('Manage your data')).toBeTruthy();
    expect(screen.getByText('Export')).toBeTruthy();
    expect(screen.getByText('Filter')).toBeTruthy();
    expect(screen.getByText('Sort')).toBeTruthy();
  });

  it('should render with complex actions component', () => {
    const ComplexActions = () => (
      <div>
        <button>Primary</button>
        <button>Secondary</button>
      </div>
    );

    render(
      <AdminSectionHeader
        title="Complex Section"
        description="With multiple actions"
        actions={<ComplexActions />}
      />
    );

    expect(screen.getByText('Complex Section')).toBeTruthy();
    expect(screen.getByText('With multiple actions')).toBeTruthy();
    expect(screen.getByText('Primary')).toBeTruthy();
    expect(screen.getByText('Secondary')).toBeTruthy();
  });

  it('should render with long title and description', () => {
    render(
      <AdminSectionHeader
        title="This is a very long section header title that might wrap to multiple lines in the UI"
        description="This is an even longer description that provides detailed information about the section content and what users can expect to find here"
      />
    );

    expect(screen.getByText(/This is a very long section header title/)).toBeTruthy();
    expect(screen.getByText(/This is an even longer description/)).toBeTruthy();
  });

  it('should render with special characters in text', () => {
    render(
      <AdminSectionHeader
        title="Special & Characters <Test>"
        description="Quotes 'and' special characters"
      />
    );

    expect(screen.getByText(/Special & Characters/)).toBeTruthy();
    expect(screen.getByText(/Quotes/)).toBeTruthy();
  });
});