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

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: {},
            currency: {
                current: 'USD',
                base: 'USD',
                available: [
                    {
                        code: 'USD',
                        name: 'US Dollar',
                        symbol: '$',
                        rate: 1,
                        decimals: 2,
                    },
                    {
                        code: 'KES',
                        name: 'Kenyan Shilling',
                        symbol: 'KSh',
                        rate: 129,
                        decimals: 0,
                    },
                ],
            },
            ziggy: {
                url: 'http://localhost',
                port: null,
                defaults: [],
                routes: {},
            },
        },
    })),
    useForm: vi.fn(() => ({
        data: {},
        setData: vi.fn(),
        post: vi.fn(),
        processing: false,
        errors: {},
        reset: vi.fn(),
    })),
}));

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

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

vi.mock('@/components/ui/accordion', () => ({
    Accordion: ({ children }: any) => (
        <div data-testid="accordion">{children}</div>
    ),
    AccordionItem: ({ children }: any) => <div>{children}</div>,
    AccordionTrigger: ({ children }: any) => (
        <button type="button">{children}</button>
    ),
    AccordionContent: ({ children }: any) => <div>{children}</div>,
}));

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

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

const plans = [
    {
        slug: 'trial',
        name: 'Free Trial',
        description: 'Explore everything with no commitment.',
        price_monthly: 0,
        price_yearly: 0,
        trial_days: 30,
    },
    {
        slug: 'starter',
        name: 'Starter',
        description: 'For small SACCOs and community lenders.',
        price_monthly: 49,
        price_yearly: 490,
        trial_days: 0,
    },
    {
        slug: 'professional',
        name: 'Professional',
        description: 'For growing MFIs.',
        price_monthly: 149,
        price_yearly: 1490,
        trial_days: 0,
    },
    {
        slug: 'enterprise',
        name: 'Enterprise',
        description: 'For national MFIs and regulated lenders.',
        price_monthly: 399,
        price_yearly: 3990,
        trial_days: 0,
    },
];

describe('Pricing page', () => {
    it('renders inside PlatformLayout', () => {
        render(<Pricing plans={plans} />);
        expect(screen.getByTestId('platform-layout')).toBeInTheDocument();
    });

    it('renders "Simple, transparent pricing" heading', () => {
        render(<Pricing plans={plans} />);
        expect(screen.getByText(/simple/i)).toBeInTheDocument();
        expect(screen.getByText(/transparent pricing/i)).toBeInTheDocument();
    });

    it('renders all four plan tiers', () => {
        render(<Pricing plans={plans} />);
        expect(screen.getAllByText('Free Trial').length).toBeGreaterThan(0);
        expect(screen.getAllByText('Starter').length).toBeGreaterThan(0);
        expect(screen.getAllByText('Professional').length).toBeGreaterThan(0);
        expect(screen.getAllByText('Enterprise').length).toBeGreaterThan(0);
    });

    it('renders monthly prices from the plans prop', () => {
        render(<Pricing plans={plans} />);
        expect(screen.getByText('$49')).toBeInTheDocument();
        expect(screen.getByText('$149')).toBeInTheDocument();
    });

    it('shows trial duration for the free trial plan', () => {
        render(<Pricing plans={plans} />);
        expect(screen.getByText('30 days free')).toBeInTheDocument();
    });

    it('shows "Custom" pricing for the enterprise plan', () => {
        render(<Pricing plans={plans} />);
        expect(screen.getAllByText('Custom').length).toBeGreaterThan(0);
        expect(screen.getByText('talk to sales')).toBeInTheDocument();
    });

    it('shows Monthly billing toggle active by default', () => {
        render(<Pricing plans={plans} />);
        const monthlyBtn = screen.getByRole('button', { name: /monthly/i });
        expect(monthlyBtn).toBeInTheDocument();
    });

    it('switches to yearly pricing when Yearly button is clicked', () => {
        render(<Pricing plans={plans} />);
        const yearlyBtn = screen.getByRole('button', { name: /yearly/i });
        fireEvent.click(yearlyBtn);
        expect(screen.getByText('$490')).toBeInTheDocument();
        expect(screen.getAllByText('/year').length).toBeGreaterThan(0);
    });

    it('renders the FAQ section', () => {
        render(<Pricing plans={plans} />);
        expect(screen.getByTestId('accordion')).toBeInTheDocument();
        expect(
            screen.getByText('Can I switch plans at any time?'),
        ).toBeInTheDocument();
    });

    it('renders "Start Free Trial" CTA', () => {
        render(<Pricing plans={plans} />);
        const links = screen.getAllByText(/start free trial/i);
        expect(links.length).toBeGreaterThan(0);
    });

    it('renders multi-year discount strip', () => {
        render(<Pricing plans={plans} />);
        expect(
            screen.getByText('Multi-year discounts available'),
        ).toBeInTheDocument();
        expect(screen.getByText('1 Year')).toBeInTheDocument();
    });

    it('renders feature comparison table headers', () => {
        render(<Pricing plans={plans} />);
        expect(screen.getByText('Everything included')).toBeInTheDocument();
    });

    it('renders "Most Popular" badge on Professional plan', () => {
        render(<Pricing plans={plans} />);
        expect(screen.getByText('Most Popular')).toBeInTheDocument();
    });

    it('renders the comparison table even with no plans from the server', () => {
        render(<Pricing plans={[]} />);
        expect(screen.getByText('Everything included')).toBeInTheDocument();
        expect(screen.getAllByText('Professional').length).toBeGreaterThan(0);
    });
});