import { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { CemeteryStep } from './CemeteryStep';
import type { CemeteryStepValues, CemeteryStepErrors, Cemetery } from './CemeteryStep';
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 sampleCemeteries: Cemetery[] = [
  {
    id: 'rookwood',
    name: 'Rookwood Cemetery',
    location: 'Lidcombe, NSW',
    price: 4500,
  },
  {
    id: 'northern-suburbs',
    name: 'Northern Suburbs Memorial Gardens',
    location: 'North Ryde, NSW',
    price: 5200,
  },
  {
    id: 'macquarie-park',
    name: 'Macquarie Park Cemetery',
    location: 'Macquarie Park, NSW',
    price: 4800,
  },
];

const defaultValues: CemeteryStepValues = {
  burialOwn: null,
  burialCustom: null,
  selectedCemeteryId: null,
};

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

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

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

// ─── Interactive (default) ──────────────────────────────────────────────────

/** Fully interactive — progressive disclosure flow */
export const Default: Story = {
  render: () => {
    const [values, setValues] = useState<CemeteryStepValues>({ ...defaultValues });
    const [errors, setErrors] = useState<CemeteryStepErrors>({});

    const handleContinue = () => {
      const newErrors: CemeteryStepErrors = {};
      if (!values.burialOwn) newErrors.burialOwn = 'Please let us know about the burial plot.';
      if (values.burialOwn === 'no' && !values.burialCustom)
        newErrors.burialCustom = "Please let us know if you'd like to choose a specific cemetery.";
      if (values.burialOwn === 'no' && values.burialCustom === 'yes' && !values.selectedCemeteryId)
        newErrors.selectedCemeteryId = 'Please choose a cemetery.';
      setErrors(newErrors);
      if (Object.keys(newErrors).length === 0) alert('Continue');
    };

    return (
      <CemeteryStep
        values={values}
        onChange={(v) => {
          setValues(v);
          setErrors({});
        }}
        onContinue={handleContinue}
        onBack={() => alert('Back')}
        onSaveAndExit={() => alert('Save')}
        errors={errors}
        cemeteries={sampleCemeteries}
        navigation={nav}
      />
    );
  },
};

// ─── Has existing plot ──────────────────────────────────────────────────────

/** User already owns a burial plot — short confirmation */
export const HasExistingPlot: Story = {
  render: () => {
    const [values, setValues] = useState<CemeteryStepValues>({
      ...defaultValues,
      burialOwn: 'yes',
    });
    return (
      <CemeteryStep
        values={values}
        onChange={setValues}
        onContinue={() => alert('Continue')}
        onBack={() => alert('Back')}
        cemeteries={sampleCemeteries}
        navigation={nav}
      />
    );
  },
};

// ─── Provider arranges ──────────────────────────────────────────────────────

/** User wants provider to arrange — no cemetery grid */
export const ProviderArranges: Story = {
  render: () => {
    const [values, setValues] = useState<CemeteryStepValues>({
      ...defaultValues,
      burialOwn: 'no',
      burialCustom: 'no',
    });
    return (
      <CemeteryStep
        values={values}
        onChange={setValues}
        onContinue={() => alert('Continue')}
        onBack={() => alert('Back')}
        cemeteries={sampleCemeteries}
        navigation={nav}
      />
    );
  },
};

// ─── Cemetery grid visible ──────────────────────────────────────────────────

/** User wants to choose — cemetery grid revealed */
export const CemeteryGridVisible: Story = {
  render: () => {
    const [values, setValues] = useState<CemeteryStepValues>({
      ...defaultValues,
      burialOwn: 'no',
      burialCustom: 'yes',
    });
    return (
      <CemeteryStep
        values={values}
        onChange={setValues}
        onContinue={() => alert('Continue')}
        onBack={() => alert('Back')}
        cemeteries={sampleCemeteries}
        navigation={nav}
      />
    );
  },
};

// ─── Cemetery selected ──────────────────────────────────────────────────────

/** Cemetery selected */
export const CemeterySelected: Story = {
  render: () => {
    const [values, setValues] = useState<CemeteryStepValues>({
      burialOwn: 'no',
      burialCustom: 'yes',
      selectedCemeteryId: 'rookwood',
    });
    return (
      <CemeteryStep
        values={values}
        onChange={setValues}
        onContinue={() => alert('Continue')}
        onBack={() => alert('Back')}
        cemeteries={sampleCemeteries}
        navigation={nav}
      />
    );
  },
};

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

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

// ─── Validation errors ──────────────────────────────────────────────────────

/** All errors showing */
export const WithErrors: Story = {
  render: () => {
    const [values, setValues] = useState<CemeteryStepValues>({ ...defaultValues });
    return (
      <CemeteryStep
        values={values}
        onChange={setValues}
        onContinue={() => {}}
        errors={{ burialOwn: 'Please let us know about the burial plot.' }}
        cemeteries={sampleCemeteries}
        navigation={nav}
      />
    );
  },
};