import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen } from '@testing-library/react';

let mockIsLoading = false;
vi.mock('@/hooks/usePageLoading', () => ({
    usePageLoading: () => ({
        isLoading: mockIsLoading,
        isRefreshing: false,
        startRefresh: vi.fn(),
        endRefresh: vi.fn(),
    }),
}));
vi.mock('@inertiajs/react', async () => ({
    ...(await vi.importActual<typeof import('@inertiajs/react')>('@inertiajs/react')),
    Head: () => null,
}));
vi.mock('@/components/Sidebar/AppSidebar', () => ({ AppSidebar: () => null }));
vi.mock('@/components/Header/AppPageHeader', () => ({ AppPageHeader: () => null }));

import Index from './Index';

const baseProps = {
    auth: { user: { id: 1, name: 'A', email: 'a@b.c' } },
    projects: {
        data: [
            { id: 'p1', name: 'My Cool Site', updated_at: new Date().toISOString(), is_starred: false, build_status: 'idle' },
        ],
        current_page: 1,
        last_page: 1,
    },
    counts: { all: 1, favorites: 0, trash: 0 },
    activeTab: 'all',
    filters: { search: '', sort: 'last-edited', visibility: null },
    baseDomain: 'example.com',
} as unknown as Parameters<typeof Index>[0];

describe('Projects/Index loading behaviour (#4)', () => {
    beforeEach(() => { mockIsLoading = false; });

    it('keeps the search input mounted while loading', () => {
        mockIsLoading = true;
        render(<Index {...baseProps} />);
        expect(screen.getByPlaceholderText('Search projects...')).toBeInTheDocument();
    });

    it('hides project cards while loading (grid shows skeleton instead)', () => {
        mockIsLoading = true;
        render(<Index {...baseProps} />);
        expect(screen.queryByText('My Cool Site')).not.toBeInTheDocument();
    });

    it('shows project cards when not loading', () => {
        mockIsLoading = false;
        render(<Index {...baseProps} />);
        expect(screen.getByText('My Cool Site')).toBeInTheDocument();
        expect(screen.getByPlaceholderText('Search projects...')).toBeInTheDocument();
    });
});