import type { Meta, StoryObj } from '@storybook/vue3-vite';
import { ref, watch } from 'vue';
import {
  UiNavigationMenu,
  UiNavigationMenuList,
  UiNavigationMenuItem,
  UiNavigationMenuTrigger,
  UiNavigationMenuContent,
  UiNavigationMenuLink,
  UiNavigationMenuIndicator,
  navigationMenuTriggerStyle,
} from './index';

function useStoryModel(args: { modelValue?: string }) {
  const value = ref(args.modelValue);
  watch(
    () => args.modelValue,
    (v) => {
      value.value = v;
    },
  );
  return value;
}

/**
 * UiNavigationMenu is a horizontal navigation bar with optional dropdown panels for grouped links.
 * Use it for top-level site or app navigation; for action menus, prefer `UiDropdownMenu`.
 */
const meta: Meta<typeof UiNavigationMenu> = {
  title: 'Components/UiNavigationMenu',
  component: UiNavigationMenu,
  tags: ['autodocs'],
  argTypes: {
    modelValue: {
      control: 'text',
      description:
        'Controlled active menu item value (use with v-model:modelValue)',
    },
    defaultValue: {
      control: 'text',
      description:
        'The value of the menu item that should be active when initially rendered',
    },
    orientation: {
      control: 'select',
      options: ['horizontal', 'vertical'],
      description: 'The orientation of the menu',
    },
    dir: {
      control: 'select',
      options: ['ltr', 'rtl'],
      description: 'The reading direction of the menu',
    },
    delayDuration: {
      control: 'number',
      description:
        'The duration from when the mouse enters a trigger until the content opens',
    },
    skipDelayDuration: {
      control: 'number',
      description:
        'How much time a user has to enter another trigger without incurring a delay again',
    },
    disableClickTrigger: {
      control: 'boolean',
      description: 'Whether to disable the click trigger behavior',
    },
    disableHoverTrigger: {
      control: 'boolean',
      description: 'Whether to disable the hover trigger behavior',
    },
    viewport: {
      control: 'boolean',
      description: 'Whether to render the viewport element',
    },
  },
  args: {
    orientation: 'horizontal',
    dir: 'ltr',
    delayDuration: 200,
    skipDelayDuration: 300,
    disableClickTrigger: false,
    disableHoverTrigger: false,
    viewport: true,
  },
  parameters: {
    layout: 'fullscreen',
    docs: {
      story: {
        height: '400px',
      },
    },
  },
  decorators: [
    // NavigationMenu's viewport is inline (not portaled by reka-ui), so it
    // clips whenever the canvas is narrower than the menu + dropdown. Wrap
    // in a full-width flex-center container so both horizontal (mega-menu)
    // and vertical (sidebar) orientations have room to render without
    // clipping on either edge of the canvas.
    () => ({
      template:
        '<div class="w-full p-12 overflow-visible flex justify-center"><story /></div>',
    }),
  ],
};

export default meta;

type Story = StoryObj<typeof UiNavigationMenu>;

const defaultTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import {
  UiNavigationMenu,
  UiNavigationMenuList,
  UiNavigationMenuItem,
  UiNavigationMenuTrigger,
  UiNavigationMenuContent,
  UiNavigationMenuLink,
  navigationMenuTriggerStyle,
} from '@aleph-alpha/ui-library'

const value = ref('')
</script>

<template>
  <UiNavigationMenu v-model:modelValue="value">
    <UiNavigationMenuList>
      <UiNavigationMenuItem>
        <UiNavigationMenuLink href="#" :class="navigationMenuTriggerStyle()">Home</UiNavigationMenuLink>
      </UiNavigationMenuItem>

      <UiNavigationMenuItem value="products">
        <UiNavigationMenuTrigger>Products</UiNavigationMenuTrigger>
        <UiNavigationMenuContent>
          <ul class="grid w-[400px]">
            <li>
              <UiNavigationMenuLink href="#">
                <div class="body-14-medium">Analytics</div>
                <p class="body-14-regular text-muted-foreground">Track your metrics and KPIs</p>
              </UiNavigationMenuLink>
            </li>
            <li>
              <UiNavigationMenuLink href="#">
                <div class="body-14-medium">Automation</div>
                <p class="body-14-regular text-muted-foreground">Streamline your workflows</p>
              </UiNavigationMenuLink>
            </li>
            <li>
              <UiNavigationMenuLink href="#">
                <div class="body-14-medium">Integrations</div>
                <p class="body-14-regular text-muted-foreground">Connect with your favorite tools</p>
              </UiNavigationMenuLink>
            </li>
          </ul>
        </UiNavigationMenuContent>
      </UiNavigationMenuItem>

      <UiNavigationMenuItem>
        <UiNavigationMenuLink href="#" :class="navigationMenuTriggerStyle()">About</UiNavigationMenuLink>
      </UiNavigationMenuItem>
    </UiNavigationMenuList>
  </UiNavigationMenu>
