import React from 'react';
import Box from '@mui/material/Box';
import type { SxProps, Theme } from '@mui/material/styles';
import { Typography } from '../../atoms/Typography';
import { Button } from '../../atoms/Button';
import { ServiceOption } from '../../molecules/ServiceOption';

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

/** A service option within the selector */
export interface ServiceItem {
  /** Unique identifier */
  id: string;
  /** Option name */
  name: string;
  /** Price in dollars */
  price?: number;
  /** Description text */
  description?: string;
  /** Whether this option is unavailable */
  disabled?: boolean;
}

/** Props for the FA ServiceSelector organism */
export interface ServiceSelectorProps {
  /** Section heading (e.g. "Choose a service type") */
  heading: string;
  /** Optional subheading providing context */
  subheading?: string;
  /** Available options */
  items: ServiceItem[];
  /** Currently selected item ID */
  selectedId?: string;
  /** Called when the user selects an option */
  onSelect?: (id: string) => void;
  /** Label for the continue/next button — omit to hide */
  continueLabel?: string;
  /** Called when the user clicks continue */
  onContinue?: () => void;
  /** Whether continue is disabled (e.g. nothing selected) — defaults to requiring selection */
  continueDisabled?: boolean;
  /** Max visible description lines before "View more" toggle */
  maxDescriptionLines?: number;
  /** MUI sx prop for the root element */
  sx?: SxProps<Theme>;
}

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

/**
 * Service selection panel for the FA arrangement flow.
 *
 * Presents a heading, subheading, and a list of ServiceOption cards
 * for single-select (radio) behaviour. An optional continue button
 * advances to the next step.
 *
 * Composes Typography + ServiceOption + Button.
 *
 * Usage:
 * ```tsx
 * <ServiceSelector
 *   heading="Choose a service type"
 *   subheading="Select the type of service you'd like to arrange."
 *   items={[
 *     { id: 'burial', name: 'Traditional Burial', price: 4200, description: '...' },
 *     { id: 'cremation', name: 'Cremation', price: 2800, description: '...' },
 *   ]}
 *   selectedId={selected}
 *   onSelect={setSelected}
 *   continueLabel="Continue"
 *   onContinue={() => nextStep()}
 * />
 * ```
 */
export const ServiceSelector = React.forwardRef<HTMLDivElement, ServiceSelectorProps>(
  (
    {
      heading,
      subheading,
      items,
      selectedId,
      onSelect,
      continueLabel,
      onContinue,
      continueDisabled,
      maxDescriptionLines,
      sx,
    },
    ref,
  ) => {
    const nothingSelected = !selectedId;
    const isContinueDisabled = continueDisabled ?? nothingSelected;

    return (
      <Box ref={ref} sx={[{ width: '100%' }, ...(Array.isArray(sx) ? sx : [sx])]}>
        {/* Header */}
        <Box sx={{ mb: 3 }}>
          <Typography variant="h4" component="h2" sx={{ mb: subheading ? 1 : 0 }}>
            {heading}
          </Typography>
          {subheading && (
            <Typography variant="body2" color="text.secondary">
              {subheading}
            </Typography>
          )}
        </Box>

        {/* Options list */}
        <Box
          role="radiogroup"
          aria-label={heading}
          sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}
        >
          {items.map((item) => (
            <ServiceOption
              key={item.id}
              name={item.name}
              price={item.price}
              description={item.description}
              selected={selectedId === item.id}
              disabled={item.disabled}
              onClick={() => onSelect?.(item.id)}
              maxDescriptionLines={maxDescriptionLines}
            />
          ))}
        </Box>

        {/* Continue button */}
        {continueLabel && (
          <Box sx={{ mt: 4 }}>
            <Button
              variant="contained"
              size="large"
              fullWidth
              disabled={isContinueDisabled}
              onClick={onContinue}
            >
              {continueLabel}
            </Button>
          </Box>
        )}
      </Box>
    );
  },
);

ServiceSelector.displayName = 'ServiceSelector';
export default ServiceSelector;