import type { Meta, StoryObj } from '@storybook/react';
import NavigationMenu from '../index.js';
import { NavigationMenuProps } from '../islands/types.js';
import { withNavigationMenuStyles } from './NavigationMenuDecorator.js';
import { SBContainer, SBFocusWrapper } from '@sb-utils';
import { dummyMenuData } from '../../_dummyMenuData.js';

const meta: Meta<NavigationMenuProps> = {
  title: 'Component Library/Menu/Navigation Menu',
  component: NavigationMenu,
  parameters: {
    layout: 'fullwidth',
    docs: {
      description: {
        component:
          'The NavigationMenu component creates a horizontal navigation menu with dropdown submenus. It supports keyboard navigation and is typically used in website headers.',
      },
    },
  },
  decorators: [withNavigationMenuStyles],
};

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

export const Default: Story = {
  render: () => (
    <SBContainer
      addBackground
      style={{ overflow: 'visible', minHeight: '300px' }}
    >
      <NavigationMenu navAriaLabel="Main Navigation" menuData={dummyMenuData} />
    </SBContainer>
  ),
};

export const JustifyContent: Story = {
  name: 'Justify Content Options',
  render: () => (
    <SBContainer flex direction="column" gap="extralarge">
      <SBContainer
        addBackground
        style={{ overflow: 'visible', minHeight: '250px' }}
      >
        <h4>Left Aligned (Default)</h4>
        <NavigationMenu justifyMenu="flex-start" menuData={dummyMenuData} />
      </SBContainer>

      <SBContainer
        addBackground
        style={{ overflow: 'visible', minHeight: '250px' }}
      >
        <h4>Center Aligned</h4>
        <NavigationMenu justifyMenu="center" menuData={dummyMenuData} />
      </SBContainer>

      <SBContainer
        addBackground
        style={{ overflow: 'visible', minHeight: '250px' }}
      >
        <h4>Right Aligned</h4>
        <NavigationMenu justifyMenu="flex-end" menuData={dummyMenuData} />
      </SBContainer>

      <SBContainer
        addBackground
        style={{ overflow: 'visible', minHeight: '250px' }}
      >
        <h4>Space Between</h4>
        <NavigationMenu justifyMenu="space-between" menuData={dummyMenuData} />
      </SBContainer>

      <SBContainer
        addBackground
        style={{ overflow: 'visible', minHeight: '250px' }}
      >
        <h4>Space Around</h4>
        <NavigationMenu justifyMenu="space-around" menuData={dummyMenuData} />
      </SBContainer>
    </SBContainer>
  ),
};

export const ColorCustomization: Story = {
  name: 'Color Customization',
  render: () => (
    <SBContainer flex direction="column" gap="extralarge">
      <SBContainer
        addBackground
        style={{ overflow: 'visible', minHeight: '250px' }}
      >
        <h4>Default Colors</h4>
        <NavigationMenu menuData={dummyMenuData} />
      </SBContainer>

      <SBContainer
        addBackground
        style={{ overflow: 'visible', minHeight: '250px' }}
      >
        <h4>Custom Link Colors</h4>
        <NavigationMenu
          linkColor="#2d3e50"
          linkColorHover="#ff7a59"
          menuData={dummyMenuData}
        />
      </SBContainer>

      <SBContainer
        addBackground
        style={{ overflow: 'visible', minHeight: '250px' }}
      >
        <h4>With Background Colors</h4>
        <NavigationMenu
          linkColor="#ffffff"
          linkColorHover="#ffffff"
          backgroundColor="#0066cc"
          backgroundColorHover="#0052a3"
          menuData={dummyMenuData}
        />
      </SBContainer>

      <SBContainer
        addBackground
        style={{ overflow: 'visible', minHeight: '250px' }}
      >
        <h4>Custom Submenu Colors</h4>
        <NavigationMenu
          linkColor="#1a1a1a"
          linkColorHover="#e91e63"
          backgroundColor="#fff3e0"
          backgroundColorHover="#ffe0b2"
          submenuLinkColor="#4a148c"
          submenuLinkColorHover="#00e676"
          submenuBackgroundColor="#f3e5f5"
          submenuBackgroundColorHover="#e1bee7"
          menuData={dummyMenuData}
        />
      </SBContainer>

      <SBContainer
        style={{
          backgroundColor: '#1a1a1a',
          padding: '20px',
          minHeight: '300px',
          overflow: 'visible',
        }}
      >
        <h4 style={{ color: '#ffffff', marginTop: 0 }}>Dark Theme</h4>
        <NavigationMenu
          linkColor="#e0e0e0"
          linkColorHover="#ffffff"
          backgroundColor="#2d2d2d"
          backgroundColorHover="#3d3d3d"
          submenuLinkColor="#e0e0e0"
          submenuLinkColorHover="#ffffff"
          submenuBackgroundColor="#2d2d2d"
          submenuBackgroundColorHover="#3d3d3d"
          menuData={dummyMenuData}
        />
      </SBContainer>
    </SBContainer>
  ),
};