</template>`;

/**
 * Basic navigation menu with 3 items (Home, Products, About). Products has dropdown content.
 */
export const Default: Story = {
  render: (args) => ({
    components: {
      UiNavigationMenu,
      UiNavigationMenuList,
      UiNavigationMenuItem,
      UiNavigationMenuTrigger,
      UiNavigationMenuContent,
      UiNavigationMenuLink,
    },
    setup() {
      const value = useStoryModel(args);
      return { args, value, navigationMenuTriggerStyle };
    },
    template: `<UiNavigationMenu
      v-model:modelValue="value"
      :orientation="args.orientation"
      :dir="args.dir"
      :delay-duration="args.delayDuration"
      :skip-delay-duration="args.skipDelayDuration"
      :disable-click-trigger="args.disableClickTrigger"
      :disable-hover-trigger="args.disableHoverTrigger"
      :viewport="args.viewport"
    >
      <UiNavigationMenuList>
        <UiNavigationMenuItem>
          <UiNavigationMenuLink href="#" :class="navigationMenuTriggerStyle()">Home</UiNavigationMenuLink>
        </UiNavigationMenuItem>

        <UiNavigationMenuItem value="products">
          <UiNavigationMenuTrigger>Products</UiNavigationMenuTrigger>
          <UiNavigationMenuContent>
            <ul class="grid w-[400px]">
              <li>
                <UiNavigationMenuLink href="#">
                  <div class="body-14-medium">Analytics</div>
                  <p class="body-14-regular text-muted-foreground">Track your metrics and KPIs</p>
                </UiNavigationMenuLink>
              </li>
              <li>
                <UiNavigationMenuLink href="#">
                  <div class="body-14-medium">Automation</div>
                  <p class="body-14-regular text-muted-foreground">Streamline your workflows</p>
                </UiNavigationMenuLink>
              </li>
              <li>
                <UiNavigationMenuLink href="#">
                  <div class="body-14-medium">Integrations</div>
                  <p class="body-14-regular text-muted-foreground">Connect with your favorite tools</p>
                </UiNavigationMenuLink>
              </li>
            </ul>
          </UiNavigationMenuContent>
        </UiNavigationMenuItem>

        <UiNavigationMenuItem>
          <UiNavigationMenuLink href="#" :class="navigationMenuTriggerStyle()">About</UiNavigationMenuLink>
        </UiNavigationMenuItem>
      </UiNavigationMenuList>
    </UiNavigationMenu>`,
  }),
  parameters: {
    docs: {
      source: {
        code: defaultTemplateSource,
      },
    },
  },
};

const withLinksTemplateSource = `<script setup lang="ts">
import {
  UiNavigationMenu,
  UiNavigationMenuList,
  UiNavigationMenuItem,
  UiNavigationMenuLink,
  navigationMenuTriggerStyle,
} from '@aleph-alpha/ui-library'
</script>

<template>
  <UiNavigationMenu>
    <UiNavigationMenuList>
      <UiNavigationMenuItem>
        <UiNavigationMenuLink href="#" :class="navigationMenuTriggerStyle()">Home</UiNavigationMenuLink>
      </UiNavigationMenuItem>
      <UiNavigationMenuItem>
        <UiNavigationMenuLink href="#" :class="navigationMenuTriggerStyle()">Features</UiNavigationMenuLink>
      </UiNavigationMenuItem>
      <UiNavigationMenuItem>
        <UiNavigationMenuLink href="#" :class="navigationMenuTriggerStyle()">Pricing</UiNavigationMenuLink>
      </UiNavigationMenuItem>
      <UiNavigationMenuItem>
        <UiNavigationMenuLink href="#" :class="navigationMenuTriggerStyle()">Contact</UiNavigationMenuLink>
      </UiNavigationMenuItem>
    </UiNavigationMenuList>
  </UiNavigationMenu>
