import React from 'react';
import { render, screen } from '@testing-library/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ThemeProvider } from 'styled-components';
import { I18nextProvider } from 'react-i18next';
import { describe, it, expect, vi, beforeEach } from 'vitest';
import '@testing-library/jest-dom';
import { AssigneePicker } from '@/features/tickets/components/AssigneePicker';
import * as departmentSupportService from '@/features/tickets/services/departmentSupportService';
import i18n from '@/locales/i18n';
import { LocaleProvider } from '@/app/providers/LocaleProvider';
import { lightTheme } from '@/styles/theme';

vi.mock('@/features/tickets/services/departmentSupportService');

function renderPicker() {
  const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
  return render(
    <QueryClientProvider client={client}>
      <ThemeProvider theme={lightTheme}>
        <I18nextProvider i18n={i18n}>
          <LocaleProvider>
            <AssigneePicker
              departmentId="dept-1"
              value={null}
              onChange={vi.fn()}
            />
          </LocaleProvider>
        </I18nextProvider>
      </ThemeProvider>
    </QueryClientProvider>,
  );
}

describe('AssigneePicker', () => {
  beforeEach(() => {
    vi.mocked(departmentSupportService.fetchDepartmentAssignableUsers).mockResolvedValue([
      { id: 'user-1', name: 'Alice User', email: 'alice@test.com' },
    ]);
  });

  it('renders assignee search input', async () => {
    renderPicker();

    expect(
      screen.getByPlaceholderText(/search assignable users by name or email/i),
    ).toBeInTheDocument();
  });
});