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

const mockGroups = [
  { id: 'g1', name: 'Admins', description: 'Admin group', permissions: { all: true }, denied_permissions: [], field_permissions: {}, member_count: 2 },
  { id: 'g2', name: 'Users', description: 'Regular users', permissions: { contacts: { read: true } }, denied_permissions: ['contacts:delete'], field_permissions: {}, member_count: 5 },
];

const mockPermissions = [
  { key: 'contacts:read', label: 'Contacts Read', module: 'contacts' },
  { key: 'contacts:write', label: 'Contacts Write', module: 'contacts' },
  { key: 'contacts:delete', label: 'Contacts Delete', module: 'contacts' },
];

vi.mock('@/api/hooks', () => ({
  useGroups: () => ({ data: { items: mockGroups }, isLoading: false, isError: false, error: null, refetch: vi.fn() }),
  useCreateGroup: () => ({ mutateAsync: vi.fn().mockResolvedValue({ id: 'g3' }), isPending: false }),
  useUpdateGroup: () => ({ mutateAsync: vi.fn(), isPending: false }),
  useDeleteGroup: () => ({ mutateAsync: vi.fn(), isPending: false }),
  usePermissions: () => ({ data: mockPermissions, isLoading: false }),
  useGroupMembers: () => ({ data: { items: [] }, isLoading: false }),
  useAddGroupMember: () => ({ mutateAsync: vi.fn(), isPending: false }),
  useRemoveGroupMember: () => ({ mutateAsync: vi.fn(), isPending: false }),
  useUsers: () => ({ data: { items: [] }, isLoading: false }),
}));

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

function renderPage() {
  return render(<MemoryRouter><SettingsGroupsPage /></MemoryRouter>);
}

describe('SettingsGroupsPage', () => {
  it('renders groups page', () => {
    renderPage();
    expect(screen.getByTestId('settings-groups-page')).toBeInTheDocument();
  });

  it('renders create group button', () => {
    renderPage();
    expect(screen.getByTestId('create-group-btn')).toBeInTheDocument();
  });

  it('renders existing groups', () => {
    renderPage();
    expect(screen.getByText('Admins')).toBeInTheDocument();
    expect(screen.getByText('Users')).toBeInTheDocument();
  });

  it('renders edit button for each group', () => {
    renderPage();
    expect(screen.getByTestId('edit-group-g1')).toBeInTheDocument();
    expect(screen.getByTestId('edit-group-g2')).toBeInTheDocument();
  });

  it('renders delete button for each group', () => {
    renderPage();
    expect(screen.getByTestId('delete-group-g1')).toBeInTheDocument();
    expect(screen.getByTestId('delete-group-g2')).toBeInTheDocument();
  });

  it('opens create group form when create button clicked', async () => {
    renderPage();
    fireEvent.click(screen.getByTestId('create-group-btn'));
    await waitFor(() => {
      expect(screen.getByTestId('create-group-form')).toBeInTheDocument();
    });
    expect(screen.getByTestId('new-group-name')).toBeInTheDocument();
    expect(screen.getByTestId('new-group-description')).toBeInTheDocument();
  });

  it('opens edit group form when edit button clicked', async () => {
    renderPage();
    fireEvent.click(screen.getByTestId('edit-group-g1'));
    await waitFor(() => {
      expect(screen.getByTestId('edit-group-form')).toBeInTheDocument();
    });
    expect(screen.getByTestId('tab-details')).toBeInTheDocument();
    expect(screen.getByTestId('tab-permissions')).toBeInTheDocument();
  });
});
