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

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: { id: '1', name: 'Test User', email: 'test@example.com' },
            },
            flash: {},
            errors: {},
            ziggy: {
                url: 'http://localhost',
                port: null,
                defaults: [],
                routes: {},
            },
        },
    })),
    useForm: vi.fn((defaults: any) => ({
        data: defaults ?? {},
        setData: vi.fn(),
        post: vi.fn(),
        patch: vi.fn(),
        processing: false,
        errors: {},
        reset: vi.fn(),
        transform: vi.fn().mockReturnThis(),
    })),
}));

vi.mock('@/Layouts/ClientLayout', () => ({
    default: ({ children }: any) => (
        <div data-testid="client-layout">{children}</div>
    ),
}));

vi.mock('../components/SetupStepper', () => ({
    default: ({ current }: any) => (
        <div data-testid="setup-stepper" data-step={current} />
    ),
}));

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

const newTenantProps = { tenant: null, tenantId: null };
const editTenantProps = {
    tenant: { name: 'Kilimo SACCO', country: 'TZ', org_type: 'sacco' },
    tenantId: 'tenant-abc',
};

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

    it('renders inside ClientLayout', () => {
        render(<Organisation {...(newTenantProps as any)} />);
        expect(screen.getByTestId('client-layout')).toBeInTheDocument();
    });

    it('renders the SetupStepper on step 1 for new tenant', () => {
        render(<Organisation {...(newTenantProps as any)} />);
        const stepper = screen.getByTestId('setup-stepper');
        expect(stepper).toBeInTheDocument();
        expect(stepper).toHaveAttribute('data-step', '1');
    });

    it('does not render the stepper in edit mode', () => {
        render(<Organisation {...(editTenantProps as any)} />);
        expect(screen.queryByTestId('setup-stepper')).not.toBeInTheDocument();
    });

    it('renders "Tell us about your organisation" heading for new tenant', () => {
        render(<Organisation {...(newTenantProps as any)} />);
        expect(
            screen.getByText('Tell us about your organisation'),
        ).toBeInTheDocument();
    });

    it('renders "Edit organisation details" heading in edit mode', () => {
        render(<Organisation {...(editTenantProps as any)} />);
        expect(
            screen.getByText('Edit organisation details'),
        ).toBeInTheDocument();
    });

    it('renders the Organisation name text input', () => {
        render(<Organisation {...(newTenantProps as any)} />);
        expect(
            screen.getByPlaceholderText(/kilimo sacco/i),
        ).toBeInTheDocument();
    });

    it('renders the country selector', () => {
        render(<Organisation {...(newTenantProps as any)} />);
        expect(screen.getByRole('combobox')).toBeInTheDocument();
    });

    it('renders organisation type buttons', () => {
        render(<Organisation {...(newTenantProps as any)} />);
        expect(
            screen.getByRole('button', { name: /sacco/i }),
        ).toBeInTheDocument();
        expect(
            screen.getByRole('button', { name: /microfinance/i }),
        ).toBeInTheDocument();
        expect(
            screen.getByRole('button', { name: /bank/i }),
        ).toBeInTheDocument();
    });

    it('renders "Continue" submit button for new tenant', () => {
        render(<Organisation {...(newTenantProps as any)} />);
        expect(
            screen.getByRole('button', { name: /continue/i }),
        ).toBeInTheDocument();
    });

    it('renders "Save changes" submit button in edit mode', () => {
        render(<Organisation {...(editTenantProps as any)} />);
        expect(
            screen.getByRole('button', { name: /save changes/i }),
        ).toBeInTheDocument();
    });
});