</template>`;

/**
 * Navigation with simple links (no dropdowns).
 */
export const WithLinks: Story = {
  render: (args) => ({
    components: {
      UiNavigationMenu,
      UiNavigationMenuList,
      UiNavigationMenuItem,
      UiNavigationMenuLink,
    },
    setup() {
      return { args, navigationMenuTriggerStyle };
    },
    template: `<UiNavigationMenu
      :orientation="args.orientation"
      :dir="args.dir"
    >
      <UiNavigationMenuList>
        <UiNavigationMenuItem>
          <UiNavigationMenuLink href="#" :class="navigationMenuTriggerStyle()">Home</UiNavigationMenuLink>
        </UiNavigationMenuItem>
        <UiNavigationMenuItem>
          <UiNavigationMenuLink href="#" :class="navigationMenuTriggerStyle()">Features</UiNavigationMenuLink>
        </UiNavigationMenuItem>
        <UiNavigationMenuItem>
          <UiNavigationMenuLink href="#" :class="navigationMenuTriggerStyle()">Pricing</UiNavigationMenuLink>
        </UiNavigationMenuItem>
        <UiNavigationMenuItem>
          <UiNavigationMenuLink href="#" :class="navigationMenuTriggerStyle()">Contact</UiNavigationMenuLink>
        </UiNavigationMenuItem>
      </UiNavigationMenuList>
    </UiNavigationMenu>`,
  }),
  parameters: {
    docs: {
      source: {
        code: withLinksTemplateSource,
      },
    },
  },
};

const withIndicatorTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import {
  UiNavigationMenu,
  UiNavigationMenuList,
  UiNavigationMenuItem,
  UiNavigationMenuTrigger,
  UiNavigationMenuContent,
  UiNavigationMenuLink,
  UiNavigationMenuIndicator,
} from '@aleph-alpha/ui-library'

const value = ref('')
</script>

<template>
  <UiNavigationMenu v-model:modelValue="value">
    <UiNavigationMenuList>
      <UiNavigationMenuItem value="getting-started">
        <UiNavigationMenuTrigger>Getting Started</UiNavigationMenuTrigger>
        <UiNavigationMenuContent>
          <ul class="grid w-[300px]">
            <li>
              <UiNavigationMenuLink href="#">
                <div class="body-14-medium">Introduction</div>
                <p class="body-14-regular text-muted-foreground">Learn the basics</p>
              </UiNavigationMenuLink>
            </li>
            <li>
              <UiNavigationMenuLink href="#">
                <div class="body-14-medium">Installation</div>
                <p class="body-14-regular text-muted-foreground">Get up and running</p>
              </UiNavigationMenuLink>
            </li>
          </ul>
        </UiNavigationMenuContent>
      </UiNavigationMenuItem>

      <UiNavigationMenuItem value="components">
        <UiNavigationMenuTrigger>Components</UiNavigationMenuTrigger>
        <UiNavigationMenuContent>
          <ul class="grid w-[300px]">
            <li>
              <UiNavigationMenuLink href="#">
                <div class="body-14-medium">Buttons</div>
                <p class="body-14-regular text-muted-foreground">Interactive elements</p>
              </UiNavigationMenuLink>
            </li>
            <li>
              <UiNavigationMenuLink href="#">
                <div class="body-14-medium">Forms</div>
                <p class="body-14-regular text-muted-foreground">Input components</p>
              </UiNavigationMenuLink>
            </li>
          </ul>
        </UiNavigationMenuContent>
      </UiNavigationMenuItem>

      <UiNavigationMenuIndicator />
    </UiNavigationMenuList>
  </UiNavigationMenu>
</template>`;

/**
 * Shows the indicator animation when hovering over menu items.
 */
export const WithIndicator: Story = {
  render: (args) => ({
    components: {
      UiNavigationMenu,
      UiNavigationMenuList,
      UiNavigationMenuItem,
      UiNavigationMenuTrigger,
      UiNavigationMenuContent,
      UiNavigationMenuLink,
      UiNavigationMenuIndicator,
    },
    setup() {
      const value = useStoryModel(args);
      return { args, value };
    },
    template: `<UiNavigationMenu
      v-model:modelValue="value"
      :orientation="args.orientation"
      :dir="args.dir"
      :delay-duration="args.delayDuration"
      :skip-delay-duration="args.skipDelayDuration"
    >
      <UiNavigationMenuList>
        <UiNavigationMenuItem value="getting-started">
          <UiNavigationMenuTrigger>Getting Started</UiNavigationMenuTrigger>
          <UiNavigationMenuContent>
            <ul class="grid w-[300px]">
              <li>
                <UiNavigationMenuLink href="#">
                  <div class="body-14-medium">Introduction</div>
                  <p class="body-14-regular text-muted-foreground">Learn the basics</p>
                </UiNavigationMenuLink>
              </li>
              <li>
                <UiNavigationMenuLink href="#">
                  <div class="body-14-medium">Installation</div>
                  <p class="body-14-regular text-muted-foreground">Get up and running</p>
                </UiNavigationMenuLink>
              </li>
            </ul>
          </UiNavigationMenuContent>
        </UiNavigationMenuItem>

        <UiNavigationMenuItem value="components">
          <UiNavigationMenuTrigger>Components</UiNavigationMenuTrigger>
          <UiNavigationMenuContent>
            <ul class="grid w-[300px]">
              <li>
                <UiNavigationMenuLink href="#">
                  <div class="body-14-medium">Buttons</div>
                  <p class="body-14-regular text-muted-foreground">Interactive elements</p>
                </UiNavigationMenuLink>
              </li>
              <li>
                <UiNavigationMenuLink href="#">
                  <div class="body-14-medium">Forms</div>
                  <p class="body-14-regular text-muted-foreground">Input components</p>
                </UiNavigationMenuLink>
              </li>
            </ul>
          </UiNavigationMenuContent>
        </UiNavigationMenuItem>

        <UiNavigationMenuIndicator />
      </UiNavigationMenuList>
    </UiNavigationMenu>`,
  }),
  parameters: {
    docs: {
      source: {
        code: withIndicatorTemplateSource,
      },
    },
  },
};

const verticalOrientationTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import {
  UiNavigationMenu,
  UiNavigationMenuList,
  UiNavigationMenuItem,
  UiNavigationMenuTrigger,
  UiNavigationMenuContent,
  UiNavigationMenuLink,
  navigationMenuTriggerStyle,
} from '@aleph-alpha/ui-library'

const value = ref('')
</script>

