import type { Meta, StoryObj } from '@storybook/react'
import { Key, FileText } from 'lucide-react'
import { SidebarProvider, Sidebar, SidebarFooter } from '@mdxui/primitives/sidebar'
import { NavUser } from '../components/nav-user'
import { NavigationProvider } from '../context/navigation-context'
import { AuthProvider } from '../context/auth-context'
import { ThemeProvider } from '../context/theme-context'
import type { AuthProvider as AuthProviderInterface } from '../types'

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 mockAuthProviderNoAvatar: AuthProviderInterface = {
  ...mockAuthProvider,
  getIdentity: async () => ({
    id: '1',
    fullName: 'Jane Smith',
    email: 'jane@example.com',
  }),
}

const meta: Meta<typeof NavUser> = {
  title: 'App/NavUser',
  component: NavUser,
  tags: ['autodocs'],
  parameters: {
    layout: 'padded',
  },
  decorators: [
    (Story, context) => {
      const authProvider = context.args.user?.avatar ? mockAuthProvider : mockAuthProviderNoAvatar
      return (
        <ThemeProvider>
          <NavigationProvider>
            <AuthProvider authProvider={authProvider}>
              <SidebarProvider>
                <Sidebar>
                  <SidebarFooter>
                    <Story />
                  </SidebarFooter>
                </Sidebar>
              </SidebarProvider>
            </AuthProvider>
          </NavigationProvider>
        </ThemeProvider>
      )
    },
  ],
}

export default meta
type Story = StoryObj<typeof NavUser>

export const Default: Story = {
  args: {
    accountPath: '/settings',
    billingPath: '/settings/billing',
    showThemeToggle: true,
  },
}

export const WithCustomUser: Story = {
  args: {
    user: {
      id: '2',
      fullName: 'Alice Johnson',
      email: 'alice@company.com',
      avatar: 'https://github.com/vercel.png',
    },
    accountPath: '/account',
    billingPath: '/billing',
    showThemeToggle: true,
  },
}

export const NoAvatar: Story = {
  args: {
    user: {
      id: '3',
      fullName: 'Bob Smith',
      email: 'bob@example.com',
    },
    accountPath: '/settings',
    billingPath: '/settings/billing',
    showThemeToggle: true,
  },
}

export const WithCustomActions: Story = {
  args: {
    accountPath: '/settings',
    billingPath: '/settings/billing',
    showThemeToggle: true,
    showNotifications: true,
    actions: [
      { label: 'API Keys', icon: Key, href: '/settings/api-keys' },
      { label: 'Documentation', icon: FileText, href: '/docs' },
    ],
  },
}

export const MinimalMenu: Story = {
  args: {
    accountPath: '/settings',
    billingPath: '/settings/billing',
    showThemeToggle: false,
    showNotifications: false,
  },
}