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 { Typography } from '../../atoms/Typography';
import { Button } from '../../atoms/Button';
import { Divider } from '../../atoms/Divider';

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

/** Form values for the included services step */
export interface IncludedServicesStepValues {
  dressing: boolean;
  viewing: boolean;
  viewingSameVenue: 'yes' | 'no' | null;
  prayers: boolean;
  funeralAnnouncement: boolean;
}

/** Props for the IncludedServicesStep page component */
export interface IncludedServicesStepProps {
  /** Current form values */
  values: IncludedServicesStepValues;
  /** Callback when any field value changes */
  onChange: (values: IncludedServicesStepValues) => 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;
  /** 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 12a — Included Services for the FA arrangement wizard.
 *
 * Shows services that come with the selected package at no additional
 * cost. Users confirm which inclusions they'd like — toggling off
 * removes them, toggling on adds them back.
 *
 * Sub-options (e.g. viewing venue) render inside the parent card
 * when toggled on, keeping the visual grouping clear.
 *
 * Pure presentation component — props in, callbacks out.
 *
 * Spec: documentation/steps/steps/12_additional_services.yaml (Section 1)
 */
export const IncludedServicesStep: React.FC<IncludedServicesStepProps> = ({
  values,
  onChange,
  onContinue,
  onBack,
  onSaveAndExit,
  loading = false,
  isPrePlanning = false,
  navigation,
  progressStepper,
  runningTotal,
  hideHelpBar,
  sx,
}) => {
  const handleToggle = (field: keyof IncludedServicesStepValues, checked: boolean) => {
    const next = { ...values, [field]: checked };
    if (field === 'viewing' && !checked) {
      next.viewingSameVenue = null;
    }
    onChange(next);
  };

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

  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}>
        Included services
      </Typography>

      <Typography variant="body1" color="text.secondary" sx={{ mb: 3 }}>
        {isPrePlanning
          ? "These services are included with your package. Let us know which you're considering — you can always adjust later."
          : "The following services come with your selected package at no additional cost. Simply let us know which you'd like to include."}
      </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="Dressing and preparation"
            description="Professional dressing and preparation of your loved one before the service."
            checked={values.dressing}
            onChange={(c) => handleToggle('dressing', c)}
          />

          <AddOnOption
            name="Viewing"
            description="Arrange a private viewing for family and close friends before the service."
            checked={values.viewing}
            onChange={(c) => handleToggle('viewing', c)}
          >
            <FormControl component="fieldset" sx={{ display: 'block' }}>
              <FormLabel component="legend" sx={{ mb: 1 }}>
                Same venue as the service?
              </FormLabel>
              <RadioGroup
                value={values.viewingSameVenue ?? ''}
                onChange={(e) =>
                  handleFieldChange(
                    'viewingSameVenue',
                    e.target.value as IncludedServicesStepValues['viewingSameVenue'],
                  )
                }
              >
                <FormControlLabel value="yes" control={<Radio />} label="Yes, same venue" />
                <FormControlLabel value="no" control={<Radio />} label="No, different venue" />
              </RadioGroup>
            </FormControl>
          </AddOnOption>

          <AddOnOption
            name="Prayers or vigil"
            description="Arrange prayers or a vigil to be held before the service."
            checked={values.prayers}
            onChange={(c) => handleToggle('prayers', c)}
          />

          <AddOnOption
            name="Funeral announcement"
            description="A complimentary funeral notice prepared and shared by the funeral home."
            checked={values.funeralAnnouncement}
            onChange={(c) => handleToggle('funeralAnnouncement', c)}
          />
        </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>
  );
};

IncludedServicesStep.displayName = 'IncludedServicesStep';
export default IncludedServicesStep;
