import React from 'react';
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen } from '@testing-library/react';
import { MemoryRouter, Route, Routes } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { I18nextProvider } from 'react-i18next';
import { ThemeProvider } from '@/app/providers/ThemeProvider';
import '@testing-library/jest-dom';
import ProjectReportsPage from '@/features/projects/pages/ProjectReportsPage';
import ProjectDependenciesPage from '@/features/projects/pages/ProjectDependenciesPage';
import ProjectSettingsPage from '@/features/projects/pages/ProjectSettingsPage';
import * as projectService from '@/features/projects/services/projectService';
import i18n from '@/locales/i18n';
import { LocaleProvider } from '@/app/providers/LocaleProvider';

vi.mock('@/features/projects/services/projectService');
vi.mock('@/shared/components/layout/AppLayout', () => ({
  AppLayout: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
}));
vi.mock('@/shared/realtime/echoClient', () => ({
  getEcho: () => null,
  isRealtimeEnabled: () => false,
  leaveChannel: vi.fn(),
}));

const project = {
  id: 'p1',
  company_id: 'c1',
  department_id: 'd1',
  owner_user_id: 'u1',
  name: 'Test',
  key: 'TST',
  description: null,
  status: 'active' as const,
  start_date: null,
  due_date: null,
  completed_at: null,
  color: null,
  is_overdue: false,
  created_at: '',
  updated_at: '',
  permissions: {
    role: 'owner' as const,
    can_manage: true,
    can_update_work_items: true,
    can_plan_capacity: true,
  },
};

function renderAt(path: string, element: React.ReactElement) {
  const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
  return render(
    <QueryClientProvider client={client}>
      <I18nextProvider i18n={i18n}>
        <LocaleProvider>
          <ThemeProvider>
            <MemoryRouter initialEntries={[path]}>
              <Routes>
                <Route path="/projects/:id/reports" element={element} />
                <Route path="/projects/:id/dependencies" element={element} />
                <Route path="/projects/:id/settings" element={element} />
              </Routes>
            </MemoryRouter>
          </ThemeProvider>
        </LocaleProvider>
      </I18nextProvider>
    </QueryClientProvider>,
  );
}

describe('Project workspace pages', () => {
  beforeEach(() => {
    vi.mocked(projectService.fetchProject).mockResolvedValue(project);
    vi.mocked(projectService.fetchProjectMembers).mockResolvedValue([]);
  });

  it('renders the analytics center with primary report cards', async () => {
    renderAt('/projects/p1/reports', <ProjectReportsPage />);
    // Charts-first Analytics Center renders the five key reports by title.
    expect(await screen.findByText('Velocity Trend')).toBeInTheDocument();
    expect(screen.getByText('Sprint Burndown')).toBeInTheDocument();
    expect(screen.getByText(/More analytics/i)).toBeInTheDocument();
  });

  it('renders dependencies metrics and empty guidance', async () => {
    vi.mocked(projectService.fetchProjectDependencies).mockResolvedValue({
      metrics: { total: 0, blocking: 0, unresolved: 0, blocked_work: 0 },
      items: [],
    });
    vi.mocked(projectService.fetchBlockedDependencyChains).mockResolvedValue({
      chains: [],
      count: 0,
    });
    renderAt('/projects/p1/dependencies', <ProjectDependenciesPage />);
    expect(
      await screen.findByText(/Add dependencies when one work item must finish/i),
    ).toBeInTheDocument();
  });

  it('renders simplified settings with advanced collapsed for owner', async () => {
    renderAt('/projects/p1/settings', <ProjectSettingsPage />);
    expect(await screen.findByText(/Project details/i)).toBeInTheDocument();
    expect(screen.getByText(/Manage team/i)).toBeInTheDocument();
    expect(screen.getByText(/Advanced settings/i)).toBeInTheDocument();
    expect(screen.queryByRole('tab', { name: /Workflow/i })).not.toBeInTheDocument();
  });
});