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 { LocaleProvider } from '@/app/providers/LocaleProvider';
import '@testing-library/jest-dom';
import ProjectsPage from '@/features/projects/pages/ProjectsPage';
import ProjectDetailPage from '@/features/projects/pages/ProjectDetailPage';
import * as projectService from '@/features/projects/services/projectService';
import i18n from '@/locales/i18n';

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',
  department: { id: 'd1', name: 'Engineering', code: 'ENG' },
  owner_user_id: 'u1',
  owner: { id: 'u1', name: 'Owner' },
  name: 'Alpha',
  key: 'ALP',
  description: null,
  status: 'active' as const,
  start_date: null,
  due_date: null,
  completed_at: null,
  color: null,
  is_overdue: false,
  completion_percentage: 40,
  created_at: '',
  updated_at: '',
  permissions: {
    role: 'owner' as const,
    can_manage: true,
    can_update_work_items: true,
    can_plan_capacity: true,
  },
};

function renderFlow(initialPath: string) {
  const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
  return render(
    <QueryClientProvider client={client}>
      <I18nextProvider i18n={i18n}>
        <LocaleProvider>
          <ThemeProvider>
            <MemoryRouter initialEntries={[initialPath]}>
              <Routes>
                <Route path="/projects" element={<ProjectsPage />} />
                <Route path="/projects/:id" element={<ProjectDetailPage />} />
              </Routes>
            </MemoryRouter>
          </ThemeProvider>
        </LocaleProvider>
      </I18nextProvider>
    </QueryClientProvider>,
  );
}

describe('Projects simplification user flow', () => {
  beforeEach(() => {
    vi.mocked(projectService.fetchProjects).mockResolvedValue({
      data: [project],
      meta: { current_page: 1, last_page: 1, per_page: 24, total: 1 },
    });
    vi.mocked(projectService.fetchProject).mockResolvedValue(project);
    vi.mocked(projectService.fetchProjectCommandCenter).mockResolvedValue({
      project_health: { score: 82, level: 'healthy' },
      progress_percent: 40,
      open_work_count: 5,
      completed_work_count: 3,
      open_work_md: 10,
      active_sprint: null,
      velocity: { sprints: [], average_velocity_md: 0, trend: 'stable' },
      risks_open: 0,
      dependencies_count: 0,
      overdue_work_count: 0,
      blocked_work_count: 0,
      team_capacity: null,
      upcoming_milestones: [],
      recent_activity: [],
    });
    vi.mocked(projectService.fetchProjectMembers).mockResolvedValue([]);
  });

  it('lists projects without portfolio sub-tabs and opens simplified overview', async () => {
    renderFlow('/projects');
    expect(await screen.findByText('Alpha')).toBeInTheDocument();
    expect(screen.queryByRole('tab', { name: /Portfolio Overview/i })).not.toBeInTheDocument();
    expect(screen.getByRole('button', { name: /Portfolio insights/i })).toBeInTheDocument();
  });

  it('shows core navigation without advanced tabs on overview', async () => {
    renderFlow('/projects/p1');
    expect(await screen.findByText('Project snapshot')).toBeInTheDocument();
    expect(screen.getByRole('tab', { name: 'Team' })).toBeInTheDocument();
    expect(screen.getByRole('tab', { name: 'Board' })).toBeInTheDocument();
    expect(screen.queryByRole('tab', { name: /Settings/i })).not.toBeInTheDocument();
    expect(screen.getByText('Quick Actions')).toBeInTheDocument();
  });
});