import type { Meta, StoryObj } from '@storybook/react'
import { Home, Users, Settings, Key, Webhook, BarChart, Database } from 'lucide-react'
import { SidebarProvider, Sidebar, SidebarContent } from '@mdxui/primitives/sidebar'
import { NavMain } from '../components/nav-main'
import { NavigationProvider } from '../context/navigation-context'

const meta: Meta<typeof NavMain> = {
  title: 'App/NavMain',
  component: NavMain,
  tags: ['autodocs'],
  parameters: {
    layout: 'padded',
  },
  decorators: [
    (Story) => (
      <NavigationProvider>
        <SidebarProvider>
          <Sidebar>
            <SidebarContent>
              <Story />
            </SidebarContent>
          </Sidebar>
        </SidebarProvider>
      </NavigationProvider>
    ),
  ],
}

export default meta
type Story = StoryObj<typeof NavMain>

export const Default: Story = {
  args: {
    label: 'Platform',
    items: [
      {
        title: 'Dashboard',
        url: '/',
        icon: Home,
      },
      {
        title: 'API Keys',
        url: '/keys',
        icon: Key,
      },
      {
        title: 'Webhooks',
        url: '/webhooks',
        icon: Webhook,
      },
      {
        title: 'Team',
        url: '/team',
        icon: Users,
      },
      {
        title: 'Settings',
        url: '/settings',
        icon: Settings,
      },
    ],
    currentPath: '/',
  },
}

export const WithSubItems: Story = {
  args: {
    label: 'Platform',
    items: [
      {
        title: 'Dashboard',
        url: '/',
        icon: Home,
      },
      {
        title: 'API Keys',
        url: '/keys',
        icon: Key,
      },
      {
        title: 'Webhooks',
        url: '/webhooks',
        icon: Webhook,
        items: [
          { title: 'Endpoints', url: '/webhooks/endpoints' },
          { title: 'Logs', url: '/webhooks/logs' },
          { title: 'Events', url: '/webhooks/events' },
        ],
      },
      {
        title: 'Analytics',
        url: '/analytics',
        icon: BarChart,
        items: [
          { title: 'Overview', url: '/analytics/overview' },
          { title: 'Requests', url: '/analytics/requests' },
          { title: 'Performance', url: '/analytics/performance' },
        ],
      },
      {
        title: 'Settings',
        url: '/settings',
        icon: Settings,
      },
    ],
    currentPath: '/webhooks/endpoints',
  },
}

export const MultipleGroups: Story = {
  args: {
    groups: [
      {
        label: 'Main',
        items: [
          { title: 'Dashboard', url: '/', icon: Home },
          { title: 'Analytics', url: '/analytics', icon: BarChart },
        ],
      },
      {
        label: 'Data',
        items: [
          { title: 'Database', url: '/database', icon: Database },
          { title: 'API Keys', url: '/keys', icon: Key },
          { title: 'Webhooks', url: '/webhooks', icon: Webhook },
        ],
      },
      {
        label: 'Settings',
        items: [
          { title: 'Team', url: '/team', icon: Users },
          { title: 'Settings', url: '/settings', icon: Settings },
        ],
      },
    ],
    currentPath: '/database',
  },
}

export const NoIcons: Story = {
  args: {
    label: 'Navigation',
    items: [
      { title: 'Dashboard', url: '/' },
      { title: 'API Keys', url: '/keys' },
      { title: 'Webhooks', url: '/webhooks' },
      { title: 'Team', url: '/team' },
      { title: 'Settings', url: '/settings' },
    ],
    currentPath: '/',
  },
}

export const ActiveItem: Story = {
  args: {
    label: 'Platform',
    items: [
      { title: 'Dashboard', url: '/', icon: Home },
      { title: 'API Keys', url: '/keys', icon: Key },
      { title: 'Webhooks', url: '/webhooks', icon: Webhook },
      { title: 'Team', url: '/team', icon: Users },
      { title: 'Settings', url: '/settings', icon: Settings },
    ],
    currentPath: '/keys',
  },
}