import type { Meta, StoryObj } from '@storybook/react'
import { Plus, Download, Filter } from 'lucide-react'
import { SidebarProvider } from '@mdxui/primitives/sidebar'
import { Button } from '@mdxui/primitives/button'
import { PageHeader } from '../components/page-header'
import { AppBreadcrumbs } from '../components/app-breadcrumbs'
import { NavigationProvider } from '../context/navigation-context'
import type { NavigationProvider as NavigationProviderInterface } from '../types'

const mockNavigationProvider: NavigationProviderInterface = {
  navigate: () => {},
  getCurrentPath: () => '/admin/users',
  LinkComponent: ({ href, children, className }) => (
    <a href={href} className={className}>{children}</a>
  ),
}

const meta: Meta<typeof PageHeader> = {
  title: 'App/PageHeader',
  component: PageHeader,
  tags: ['autodocs'],
  parameters: {
    layout: 'padded',
  },
  decorators: [
    (Story) => (
      <NavigationProvider navigationProvider={mockNavigationProvider}>
        <SidebarProvider>
          <div className="border rounded-lg">
            <Story />
          </div>
        </SidebarProvider>
      </NavigationProvider>
    ),
  ],
}

export default meta
type Story = StoryObj<typeof PageHeader>

export const WithBreadcrumbs: Story = {
  args: {
    breadcrumbs: (
      <AppBreadcrumbs
        items={[
          { label: 'Dashboard', href: '/admin' },
          { label: 'Users' },
        ]}
      />
    ),
  },
}

export const WithTitle: Story = {
  args: {
    title: 'Users',
    description: 'Manage user accounts and permissions',
  },
}

export const WithActions: Story = {
  args: {
    breadcrumbs: (
      <AppBreadcrumbs
        items={[
          { label: 'Dashboard', href: '/admin' },
          { label: 'Users' },
        ]}
      />
    ),
    actions: (
      <>
        <Button variant="outline" size="sm">
          <Filter className="mr-2 h-4 w-4" />
          Filter
        </Button>
        <Button variant="outline" size="sm">
          <Download className="mr-2 h-4 w-4" />
          Export
        </Button>
        <Button size="sm">
          <Plus className="mr-2 h-4 w-4" />
          Add User
        </Button>
      </>
    ),
  },
}

export const TitleWithActions: Story = {
  args: {
    title: 'Users',
    description: 'Manage user accounts',
    actions: (
      <Button size="sm">
        <Plus className="mr-2 h-4 w-4" />
        Add User
      </Button>
    ),
  },
}

export const BreadcrumbsAndTitle: Story = {
  args: {
    breadcrumbs: (
      <AppBreadcrumbs
        items={[
          { label: 'Dashboard', href: '/admin' },
          { label: 'Settings', href: '/admin/settings' },
          { label: 'API Keys' },
        ]}
      />
    ),
    title: 'API Keys',
    actions: (
      <Button size="sm">
        <Plus className="mr-2 h-4 w-4" />
        Create Key
      </Button>
    ),
  },
}

export const NoSidebarTrigger: Story = {
  args: {
    showSidebarTrigger: false,
    breadcrumbs: (
      <AppBreadcrumbs
        items={[
          { label: 'Dashboard', href: '/admin' },
          { label: 'Users' },
        ]}
      />
    ),
  },
}