<template>
  <UiNavigationMenu v-model:modelValue="value" orientation="vertical">
    <UiNavigationMenuList class="flex-col items-start">
      <UiNavigationMenuItem>
        <UiNavigationMenuLink href="#" :class="navigationMenuTriggerStyle()">Dashboard</UiNavigationMenuLink>
      </UiNavigationMenuItem>

      <UiNavigationMenuItem value="settings">
        <UiNavigationMenuTrigger>Settings</UiNavigationMenuTrigger>
        <UiNavigationMenuContent>
          <ul class="grid gap-2 p-4 w-[200px]">
            <li>
              <UiNavigationMenuLink href="#">
                Profile
              </UiNavigationMenuLink>
            </li>
            <li>
              <UiNavigationMenuLink href="#">
                Account
              </UiNavigationMenuLink>
            </li>
            <li>
              <UiNavigationMenuLink href="#">
                Security
              </UiNavigationMenuLink>
            </li>
          </ul>
        </UiNavigationMenuContent>
      </UiNavigationMenuItem>

      <UiNavigationMenuItem>
        <UiNavigationMenuLink href="#" :class="navigationMenuTriggerStyle()">Help</UiNavigationMenuLink>
      </UiNavigationMenuItem>
    </UiNavigationMenuList>
  </UiNavigationMenu>
</template>`;

/**
 * Vertical menu layout for sidebar navigation.
 */
export const VerticalOrientation: Story = {
  render: (args) => ({
    components: {
      UiNavigationMenu,
      UiNavigationMenuList,
      UiNavigationMenuItem,
      UiNavigationMenuTrigger,
      UiNavigationMenuContent,
      UiNavigationMenuLink,
    },
    setup() {
      const value = useStoryModel(args);
      return { args, value, navigationMenuTriggerStyle };
    },
    template: `<UiNavigationMenu
      v-model:modelValue="value"
      orientation="vertical"
      :dir="args.dir"
      :delay-duration="args.delayDuration"
      :skip-delay-duration="args.skipDelayDuration"
    >
      <UiNavigationMenuList class="flex-col items-start">
        <UiNavigationMenuItem>
          <UiNavigationMenuLink href="#" :class="navigationMenuTriggerStyle()">Dashboard</UiNavigationMenuLink>
        </UiNavigationMenuItem>

        <UiNavigationMenuItem value="settings">
          <UiNavigationMenuTrigger>Settings</UiNavigationMenuTrigger>
          <UiNavigationMenuContent>
            <ul class="grid gap-2 p-4 w-[200px]">
              <li>
                <UiNavigationMenuLink href="#">
                  Profile
                </UiNavigationMenuLink>
              </li>
              <li>
                <UiNavigationMenuLink href="#">
                  Account
                </UiNavigationMenuLink>
              </li>
              <li>
                <UiNavigationMenuLink href="#">
                  Security
                </UiNavigationMenuLink>
              </li>
            </ul>
          </UiNavigationMenuContent>
        </UiNavigationMenuItem>

        <UiNavigationMenuItem>
          <UiNavigationMenuLink href="#" :class="navigationMenuTriggerStyle()">Help</UiNavigationMenuLink>
        </UiNavigationMenuItem>
      </UiNavigationMenuList>
    </UiNavigationMenu>`,
  }),
  parameters: {
    docs: {
      source: {
        code: verticalOrientationTemplateSource,
      },
      story: {
        height: '500px',
      },
    },
  },
};

const withCustomContentTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import {
  UiNavigationMenu,
  UiNavigationMenuList,
  UiNavigationMenuItem,
  UiNavigationMenuTrigger,
  UiNavigationMenuContent,
  UiNavigationMenuLink,
  navigationMenuTriggerStyle,
} from '@aleph-alpha/ui-library'

const value = ref('')
</script>

<template>
  <UiNavigationMenu v-model:modelValue="value">
    <UiNavigationMenuList>
      <UiNavigationMenuItem value="products">
        <UiNavigationMenuTrigger>Products</UiNavigationMenuTrigger>
        <UiNavigationMenuContent>
          <div class="grid gap-3 p-6 w-[600px] grid-cols-[.75fr_1fr]">
            <div class="row-span-3 rounded-md bg-gradient-to-b from-muted/50 to-muted p-6">
              <div class="mb-2 text-lg font-medium">Featured</div>
              <p class="text-sm text-muted-foreground mb-4">
                Our most popular product with advanced features and integrations.
              </p>
              <UiNavigationMenuLink href="#" class="text-sm font-medium text-primary hover:underline">
                Learn more
              </UiNavigationMenuLink>
            </div>
            <ul class="grid gap-3">
              <li>
                <UiNavigationMenuLink href="#">
                  <div class="text-sm font-medium">Analytics Platform</div>
                  <p class="body-14-regular text-muted-foreground">Real-time insights and reporting</p>
                </UiNavigationMenuLink>
              </li>
              <li>
                <UiNavigationMenuLink href="#">
                  <div class="text-sm font-medium">Automation Suite</div>
                  <p class="body-14-regular text-muted-foreground">Workflow automation tools</p>
                </UiNavigationMenuLink>
              </li>
              <li>
                <UiNavigationMenuLink href="#">
                  <div class="text-sm font-medium">Developer API</div>
                  <p class="body-14-regular text-muted-foreground">Build custom integrations</p>
                </UiNavigationMenuLink>
              </li>
            </ul>
          </div>
        </UiNavigationMenuContent>
      </UiNavigationMenuItem>

      <UiNavigationMenuItem value="resources">
        <UiNavigationMenuTrigger>Resources</UiNavigationMenuTrigger>
        <UiNavigationMenuContent>
          <ul class="grid w-[500px] gap-3 p-4 grid-cols-2">
            <li>
              <UiNavigationMenuLink href="#">
                <div class="text-sm font-medium">Documentation</div>
                <p class="body-14-regular text-muted-foreground">Guides and API reference</p>
              </UiNavigationMenuLink>
            </li>
            <li>
              <UiNavigationMenuLink href="#">
                <div class="text-sm font-medium">Blog</div>
                <p class="body-14-regular text-muted-foreground">Latest news and updates</p>
              </UiNavigationMenuLink>
            </li>
            <li>
              <UiNavigationMenuLink href="#">
                <div class="text-sm font-medium">Community</div>
                <p class="body-14-regular text-muted-foreground">Join the discussion</p>
              </UiNavigationMenuLink>
            </li>
            <li>
              <UiNavigationMenuLink href="#">
                <div class="text-sm font-medium">Support</div>
                <p class="body-14-regular text-muted-foreground">Get help from our team</p>
              </UiNavigationMenuLink>
            </li>
          </ul>
        </UiNavigationMenuContent>
      </UiNavigationMenuItem>

      <UiNavigationMenuItem>
        <UiNavigationMenuLink href="#" :class="navigationMenuTriggerStyle()">Pricing</UiNavigationMenuLink>
      </UiNavigationMenuItem>
    </UiNavigationMenuList>
  </UiNavigationMenu>
</template>`;

