import assert from 'node:assert/strict';
import process from 'node:process';
import { fileURLToPath } from 'node:url';
import vue from '@vitejs/plugin-vue';
import tailwind from '@tailwindcss/vite';
import { createServer } from 'vite';
import { createSSRApp, h } from 'vue';
import { renderToString } from 'vue/server-renderer';
import { createInertiaApp } from '@inertiajs/vue3';

const serve = process.argv.includes('--serve');
const server = await createServer({
    configFile: false,
    cacheDir: 'node_modules/.vite/project-templates-fixture',
    plugins: [vue(), ...(serve ? [tailwind()] : [])],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('../../resources/js', import.meta.url)),
        },
    },
    server: serve
        ? { host: '127.0.0.1', port: 4191, strictPort: true, hmr: false }
        : { middlewareMode: true, hmr: false, watch: null },
    appType: 'custom',
});
const project = { id: 1, name: 'Core platform', key: 'CORE' };
const areas = [
    'project_settings',
    'board_columns',
    'ticket_statuses',
    'status_transitions',
    'ticket_types',
    'ticket_priorities',
    'ticket_fields',
    'ticket_link_types',
    'repository_connections',
    'notification_actions',
];
const template = {
    id: 2,
    name: 'Foundation',
    slug: 'foundation-template',
    is_published: true,
    source_project: project,
    copy_areas: ['project_settings', 'ticket_types'],
    linked_project_count: 2,
};
const initial = () => ({
    project,
    copyAreaOptions: areas.map((value) => ({
        value,
        label: value,
        description: value,
    })),
    template: structuredClone(template),
    templates: [
        structuredClone(template),
        { ...template, id: 3, name: 'Internal baseline', is_published: false },
    ],
});
function makePage(component = 'Index', extra = {}, url = '/project-templates') {
    return {
        component,
        url,
        version: null,
        clearHistory: false,
        encryptHistory: false,
        props: {
            name: 'KanbanGit',
            errors: {},
            sidebarOpen: true,
            appearance: 'system',
            auth: {
                user: {
                    id: 1,
                    name: 'Alex Morgan',
                    email: 'alex@example.test',
                    avatar: null,
                    avatar_color: '#10B981',
                    avatar_is_generated: true,
                },
                permissions: {
                    globalAdmin: false,
                    projectCreate: true,
                    canManageTeams: false,
                },
            },
            navigation: { project: null },
            ...initial(),
            ...extra,
        },
    };
}
if (serve) {
    let data = initial();
    server.middlewares.use(async (request, response, next) => {
        if (!request.url.startsWith('/project')) {
            return next();
        }
        const url = new URL(request.url, 'http://localhost');
        let component = url.pathname.endsWith('/edit')
            ? 'Edit'
            : url.pathname.includes('/templates/create')
              ? 'Create'
              : url.pathname === '/project-templates'
                ? 'Index'
                : 'Destination';
        if (url.searchParams.has('reset')) {
            data = initial();
        }
        if (url.searchParams.has('unlinked')) {
            data.template.linked_project_count = 0;
        }
        if (url.searchParams.has('missing')) {
            data.template.source_project = null;
        }
        if (url.searchParams.has('empty')) {
            data.templates = [];
        }
        let errors = {};
        if (request.method !== 'GET') {
            let body = '';
            for await (const chunk of request) {
                body += chunk;
            }
            const submitted = JSON.parse(body || '{}');
            const result =
                request.headers.cookie?.match(
                    /template_test_result=(\w+)/,
                )?.[1] ?? 'success';
            if (result === 'server') {
                response.statusCode = 500;
                response.end('Unavailable');
                return;
            }
            if (result === 'validation') {
                component =
                    request.method === 'POST'
                        ? 'Create'
                        : request.method === 'PATCH'
                          ? 'Edit'
                          : 'Index';
                errors = {
                    name: 'This template name is unavailable.',
                    'copy_areas.0': 'Choose a valid configuration group.',
                };
            } else {
                if (request.method === 'DELETE') {
                    data.templates = data.templates.filter(
                        (item) => item.id !== 2,
                    );
                } else {
                    data.templates = [{ ...data.template, ...submitted }];
                }
                component = 'Index';
            }
        }
        const page = makePage(
            component,
            {
                ...data,
                errors,
                status:
                    request.method !== 'GET' && !Object.keys(errors).length
                        ? 'Saved'
                        : null,
            },
            component === 'Index' ? '/project-templates' : request.url,
        );
        response.setHeader('Vary', 'X-Inertia');
        if (request.headers['x-inertia']) {
            response.setHeader('X-Inertia', 'true');
            response.setHeader('Content-Type', 'application/json');
            response.end(JSON.stringify(page));
            return;
        }
        const escaped = JSON.stringify(page)
            .replaceAll('&', '&')
            .replaceAll('"', '"')
            .replaceAll('<', '&lt;');
        response.setHeader('Content-Type', 'text/html');
        response.end(
            await server.transformIndexHtml(
                request.url,
                '<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"></head><body><div id="app" data-page="' +
                    escaped +
                    '"></div><script type="module" src="/tests/Fixtures/project-templates-preview.mjs"></script></body></html>',
            ),
        );
    });
    await server.listen();
    console.log('Project template fixture ready.');
} else {
    try {
        const { createLocalization } = await server.ssrLoadModule(
            '/resources/js/lib/localization.ts',
        );
        const { createAppearance } = await server.ssrLoadModule(
            '/resources/js/composables/useAppearance.ts',
        );
        const { en } = await server.ssrLoadModule(
            '/resources/js/locales/en.ts',
        );
        const render = async (
            name,
            extra = {},
            locale = createLocalization(),
        ) => {
            const component = (
                await server.ssrLoadModule(
                    '/resources/js/pages/project-templates/' + name + '.vue',
                )
            ).default;
            return (
                await createInertiaApp({
                    page: makePage(name, extra),
                    resolve: () => component,
                    render: renderToString,
                    setup: ({ App, props, plugin }) =>
                        createSSRApp({ render: () => h(App, props) })
                            .use(plugin)
                            .use(locale)
                            .use(createAppearance()),
                })
            ).body.replace(/ data-page="[^"]*"/, '');
        };
        const list = await render('Index');
        assert.match(list, /Foundation/);
        assert.doesNotMatch(list, /Internal baseline/);
        assert.match(list, /2 linked projects/);
        assert.match(list, /Project settings/);
        assert.match(list, /href="\/projects\/create\?template=2"/);
        assert.match(
            await render('Index', { templates: [] }),
            /No published templates yet/,
        );
        const create = await render('Create');
        assert.match(create, /value="Core platform template"/);
        assert.equal((create.match(/type="checkbox"/g) ?? []).length, 10);
        assert.doesNotMatch(
            create.match(/<input[^>]*id="slug"[^>]*>/)?.[0] ?? '',
            / disabled(?:[ =>])/,
        );
        const edit = await render('Edit');
        assert.match(
            edit.match(/<input[^>]*id="slug"[^>]*>/)?.[0] ?? '',
            / disabled(?:[ =>])/,
        );
        assert.match(edit, /Linked projects will be affected/);
        assert.match(
            edit.match(/<button[^>]*type="submit"[^>]*>/)?.[0] ?? '',
            / disabled(?:[ =>])/,
        );
        const unlinked = await render('Edit', {
            template: { ...template, linked_project_count: 0 },
        });
        assert.doesNotMatch(unlinked, /id="confirm-linked"/);
        assert.doesNotMatch(
            unlinked.match(/<button[^>]*type="submit"[^>]*>/)?.[0] ?? '',
            / disabled(?:[ =>])/,
        );
        assert.match(
            await render('Edit', {
                template: { ...template, source_project: null },
            }),
            /This template cannot be refreshed/,
        );
        assert.match(
            await render(
                'Index',
                {},
                createLocalization(
                    { locale: 'de' },
                    {
                        de: {
                            ...en,
                            'navigation.templates': 'Projektvorlagen',
                        },
                    },
                ),
            ),
            /Projektvorlagen/,
        );
        console.log('Project template checks passed.');
    } finally {
        await server.close();
    }
}