/* eslint-disable @typescript-eslint/no-explicit-any */
import { render, screen } from '@testing-library/react';
import { describe, expect, it, vi } from 'vitest';
import AppShowComponent from '../Show';
const AppShow = AppShowComponent as any;

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(() => ({
        data: {},
        setData: vi.fn(),
        post: vi.fn(),
        processing: false,
        errors: {},
        reset: vi.fn(),
    })),
}));

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

vi.mock('../components/AppNav', () => ({
    default: () => <nav data-testid="app-nav" />,
}));

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

const baseApp = {
    id: 'tenant-abc',
    name: 'Kilimo SACCO',
    orgType: 'sacco',
    country: 'Tanzania',
    subdomain: 'kilimo',
    domain: 'kilimo.upepofinance.com',
    portalUrl: 'https://kilimo.upepofinance.com',
    plan: 'Professional',
    planStatus: 'active',
    billingCycle: 'monthly',
    trialEndsAt: null,
    currentPeriodEnd: '2026-07-15',
    setupComplete: true,
    nextStep: null,
    limits: {
        maxBranches: 10,
        maxStaffUsers: 30,
        maxActiveBorrowers: 5000,
        maxActiveLoans: 3000,
        maxStorageGb: 20,
    },
};

describe('App Show page', () => {
    it('renders inside ClientLayout', () => {
        render(<AppShow app={baseApp as any} />);
        expect(screen.getByTestId('client-layout')).toBeInTheDocument();
    });

    it('renders AppNav', () => {
        render(<AppShow app={baseApp as any} />);
        expect(screen.getByTestId('app-nav')).toBeInTheDocument();
    });

    it('renders the app organisation name', () => {
        render(<AppShow app={baseApp as any} />);
        expect(screen.getByText('Kilimo SACCO')).toBeInTheDocument();
    });

    it('renders the plan name in the subscription card', () => {
        render(<AppShow app={baseApp as any} />);
        expect(screen.getByText('Professional')).toBeInTheDocument();
    });

    it('renders the plan status badge', () => {
        render(<AppShow app={baseApp as any} />);
        expect(screen.getByText('active')).toBeInTheDocument();
    });

    it('renders plan limits section', () => {
        render(<AppShow app={baseApp as any} />);
        expect(screen.getByText('Plan limits')).toBeInTheDocument();
        expect(screen.getByText('Branches')).toBeInTheDocument();
    });

    it('shows setup incomplete banner when setupComplete is false', () => {
        const app = {
            ...baseApp,
            setupComplete: false,
            nextStep: '/setup/subdomain',
        };
        render(<AppShow app={app as any} />);
        expect(screen.getByText('Setup not complete')).toBeInTheDocument();
    });

    it('shows trial banner when plan status is trialing', () => {
        const futureDate = new Date(Date.now() + 10 * 86_400_000).toISOString();
        const app = {
            ...baseApp,
            planStatus: 'trialing',
            trialEndsAt: futureDate,
        };
        render(<AppShow app={app as any} />);
        expect(screen.getByText(/remaining on your/i)).toBeInTheDocument();
    });

    it('renders the country in app details', () => {
        render(<AppShow app={baseApp as any} />);
        expect(screen.getByText('Tanzania')).toBeInTheDocument();
    });

    it('renders "Manage billing" link', () => {
        render(<AppShow app={baseApp as any} />);
        expect(screen.getByText('Manage billing →')).toBeInTheDocument();
    });
});