import { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { CrematoriumStep } from './CrematoriumStep';
import type { CrematoriumStepValues, Crematorium } from './CrematoriumStep';
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 sampleCrematorium: Crematorium = {
  name: 'Warrill Park Crematorium',
  imageUrl: 'https://images.unsplash.com/photo-1585320806297-9794b3e4eeae?w=400&h=300&fit=crop',
  address: 'Anderson Day Drive, Willowbank',
  distance: '153km from service venue',
};

const sydneyCrematorium: Crematorium = {
  name: 'Macquarie Park Cemetery & Crematorium',
  imageUrl: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=300&fit=crop',
  address: 'Plassey Rd, Macquarie Park',
  distance: '4km from service venue',
};

const defaultValues: CrematoriumStepValues = {
  attend: null,
};

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

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

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

// ─── Service & Cremation (default) ─────────────────────────────────────────

/** Service & Cremation — witness question with personalised name */
export const Default: Story = {
  render: () => {
    const [values, setValues] = useState<CrematoriumStepValues>({ ...defaultValues });
    return (
      <CrematoriumStep
        crematorium={sampleCrematorium}
        values={values}
        onChange={setValues}
        onContinue={() => alert('Continue')}
        onBack={() => alert('Back')}
        onSaveAndExit={() => alert('Save')}
        deceasedName="Margaret"
        navigation={nav}
      />
    );
  },
};

// ─── Cremation Only ────────────────────────────────────────────────────────

/** Cremation Only — no witness question, "included in package" notice */
export const CremationOnly: Story = {
  render: () => {
    const [values, setValues] = useState<CrematoriumStepValues>({ ...defaultValues });
    return (
      <CrematoriumStep
        crematorium={sydneyCrematorium}
        values={values}
        onChange={setValues}
        onContinue={() => alert('Continue')}
        onBack={() => alert('Back')}
        onSaveAndExit={() => alert('Save')}
        isCremationOnly
        navigation={nav}
      />
    );
  },
};

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

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

// ─── No image ──────────────────────────────────────────────────────────────

/** Crematorium without a photo */
export const NoImage: Story = {
  render: () => {
    const [values, setValues] = useState<CrematoriumStepValues>({ ...defaultValues });
    return (
      <CrematoriumStep
        crematorium={{
          name: 'Northern Suburbs Crematorium',
          address: '199 Delhi Rd, North Ryde, NSW, 2113',
          distance: '8km from venue',
        }}
        values={values}
        onChange={setValues}
        onContinue={() => alert('Continue')}
        onBack={() => alert('Back')}
        onSaveAndExit={() => alert('Save')}
        deceasedName="Robert"
        navigation={nav}
      />
    );
  },
};

// ─── With error ────────────────────────────────────────────────────────────

/** Validation error on witness question */
export const WithError: Story = {
  render: () => {
    const [values, setValues] = useState<CrematoriumStepValues>({ ...defaultValues });
    return (
      <CrematoriumStep
        crematorium={sampleCrematorium}
        values={values}
        onChange={setValues}
        onContinue={() => {}}
        onBack={() => alert('Back')}
        errors={{ attend: 'Please let us know if anyone will follow the hearse.' }}
        deceasedName="Margaret"
        navigation={nav}
      />
    );
  },
};
