import { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { ExtrasStep } from './ExtrasStep';
import type { ExtrasStepValues } from './ExtrasStep';
import { Navigation } from '../../organisms/Navigation';
import Box from '@mui/material/Box';

// ─── Helpers ─────────────────────────────────────────────────────────────────

const FALogo = () => (
  <Box sx={{ display: 'flex', alignItems: 'center' }}>
    <Box
      component="img"
      src="/brandlogo/logo-full.svg"
      alt="Funeral Arranger"
      sx={{ height: 28, display: { xs: 'none', md: 'block' } }}
    />
    <Box
      component="img"
      src="/brandlogo/logo-short.svg"
      alt="Funeral Arranger"
      sx={{ height: 28, display: { xs: 'block', md: 'none' } }}
    />
  </Box>
);

const nav = (
  <Navigation
    logo={<FALogo />}
    items={[
      { label: 'FAQ', href: '/faq' },
      { label: 'Contact Us', href: '/contact' },
    ]}
  />
);

const defaultValues: ExtrasStepValues = {
  catering: false,
  music: false,
  liveMusician: false,
  musicianType: null,
  bearing: false,
  bearerType: null,
  newspaperNotice: false,
};

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

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

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

// ─── Default (no prices — lead gen mode) ────────────────────────────────────

/** Default state — no fixed prices, interest capture only */
export const Default: Story = {
  render: () => {
    const [values, setValues] = useState<ExtrasStepValues>({ ...defaultValues });
    return (
      <ExtrasStep
        values={values}
        onChange={setValues}
        onContinue={() => alert(JSON.stringify(values, null, 2))}
        onBack={() => alert('Back')}
        onSaveAndExit={() => alert('Save')}
        navigation={nav}
      />
    );
  },
};

// ─── With prices ────────────────────────────────────────────────────────────

/** Some extras have known prices */
export const WithPrices: Story = {
  render: () => {
    const [values, setValues] = useState<ExtrasStepValues>({ ...defaultValues });
    return (
      <ExtrasStep
        values={values}
        onChange={setValues}
        onContinue={() => alert(JSON.stringify(values, null, 2))}
        onBack={() => alert('Back')}
        onSaveAndExit={() => alert('Save')}
        cateringPrice={850}
        newspaperPrice={250}
        musicianPrice={450}
        navigation={nav}
      />
    );
  },
};

// ─── All enabled ────────────────────────────────────────────────────────────

/** All extras toggled on with sub-options visible */
export const AllEnabled: Story = {
  render: () => {
    const [values, setValues] = useState<ExtrasStepValues>({
      catering: true,
      music: true,
      liveMusician: true,
      musicianType: 'vocalist',
      bearing: true,
      bearerType: 'both',
      newspaperNotice: true,
    });
    return (
      <ExtrasStep
        values={values}
        onChange={setValues}
        onContinue={() => alert('Continue')}
        onBack={() => alert('Back')}
        cateringPrice={850}
        newspaperPrice={250}
        musicianPrice={450}
        navigation={nav}
      />
    );
  },
};

// ─── Pre-planning ───────────────────────────────────────────────────────────

/** Pre-planning variant with softer copy */
export const PrePlanning: Story = {
  render: () => {
    const [values, setValues] = useState<ExtrasStepValues>({ ...defaultValues });
    return (
      <ExtrasStep
        values={values}
        onChange={setValues}
        onContinue={() => alert('Continue')}
        onBack={() => alert('Back')}
        isPrePlanning
        navigation={nav}
      />
    );
  },
};
