import { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { IntroStep } from './IntroStep';
import type { IntroStepValues, IntroStepErrors } from './IntroStep';
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' },
      { label: 'Log in', href: '/login' },
    ]}
  />
);

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

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

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

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

/** Fully interactive — click through the progressive disclosure flow */
export const Default: Story = {
  render: () => {
    const [values, setValues] = useState<IntroStepValues>({
      forWhom: null,
      hasPassedAway: null,
    });
    const [errors, setErrors] = useState<IntroStepErrors>({});

    const handleContinue = () => {
      const newErrors: IntroStepErrors = {};
      if (!values.forWhom) {
        newErrors.forWhom = 'We need to know who the funeral is for to show you the right options.';
      }
      if (values.forWhom === 'someone' && !values.hasPassedAway) {
        newErrors.hasPassedAway = 'This helps us tailor the process to your situation.';
      }
      setErrors(newErrors);
      if (Object.keys(newErrors).length === 0) {
        alert(`Continue with: ${JSON.stringify(values)}`);
      }
    };

    return (
      <IntroStep
        values={values}
        onChange={(v) => {
          setValues(v);
          setErrors({});
        }}
        onContinue={handleContinue}
        errors={errors}
        navigation={nav}
      />
    );
  },
};

// ─── Pre-planning (myself) ──────────────────────────────────────────────────

/** User has selected "Myself" — hasPassedAway auto-set to "no", no second question */
export const PrePlanningMyself: Story = {
  render: () => {
    const [values, setValues] = useState<IntroStepValues>({
      forWhom: 'myself',
      hasPassedAway: 'no',
    });
    return (
      <IntroStep
        values={values}
        onChange={setValues}
        onContinue={() => alert('Continue')}
        navigation={nav}
      />
    );
  },
};

// ─── At-need (someone, yes) ─────────────────────────────────────────────────

/** User arranging for someone who has passed — at-need flow */
export const AtNeedSomeone: Story = {
  render: () => {
    const [values, setValues] = useState<IntroStepValues>({
      forWhom: 'someone',
      hasPassedAway: 'yes',
    });
    return (
      <IntroStep
        values={values}
        onChange={setValues}
        onContinue={() => alert('Continue')}
        navigation={nav}
      />
    );
  },
};

// ─── Pre-planning (someone, no) ─────────────────────────────────────────────

/** User arranging for someone who is alive — pre-planning flow */
export const PrePlanningSomeone: Story = {
  render: () => {
    const [values, setValues] = useState<IntroStepValues>({
      forWhom: 'someone',
      hasPassedAway: 'no',
    });
    return (
      <IntroStep
        values={values}
        onChange={setValues}
        onContinue={() => alert('Continue')}
        navigation={nav}
      />
    );
  },
};

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

/** Both fields showing validation errors */
export const WithErrors: Story = {
  render: () => {
    const [values, setValues] = useState<IntroStepValues>({
      forWhom: null,
      hasPassedAway: null,
    });
    return (
      <IntroStep
        values={values}
        onChange={setValues}
        onContinue={() => {}}
        errors={{
          forWhom: 'We need to know who the funeral is for to show you the right options.',
        }}
        navigation={nav}
      />
    );
  },
};

// ─── Loading state ──────────────────────────────────────────────────────────

/** Continue button in loading state */
export const Loading: Story = {
  render: () => {
    const [values, setValues] = useState<IntroStepValues>({
      forWhom: 'myself',
      hasPassedAway: 'no',
    });
    return (
      <IntroStep
        values={values}
        onChange={setValues}
        onContinue={() => {}}
        loading
        navigation={nav}
      />
    );
  },
};

// ─── No navigation (embedded) ───────────────────────────────────────────────

/** Without navigation — for embedded/iframe use */
export const Embedded: Story = {
  render: () => {
    const [values, setValues] = useState<IntroStepValues>({
      forWhom: null,
      hasPassedAway: null,
    });
    return (
      <IntroStep
        values={values}
        onChange={setValues}
        onContinue={() => alert('Continue')}
        hideHelpBar
      />
    );
  },
};
