/**
 * AdminEmptyState Component Tests
 * 
 * Tests for the AdminEmptyState component that displays empty state UI
 * for admin lists and tables.
 */

import React from 'react';
import { render, screen } from '@testing-library/react';
import { AdminEmptyState } from './AdminEmptyState';
import { describe, it, expect } from 'vitest';
import { Inbox, Users, AlertCircle } from 'lucide-react';

describe('AdminEmptyState', () => {
  it('should render with icon, title, and description', () => {
    render(
      <AdminEmptyState
        icon={Inbox}
        title="No Data Available"
        description="Get started by creating your first item"
      />
    );

    expect(screen.getByText('No Data Available')).toBeTruthy();
    expect(screen.getByText('Get started by creating your first item')).toBeTruthy();
  });

  it('should render with minimal props (description optional)', () => {
    render(
      <AdminEmptyState
        icon={Users}
        title="No Users"
      />
    );

    expect(screen.getByText('No Users')).toBeTruthy();
  });

  it('should render with action button', () => {
    const actionButton = <button data-testid="action-btn">Create Item</button>;

    render(
      <AdminEmptyState
        icon={Inbox}
        title="Empty List"
        description="Add some items"
        action={actionButton}
      />
    );

    expect(screen.getByText('Empty List')).toBeTruthy();
    expect(screen.getByText('Add some items')).toBeTruthy();
    expect(screen.getByTestId('action-btn')).toBeTruthy();
    expect(screen.getByText('Create Item')).toBeTruthy();
  });

  it('should render with different icons', () => {
    const icons = [Inbox, Users, AlertCircle];
    
    icons.forEach((Icon) => {
      const { container } = render(
        <AdminEmptyState
          icon={Icon}
          title="Test Title"
        />
      );
      
      // Check that the component renders without errors
      expect(screen.getByText('Test Title')).toBeTruthy();
    });
  });

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

    render(
      <AdminEmptyState
        icon={Inbox}
        title="Complex State"
        description="Multiple actions available"
        action={<ComplexAction />}
      />
    );

    expect(screen.getByText('Complex State')).toBeTruthy();
    expect(screen.getByText('Multiple actions available')).toBeTruthy();
    expect(screen.getByText('Primary Action')).toBeTruthy();
    expect(screen.getByText('Secondary Action')).toBeTruthy();
  });

  it('should render with long text content', () => {
    render(
      <AdminEmptyState
        icon={Inbox}
        title="This is a very long title that might wrap to multiple lines in the UI"
        description="This is an even longer description that provides detailed information about why the state is empty and what the user should do next"
      />
    );

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

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

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