export const FocusState: Story = {
  name: 'Focus State',
  render: () => (
    <SBContainer flex direction="column" gap="large">
      <SBContainer
        addBackground
        style={{ overflow: 'visible', minHeight: '250px' }}
      >
        <h4>Focus State</h4>
        <p>
          In production, this focus outline appears when navigating with the
          keyboard (Tab key). This Storybook demo auto-applies the focus state
          to show how it looks.
        </p>
        <SBFocusWrapper>
          <NavigationMenu
            navAriaLabel="Focused Navigation"
            menuData={dummyMenuData}
          />
        </SBFocusWrapper>
      </SBContainer>
    </SBContainer>
  ),
};

export const AccessibilityFeatures: Story = {
  name: 'Accessibility Features',
  render: () => (
    <SBContainer flex direction="column" gap="large">
      <SBContainer
        addBackground
        style={{ overflow: 'visible', minHeight: '250px' }}
      >
        <h4>ARIA Label</h4>
        <p>
          The navigation element includes an aria-label for screen readers
          (inspect the element to see it).
        </p>
        <NavigationMenu
          navAriaLabel="Main Site Navigation"
          menuData={dummyMenuData}
        />
      </SBContainer>

      <SBContainer
        addBackground
        style={{ overflow: 'visible', minHeight: '250px' }}
      >
        <h4>Custom ARIA Label</h4>
        <p>
          You can customize the ARIA label to describe the navigation purpose.
        </p>
        <NavigationMenu
          navAriaLabel="Footer Navigation"
          menuData={dummyMenuData}
        />
      </SBContainer>

      <SBContainer
        addBackground
        style={{ overflow: 'visible', minHeight: '250px' }}
      >
        <h4>Keyboard Accessible</h4>
        <p>
          All menu items and submenus are fully keyboard accessible using Tab,
          Enter, and Arrow keys.
        </p>
        <NavigationMenu
          navAriaLabel="Accessible Navigation Demo"
          menuData={dummyMenuData}
        />
      </SBContainer>
    </SBContainer>
  ),
};

export const RealWorldExample: Story = {
  name: 'In Context',
  render: () => (
    <SBContainer
      style={{
        backgroundColor: '#ffffff',
        borderBottom: '1px solid #cbd6e2',
        padding: '0',
        minHeight: '350px',
        overflow: 'visible',
      }}
    >
      <SBContainer
        flex
        direction="row"
        alignItems="center"
        justifyContent="space-between"
        style={{
          maxWidth: '1200px',
          margin: '0 auto',
          padding: '0 50px',
        }}
      >
        <SBContainer
          style={{
            fontSize: '24px',
            fontWeight: 'bold',
            color: '#33475b',
          }}
        >
          Acme Corp
        </SBContainer>
        <NavigationMenu
          justifyMenu="flex-end"
          linkColor="#33475b"
          linkColorHover="#0066cc"
          submenuLinkColor="#516f90"
          submenuLinkColorHover="#0066cc"
          submenuBackgroundColor="#ffffff"
          submenuBackgroundColorHover="#f5f8fa"
          menuData={dummyMenuData}
        />
      </SBContainer>
    </SBContainer>
  ),
};
