Parsons/src/components/pages/ExtrasStep/ExtrasStep.tsx

import React from 'react';
import Box from '@mui/material/Box';
import FormControl from '@mui/material/FormControl';
import FormLabel from '@mui/material/FormLabel';
import FormControlLabel from '@mui/material/FormControlLabel';
import RadioGroup from '@mui/material/RadioGroup';
import Radio from '@mui/material/Radio';
import type { SxProps, Theme } from '@mui/material/styles';
import { WizardLayout } from '../../templates/WizardLayout';
import { AddOnOption } from '../../molecules/AddOnOption';
import { Collapse } from '../../atoms/Collapse';
import { Switch } from '../../atoms/Switch';
import { Typography } from '../../atoms/Typography';
import { Button } from '../../atoms/Button';
import { Divider } from '../../atoms/Divider';

// ─── Types ───────────────────────────────────────────────────────────────────

/** Form values for the extras step */
export interface ExtrasStepValues {
  catering: boolean;
  music: boolean;
  liveMusician: boolean;
  musicianType: 'vocalist' | 'cellist' | 'other' | null;
  bearing: boolean;
  bearerType: 'family' | 'funeralHouse' | 'both' | null;
  newspaperNotice: boolean;
}

/** Props for the ExtrasStep page component */
export interface ExtrasStepProps {
  /** Current form values */
  values: ExtrasStepValues;
  /** Callback when any field value changes */
  onChange: (values: ExtrasStepValues) => void;
  /** Callback when the Continue button is clicked */
  onContinue: () => void;
  /** Callback for back navigation */
  onBack?: () => void;
  /** Callback for save-and-exit */
  onSaveAndExit?: () => void;
  /** Whether the Continue button is in a loading state */
  loading?: boolean;
  /** Price for catering (omit for POA) */
  cateringPrice?: number;
  /** Price for newspaper notice (omit for POA) */
  newspaperPrice?: number;
  /** Price for live musician (omit for POA) */
  musicianPrice?: number;
  /** Whether this is a pre-planning flow */
  isPrePlanning?: boolean;
  /** Navigation bar */
  navigation?: React.ReactNode;
  /** Progress stepper */
  progressStepper?: React.ReactNode;
  /** Running total */
  runningTotal?: React.ReactNode;
  /** Hide the help bar */
  hideHelpBar?: boolean;
  /** MUI sx prop */
  sx?: SxProps<Theme>;
}

// ─── Component ───────────────────────────────────────────────────────────────

/**
 * Step 12b — Optional Extras for the FA arrangement wizard.
 *
 * Shows optional services that may have additional costs. Users select
 * anything they're interested in — their funeral director will follow
 * up with details and confirm pricing.
 *
 * This is a lead-generation step: selecting an extra signals interest,
 * not a firm commitment. Items show prices where available, otherwise
 * "Price on application".
 *
 * Sub-options (e.g. musician type, bearer type) render as flat form
 * fields inside the parent card — no nested cards.
 *
 * Pure presentation component — props in, callbacks out.
 *
 * Spec: documentation/steps/steps/12_additional_services.yaml (Section 2)
 */
