import type { StorybookConfig } from '@storybook/svelte-vite';
import {
    dirname,
    resolve,
} from 'path';
import { fileURLToPath } from 'url';
import {
    loadConfigFromFile,
    mergeConfig,
} from 'vite';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const config: StorybookConfig = {
    'stories': [
        '../src/**/*.mdx',
        '../src/**/*.stories.@(js|ts|svelte)',
    ],
    'addons': [
        {
            name: '@storybook/addon-svelte-csf',
            options: {
                // Use modern template syntax for better performance
                legacyTemplate: false,
            },
        },
        '@chromatic-com/storybook',
        '@storybook/addon-vitest',
        '@storybook/addon-a11y',
        '@storybook/addon-docs',
    ],
    'framework': '@storybook/svelte-vite',
    async viteFinal(config) {
        // This attempts to find your actual vite.config.ts
        const { config: userConfig } = await loadConfigFromFile(
            { command: 'serve', mode: 'development' },
            resolve(__dirname, '../vite.config.ts'),
        ) || {};

        return mergeConfig(config, {
            // Merge only the resolve/alias parts if you want to be safe
            resolve: userConfig?.resolve || {},
        });
    },
};
export default config;