import { mount } from '@vue/test-utils';
import { defineComponent, h } from 'vue';
import { describe, expect, it, vi } from 'vitest';
import type { SharedPageProps } from '@/types/inertia';

const pageProps = vi.hoisted(() => ({
    query: 'layout query',
    auth: {
        user: {
            id: 1,
            name: 'Layout User',
            email: 'layout@example.com',
            avatarUrl: null,
        },
        permissions: { admin: true },
    },
    flash: {
        id: null,
        success: null,
        error: null,
        warning: null,
        info: null,
        status: null,
        toasts: [],
    },
    navigation: {
        brand: 'kView INVESTOR',
        byline: 'by kView',
        version: null,
        logoUrl: '/logo.svg',
        homeUrl: '/',
        searchUrl: '/search',
        searchSuggestUrl: '/search/suggest',
        searchInertia: true,
        searchPresets: [],
        searchDefaultActions: [],
        logoutUrl: '/logout',
        settings: {
            dataUrl: '/settings',
        },
        account: {
            workspaceLabel: 'kView INVESTOR by kView',
            userSettingsUrl: '/settings?tab=user',
            dataStatusUrl: '/settings?tab=system',
            workspaceUrl: '/settings?tab=workspace',
            excelTokenUrl: '/api/protocol-token/create',
        },
        items: [],
    },
}));

vi.mock('@inertiajs/vue3', () => ({
    usePage: () => ({ props: pageProps as unknown as SharedPageProps }),
}));

import AuthenticatedLayout from '@/layouts/AuthenticatedLayout.vue';

const ShellStub = defineComponent({
    name: 'ApplicationShell',
    inheritAttrs: false,
    props: ['navigation', 'auth', 'flash', 'searchQuery', 'searchUsesInertia'],
    setup(props, { slots }) {
        return () => h('div', {
            'data-shell-stub': '',
            'data-user': props.auth.user?.email,
            'data-brand': props.navigation.brand,
            'data-search-query': props.searchQuery,
            'data-search-inertia': String(props.searchUsesInertia),
        }, slots.default?.());
    },
});

describe('AuthenticatedLayout', () => {
    it('adapts shared Inertia props into one shell around the page slot', () => {
        const wrapper = mount(AuthenticatedLayout, {
            slots: {
                default: '<section data-layout-page>Persistent page</section>',
            },
            global: {
                stubs: {
                    ApplicationShell: ShellStub,
                },
            },
        });

        const shell = wrapper.get('[data-shell-stub]');
        expect(shell.attributes('data-user')).toBe('layout@example.com');
        expect(shell.attributes('data-brand')).toBe('kView INVESTOR');
        expect(shell.attributes('data-search-query')).toBe('layout query');
        expect(shell.attributes('data-search-inertia')).toBe('true');
        expect(shell.get('[data-layout-page]').text()).toBe('Persistent page');
        expect(wrapper.findAll('[data-shell-stub]')).toHaveLength(1);
    });
});