import type { Meta, StoryObj } from '@storybook/react';
import { Header } from './header';
import { BrowserRouter, Link } from 'react-router-dom';
import {
  Home,
  Bell,
  Mail,
  User,
  Settings,
  LogOut,
  Users,
  FileText,
  FolderOpen,
  RefreshCw,
} from 'lucide-react';
import React from 'react';
import { Badge } from '../../ui/badge';
import { Button } from '../../ui/button';

const meta: Meta<typeof Header> = {
  title: 'Layout/Header',
  component: Header,
  decorators: [
    Story => (
      <BrowserRouter>
        <div className="w-full bg-muted/10 min-h-[200px]">
          <Story />
          <div className="p-8">Page Content Area</div>
        </div>
      </BrowserRouter>
    ),
  ],
  parameters: {
    layout: 'fullscreen',
  },
};

export default meta;
type Story = StoryObj<typeof Header>;

/**
 * Default story: breadcrumbs are the recommended primary pattern.
 * Always use breadcrumbs when the page has a navigation hierarchy.
 */
export const Default: Story = {
  args: {
    breadcrumbs: [
      { label: 'Home', href: '/', icon: <Home className="size-4" /> },
      { label: 'Users', href: '/users' },
      { label: 'Edit Profile' },
    ],
    user: {
      name: 'Pedro Duarte',
      email: 'pedro@example.com',
      avatar: 'https://github.com/shadcn.png',
    },
    showSettings: true,
    showLogout: true,
  },
};

/**
 * Deep navigation: breadcrumbs support unlimited hierarchy levels.
 * This example shows 5 levels of navigation depth.
 */
export const DeepNavigation: Story = {
  args: {
    breadcrumbs: [
      { label: 'Home', href: '/', icon: <Home className="size-4" /> },
      { label: 'Settings', href: '/settings', icon: <Settings className="size-4" /> },
      { label: 'Organization', href: '/settings/org', icon: <FolderOpen className="size-4" /> },
      { label: 'Teams', href: '/settings/org/teams', icon: <Users className="size-4" /> },
      { label: 'Engineering', href: '/settings/org/teams/engineering' },
      { label: 'Access Policies' },
    ],
    user: {
      name: 'Ana Costa',
      email: 'ana.costa@xertica.ai',
    },
  },
};

/**
 * Title-only mode: exception pattern for standalone pages with no navigation.
 * Use `title` only when the page has no parent or breadcrumb context.
 */
export const TitleOnly: Story = {
  args: {
    title: 'Dashboard',
    showLanguageSelector: true,
    showThemeToggle: true,
  },
};

/**
 * With custom action buttons in the header toolbar.
 */
export const WithActions: Story = {
  args: {
    breadcrumbs: [
      { label: 'Home', href: '/', icon: <Home className="size-4" /> },
      { label: 'Messages' },
    ],
    actions: [
      {
        id: 'notifications',
        icon: <Bell className="size-5" />,
        onClick: () => alert('Notifications'),
      },
      {
        id: 'mail',
        label: 'Inbox',
        icon: <Mail className="size-5" />,
        onClick: () => alert('Mailbox'),
      },
    ],
    user: {
      name: 'John Doe',
      avatar: 'https://github.com/johndoe.png',
    },
  },
};

/**
 * Custom user profile dropdown menu items.
 */
export const CustomUserMenu: Story = {
  args: {
    breadcrumbs: [
      { label: 'Home', href: '/', icon: <Home className="size-4" /> },
      { label: 'Settings' },
    ],
    user: {
      name: 'Admin User',
      menuItems: [
        {
          id: 'profile',
          label: 'My Profile',
          icon: <User className="size-4" />,
          onClick: () => {},
        },
        {
          id: ' billing',
          label: 'Billing',
          icon: <Settings className="size-4" />,
          onClick: () => {},
        },
        {
          id: 'logout',
          label: 'Sign Out',
          icon: <LogOut className="size-4" />,
          className: 'text-destructive focus:text-destructive',
          onClick: () => {},
        },
      ],
    },
  },
};

/**
 * Breadcrumb slot: custom element rendered right after the breadcrumb area.
 * Accepts any React node — badges, buttons, status chips, etc.
 */
export const WithBreadcrumbSlot: Story = {
  args: {
    breadcrumbs: [
      { label: 'Home', href: '/', icon: <Home className="size-4" /> },
      { label: 'Deployments' },
    ],
    breadcrumbSlot: (
      <div className="flex items-center gap-2">
        <Badge variant="warning">Beta</Badge>
        <Button variant="outline" size="sm">
          <RefreshCw className="size-3.5" />
          Sync
        </Button>
      </div>
    ),
    user: {
      name: 'Pedro Duarte',
      email: 'pedro@example.com',
    },
  },
};

/**
 * SPA Navigation: uses `renderLink` with React Router's `Link` component
 * to prevent full-page reloads when navigating breadcrumbs.
 */
export const WithReactRouter: Story = {
  args: {
    breadcrumbs: [
      { label: 'Home', href: '/', icon: <Home className="size-4" /> },
      { label: 'Settings', href: '/settings', icon: <Settings className="size-4" /> },
      { label: 'Users', href: '/settings/users', icon: <Users className="size-4" /> },
      { label: 'Edit Profile' },
    ],
    renderLink: (href, props) => <Link to={href} {...props} />,
    user: {
      name: 'Maria Souza',
      email: 'maria@xertica.ai',
    },
  },
};