export const ExtrasStep: React.FC<ExtrasStepProps> = ({
  values,
  onChange,
  onContinue,
  onBack,
  onSaveAndExit,
  loading = false,
  cateringPrice,
  newspaperPrice,
  musicianPrice,
  isPrePlanning = false,
  navigation,
  progressStepper,
  runningTotal,
  hideHelpBar,
  sx,
}) => {
  const liveMusicianSwitchId = React.useId();

  const handleToggle = (field: keyof ExtrasStepValues, checked: boolean) => {
    const next = { ...values, [field]: checked };
    if (field === 'music' && !checked) {
      next.liveMusician = false;
      next.musicianType = null;
    }
    if (field === 'liveMusician' && !checked) {
      next.musicianType = null;
    }
    if (field === 'bearing' && !checked) {
      next.bearerType = null;
    }
    onChange(next);
  };

  const handleFieldChange = <K extends keyof ExtrasStepValues>(
    field: K,
    value: ExtrasStepValues[K],
  ) => {
    onChange({ ...values, [field]: value });
  };

  // Compute tally of selected priced extras
  const tallyItems: { name: string; price: number }[] = [];
  if (values.catering && cateringPrice != null)
    tallyItems.push({ name: 'Catering', price: cateringPrice });
  if (values.liveMusician && musicianPrice != null)
    tallyItems.push({ name: 'Live musician', price: musicianPrice });
  if (values.newspaperNotice && newspaperPrice != null)
    tallyItems.push({ name: 'Newspaper notice', price: newspaperPrice });
  const totalAdditional = tallyItems.reduce((sum, item) => sum + item.price, 0);

  return (
    <WizardLayout
      variant="centered-form"
      navigation={navigation}
      progressStepper={progressStepper}
      runningTotal={runningTotal}
      showBackLink={!!onBack}
      backLabel="Back"
      onBack={onBack}
      hideHelpBar={hideHelpBar}
      sx={sx}
    >
      {/* Page heading */}
      <Typography variant="display3" component="h1" sx={{ mb: 2 }} tabIndex={-1}>
        Optional extras
      </Typography>

      <Typography variant="body1" color="text.secondary" sx={{ mb: 3 }}>
        {isPrePlanning
          ? "These services are available if you'd like to personalise the arrangement. Select any you're interested in — details can be discussed when you're ready."
          : "You may wish to personalise the arrangement with any of these services. Where pricing isn't shown, your funeral director will be happy to discuss options and provide a quote."}
      </Typography>

      <Divider sx={{ mb: 4 }} />

      <Box
        component="form"
        noValidate
        aria-busy={loading}
        onSubmit={(e: React.FormEvent) => {
          e.preventDefault();
          if (!loading) onContinue();
        }}
      >
        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, mb: 4 }}>
          <AddOnOption
            name="Catering"
            description="Catering for after the service. Your director can arrange options to suit your needs and budget."
            price={cateringPrice}
            priceLabel={cateringPrice == null ? 'Price on application' : undefined}
            checked={values.catering}
            onChange={(c) => handleToggle('catering', c)}
          />

          {/* Music — flat sub-options inside the card */}
          <AddOnOption
            name="Music"
            description="Music arrangements for the service, including song selection and audio setup."
            checked={values.music}
            onChange={(c) => handleToggle('music', c)}
          >
            {/* Inline toggle row for live musician */}
            <Box
              sx={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
                gap: 2,
                mb: 0.5,
              }}
            >
              <Typography
                variant="label"
                component="span"
                id={liveMusicianSwitchId}
                sx={{ flex: 1, minWidth: 0 }}
              >
                Live musician
              </Typography>

              {musicianPrice != null ? (
                <Typography variant="body2" color="primary" sx={{ flexShrink: 0 }}>
                  ${musicianPrice.toLocaleString('en-AU')}
                </Typography>
              ) : (
                <Typography
                  variant="body2"
                  color="primary"
                  sx={{ flexShrink: 0, fontStyle: 'italic' }}
                >
                  POA
                </Typography>
              )}

              <Switch
                checked={values.liveMusician}
                onChange={(_e, v) => handleToggle('liveMusician', v)}
                onClick={(e) => e.stopPropagation()}
                inputProps={{ 'aria-labelledby': liveMusicianSwitchId }}
                sx={{ flexShrink: 0 }}
              />
            </Box>

            {/* Musician type — revealed when live musician is on */}
            <Collapse in={values.liveMusician}>
              <FormControl component="fieldset" sx={{ display: 'block', mt: 1 }}>
                <FormLabel component="legend" sx={{ mb: 1 }}>
                  Musician type
                </FormLabel>
                <RadioGroup
                  value={values.musicianType ?? ''}
                  onChange={(e) =>
                    handleFieldChange(
                      'musicianType',
                      e.target.value as ExtrasStepValues['musicianType'],
                    )
                  }
                >
                  <FormControlLabel value="vocalist" control={<Radio />} label="Vocalist" />
                  <FormControlLabel value="cellist" control={<Radio />} label="Cellist" />
                  <FormControlLabel value="other" control={<Radio />} label="Other" />
                </RadioGroup>
              </FormControl>
            </Collapse>
          </AddOnOption>

          {/* Coffin bearing — toggle with radio sub-options */}
          <AddOnOption
            name="Coffin bearing"
            description="Choose who will carry the coffin during the service. Professional bearers can be arranged through your funeral director."
            checked={values.bearing}
            onChange={(c) => handleToggle('bearing', c)}
          >
            <FormControl component="fieldset" sx={{ display: 'block' }}>
              <FormLabel component="legend" sx={{ mb: 1 }}>
                Bearer preference
              </FormLabel>
              <RadioGroup
                value={values.bearerType ?? ''}
                onChange={(e) =>
                  handleFieldChange('bearerType', e.target.value as ExtrasStepValues['bearerType'])
                }
              >
                <FormControlLabel value="family" control={<Radio />} label="Family and friends" />
                <FormControlLabel
                  value="funeralHouse"
                  control={<Radio />}
                  label="Professional bearers"
                />
                <FormControlLabel
                  value="both"
                  control={<Radio />}
                  label="Both family and professional"
                />
              </RadioGroup>
            </FormControl>
          </AddOnOption>

          <AddOnOption
            name="Newspaper notice"
            description="A paid newspaper death notice. Your director will help with wording and placement."
            price={newspaperPrice}
            priceLabel={newspaperPrice == null ? 'Price on application' : undefined}
            checked={values.newspaperNotice}
            onChange={(c) => handleToggle('newspaperNotice', c)}
          />
        </Box>

        {/* ─── Tally ─── */}
        {tallyItems.length > 0 && (
          <>
            <Divider sx={{ my: 3 }} />
            <Box
              sx={{
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
              }}
              aria-live="polite"
              aria-atomic="true"
            >
              <Typography variant="h6">Extras total</Typography>
              <Typography variant="h6" color="primary">
                ${totalAdditional.toLocaleString('en-AU')}
              </Typography>
            </Box>
          </>
        )}

        <Divider sx={{ my: 3 }} />

        {/* CTAs */}
        <Box
          sx={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            flexDirection: { xs: 'column-reverse', sm: 'row' },
            gap: 2,
          }}
        >
          {onSaveAndExit ? (
            <Button variant="text" color="secondary" onClick={onSaveAndExit} type="button">
              Save and continue later
            </Button>
          ) : (
            <Box />
          )}
          <Button type="submit" variant="contained" size="large" loading={loading}>
            Continue
          </Button>
        </Box>
      </Box>
    </WizardLayout>
  );
};

ExtrasStep.displayName = 'ExtrasStep';
export default ExtrasStep;