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

/**
 * Storybook for the Home discovery dashboard. The `/__nwire/*` fetches fail
 * inside Storybook, so the discovered-projects grid degrades to its empty
 * state — exactly the surface we want to document.
 */
const router = createRouter({
  history: createMemoryHistory(),
  routes: [
    { path: "/", name: "home", component: Home },
    { path: "/trace", name: "trace", component: { template: "<div/>" } },
    { path: "/streams", name: "streams", component: { template: "<div/>" } },
    { path: "/projects/:slug/:page", name: "page", component: { template: "<div/>" } },
  ],
});

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

type Story = StoryObj<typeof Home>;

/** Default: nothing reachable — the grid degrades to its empty state. */
export const NoProjects: Story = {};