import React from 'react';
import { describe, it, expect, vi } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import { SettingsUsersPage } from '@/pages/SettingsUsers';

const mockUsers = [
  { id: '1', email: 'admin@test.de', first_name: 'Admin', last_name: 'User', role: 'admin', is_active: true },
  { id: '2', email: 'anna@test.de', first_name: 'Anna', last_name: 'Schmidt', role: 'user', is_active: true },
  { id: '3', email: 'gast@test.de', first_name: 'Gast', last_name: 'Benutzer', role: 'guest', is_active: false },
];

vi.mock('@/api/hooks', () => ({
  useRoles: () => ({ data: { items: [] }, isLoading: false }),
  useUsers: () => ({
    data: { items: mockUsers, total: 3 },
    isLoading: false,
  }),
  useCreateUser: () => ({ mutateAsync: vi.fn(), isPending: false }),
  useUpdateUser: () => ({ mutateAsync: vi.fn(), isPending: false }),
  useDeleteUser: () => ({ mutateAsync: vi.fn(), isPending: false }),
}));

vi.mock('@/components/ui/Toast', () => ({
  useToast: () => ({ success: vi.fn(), error: vi.fn(), info: vi.fn() }),
}));

describe('SettingsUsersPage', () => {
  it('renders users page', () => {
    render(<MemoryRouter><SettingsUsersPage /></MemoryRouter>);
    expect(screen.getByTestId('settings-users-page')).toBeInTheDocument();
  });

  it('renders user list with at least one user', () => {
    render(<MemoryRouter><SettingsUsersPage /></MemoryRouter>);
    expect(screen.getAllByText(/Admin/).length).toBeGreaterThan(0);
  });

  it('renders all mock users in the list', () => {
    render(<MemoryRouter><SettingsUsersPage /></MemoryRouter>);
    expect(screen.getByText('admin@test.de')).toBeInTheDocument();
    expect(screen.getByText('anna@test.de')).toBeInTheDocument();
    expect(screen.getByText('gast@test.de')).toBeInTheDocument();
  });

  it('renders invite user button', () => {
    render(<MemoryRouter><SettingsUsersPage /></MemoryRouter>);
    expect(screen.getByTestId('invite-user-btn')).toBeInTheDocument();
  });

  it('renders role select dropdowns for each user', () => {
    render(<MemoryRouter><SettingsUsersPage /></MemoryRouter>);
    const selects = screen.getAllByRole('combobox');
    expect(selects.length).toBeGreaterThanOrEqual(3);
  });

  it('renders activate/deactivate toggle buttons', () => {
    render(<MemoryRouter><SettingsUsersPage /></MemoryRouter>);
    expect(screen.getByTestId('toggle-active-1')).toBeInTheDocument();
    expect(screen.getByTestId('toggle-active-2')).toBeInTheDocument();
    expect(screen.getByTestId('toggle-active-3')).toBeInTheDocument();
  });

  it('shows correct button text for active user (Deactivate)', () => {
    render(<MemoryRouter><SettingsUsersPage /></MemoryRouter>);
    expect(screen.getByTestId('toggle-active-1')).toHaveTextContent('Deaktivieren');
  });

  it('shows correct button text for inactive user (Activate)', () => {
    render(<MemoryRouter><SettingsUsersPage /></MemoryRouter>);
    expect(screen.getByTestId('toggle-active-3')).toHaveTextContent('Aktivieren');
  });

  it('shows active badge for active users', () => {
    render(<MemoryRouter><SettingsUsersPage /></MemoryRouter>);
    expect(screen.getAllByText('Aktiv').length).toBeGreaterThan(0);
  });

  it('shows inactive badge for inactive users', () => {
    render(<MemoryRouter><SettingsUsersPage /></MemoryRouter>);
    expect(screen.getAllByText('Inaktiv').length).toBeGreaterThan(0);
  });

  it('opens invite user modal when invite button clicked', () => {
    render(<MemoryRouter><SettingsUsersPage /></MemoryRouter>);
    fireEvent.click(screen.getByTestId('invite-user-btn'));
    expect(screen.getByTestId('invite-user-form')).toBeInTheDocument();
  });

  it('invite form has email input field', () => {
    render(<MemoryRouter><SettingsUsersPage /></MemoryRouter>);
    fireEvent.click(screen.getByTestId('invite-user-btn'));
    expect(screen.getByTestId('invite-email')).toBeInTheDocument();
  });

  it('invite form has role select', () => {
    render(<MemoryRouter><SettingsUsersPage /></MemoryRouter>);
    fireEvent.click(screen.getByTestId('invite-user-btn'));
    const form = screen.getByTestId('invite-user-form');
    const selects = form.querySelectorAll('select');
    expect(selects.length).toBeGreaterThan(0);
  });

  it('invite form has send invite button', () => {
    render(<MemoryRouter><SettingsUsersPage /></MemoryRouter>);
    fireEvent.click(screen.getByTestId('invite-user-btn'));
    expect(screen.getByTestId('send-invite-btn')).toBeInTheDocument();
  });
});