import type { Meta, StoryObj } from '@storybook/react'
import { Home, Users, Settings, Key, Webhook, BarChart, Package } from 'lucide-react'
import { SidebarProvider, SidebarInset } from '@mdxui/primitives/sidebar'
import { AppSidebar } from '../components/app-sidebar'
import { NavMain } from '../components/nav-main'
import { NavUser } from '../components/nav-user'
import { AppProvider } from '../context/app-context'
import { NavigationProvider } from '../context/navigation-context'
import { AuthProvider } from '../context/auth-context'
import { ThemeProvider } from '../context/theme-context'
import type { AuthProvider as AuthProviderInterface, NavItem } from '../types'

const navItems: NavItem[] = [
  { title: 'Dashboard', url: '/admin', icon: Home },
  { title: 'Users', url: '/admin/users', icon: Users },
  { title: 'API Keys', url: '/admin/api-keys', icon: Key },
  {
    title: 'Webhooks',
    url: '/admin/webhooks',
    icon: Webhook,
    items: [
      { title: 'Endpoints', url: '/admin/webhooks/endpoints' },
      { title: 'Logs', url: '/admin/webhooks/logs' },
    ],
  },
  { title: 'Analytics', url: '/admin/analytics', icon: BarChart },
  { title: 'Settings', url: '/admin/settings', icon: Settings },
]

const mockAuthProvider: AuthProviderInterface = {
  login: async () => {},
  logout: async () => {},
  checkAuth: async () => {},
  checkError: async () => {},
  getIdentity: async () => ({
    id: '1',
    fullName: 'John Doe',
    email: 'john@example.com',
    avatar: 'https://github.com/shadcn.png',
  }),
  getPermissions: async () => ['admin'],
}

const mockAppConfig = {
  name: 'Admin',
  description: 'Dashboard',
  basePath: '/admin',
}

const meta: Meta<typeof AppSidebar> = {
  title: 'App/AppSidebar',
  component: AppSidebar,
  tags: ['autodocs'],
  parameters: {
    layout: 'fullscreen',
  },
  decorators: [
    (Story) => (
      <ThemeProvider>
        <NavigationProvider>
          <AuthProvider authProvider={mockAuthProvider}>
            <AppProvider config={mockAppConfig}>
              <SidebarProvider>
                <Story />
                <SidebarInset>
                  <div className="p-6">
                    <h1 className="text-2xl font-bold">Main Content</h1>
                    <p className="text-muted-foreground mt-2">Content area next to the sidebar.</p>
                  </div>
                </SidebarInset>
              </SidebarProvider>
            </AppProvider>
          </AuthProvider>
        </NavigationProvider>
      </ThemeProvider>
    ),
  ],
}

export default meta
type Story = StoryObj<typeof AppSidebar>

export const Default: Story = {
  args: {
    nav: <NavMain items={navItems} label="Platform" currentPath="/admin" />,
    footer: <NavUser accountPath="/admin/settings" billingPath="/admin/settings/billing" />,
  },
}

export const WithCustomHeader: Story = {
  args: {
    header: (
      <div className="flex items-center gap-2 px-2 py-4">
        <Package className="size-6" />
        <span className="text-lg font-semibold">Custom Header</span>
      </div>
    ),
    nav: <NavMain items={navItems} label="Platform" currentPath="/admin" />,
    footer: <NavUser accountPath="/admin/settings" billingPath="/admin/settings/billing" />,
  },
}

export const WithCustomLogo: Story = {
  args: {
    logo: (
      <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 text-white">
        <Package className="size-4" />
      </div>
    ),
    nav: <NavMain items={navItems} label="Platform" currentPath="/admin" />,
    footer: <NavUser accountPath="/admin/settings" billingPath="/admin/settings/billing" />,
  },
}

export const NavOnly: Story = {
  args: {
    nav: <NavMain items={navItems} label="Platform" currentPath="/admin/users" />,
  },
}

export const FloatingVariant: Story = {
  args: {
    variant: 'floating',
    nav: <NavMain items={navItems} label="Platform" currentPath="/admin" />,
    footer: <NavUser accountPath="/admin/settings" billingPath="/admin/settings/billing" />,
  },
}