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

// ── Mocks ─────────────────────────────────────────────────────────────────────

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: { adminRole: 'super_admin', adminPermissions: [] },
            flash: {},
            errors: {},
        },
    })),
}));

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

vi.mock('@/lib/api', () => ({
    api: {
        get: vi.fn(),
        post: vi.fn().mockResolvedValue({}),
        put: vi.fn().mockResolvedValue({}),
        patch: vi.fn(),
        delete: vi.fn(),
    },
}));

vi.mock('sonner', () => ({ toast: { success: vi.fn(), error: vi.fn() } }));

// ── Fixtures ──────────────────────────────────────────────────────────────────

const kesCurrency = {
    id: '019efe4a-9d05-7265-8fa2-21b7c3d10801',
    code: 'KES',
    name: 'Kenyan Shilling',
    symbol: 'KSh',
    rate: 129,
    decimals: 0,
    is_base: false,
    is_enabled: true,
    sort_order: 1,
};

const baseCurrency = {
    id: '019efe4a-9d05-7265-8fa2-21b7c3d10800',
    code: 'USD',
    name: 'US Dollar',
    symbol: '$',
    rate: 1,
    decimals: 2,
    is_base: true,
    is_enabled: true,
    sort_order: 0,
};

// ── Tests ─────────────────────────────────────────────────────────────────────

describe('Currencies/Form', () => {
    it('renders New Currency heading in create mode', () => {
        render(<CurrenciesForm />);
        expect(
            screen.getByRole('heading', { name: /New Currency/i }),
        ).toBeInTheDocument();
    });

    it('renders a Create Currency submit button in create mode', () => {
        render(<CurrenciesForm />);
        expect(
            screen.getByRole('button', { name: /Create Currency/i }),
        ).toBeInTheDocument();
    });

    it('renders Edit Currency heading in edit mode', () => {
        render(<CurrenciesForm currency={kesCurrency} />);
        expect(
            screen.getByRole('heading', { name: /Edit Currency/i }),
        ).toBeInTheDocument();
    });

    it('pre-fills fields when editing', () => {
        render(<CurrenciesForm currency={kesCurrency} />);
        expect(screen.getByDisplayValue('KES')).toBeInTheDocument();
        expect(screen.getByDisplayValue('Kenyan Shilling')).toBeInTheDocument();
        expect(screen.getByDisplayValue('KSh')).toBeInTheDocument();
        expect(screen.getByDisplayValue('129')).toBeInTheDocument();
    });

    it('allows editing the rate for a non-base currency', () => {
        render(<CurrenciesForm currency={kesCurrency} />);
        expect(screen.getByDisplayValue('129')).not.toBeDisabled();
    });

    it('locks the code and rate fields for the base currency', () => {
        render(<CurrenciesForm currency={baseCurrency} />);
        expect(screen.getByDisplayValue('USD')).toBeDisabled();
        expect(screen.getByDisplayValue('1')).toBeDisabled();
    });

    it('explains that the base currency is always enabled', () => {
        render(<CurrenciesForm currency={baseCurrency} />);
        expect(
            screen.getByText(/base currency is always enabled/i),
        ).toBeInTheDocument();
    });

    it('renders an Update Currency submit button in edit mode', () => {
        render(<CurrenciesForm currency={kesCurrency} />);
        expect(
            screen.getByRole('button', { name: /Update Currency/i }),
        ).toBeInTheDocument();
    });
});