import type { StorybookConfig } from "@storybook/react-vite"
import { readFileSync } from "node:fs"

const config: StorybookConfig = {
  stories: ["../src/**/*.stories.@(ts|tsx)"],
  addons: [],
  // In dev, Vite serves both raw /themes JSON and JSON module imports (?import).
  // Storybook's static middleware would intercept the imports with application/json.
  staticDirs: (_, { configType }) => [
    { from: "../public/fonts", to: "/fonts" },
    ...(configType === "PRODUCTION" ? [{ from: "../themes", to: "/themes" }] : []),
  ],
  managerHead: (head) => `${head}<link rel="icon" href="data:," /><style id="hm-manager-style">${readFileSync(new URL("./manager.css", import.meta.url), "utf8")}</style>`,
  // changeDetection off: no "new and modified stories" filter or status badges in the sidebar.
  features: { sidebarOnboardingChecklist: false, changeDetection: false },
  // Verification Stories (the same sections as a component's representative Story) stay out of the sidebar by default.
  // They keep their Story IDs and stay reachable by direct URL and the sidebar tag filter.
  tags: { verification: { defaultFilterSelection: "exclude" }, internal: { defaultFilterSelection: "exclude" } },
  // Storybook replaces vite.config's `server`, so watcher excludes go here.
  // _local/ (gitignored work copies, ~20k files) would otherwise make the Vite watcher stall the dev server.
  viteFinal: (config) => {
    config.server ??= {}
    config.server.watch = { ...config.server.watch, ignored: ["**/_local/**", "**/storybook-static/**"] }
    return config
  },
  framework: "@storybook/react-vite",
}

export default config