import type { Meta, StoryObj } from "@storybook/vue3-vite";
import { createRouter, createMemoryHistory } from "vue-router";
import Hooks from "./Hooks.vue";

/**
 * Storybook for the Hooks page. The manifest fetch + telemetry stream fail
 * inside Storybook, so the page degrades to its empty / no-live-tap state —
 * exactly the surface we want to document.
 */
const router = createRouter({
  history: createMemoryHistory(),
  routes: [
    { path: "/hooks", name: "hooks", component: Hooks },
    { path: "/plugins", name: "plugins", component: { template: "<div/>" } },
  ],
});

const meta: Meta<typeof Hooks> = {
  title: "Pages/Hooks",
  component: Hooks,
  decorators: [
    (story) => ({
      components: { story },
      template: '<div class="h-screen bg-zinc-950 text-zinc-100"><story /></div>',
    }),
  ],
  parameters: {
    layout: "fullscreen",
    vueRouter: { router },
  },
  render: () => ({
    components: { Hooks },
    setup() {
      return {};
    },
    template: "<Hooks />",
  }),
};
export default meta;

type Story = StoryObj<typeof Hooks>;

/** Default: no wire running — empty registry + idle tap. */
export const NoLiveData: Story = {};