import type { Preview } from '@storybook/sveltekit';
import { initialize, mswLoader } from 'msw-storybook-addon';
import WithTranslations from './decorators/WithTranslations.svelte';
// Design-System-Styles: Fonts, Tailwind, Farbtokens (wald/erde/…). Zieht die
// echte app.css des Frontends → Stories sehen aus wie live.
import '../src/app.css';

// MSW starten. `onUnhandledRequest: 'bypass'` → Requests ohne Handler laufen
// normal durch (z.B. der Vite-Proxy für /cms-images). Nur explizit gemockte
// Endpoints werden abgefangen → Blocks mit fetch entwickeln sich deterministisch
// offline, per Story via `parameters.msw.handlers`.
initialize({ onUnhandledRequest: 'bypass' });

// Default-Mock für den SvelteKit-page-Store/-State ($app/stores + $app/state).
// Ohne das crasht jede Komponente, die $page.url liest (Header, PostActions, …).
// Einzelne Stories können via parameters.sveltekit_experimental überschreiben.
const mockPage = {
  url: new URL('http://localhost:6006/'),
  params: {},
  route: { id: null },
  status: 200,
  error: null,
  data: {},
  form: null,
  state: {},
};

const preview: Preview = {
  loaders: [mswLoader],
  // Alle Stories in den Translation-Context wrappen → echte Texte statt Keys.
  decorators: [() => WithTranslations],
  parameters: {
    sveltekit_experimental: {
      stores: { page: mockPage },
      state: { page: mockPage },
    },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
    // Frontend rendert auf hellem Grund; Storybook-Canvas dazu passend.
    backgrounds: {
      default: 'weiss',
      values: [
        { name: 'weiss', value: '#ffffff' },
        { name: 'stein', value: '#f5f5f4' },
      ],
    },
  },
};

export default preview;