import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { colors, radius, shadows } from '../../lib/theme';

type Step = {
  id: number;
  label: string;
};

type Props = {
  steps: Step[];
  currentStep: number;
};

export const Stepper = ({ steps, currentStep }: Props) => {
  return (
    <View style={styles.container}>
      <View style={styles.stepsWrapper}>
        {/* Background Line */}
        <View style={styles.lineBackground} />
        
        {/* Progress Line */}
        <View 
          style={[
            styles.lineProgress, 
            { width: `${((currentStep - 1) / (steps.length - 1)) * 100}%` }
          ]} 
        />

        {steps.map((step) => {
          const isActive = step.id === currentStep;
          const isCompleted = step.id < currentStep;

          return (
            <View key={step.id} style={styles.stepContainer}>
              <View
                style={[
                  styles.circle,
                  isActive && styles.circleActive,
                  isCompleted && styles.circleCompleted,
                ]}
              >
                <Text
                  style={[
                    styles.stepNumber,
                    isActive && styles.stepNumberActive,
                    isCompleted && styles.stepNumberCompleted,
                  ]}
                >
                  {isCompleted ? '✓' : step.id}
                </Text>
              </View>
              <Text
                style={[
                  styles.label,
                  isActive && styles.labelActive,
                  isCompleted && styles.labelCompleted,
                ]}
              >
                {step.label}
              </Text>
            </View>
          );
        })}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingVertical: 20,
    backgroundColor: colors.surface,
    borderRadius: radius.sm,
    marginBottom: 16,
    borderWidth: 1,
    borderColor: colors.border,
    ...shadows.soft,
  },
  stepsWrapper: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    justifyContent: 'space-between',
    paddingHorizontal: 20,
    position: 'relative',
  },
  stepContainer: {
    alignItems: 'center',
    width: 60, // Fixed width for each step container to keep spacing even
    zIndex: 1,
  },
  circle: {
    width: 30,
    height: 30,
    borderRadius: 15,
    backgroundColor: colors.surface,
    borderWidth: 2,
    borderColor: colors.borderStrong,
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 6,
  },
  circleActive: {
    borderColor: colors.primary,
    backgroundColor: colors.primary,
  },
  circleCompleted: {
    borderColor: colors.primary,
    backgroundColor: colors.primary,
  },
  stepNumber: {
    fontSize: 12,
    fontWeight: 'bold',
    color: colors.textSubtle,
  },
  stepNumberActive: {
    color: colors.textInverse,
  },
  stepNumberCompleted: {
    color: colors.textInverse,
  },
  label: {
    fontSize: 9,
    fontWeight: 'bold',
    color: colors.textSubtle,
    textTransform: 'uppercase',
    textAlign: 'center',
  },
  labelActive: {
    color: colors.primary,
  },
  labelCompleted: {
    color: colors.primary,
  },
  lineBackground: {
    position: 'absolute',
    top: 15, // Half of circle height (30/2)
    left: 50, // approx center of first circle (20 padding + 60/2)
    right: 50, // approx center of last circle
    height: 2,
    backgroundColor: colors.border,
    zIndex: 0,
  },
  lineProgress: {
    position: 'absolute',
    top: 15,
    left: 50,
    // Width is controlled by style prop
    height: 2,
    backgroundColor: colors.primary,
    zIndex: 0,
    maxWidth: '75%', // approx distance between first and last circle centers
  },
});
