import type { Meta, StoryObj } from '@storybook/react'
import { AppBreadcrumbs } from '../components/app-breadcrumbs'
import { NavigationProvider } from '../context/navigation-context'
import type { NavigationProvider as NavigationProviderInterface } from '../types'

// Create a mock navigation provider with a configurable path
const createMockNavigationProvider = (path: string): NavigationProviderInterface => ({
  navigate: () => {},
  getCurrentPath: () => path,
  LinkComponent: ({ href, children, className }) => (
    <a href={href} className={className}>{children}</a>
  ),
})

const meta: Meta<typeof AppBreadcrumbs> = {
  title: 'App/AppBreadcrumbs',
  component: AppBreadcrumbs,
  tags: ['autodocs'],
  parameters: {
    layout: 'padded',
  },
}

export default meta
type Story = StoryObj<typeof AppBreadcrumbs>

export const Default: Story = {
  decorators: [
    (Story) => (
      <NavigationProvider navigationProvider={createMockNavigationProvider('/admin/users')}>
        <Story />
      </NavigationProvider>
    ),
  ],
  args: {
    basePath: '/admin',
  },
}

export const CustomItems: Story = {
  decorators: [
    (Story) => (
      <NavigationProvider navigationProvider={createMockNavigationProvider('/admin')}>
        <Story />
      </NavigationProvider>
    ),
  ],
  args: {
    items: [
      { label: 'Dashboard', href: '/admin' },
      { label: 'Users', href: '/admin/users' },
      { label: 'John Doe' },
    ],
  },
}

export const DeepPath: Story = {
  decorators: [
    (Story) => (
      <NavigationProvider navigationProvider={createMockNavigationProvider('/admin/settings/api-keys/create')}>
        <Story />
      </NavigationProvider>
    ),
  ],
  args: {
    basePath: '/admin',
    labels: {
      'api-keys': 'API Keys',
    },
  },
}

export const WithCustomLabels: Story = {
  decorators: [
    (Story) => (
      <NavigationProvider navigationProvider={createMockNavigationProvider('/admin/saas/customers')}>
        <Story />
      </NavigationProvider>
    ),
  ],
  args: {
    basePath: '/admin',
    labels: {
      saas: 'SaaS Admin',
      customers: 'Customer Management',
    },
  },
}

export const WithNumericId: Story = {
  decorators: [
    (Story) => (
      <NavigationProvider navigationProvider={createMockNavigationProvider('/admin/users/12345/edit')}>
        <Story />
      </NavigationProvider>
    ),
  ],
  args: {
    basePath: '/admin',
  },
}

export const NoHome: Story = {
  decorators: [
    (Story) => (
      <NavigationProvider navigationProvider={createMockNavigationProvider('/admin/products')}>
        <Story />
      </NavigationProvider>
    ),
  ],
  args: {
    basePath: '/admin',
    showHome: false,
  },
}

export const CustomHome: Story = {
  decorators: [
    (Story) => (
      <NavigationProvider navigationProvider={createMockNavigationProvider('/admin/analytics')}>
        <Story />
      </NavigationProvider>
    ),
  ],
  args: {
    basePath: '/admin',
    homeLabel: 'Home',
    homePath: '/',
  },
}