import type { Meta, StoryObj } from '@storybook/react';
import { Navigation } from './Navigation';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';

// Real FA logo — full wordmark for desktop, short icon for mobile
const FALogo = () => (
  <Box sx={{ display: 'flex', alignItems: 'center' }}>
    {/* Full logo for desktop */}
    <Box
      component="img"
      src="/brandlogo/logo-full.svg"
      alt="Funeral Arranger"
      sx={{ height: 28, display: { xs: 'none', md: 'block' } }}
    />
    {/* Short icon for mobile */}
    <Box
      component="img"
      src="/brandlogo/logo-short.svg"
      alt="Funeral Arranger"
      sx={{ height: 28, display: { xs: 'block', md: 'none' } }}
    />
  </Box>
);

const defaultItems = [
  { label: 'Provider Portal', href: '/provider-portal' },
  { label: 'FAQ', href: '/faq' },
  { label: 'Contact Us', href: '/contact' },
  { label: 'Log in', href: '/login' },
];

const meta: Meta<typeof Navigation> = {
  title: 'Organisms/Navigation',
  component: Navigation,
  tags: ['autodocs'],
  parameters: {
    layout: 'fullscreen',
    design: {
      type: 'figma',
      url: 'https://www.figma.com/design/XUDUrw4yMkEexBCCYHXUvT/Parsons?node-id=14-108',
    },
  },
  argTypes: {
    ctaLabel: { control: 'text' },
  },
};

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

// --- Default -----------------------------------------------------------------

/** Desktop — logo left, navigation links right */
export const Default: Story = {
  args: {
    logo: <FALogo />,
    items: defaultItems,
  },
};

// --- With CTA ----------------------------------------------------------------

/** Desktop with a primary call-to-action button */
export const WithCTA: Story = {
  args: {
    logo: <FALogo />,
    items: defaultItems,
    ctaLabel: 'Start planning',
    onCtaClick: () => alert('Navigate to arrangement flow'),
  },
};

// --- With Page Content -------------------------------------------------------

/** Full page layout — sticky header with scrollable content */
export const WithPageContent: Story = {
  render: () => (
    <Box>
      <Navigation logo={<FALogo />} items={defaultItems} ctaLabel="Start planning" />
      <Box
        sx={{
          maxWidth: 'lg',
          mx: 'auto',
          px: { xs: 2, md: 4 },
          py: 6,
        }}
      >
        <Typography variant="h2" sx={{ mb: 3 }}>
          Find a funeral director
        </Typography>
        <Typography variant="body1" color="text.secondary" sx={{ mb: 4, maxWidth: 600 }}>
          Compare trusted funeral directors in your area. View services, pricing, and reviews to
          find the right support for your family.
        </Typography>
        {Array.from({ length: 8 }).map((_, i) => (
          <Box
            key={i}
            sx={{
              p: 3,
              mb: 2,
              bgcolor: 'background.paper',
              borderRadius: 1,
              border: '1px solid',
              borderColor: 'divider',
            }}
          >
            <Typography variant="h6">Provider {i + 1}</Typography>
            <Typography variant="body2" color="text.secondary">
              Placeholder content to demonstrate scroll behaviour with sticky header.
            </Typography>
          </Box>
        ))}
      </Box>
    </Box>
  ),
};

// --- Minimal -----------------------------------------------------------------

/** Minimal — logo only, no navigation items */
export const Minimal: Story = {
  args: {
    logo: <FALogo />,
  },
};

// --- Extended Navigation -----------------------------------------------------

/** More nav items for arrangements flow context */
export const ExtendedNavigation: Story = {
  args: {
    logo: <FALogo />,
    items: [
      { label: 'Directors', href: '/directors' },
      { label: 'Venues', href: '/venues' },
      { label: 'Pricing', href: '/pricing' },
      { label: 'Provider Portal', href: '/provider-portal' },
      { label: 'FAQ', href: '/faq' },
      { label: 'Contact Us', href: '/contact' },
      { label: 'Log in', href: '/login' },
    ],
    ctaLabel: 'Start planning',
  },
};

// --- With Dropdown -----------------------------------------------------------

/** Items with `children` render as a dropdown on desktop and a collapsible
 *  section in the mobile drawer */
export const WithDropdown: Story = {
  args: {
    logo: <FALogo />,
    items: [
      {
        label: 'Locations',
        children: [
          { label: 'Melbourne', href: '/locations/melbourne' },
          { label: 'Brisbane', href: '/locations/brisbane' },
          { label: 'Sydney', href: '/locations/sydney' },
          { label: 'South Coast NSW', href: '/locations/south-coast-nsw' },
          { label: 'Central Coast NSW', href: '/locations/central-coast-nsw' },
        ],
      },
      { label: 'FAQ', href: '/faq' },
      { label: 'Contact Us', href: '/contact' },
      { label: 'Log in', href: '/login' },
    ],
  },
};