import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { UsersTable } from '../features/shared/components/users/UsersTable';
import { UserCard } from '../features/shared/components/users/UserCard';
import { UserForm } from '../features/shared/components/users/UserForm';

/**
 * EN: Smoke tests for users components
 * VI: Smoke tests cho users components
 *
 * These tests ensure components render without crashing and have basic functionality.
 */
describe('Users Components - Smoke Tests', () => {
  const mockUser = {
    id: '1',
    email: 'test@example.com',
    role: 'USER',
    isActive: true,
    createdAt: '2024-01-01T00:00:00Z',
    updatedAt: '2024-01-01T00:00:00Z',
  };

  const mockUsers = [mockUser];

  describe('UsersTable', () => {
    it('renders without crashing', () => {
      render(<UsersTable users={mockUsers} />);
      expect(screen.getByText('test@example.com')).toBeInTheDocument();
    });

    it('renders loading state', () => {
      render(<UsersTable users={[]} loading={true} />);
      expect(screen.getByText('Loading users...')).toBeInTheDocument();
    });

    it('renders empty state', () => {
      render(<UsersTable users={[]} />);
      expect(screen.getByText('No users found')).toBeInTheDocument();
    });

    it('renders bulk actions when users selected', () => {
      // This would require more complex setup with user interactions
      // For smoke test, just ensure it renders
      render(<UsersTable users={mockUsers} showBulkActions />);
      expect(screen.getByText('test@example.com')).toBeInTheDocument();
    });
  });

  describe('UserCard', () => {
    it('renders user information', () => {
      render(<UserCard user={mockUser} />);
      expect(screen.getByText('test@example.com')).toBeInTheDocument();
      expect(screen.getByText('USER')).toBeInTheDocument();
      expect(screen.getByText('Active')).toBeInTheDocument();
    });

    it('renders compact mode', () => {
      render(<UserCard user={mockUser} compact />);
      expect(screen.getByText('test@example.com')).toBeInTheDocument();
    });

    it('shows admin actions when enabled', () => {
      render(<UserCard user={mockUser} showAdminActions />);
      expect(screen.getByText('Edit')).toBeInTheDocument();
    });
  });

  describe('UserForm', () => {
    it('renders create form', () => {
      render(
        <UserForm
          isCreate
          onSubmit={() => {}}
          onCancel={() => {}}
        />
      );
      expect(screen.getByText('Create New User')).toBeInTheDocument();
      expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
      expect(screen.getByLabelText(/password/i)).toBeInTheDocument();
    });

    it('renders edit form', () => {
      render(
        <UserForm
          user={mockUser}
          onSubmit={() => {}}
          onCancel={() => {}}
        />
      );
      expect(screen.getByText('Edit User')).toBeInTheDocument();
      expect(screen.getByDisplayValue('test@example.com')).toBeInTheDocument();
    });

    it('shows validation errors', async () => {
      render(
        <UserForm
          isCreate
          onSubmit={() => {}}
          onCancel={() => {}}
        />
      );

      const submitButton = screen.getByRole('button', { name: /create user/i });
      submitButton.click();

      // Note: Form validation requires react-hook-form setup
      // This is just a basic smoke test
      expect(submitButton).toBeInTheDocument();
    });
  });
});