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

// Real FA logo — inverted version for dark background
const FALogoInverse = () => (
  <Box
    component="img"
    src="/brandlogo/logo-full.svg"
    alt="Funeral Arranger"
    sx={{ height: 24, filter: 'brightness(0) invert(1)', opacity: 0.9 }}
  />
);

const FALogoNav = () => (
  <Box component="img" src="/brandlogo/logo-full.svg" alt="Funeral Arranger" sx={{ height: 28 }} />
);

const defaultLinkGroups = [
  {
    heading: 'Services',
    links: [
      { label: 'Find a Director', href: '/directors' },
      { label: 'Compare Venues', href: '/venues' },
      { label: 'Pricing Guide', href: '/pricing' },
      { label: 'Start Planning', href: '/arrange' },
    ],
  },
  {
    heading: 'Support',
    links: [
      { label: 'FAQ', href: '/faq' },
      { label: 'Contact Us', href: '/contact' },
      { label: 'Grief Resources', href: '/resources' },
    ],
  },
  {
    heading: 'Company',
    links: [
      { label: 'About Us', href: '/about' },
      { label: 'Provider Portal', href: '/provider-portal' },
      { label: 'Partner With Us', href: '/partners' },
    ],
  },
];

const defaultLegalLinks = [
  { label: 'Privacy Policy', href: '/privacy' },
  { label: 'Terms of Service', href: '/terms' },
  { label: 'Accessibility', href: '/accessibility' },
];

const meta: Meta<typeof Footer> = {
  title: 'Organisms/Footer',
  component: Footer,
  tags: ['autodocs'],
  parameters: {
    layout: 'fullscreen',
  },
};

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

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

/** Full footer with all sections populated */
export const Default: Story = {
  args: {
    logo: <FALogoInverse />,
    tagline: 'Helping Australian families plan with confidence',
    linkGroups: defaultLinkGroups,
    phone: '1800 987 888',
    email: 'support@funeralarranger.com.au',
    legalLinks: defaultLegalLinks,
  },
};

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

/** Minimal footer — logo and copyright only */
export const Minimal: Story = {
  args: {
    logo: <FALogoInverse />,
  },
};

// --- With Contact Only -------------------------------------------------------

/** Footer with contact info but no link columns */
export const WithContactOnly: Story = {
  args: {
    logo: <FALogoInverse />,
    tagline: 'Helping Australian families plan with confidence',
    phone: '1800 987 888',
    email: 'support@funeralarranger.com.au',
    legalLinks: defaultLegalLinks,
  },
};

// --- Two Columns -------------------------------------------------------------

/** Footer with two link groups — common for simpler sites */
export const TwoColumns: Story = {
  args: {
    logo: <FALogoInverse />,
    tagline: 'Transparent funeral planning for Australian families',
    linkGroups: [
      {
        heading: 'Planning',
        links: [
          { label: 'Find a Director', href: '/directors' },
          { label: 'Compare Venues', href: '/venues' },
          { label: 'Pricing Guide', href: '/pricing' },
        ],
      },
      {
        heading: 'Help',
        links: [
          { label: 'FAQ', href: '/faq' },
          { label: 'Contact Us', href: '/contact' },
          { label: 'About Us', href: '/about' },
        ],
      },
    ],
    phone: '1800 987 888',
    legalLinks: [
      { label: 'Privacy Policy', href: '/privacy' },
      { label: 'Terms of Service', href: '/terms' },
    ],
  },
};

// --- Full Page ---------------------------------------------------------------

/** Navigation + content + footer — complete page frame */
export const FullPage: Story = {
  render: () => (
    <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
      <Navigation
        logo={<FALogoNav />}
        items={[
          { label: 'Provider Portal', href: '/provider-portal' },
          { label: 'FAQ', href: '/faq' },
          { label: 'Contact Us', href: '/contact' },
          { label: 'Log in', href: '/login' },
        ]}
        ctaLabel="Start planning"
      />

      <Box
        sx={{
          flex: 1,
          maxWidth: 'lg',
          mx: 'auto',
          width: '100%',
          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: 4 }).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 the full page frame.
            </Typography>
          </Box>
        ))}
      </Box>

      <Footer
        logo={<FALogoInverse />}
        tagline="Helping Australian families plan with confidence"
        linkGroups={defaultLinkGroups}
        phone="1800 987 888"
        email="support@funeralarranger.com.au"
        legalLinks={defaultLegalLinks}
      />
    </Box>
  ),
};
