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

// ─── Shared data ────────────────────────────────────────────────────────────

const funeralTypes = [
  { id: 'cremation', label: 'Cremation', hasServiceOption: true },
  { id: 'burial', label: 'Burial', hasServiceOption: true },
  {
    id: 'water-burial',
    label: 'Water Burial',
    note: 'Available in QLD only',
    hasServiceOption: false,
  },
];

const themeOptions = [
  { id: 'eco-friendly', label: 'Eco-friendly' },
  { id: 'budget-friendly', label: 'Budget-friendly' },
  { id: 'religious', label: 'Religious specialisation' },
];

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

// ─── Meta ───────────────────────────────────────────────────────────────────

const meta: Meta<typeof FuneralFinder> = {
  title: 'Archive/FuneralFinder V1',
  component: FuneralFinder,
  tags: ['autodocs'],
  parameters: { layout: 'centered' },
  decorators: [
    (Story) => (
      <Box sx={{ maxWidth: 520, width: '100%' }}>
        <Story />
      </Box>
    ),
  ],
};

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

// ─── Default ────────────────────────────────────────────────────────────────

/** Initial state — full feature set with types, themes, and explore-all. */
export const Default: Story = {
  args: {
    funeralTypes,
    themeOptions,
    onSearch: (params) => alert(JSON.stringify(params, null, 2)),
  },
};

// ─── Without Themes ─────────────────────────────────────────────────────────

/** No theme options — skips the preferences section on the final step. */
export const WithoutThemes: Story = {
  args: {
    funeralTypes,
    onSearch: (params) => alert(JSON.stringify(params, null, 2)),
  },
};

// ─── Without Explore All ────────────────────────────────────────────────────

/** Explore-all option hidden — users must pick a specific type. */
export const WithoutExploreAll: Story = {
  args: {
    funeralTypes,
    themeOptions,
    showExploreAll: false,
    onSearch: (params) => alert(JSON.stringify(params, null, 2)),
  },
};

// ─── Loading State ──────────────────────────────────────────────────────────

/** CTA in loading state — shows spinner, button disabled. */
export const Loading: Story = {
  args: {
    funeralTypes,
    themeOptions,
    loading: true,
    onSearch: (params) => alert(JSON.stringify(params, null, 2)),
  },
};

// ─── Custom Heading ─────────────────────────────────────────────────────────

/** Custom heading and subheading for alternate page contexts. */
export const CustomHeading: Story = {
  args: {
    funeralTypes,
    themeOptions,
    heading: 'Compare funeral directors in your area',
    subheading: 'Transparent pricing · No hidden fees · 24/7',
    onSearch: (params) => alert(JSON.stringify(params, null, 2)),
  },
};

// ─── In Hero Context (Desktop) ──────────────────────────────────────────────

/** As it appears in the homepage hero — desktop layout. */
export const InHeroDesktop: Story = {
  decorators: [
    (Story) => (
      <Box sx={{ maxWidth: 'none', width: '100%' }}>
        <Story />
      </Box>
    ),
  ],
  render: () => (
    <Box>
      <Navigation
        logo={<FALogoNav />}
        items={[
          { label: 'Provider Portal', href: '/provider-portal' },
          { label: 'FAQ', href: '/faq' },
          { label: 'Contact Us', href: '/contact' },
          { label: 'Log in', href: '/login' },
        ]}
      />
      <Box
        sx={{
          display: 'grid',
          gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' },
          minHeight: { md: 600 },
          bgcolor: 'var(--fa-color-brand-100)',
        }}
      >
        <Box
          sx={{
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'center',
            px: { xs: 2, md: 6 },
            py: { xs: 4, md: 6 },
          }}
        >
          <Box sx={{ maxWidth: 520, width: '100%' }}>
            <Typography
              variant="displaySm"
              component="h1"
              sx={{ textAlign: 'center', mb: 2, color: 'var(--fa-color-brand-950)' }}
            >
              Discover, Explore, and Plan Funerals in Minutes
            </Typography>
            <Typography
              variant="body1"
              color="text.secondary"
              sx={{ textAlign: 'center', mb: 4, maxWidth: 440, mx: 'auto' }}
            >
              Whether you're thinking ahead or arranging for a loved one, find trusted local
              providers with transparent pricing.
            </Typography>
            <FuneralFinder
              funeralTypes={funeralTypes}
              themeOptions={themeOptions}
              onSearch={(params) => alert(JSON.stringify(params, null, 2))}
            />
          </Box>
        </Box>
        <Box
          sx={{
            display: { xs: 'none', md: 'block' },
            bgcolor: 'var(--fa-color-brand-200)',
            backgroundImage:
              'url(https://images.unsplash.com/photo-1516733968668-dbdce39c0571?w=800&h=600&fit=crop)',
            backgroundSize: 'cover',
            backgroundPosition: 'center',
          }}
        />
      </Box>
    </Box>
  ),
};

// ─── In Hero Context (Mobile) ───────────────────────────────────────────────

/** Mobile viewport — stacked layout with image above search. */
export const InHeroMobile: Story = {
  decorators: [
    (Story) => (
      <Box sx={{ maxWidth: 420, width: '100%', mx: 'auto' }}>
        <Story />
      </Box>
    ),
  ],
  render: () => (
    <Box>
      <Navigation
        logo={<FALogoNav />}
        items={[
          { label: 'FAQ', href: '/faq' },
          { label: 'Contact Us', href: '/contact' },
          { label: 'Log in', href: '/login' },
        ]}
      />
      <Box sx={{ bgcolor: 'var(--fa-color-brand-100)', px: 3, py: 4, textAlign: 'center' }}>
        <Typography
          variant="h3"
          component="h1"
          sx={{ mb: 1.5, color: 'var(--fa-color-brand-950)' }}
        >
          Discover, Explore, and Plan Funerals in Minutes
        </Typography>
        <Typography variant="body2" color="text.secondary">
          Find trusted local providers with transparent pricing, at your own pace.
        </Typography>
      </Box>
      <Box
        sx={{
          height: 180,
          bgcolor: 'var(--fa-color-brand-200)',
          backgroundImage:
            'url(https://images.unsplash.com/photo-1516733968668-dbdce39c0571?w=800&h=400&fit=crop)',
          backgroundSize: 'cover',
          backgroundPosition: 'center',
        }}
      />
      <Box sx={{ px: 2, mt: -3, pb: 4, bgcolor: 'var(--fa-color-brand-100)' }}>
        <FuneralFinder
          funeralTypes={funeralTypes}
          themeOptions={themeOptions}
          onSearch={(params) => alert(JSON.stringify(params, null, 2))}
        />
      </Box>
    </Box>
  ),
};