/* eslint-disable @typescript-eslint/no-explicit-any */
import { render, screen } from '@testing-library/react';
import { beforeEach, describe, expect, it, vi } from 'vitest';
import GetStarted from '../GetStarted';

vi.mock('@inertiajs/react', () => ({
    Head: ({ title }: { title: string }) => <title>{title}</title>,
    Link: ({ href, children, ...rest }: any) => (
        <a href={href} {...rest}>
            {children}
        </a>
    ),
    router: {
        get: vi.fn(),
        post: vi.fn(),
        put: vi.fn(),
        patch: vi.fn(),
        delete: vi.fn(),
        visit: vi.fn(),
    },
    usePage: vi.fn(() => ({
        props: {
            auth: { user: null },
            flash: {},
            errors: {},
            ziggy: {
                url: 'http://localhost',
                port: null,
                defaults: [],
                routes: {},
            },
        },
    })),
    useForm: vi.fn((defaults: any) => ({
        data: defaults ?? {},
        setData: vi.fn(),
        post: vi.fn(),
        put: vi.fn(),
        patch: vi.fn(),
        delete: vi.fn(),
        processing: false,
        errors: {},
        reset: vi.fn(),
        transform: vi.fn().mockReturnThis(),
    })),
}));

vi.mock('@/components/Field', () => ({
    default: ({
        label,
        id,
        name,
        type = 'text',
        value,
        onChange,
        error,
    }: any) => (
        <div>
            <label htmlFor={id}>{label}</label>
            <input
                id={id}
                name={name}
                type={type}
                value={value}
                onChange={onChange}
            />
            {error && <span data-testid={`error-${name}`}>{error}</span>}
        </div>
    ),
}));

vi.mock('@/components/SocialAuthButtons', () => ({
    default: ({ mode }: any) => (
        <div data-testid={`social-auth-${mode}`}>Social Auth</div>
    ),
}));

vi.mock('@/lib/utils', () => ({
    cn: (...args: any[]) => args.filter(Boolean).join(' '),
}));

vi.mock('framer-motion', () => ({
    motion: {
        div: ({ children, ...rest }: any) => <div {...rest}>{children}</div>,
        li: ({ children, ...rest }: any) => <li {...rest}>{children}</li>,
    },
    AnimatePresence: ({ children }: any) => <>{children}</>,
}));

vi.stubGlobal('route', (name: string) => `/${name}`);

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

    it('renders the step progress indicator', () => {
        render(<GetStarted />);
        expect(
            screen.getByRole('list', { name: /registration steps/i }),
        ).toBeInTheDocument();
    });

    it('renders "Step 1 of 6: Account Details" label', () => {
        render(<GetStarted />);
        expect(screen.getByText(/step 1 of 6/i)).toBeInTheDocument();
    });

    it('renders "Create your account" form heading', () => {
        render(<GetStarted />);
        expect(screen.getByText('Create your account')).toBeInTheDocument();
    });

    it('renders all registration fields', () => {
        render(<GetStarted />);
        expect(screen.getByLabelText('Full Name')).toBeInTheDocument();
        expect(screen.getByLabelText('Work Email')).toBeInTheDocument();
        expect(screen.getByLabelText('Password')).toBeInTheDocument();
        expect(screen.getByLabelText('Confirm Password')).toBeInTheDocument();
    });

    it('renders the Continue submit button', () => {
        render(<GetStarted />);
        expect(
            screen.getByRole('button', { name: /continue/i }),
        ).toBeInTheDocument();
    });

    it('renders "30-Day Free Trial" badge on left panel', () => {
        render(<GetStarted />);
        expect(screen.getByText('30-Day Free Trial')).toBeInTheDocument();
    });

    it('renders benefits list', () => {
        render(<GetStarted />);
        expect(
            screen.getByText(/full professional plan access/i),
        ).toBeInTheDocument();
    });

    it('renders "Already have an account? Sign in" link', () => {
        render(<GetStarted />);
        expect(screen.getByText('Sign in')).toBeInTheDocument();
    });

    it('renders a preview of the remaining signup steps', () => {
        render(<GetStarted />);
        expect(
            screen.getByText(/organisation.*subdomain.*plan.*payment/i),
        ).toBeInTheDocument();
    });

    it('renders the social auth options for registration', () => {
        render(<GetStarted />);
        expect(screen.getByTestId('social-auth-register')).toBeInTheDocument();
    });
});