import type { StorybookConfig } from '@storybook/sveltekit';
import tailwindcss from '@tailwindcss/vite';

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|ts|svelte)'],
  addons: [
    '@storybook/addon-svelte-csf',
    '@storybook/addon-a11y',
    '@storybook/addon-docs',
  ],
  framework: '@storybook/sveltekit',
  // MSW-Service-Worker liegt in static/ (via `npx msw init static/`). Storybook
  // muss static/ ausliefern, damit /mockServiceWorker.js erreichbar ist.
  staticDirs: ['../static'],
  // Tailwind v4 läuft als Vite-Plugin. Das sveltekit-Framework bringt nur die
  // Svelte/SvelteKit-Integration mit ($app/$env/$lib-Mocks), nicht Tailwind —
  // darum hier explizit dazuhängen, sonst greifen keine Utility-Klassen/Tokens.
  viteFinal: async (viteConfig) => {
    viteConfig.plugins = viteConfig.plugins ?? [];
    viteConfig.plugins.push(tailwindcss());

    // Same-origin-Routen, die im echten Frontend SvelteKit-Server-Endpoints
    // sind (in Storybook nicht existieren), auf die Live-Site proxien. Damit
    // rendern RustyImage-Bilder (/cms-images, /cms-files) und die Live-Daten-
    // Blocks (/api/strommix, /api/stellungnahme) mit echten Daten — ohne
    // Fixtures. Deterministische Offline-Mocks stattdessen via MSW (siehe
    // .storybook/README oder Kommentar unten).
    const PROXY_TARGET = 'https://windwiderstand.de';
    viteConfig.server = viteConfig.server ?? {};
    viteConfig.server.proxy = {
      ...(viteConfig.server.proxy ?? {}),
      '/cms-images': { target: PROXY_TARGET, changeOrigin: true },
      '/cms-files': { target: PROXY_TARGET, changeOrigin: true },
      '/api/strommix': { target: PROXY_TARGET, changeOrigin: true },
      '/api/stellungnahme': { target: PROXY_TARGET, changeOrigin: true },
    };
    return viteConfig;
  },
};
export default config;