/**
 * Rich dropdown content with grid layout (mega menu style).
 */
export const WithCustomContent: Story = {
  render: (args) => ({
    components: {
      UiNavigationMenu,
      UiNavigationMenuList,
      UiNavigationMenuItem,
      UiNavigationMenuTrigger,
      UiNavigationMenuContent,
      UiNavigationMenuLink,
    },
    setup() {
      const value = useStoryModel(args);
      return { args, value, navigationMenuTriggerStyle };
    },
    template: `<UiNavigationMenu
      v-model:modelValue="value"
      :orientation="args.orientation"
      :dir="args.dir"
      :delay-duration="args.delayDuration"
      :skip-delay-duration="args.skipDelayDuration"
    >
      <UiNavigationMenuList>
        <UiNavigationMenuItem value="products">
          <UiNavigationMenuTrigger>Products</UiNavigationMenuTrigger>
          <UiNavigationMenuContent>
            <div class="grid gap-3 p-6 w-[600px] grid-cols-[.75fr_1fr]">
              <div class="row-span-3 rounded-md bg-gradient-to-b from-muted/50 to-muted p-6">
                <div class="mb-2 text-lg font-medium">Featured</div>
                <p class="text-sm text-muted-foreground mb-4">
                  Our most popular product with advanced features and integrations.
                </p>
                <UiNavigationMenuLink href="#" class="text-sm font-medium text-primary hover:underline">
                  Learn more
                </UiNavigationMenuLink>
              </div>
              <ul class="grid gap-3">
                <li>
                  <UiNavigationMenuLink href="#">
                    <div class="text-sm font-medium">Analytics Platform</div>
                    <p class="body-14-regular text-muted-foreground">Real-time insights and reporting</p>
                  </UiNavigationMenuLink>
                </li>
                <li>
                  <UiNavigationMenuLink href="#">
                    <div class="text-sm font-medium">Automation Suite</div>
                    <p class="body-14-regular text-muted-foreground">Workflow automation tools</p>
                  </UiNavigationMenuLink>
                </li>
                <li>
                  <UiNavigationMenuLink href="#">
                    <div class="text-sm font-medium">Developer API</div>
                    <p class="body-14-regular text-muted-foreground">Build custom integrations</p>
                  </UiNavigationMenuLink>
                </li>
              </ul>
            </div>
          </UiNavigationMenuContent>
        </UiNavigationMenuItem>

        <UiNavigationMenuItem value="resources">
          <UiNavigationMenuTrigger>Resources</UiNavigationMenuTrigger>
          <UiNavigationMenuContent>
            <ul class="grid w-[500px] gap-3 p-4 grid-cols-2">
              <li>
                <UiNavigationMenuLink href="#">
                  <div class="text-sm font-medium">Documentation</div>
                  <p class="body-14-regular text-muted-foreground">Guides and API reference</p>
                </UiNavigationMenuLink>
              </li>
              <li>
                <UiNavigationMenuLink href="#">
                  <div class="text-sm font-medium">Blog</div>
                  <p class="body-14-regular text-muted-foreground">Latest news and updates</p>
                </UiNavigationMenuLink>
              </li>
              <li>
                <UiNavigationMenuLink href="#">
                  <div class="text-sm font-medium">Community</div>
                  <p class="body-14-regular text-muted-foreground">Join the discussion</p>
                </UiNavigationMenuLink>
              </li>
              <li>
                <UiNavigationMenuLink href="#">
                  <div class="text-sm font-medium">Support</div>
                  <p class="body-14-regular text-muted-foreground">Get help from our team</p>
                </UiNavigationMenuLink>
              </li>
            </ul>
          </UiNavigationMenuContent>
        </UiNavigationMenuItem>

        <UiNavigationMenuItem>
          <UiNavigationMenuLink href="#" :class="navigationMenuTriggerStyle()">Pricing</UiNavigationMenuLink>
        </UiNavigationMenuItem>
      </UiNavigationMenuList>
    </UiNavigationMenu>`,
  }),
  parameters: {
    docs: {
      source: {
        code: withCustomContentTemplateSource,
      },
    },
  },
};

const controlledStateTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import {
  UiNavigationMenu,
  UiNavigationMenuList,
  UiNavigationMenuItem,
  UiNavigationMenuTrigger,
  UiNavigationMenuContent,
  UiNavigationMenuLink,
} from '@aleph-alpha/ui-library'

// Controlled state - menu opens/closes based on this value
const activeItem = ref('')

// You can programmatically control which menu is open
function openProducts() {
  activeItem.value = 'products'
}

function closeAll() {
  activeItem.value = ''
}
</script>

<template>
  <div class="gap-y-4">
    <div class="flex gap-2">
      <button type="button" @click="openProducts" class="px-3 py-1 text-sm border rounded">
        Open Products
      </button>
      <button type="button" @click="closeAll" class="px-3 py-1 text-sm border rounded">
        Close All
      </button>
      <span class="text-sm text-muted-foreground">
        Current value: "{{ activeItem }}"
      </span>
    </div>

    <UiNavigationMenu v-model:modelValue="activeItem">
      <UiNavigationMenuList>
        <UiNavigationMenuItem value="products">
          <UiNavigationMenuTrigger>Products</UiNavigationMenuTrigger>
          <UiNavigationMenuContent>
            <ul class="grid w-[300px]">
              <li>
                <UiNavigationMenuLink href="#">
                  Product A
                </UiNavigationMenuLink>
              </li>
              <li>
                <UiNavigationMenuLink href="#">
                  Product B
                </UiNavigationMenuLink>
              </li>
            </ul>
          </UiNavigationMenuContent>
        </UiNavigationMenuItem>

        <UiNavigationMenuItem value="services">
          <UiNavigationMenuTrigger>Services</UiNavigationMenuTrigger>
          <UiNavigationMenuContent>
            <ul class="grid w-[300px]">
              <li>
                <UiNavigationMenuLink href="#">
                  Service A
                </UiNavigationMenuLink>
              </li>
              <li>
                <UiNavigationMenuLink href="#">
                  Service B
                </UiNavigationMenuLink>
              </li>
            </ul>
          </UiNavigationMenuContent>
        </UiNavigationMenuItem>
      </UiNavigationMenuList>
    </UiNavigationMenu>
  </div>
</template>`;

const keyboardNavigationTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import {
  UiNavigationMenu,
  UiNavigationMenuList,
  UiNavigationMenuItem,
  UiNavigationMenuTrigger,
  UiNavigationMenuContent,
  UiNavigationMenuLink,
  navigationMenuTriggerStyle,
} from '@aleph-alpha/ui-library'

const value = ref('')
</script>

<template>
  <div class="gap-y-4">
    <div class="p-4 bg-background-surface-muted rounded-md text-sm">
      <p class="font-medium mb-2">Keyboard Navigation:</p>
      <ul class="gap-y-1 text-muted-foreground">
        <li><kbd class="px-1 bg-background rounded">Tab</kbd> - Move focus to/from navigation</li>
        <li><kbd class="px-1 bg-background rounded">Arrow Left/Right</kbd> - Navigate between menu items</li>
        <li><kbd class="px-1 bg-background rounded">Enter</kbd> or <kbd class="px-1 bg-background rounded">Space</kbd> - Open dropdown / activate link</li>
        <li><kbd class="px-1 bg-background rounded">Escape</kbd> - Close open dropdown</li>
        <li><kbd class="px-1 bg-background rounded">Arrow Down</kbd> - Move focus into dropdown content</li>
      </ul>
    </div>

    <UiNavigationMenu v-model:modelValue="value" aria-label="Main navigation" :disable-hover-trigger="true">
      <UiNavigationMenuList>
        <UiNavigationMenuItem>
          <UiNavigationMenuLink href="#" :class="navigationMenuTriggerStyle()">Home</UiNavigationMenuLink>
        </UiNavigationMenuItem>

        <UiNavigationMenuItem value="products">
          <UiNavigationMenuTrigger>Products</UiNavigationMenuTrigger>
          <UiNavigationMenuContent>
            <ul class="grid w-[300px]">
              <li>
                <UiNavigationMenuLink href="#">
                  <div class="body-14-medium">Analytics</div>
                  <p class="body-14-regular text-muted-foreground">Track your metrics</p>
                </UiNavigationMenuLink>
              </li>
              <li>
                <UiNavigationMenuLink href="#">
                  <div class="body-14-medium">Automation</div>
                  <p class="body-14-regular text-muted-foreground">Streamline workflows</p>
                </UiNavigationMenuLink>
              </li>
            </ul>
          </UiNavigationMenuContent>
        </UiNavigationMenuItem>

        <UiNavigationMenuItem value="resources">
          <UiNavigationMenuTrigger>Resources</UiNavigationMenuTrigger>
          <UiNavigationMenuContent>
            <ul class="grid w-[300px]">
              <li>
                <UiNavigationMenuLink href="#">
                  <div class="body-14-medium">Documentation</div>
                  <p class="body-14-regular text-muted-foreground">Guides and API reference</p>
                </UiNavigationMenuLink>
              </li>
              <li>
                <UiNavigationMenuLink href="#">
                  <div class="body-14-medium">Support</div>
                  <p class="body-14-regular text-muted-foreground">Get help from our team</p>
                </UiNavigationMenuLink>
              </li>
            </ul>
          </UiNavigationMenuContent>
        </UiNavigationMenuItem>

        <UiNavigationMenuItem>
          <UiNavigationMenuLink href="#" :class="navigationMenuTriggerStyle()">Contact</UiNavigationMenuLink>
        </UiNavigationMenuItem>
      </UiNavigationMenuList>
    </UiNavigationMenu>
  </div>
</template>`;

