import React from 'react';
import { describe, expect, it, vi, beforeEach } from 'vitest';
import { render, screen } from '@testing-library/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { MemoryRouter, Route, Routes } from 'react-router-dom';
import { I18nextProvider } from 'react-i18next';
import i18n from '@/locales/i18n';
import { LocaleProvider } from '@/app/providers/LocaleProvider';
import { ThemeProvider } from '@/app/providers/ThemeProvider';
import DepartmentPortalPage from '@/features/departmentPortal/pages/DepartmentPortalPage';

vi.mock('@/features/departmentPortal/hooks/useDepartmentPortal', () => ({
  useDepartmentPortal: vi.fn(),
}));

vi.mock('@/features/auth/store/authStore', () => ({
  useAuthStore: (selector: (s: { isAuthenticated: boolean }) => unknown) =>
    selector({ isAuthenticated: false }),
}));

import { useDepartmentPortal } from '@/features/departmentPortal/hooks/useDepartmentPortal';

const mockPortal = {
  id: 'dept-1',
  name_en: 'IT',
  name_ar: 'IT',
  slug: 'it',
  description_en: 'IT help',
  description_ar: 'IT help',
  company: { id: 'c1', name: 'MV', logo_url: null },
  portal_theme: null,
  portal_requires_membership: false,
};

function renderPage() {
  const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
  return render(
    <QueryClientProvider client={client}>
      <ThemeProvider>
        <I18nextProvider i18n={i18n}>
          <LocaleProvider>
            <MemoryRouter initialEntries={['/d/it']}>
              <Routes>
                <Route path="/d/:departmentSlug" element={<DepartmentPortalPage />} />
              </Routes>
            </MemoryRouter>
          </LocaleProvider>
        </I18nextProvider>
      </ThemeProvider>
    </QueryClientProvider>,
  );
}

describe('DepartmentPortalPage', () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });

  it('shows loading then portal hero', () => {
    vi.mocked(useDepartmentPortal).mockReturnValue({
      isLoading: false,
      isError: false,
      data: mockPortal,
    } as ReturnType<typeof useDepartmentPortal>);

    renderPage();
    expect(screen.getByText('IT')).toBeInTheDocument();
    expect(screen.getByRole('heading', { name: 'Create Ticket' })).toBeInTheDocument();
  });

  it('shows error message when portal fails to load', () => {
    vi.mocked(useDepartmentPortal).mockReturnValue({
      isLoading: false,
      isError: true,
      error: new Error('Network'),
    } as ReturnType<typeof useDepartmentPortal>);

    renderPage();
    expect(screen.getByText(/could not load portal/i)).toBeInTheDocument();
  });
});