import { mount } from '@vue/test-utils';
import { defineComponent } from 'vue';
import { describe, expect, it, vi } from 'vitest';
import { KviewInfoCard } from '@kview/visualization/vue';

vi.mock('@inertiajs/vue3', async (importOriginal) => {
    const actual = await importOriginal<typeof import('@inertiajs/vue3')>();

    return {
        ...actual,
        Head: defineComponent({
            name: 'InertiaHeadStub',
            props: { title: String },
            template: '<span data-head />',
        }),
    };
});

import HomePage from '@/Pages/Home/Index.vue';
import ActivityFeed from '@/components/activity/ActivityFeed.vue';
import type { HomePageProps } from '@/types/home';

const pageProps: HomePageProps = {
    targetCurrency: 'EUR',
    metrics: [
        { label: '# Investors', value: '12', icon: 'users', meta: 'Active LP records' },
        { label: '# Investments', value: '30', icon: 'investment', meta: 'Investor-fund positions' },
        { label: 'Amount invested', value: '€1.2M', icon: 'capital', meta: 'Paid-in capital' },
        { label: 'NAV under management', value: '€1.5M', icon: 'wallet', meta: 'Latest reported NAV' },
    ],
    activity: {
        actionHref: '/activity',
        items: [
            {
                id: 'added:gp:1',
                title: 'Northstar Partners',
                description: 'General Partner',
                icon: 'building',
                tone: 'positive',
                status: 'added',
                statusLabel: 'Ajouté',
                href: '/gps/1',
                linkProps: { inertia: true },
                time: {
                    label: 'now',
                    datetime: '2035-01-15T12:00:00+01:00',
                },
            },
        ],
        filters: [
            {
                key: 'all',
                label: 'Tout',
                count: 1,
                active: true,
                href: '/activity?activity=all',
                linkProps: { inertia: true },
            },
        ],
    },
};

describe('Home Inertia page', () => {
    it('composes the metric grid and activity preview with the shared components', () => {
        const wrapper = mount(HomePage, {
            props: pageProps,
        });
        const cards = wrapper.findAllComponents(KviewInfoCard);
        const feed = wrapper.getComponent(ActivityFeed);

        expect(wrapper.get('h1').text()).toBe('Home');
        expect(wrapper.get('.home-page__currency-badge').text()).toBe('Amounts in EUR');

        expect(cards).toHaveLength(4);
        expect(cards.map((card) => card.props('label'))).toEqual([
            '# Investors',
            '# Investments',
            'Amount invested',
            'NAV under management',
        ]);
        expect(cards[0].props('variant')).toBe('metric');
        expect(cards[2].props('value')).toBe('€1.2M');

        expect(feed.props()).toMatchObject({
            title: 'Activité récente',
            subtitle: 'Derniers items ajoutés, modifiés ou consultés',
            actionLabel: 'Tout voir',
            actionHref: '/activity',
            items: pageProps.activity.items,
            filters: pageProps.activity.filters,
        });
    });
});