const withActivePageTemplateSource = `<script setup lang="ts">
import {
  UiNavigationMenu,
  UiNavigationMenuList,
  UiNavigationMenuItem,
  UiNavigationMenuLink,
  navigationMenuTriggerStyle,
} from '@aleph-alpha/ui-library'

// In a real app, you would determine active state based on current route
const currentPage = 'features'
</script>

<template>
  <UiNavigationMenu aria-label="Main navigation">
    <UiNavigationMenuList>
      <UiNavigationMenuItem>
        <UiNavigationMenuLink href="#" :active="currentPage === 'home'" :class="navigationMenuTriggerStyle()">Home</UiNavigationMenuLink>
      </UiNavigationMenuItem>
      <UiNavigationMenuItem>
        <UiNavigationMenuLink href="#" :active="currentPage === 'features'" :class="navigationMenuTriggerStyle()">Features</UiNavigationMenuLink>
      </UiNavigationMenuItem>
      <UiNavigationMenuItem>
        <UiNavigationMenuLink href="#" :active="currentPage === 'pricing'" :class="navigationMenuTriggerStyle()">Pricing</UiNavigationMenuLink>
      </UiNavigationMenuItem>
      <UiNavigationMenuItem>
        <UiNavigationMenuLink href="#" :active="currentPage === 'contact'" :class="navigationMenuTriggerStyle()">Contact</UiNavigationMenuLink>
      </UiNavigationMenuItem>
    </UiNavigationMenuList>
  </UiNavigationMenu>
</template>`;

/**
 * Demonstrates v-model:modelValue for controlled active state.
 * Use the buttons to programmatically control which menu item is open.
 */
export const ControlledState: Story = {
  render: (args) => ({
    components: {
      UiNavigationMenu,
      UiNavigationMenuList,
      UiNavigationMenuItem,
      UiNavigationMenuTrigger,
      UiNavigationMenuContent,
      UiNavigationMenuLink,
    },
    setup() {
      const activeItem = ref(args.modelValue || '');
      watch(
        () => args.modelValue,
        (v) => {
          activeItem.value = v || '';
        },
      );

      function openProducts() {
        activeItem.value = 'products';
      }

      function closeAll() {
        activeItem.value = '';
      }

      return { args, activeItem, openProducts, closeAll };
    },
    template: `<div class="gap-y-4">
      <div class="flex gap-2 items-center">
        <button type="button" @click="openProducts" class="px-3 py-1 text-sm border rounded hover:bg-background-surface-muted">
          Open Products
        </button>
        <button type="button" @click="closeAll" class="px-3 py-1 text-sm border rounded hover:bg-background-surface-muted">
          Close All
        </button>
        <span class="text-sm text-muted-foreground">
          Current value: "{{ activeItem }}"
        </span>
      </div>

      <UiNavigationMenu
        v-model:modelValue="activeItem"
        :orientation="args.orientation"
        :dir="args.dir"
        :delay-duration="args.delayDuration"
        :skip-delay-duration="args.skipDelayDuration"
      >
        <UiNavigationMenuList>
          <UiNavigationMenuItem value="products">
            <UiNavigationMenuTrigger>Products</UiNavigationMenuTrigger>
            <UiNavigationMenuContent>
              <ul class="grid w-[300px]">
                <li>
                  <UiNavigationMenuLink href="#">
                    Product A
                  </UiNavigationMenuLink>
                </li>
                <li>
                  <UiNavigationMenuLink href="#">
                    Product B
                  </UiNavigationMenuLink>
                </li>
              </ul>
            </UiNavigationMenuContent>
          </UiNavigationMenuItem>

          <UiNavigationMenuItem value="services">
            <UiNavigationMenuTrigger>Services</UiNavigationMenuTrigger>
            <UiNavigationMenuContent>
              <ul class="grid w-[300px]">
                <li>
                  <UiNavigationMenuLink href="#">
                    Service A
                  </UiNavigationMenuLink>
                </li>
                <li>
                  <UiNavigationMenuLink href="#">
                    Service B
                  </UiNavigationMenuLink>
                </li>
              </ul>
            </UiNavigationMenuContent>
          </UiNavigationMenuItem>
        </UiNavigationMenuList>
      </UiNavigationMenu>
    </div>`,
  }),
  parameters: {
    docs: {
      source: {
        code: controlledStateTemplateSource,
      },
    },
  },
};

/**
 * Demonstrates keyboard navigation support. Click on a menu item and use
 * Arrow keys to navigate, Enter/Space to activate, and Escape to close.
 * Hover is disabled in this example to better demonstrate keyboard interaction.
 */
