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

// Placeholder logo — in production this would be an SVG or <img>
const FALogo = () => (
  <Typography
    sx={{
      fontFamily: '"Noto Serif SC", Georgia, serif',
      fontWeight: 400,
      fontSize: { xs: '1rem', md: '1.25rem' },
      color: 'var(--fa-color-brand-900)',
      letterSpacing: '-0.01em',
      whiteSpace: 'nowrap',
      userSelect: 'none',
    }}
  >
    FuneralArranger
  </Typography>
);

const defaultItems = [
  { 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: 'FAQ', href: '/faq' },
      { label: 'Contact Us', href: '/contact' },
      { label: 'Log in', href: '/login' },
    ],
    ctaLabel: 'Start planning',
  },
};

// ─── Mobile Price Tracker ───────────────────────────────────────────────────

/** Mobile with price tracker trailing content (resize browser to see) */
export const MobilePriceTracker: Story = {
  args: {
    logo: <FALogo />,
    items: defaultItems,
    mobileTrailing: (
      <Box
        sx={{
          bgcolor: 'background.paper',
          px: 1.5,
          py: 0.5,
          borderRadius: '10px 0 0 10px',
          boxShadow: '2px 2px 3px rgba(0,0,0,0.25)',
          textAlign: 'right',
        }}
      >
        <Typography variant="captionSm" sx={{ fontWeight: 600, display: 'block' }}>
          Your plan
        </Typography>
        <Typography variant="label" sx={{ fontWeight: 600 }}>
          $3,600
        </Typography>
      </Box>
    ),
  },
};