import { render, screen } from '@testing-library/react';
import { describe, it, expect, vi, beforeEach } from 'vitest';
import TaskListPage from '@/app/(protected)/tasks/page';
import { useTasks } from '@/hooks/useTasks';

vi.mock('next/navigation', () => ({
  useRouter: vi.fn(() => ({
    push: vi.fn(),
    replace: vi.fn(),
  })),
  usePathname: vi.fn(() => '/tasks'),
}));

vi.mock('@/contexts/tenant-context', () => ({
  useTenant: vi.fn(() => ({
    activeClubId: 'club-123',
    clubs: [{ id: 'club-123', name: 'Tennis Club' }],
  })),
}));

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

describe('TaskListPage', () => {
  beforeEach(() => {
    (useTasks as ReturnType<typeof vi.fn>).mockReturnValue({
      data: {
        items: [
          { id: '1', title: 'Test Task 1', status: 'Open', assigneeId: null, createdAt: '2024-01-01' },
          { id: '2', title: 'Test Task 2', status: 'InProgress', assigneeId: 'user-1', createdAt: '2024-01-02' },
          { id: '3', title: 'Test Task 3', status: 'Done', assigneeId: 'user-2', createdAt: '2024-01-03' },
        ],
        total: 3,
        page: 1,
        pageSize: 20,
      },
      isLoading: false,
      error: null,
    });
  });

  it('renders task list with 3 data rows', () => {
    render(<TaskListPage />);
    expect(screen.getAllByRole('row')).toHaveLength(4);
    expect(screen.getByText('Test Task 1')).toBeInTheDocument();
    expect(screen.getByText('Test Task 2')).toBeInTheDocument();
  });

  it('shows status badge with correct color classes', () => {
    render(<TaskListPage />);
    const openBadge = screen.getByText('Open', { selector: 'span' });
    const inProgressBadge = screen.getByText('InProgress', { selector: 'span' });
    const doneBadge = screen.getByText('Done', { selector: 'span' });
    
    expect(openBadge).toBeInTheDocument();
    expect(inProgressBadge).toBeInTheDocument();
    expect(doneBadge).toBeInTheDocument();
  });

  it('renders "New Task" button', () => {
    render(<TaskListPage />);
    expect(screen.getByRole('link', { name: /new task/i })).toBeInTheDocument();
  });
});
