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

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

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

type Story = StoryObj<typeof Plugins>;

/** Default: no wire running — empty cache + stream errored. */
export const NoLiveData: Story = {};