/**
 * UserStatusTag Component Tests
 * 
 * Tests for the UserStatusTag component that displays user status
 * with appropriate visual variants and icons.
 */

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

// Mock the StatusBadge component
vi.mock('@/ui/StatusBadge', () => ({
  StatusBadge: ({ variant, icon, children }: any) => (
    <div data-testid="status-badge" data-variant={variant}>
      {icon && <span data-testid="icon">Icon</span>}
      <span>{children}</span>
    </div>
  ),
}));

describe('UserStatusTag', () => {
  it('should render active status with success variant', () => {
    render(<UserStatusTag status="active" />);

    expect(screen.getByText('Active')).toBeTruthy();
    expect(screen.getByTestId('status-badge')).toHaveAttribute('data-variant', 'success');
  });

  it('should render suspended status with warning variant', () => {
    render(<UserStatusTag status="suspended" />);

    expect(screen.getByText('Suspended')).toBeTruthy();
    expect(screen.getByTestId('status-badge')).toHaveAttribute('data-variant', 'warning');
  });

  it('should render deleted status with error variant', () => {
    render(<UserStatusTag status="deleted" />);

    expect(screen.getByText('Deleted')).toBeTruthy();
    expect(screen.getByTestId('status-badge')).toHaveAttribute('data-variant', 'error');
  });

  it('should render pending status with pending variant', () => {
    render(<UserStatusTag status="pending" />);

    expect(screen.getByText('Pending')).toBeTruthy();
    expect(screen.getByTestId('status-badge')).toHaveAttribute('data-variant', 'pending');
  });

  it('should render unknown status with neutral variant', () => {
    render(<UserStatusTag status="unknown" />);

    expect(screen.getByText('unknown')).toBeTruthy();
    expect(screen.getByTestId('status-badge')).toHaveAttribute('data-variant', 'neutral');
  });

  it('should render uppercase status', () => {
    render(<UserStatusTag status="ACTIVE" />);

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

  it('should render mixed case status', () => {
    render(<UserStatusTag status="AcTiVe" />);

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

  it('should render with special characters in status', () => {
    render(<UserStatusTag status="active-" />);

    expect(screen.getByText('active-')).toBeTruthy();
  });

  it('should render with empty status', () => {
    render(<UserStatusTag status="" />);

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

  it('should render with numeric status', () => {
    render(<UserStatusTag status="123" />);

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

  it('should render with status containing spaces', () => {
    render(<UserStatusTag status="active user" />);

    expect(screen.getByText('active user')).toBeTruthy();
  });

  it('should render with status containing special characters', () => {
    render(<UserStatusTag status="active-user" />);

    expect(screen.getByText('active-user')).toBeTruthy();
  });

  it('should render with very long status', () => {
    render(<UserStatusTag status="this-is-a-very-long-status-that-might-wrap-to-multiple-lines" />);

    expect(screen.getByText(/this-is-a-very-long-status/)).toBeTruthy();
  });

  it('should render with unicode characters in status', () => {
    render(<UserStatusTag status="active✓" />);

    expect(screen.getByText('active✓')).toBeTruthy();
  });

  it('should render with emoji in status', () => {
    render(<UserStatusTag status="active 🚀" />);

    expect(screen.getByText('active 🚀')).toBeTruthy();
  });
});
