import type { Meta, StoryObj } from '@storybook/react'
import { Users, Settings, LayoutDashboard, Key, Webhook, BarChart } from 'lucide-react'
import { AppShell } from '../components/app-shell'
import { NavMain } from '../components/nav-main'
import { NavUser } from '../components/nav-user'
import { AppBreadcrumbs } from '../components/app-breadcrumbs'
import { NavigationProvider } from '../context/navigation-context'
import { AuthProvider } from '../context/auth-context'
import { ThemeProvider } from '../context/theme-context'
import type { NavItem, AuthProvider as AuthProviderInterface } from '../types'

const navItems: NavItem[] = [
  {
    title: 'Dashboard',
    url: '/admin',
    icon: LayoutDashboard,
  },
  {
    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,
    items: [
      { title: 'General', url: '/admin/settings/general' },
      { title: 'Team', url: '/admin/settings/team' },
      { title: 'Billing', url: '/admin/settings/billing' },
    ],
  },
]

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 meta: Meta<typeof AppShell> = {
  title: 'App/AppShell',
  component: AppShell,
  tags: ['autodocs'],
  parameters: {
    layout: 'fullscreen',
  },
  decorators: [
    (Story) => (
      <ThemeProvider>
        <NavigationProvider>
          <AuthProvider authProvider={mockAuthProvider}>
            <Story />
          </AuthProvider>
        </NavigationProvider>
      </ThemeProvider>
    ),
  ],
}

export default meta
type Story = StoryObj<typeof AppShell>

export const Default: Story = {
  args: {
    config: {
      name: 'Admin',
      description: 'Dashboard',
      basePath: '/admin',
    },
    nav: <NavMain items={navItems} label="Platform" currentPath="/admin" />,
    footer: <NavUser accountPath="/admin/settings" billingPath="/admin/settings/billing" />,
    pageHeader: <AppBreadcrumbs basePath="/admin" />,
    children: (
      <div className="p-6">
        <h1 className="text-2xl font-bold">Dashboard</h1>
        <p className="text-muted-foreground mt-2">Welcome to the admin dashboard.</p>
      </div>
    ),
  },
}

export const WithBreadcrumbs: Story = {
  args: {
    config: {
      name: 'Admin',
      description: 'Dashboard',
      basePath: '/admin',
    },
    nav: <NavMain items={navItems} label="Platform" currentPath="/admin/users" />,
    footer: <NavUser accountPath="/admin/settings" billingPath="/admin/settings/billing" />,
    pageHeader: (
      <AppBreadcrumbs
        items={[
          { label: 'Dashboard', href: '/admin' },
          { label: 'Users' },
        ]}
      />
    ),
    children: (
      <div className="p-6">
        <h1 className="text-2xl font-bold">Users</h1>
        <p className="text-muted-foreground mt-2">Manage user accounts.</p>
      </div>
    ),
  },
}

export const Collapsed: Story = {
  args: {
    config: {
      name: 'Admin',
      description: 'Dashboard',
      basePath: '/admin',
    },
    defaultOpen: false,
    nav: <NavMain items={navItems} label="Platform" currentPath="/admin" />,
    footer: <NavUser accountPath="/admin/settings" billingPath="/admin/settings/billing" />,
    pageHeader: <AppBreadcrumbs basePath="/admin" />,
    children: (
      <div className="p-6">
        <h1 className="text-2xl font-bold">Dashboard</h1>
        <p className="text-muted-foreground mt-2">Sidebar starts collapsed.</p>
      </div>
    ),
  },
}