export const KeyboardNavigation: Story = {
  render: (args) => ({
    components: {
      UiNavigationMenu,
      UiNavigationMenuList,
      UiNavigationMenuItem,
      UiNavigationMenuTrigger,
      UiNavigationMenuContent,
      UiNavigationMenuLink,
    },
    setup() {
      const value = useStoryModel(args);
      return { args, value, navigationMenuTriggerStyle };
    },
    template: `<div class="gap-y-4">
      <div class="p-4 bg-background-surface-muted rounded-md text-sm">
        <p class="font-medium mb-2">Keyboard Navigation:</p>
        <ul class="gap-y-1 text-muted-foreground">
          <li><kbd class="px-1 bg-background rounded">Tab</kbd> - Move focus to/from navigation</li>
          <li><kbd class="px-1 bg-background rounded">Arrow Left/Right</kbd> - Navigate between menu items</li>
          <li><kbd class="px-1 bg-background rounded">Enter</kbd> or <kbd class="px-1 bg-background rounded">Space</kbd> - Open dropdown / activate link</li>
          <li><kbd class="px-1 bg-background rounded">Escape</kbd> - Close open dropdown</li>
          <li><kbd class="px-1 bg-background rounded">Arrow Down</kbd> - Move focus into dropdown content</li>
        </ul>
      </div>

      <UiNavigationMenu
        v-model:modelValue="value"
        aria-label="Main navigation"
        :disable-hover-trigger="true"
        :dir="args.dir"
      >
        <UiNavigationMenuList>
          <UiNavigationMenuItem>
            <UiNavigationMenuLink href="#" :class="navigationMenuTriggerStyle()">Home</UiNavigationMenuLink>
          </UiNavigationMenuItem>

          <UiNavigationMenuItem value="products">
            <UiNavigationMenuTrigger>Products</UiNavigationMenuTrigger>
            <UiNavigationMenuContent>
              <ul class="grid w-[300px]">
                <li>
                  <UiNavigationMenuLink href="#">
                    <div class="body-14-medium">Analytics</div>
                    <p class="body-14-regular text-muted-foreground">Track your metrics</p>
                  </UiNavigationMenuLink>
                </li>
                <li>
                  <UiNavigationMenuLink href="#">
                    <div class="body-14-medium">Automation</div>
                    <p class="body-14-regular text-muted-foreground">Streamline workflows</p>
                  </UiNavigationMenuLink>
                </li>
              </ul>
            </UiNavigationMenuContent>
          </UiNavigationMenuItem>

          <UiNavigationMenuItem value="resources">
            <UiNavigationMenuTrigger>Resources</UiNavigationMenuTrigger>
            <UiNavigationMenuContent>
              <ul class="grid w-[300px]">
                <li>
                  <UiNavigationMenuLink href="#">
                    <div class="body-14-medium">Documentation</div>
                    <p class="body-14-regular text-muted-foreground">Guides and API reference</p>
                  </UiNavigationMenuLink>
                </li>
                <li>
                  <UiNavigationMenuLink href="#">
                    <div class="body-14-medium">Support</div>
                    <p class="body-14-regular text-muted-foreground">Get help from our team</p>
                  </UiNavigationMenuLink>
                </li>
              </ul>
            </UiNavigationMenuContent>
          </UiNavigationMenuItem>

          <UiNavigationMenuItem>
            <UiNavigationMenuLink href="#" :class="navigationMenuTriggerStyle()">Contact</UiNavigationMenuLink>
          </UiNavigationMenuItem>
        </UiNavigationMenuList>
      </UiNavigationMenu>
    </div>`,
  }),
  parameters: {
    docs: {
      source: {
        code: keyboardNavigationTemplateSource,
      },
      story: {
        height: '600px',
      },
    },
  },
};

/**
 * Demonstrates active page indication with aria-current="page".
 * The active link is visually highlighted and announced to screen readers.
 */
export const WithActivePage: Story = {
  render: () => ({
    components: {
      UiNavigationMenu,
      UiNavigationMenuList,
      UiNavigationMenuItem,
      UiNavigationMenuLink,
    },
    setup() {
      return { navigationMenuTriggerStyle };
    },
    template: `<UiNavigationMenu aria-label="Main navigation">
      <UiNavigationMenuList>
        <UiNavigationMenuItem>
          <UiNavigationMenuLink href="#" :active="false" :class="navigationMenuTriggerStyle()">Home</UiNavigationMenuLink>
        </UiNavigationMenuItem>
        <UiNavigationMenuItem>
          <UiNavigationMenuLink href="#" :active="true" :class="navigationMenuTriggerStyle()">Features</UiNavigationMenuLink>
        </UiNavigationMenuItem>
        <UiNavigationMenuItem>
          <UiNavigationMenuLink href="#" :active="false" :class="navigationMenuTriggerStyle()">Pricing</UiNavigationMenuLink>
        </UiNavigationMenuItem>
        <UiNavigationMenuItem>
          <UiNavigationMenuLink href="#" :active="false" :class="navigationMenuTriggerStyle()">Contact</UiNavigationMenuLink>
        </UiNavigationMenuItem>
      </UiNavigationMenuList>
    </UiNavigationMenu>`,
  }),
  parameters: {
    docs: {
      source: {
        code: withActivePageTemplateSource,
      },
    },
  },
};
