import type { Meta, StoryObj } from '@storybook/vue3-vite'
import { useRouter } from 'vue-router'
import SidebarNav from '@/components-v2/layout/SidebarNav.vue'

/**
 * SidebarNav now reads APP_NAVIGATION from `@/config/navigation` directly
 * (AD-2.5-B1 / Plan 2.5 P4). The previous `groups` prop is gone — stories
 * only vary the `collapsed` axis and the active route. vue-router is
 * installed app-wide in preview.ts; the WithActiveItem story pushes the
 * `v2-dashboard` route so the Dashboard item renders in its active state.
 */
const meta: Meta<typeof SidebarNav> = {
  title: 'v2 Shell/SidebarNav',
  component: SidebarNav,
  tags: ['autodocs'],
  argTypes: {
    collapsed: { control: 'boolean' },
  },
}

export default meta
type Story = StoryObj<typeof SidebarNav>

export const Expanded: Story = {
  args: { collapsed: false },
  render: args => ({
    components: { SidebarNav },
    setup() {
      return { args }
    },
    template: `
      <div class="w-64 bg-[var(--p-content-background)]">
        <SidebarNav :collapsed="args.collapsed" />
      </div>
    `,
  }),
}

export const Collapsed: Story = {
  args: { collapsed: true },
  render: args => ({
    components: { SidebarNav },
    setup() {
      return { args }
    },
    template: `
      <div class="w-16 bg-[var(--p-content-background)]">
        <SidebarNav :collapsed="args.collapsed" />
      </div>
    `,
  }),
}

export const WithActiveItem: Story = {
  args: { collapsed: false },
  render: args => ({
    components: { SidebarNav },
    setup() {
      const router = useRouter()

      router.push({ name: 'v2-dashboard' })

      return { args }
    },
    template: `
      <div class="w-64 bg-[var(--p-content-background)]">
        <SidebarNav :collapsed="args.collapsed" />
      </div>
    `,
  }),
}