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

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

/** A single step in the progress indicator */
export interface Step {
  /** Step label displayed below the bar segment */
  label: string;
}

/** Props for the FA StepIndicator molecule */
export interface StepIndicatorProps {
  /** Array of steps in order */
  steps: Step[];
  /** Zero-indexed current step (this step and all before it are filled) */
  currentStep: number;
  /** MUI sx prop for style overrides */
  sx?: SxProps<Theme>;
}

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

/**
 * Horizontal progress bar for multi-step flows in the FA design system.
 *
 * Shows a segmented bar where completed and current steps are filled with
 * the brand colour, and upcoming steps are grey. Each segment has a label
 * below it. The current step label is bold for emphasis.
 *
 * Maps to Figma "Progress Bar - Steps" (2375:47468). Supports 2-8 steps.
 *
 * Bar height: 10px desktop, 6px mobile (via responsive styles).
 * Labels: body2 desktop, caption mobile.
 *
 * Usage:
 * ```tsx
 * <StepIndicator
 *   steps={[
 *     { label: 'Details' },
 *     { label: 'Venue' },
 *     { label: 'Service' },
 *     { label: 'Extras' },
 *     { label: 'Review' },
 *   ]}
 *   currentStep={2}
 * />
 * ```
 */
export const StepIndicator = React.forwardRef<HTMLDivElement, StepIndicatorProps>(
  ({ steps, currentStep, sx }, ref) => {
    return (
      <Box
        ref={ref}
        role="navigation"
        aria-label="Progress"
        sx={[
          {
            display: 'flex',
            gap: { xs: 0.75, sm: 1.25 },
            width: '100%',
          },
          ...(Array.isArray(sx) ? sx : [sx]),
        ]}
      >
        {steps.map((step, index) => {
          const isCompleted = index < currentStep;
          const isCurrent = index === currentStep;
          const isFilled = isCompleted || isCurrent;

          return (
            <Box
              key={index}
              sx={{ flex: 1, minWidth: 0 }}
              aria-current={isCurrent ? 'step' : undefined}
            >
              {/* Bar segment */}
              <Box
                sx={{
                  height: { xs: 6, sm: 10 },
                  borderRadius: 'var(--fa-border-radius-full)',
                  bgcolor: isFilled ? 'primary.main' : 'divider',
                  transition: 'background-color 150ms ease-in-out',
                }}
              />

              {/* Step label */}
              <Typography
                variant="body2"
                sx={{
                  mt: { xs: 0.75, sm: 1.25 },
                  fontWeight: isCurrent ? 600 : 400,
                  color: isCurrent ? 'text.primary' : 'text.secondary',
                  whiteSpace: 'nowrap',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  fontSize: { xs: '0.6875rem', sm: '0.875rem' },
                }}
              >
                {step.label}
              </Typography>
            </Box>
          );
        })}
      </Box>
    );
  },
);

StepIndicator.displayName = 'StepIndicator';
export default StepIndicator;
