/**
 * AdminToolbar Component Tests
 * 
 * Tests for the AdminToolbar component that provides a semantic toolbar
 * for admin pages with filters, search, and secondary actions.
 */

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

// Mock the ControlBar component
vi.mock('@/ui/ControlBar', () => ({
  ControlBar: ({ leftContent, children }: any) => (
    <div data-testid="control-bar">
      {leftContent && <div data-testid="left-content">{leftContent}</div>}
      <div data-testid="children">{children}</div>
    </div>
  ),
}));

describe('AdminToolbar', () => {
  it('should render with children only', () => {
    render(
      <AdminToolbar>
        <button>Filter</button>
      </AdminToolbar>
    );

    expect(screen.getByText('Filter')).toBeTruthy();
  });

  it('should render with leftContent and children', () => {
    render(
      <AdminToolbar
        leftContent={<span>Left Content</span>}
      >
        <button>Filter</button>
      </AdminToolbar>
    );

    expect(screen.getByText('Left Content')).toBeTruthy();
    expect(screen.getByText('Filter')).toBeTruthy();
  });

  it('should render with multiple children', () => {
    render(
      <AdminToolbar
        leftContent={<span>Filters</span>}
      >
        <button>Filter 1</button>
        <button>Filter 2</button>
        <button>Filter 3</button>
      </AdminToolbar>
    );

    expect(screen.getByText('Filters')).toBeTruthy();
    expect(screen.getByText('Filter 1')).toBeTruthy();
    expect(screen.getByText('Filter 2')).toBeTruthy();
    expect(screen.getByText('Filter 3')).toBeTruthy();
  });

  it('should render with complex leftContent', () => {
    const ComplexLeftContent = () => (
      <div>
        <span>Complex</span>
        <button>Action</button>
      </div>
    );

    render(
      <AdminToolbar
        leftContent={<ComplexLeftContent />}
      >
        <button>Filter</button>
      </AdminToolbar>
    );

    expect(screen.getByText('Complex')).toBeTruthy();
    expect(screen.getByText('Action')).toBeTruthy();
    expect(screen.getByText('Filter')).toBeTruthy();
  });

  it('should render with complex children', () => {
    const ComplexChild = () => (
      <div>
        <span>Complex</span>
        <button>Action</button>
      </div>
    );

    render(
      <AdminToolbar
        leftContent={<span>Filters</span>}
      >
        <ComplexChild />
      </AdminToolbar>
    );

    expect(screen.getByText('Filters')).toBeTruthy();
    expect(screen.getByText('Complex')).toBeTruthy();
    expect(screen.getByText('Action')).toBeTruthy();
  });

  it('should render with mixed content types', () => {
    render(
      <AdminToolbar
        leftContent={<span>Filters</span>}
      >
        <button>Button</button>
        <input type="text" placeholder="Search" />
        <select>
          <option>Option 1</option>
        </select>
      </AdminToolbar>
    );

    expect(screen.getByText('Filters')).toBeTruthy();
    expect(screen.getByText('Button')).toBeTruthy();
    expect(screen.getByPlaceholderText('Search')).toBeTruthy();
  });

  it('should render without leftContent', () => {
    render(
      <AdminToolbar>
        <button>Filter</button>
      </AdminToolbar>
    );

    expect(screen.getByText('Filter')).toBeTruthy();
  });

  it('should render with empty children', () => {
    render(
      <AdminToolbar
        leftContent={<span>Filters</span>}
      >
        {null}
      </AdminToolbar>
    );

    expect(screen.getByText('Filters')).toBeTruthy();
  });
});