/**
 * 步骤指示器组件 - 极简扁平设计
 * 与下方表单风格统一
 */

import React from 'react';
import { View, Text, StyleSheet, ViewStyle } from 'react-native';
import { useAppColors, type AppColors } from '../../theme';

export interface Step {
  id: number;
  title: string;
}

export interface StepIndicatorProps {
  steps: Step[];
  currentStep: number;
  containerStyle?: ViewStyle;
}

export const StepIndicator: React.FC<StepIndicatorProps> = ({
  steps,
  currentStep,
  containerStyle,
}) => {
  const colors = useAppColors();
  const styles = createStyles(colors);

  return (
    <View style={[styles.container, containerStyle]}>
      {steps.map((step, index) => {
        const isCompleted = index < currentStep;
        const isCurrent = index === currentStep;
        const isPending = index > currentStep;
        const isLast = index === steps.length - 1;

        return (
          <React.Fragment key={step.id}>
            <View style={styles.stepWrapper}>
              {/* 步骤编号/状态 */}
              <View
                style={[
                  styles.stepBadge,
                  isCompleted && styles.stepBadgeCompleted,
                  isCurrent && styles.stepBadgeCurrent,
                  isPending && styles.stepBadgePending,
                ]}
              >
                <Text
                  style={[
                    styles.stepBadgeText,
                    isCompleted && styles.stepBadgeTextCompleted,
                    isCurrent && styles.stepBadgeTextCurrent,
                    isPending && styles.stepBadgeTextPending,
                  ]}
                >
                  {isCompleted ? '✓' : index + 1}
                </Text>
              </View>

              {/* 步骤标题 */}
              <Text
                style={[
                  styles.stepTitle,
                  isCompleted && styles.stepTitleCompleted,
                  isCurrent && styles.stepTitleCurrent,
                  isPending && styles.stepTitlePending,
                ]}
              >
                {step.title}
              </Text>
            </View>

            {/* 连接线 */}
            {!isLast && (
              <View style={styles.connector}>
                <View
                  style={[
                    styles.connectorLine,
                    isCompleted && styles.connectorLineCompleted,
                  ]}
                />
              </View>
            )}
          </React.Fragment>
        );
      })}
    </View>
  );
};

// 注册流程专用步骤指示器
export const RegisterStepIndicator: React.FC<{
  currentStep: number;
  containerStyle?: ViewStyle;
}> = ({ currentStep, containerStyle }) => {
  const steps: Step[] = [
    { id: 0, title: '输入邮箱' },
    { id: 1, title: '验证码' },
    { id: 2, title: '设置信息' },
  ];

  return (
    <StepIndicator
      steps={steps}
      currentStep={currentStep}
      containerStyle={containerStyle}
    />
  );
};

function createStyles(colors: AppColors) {
  return StyleSheet.create({
    container: {
      width: '100%',
      flexDirection: 'row',
      alignItems: 'flex-start',
      justifyContent: 'center',
      paddingHorizontal: 16,
      paddingVertical: 8,
    },
    stepWrapper: {
      alignItems: 'center',
      minWidth: 80,
    },
    // 步骤徽章
    stepBadge: {
      width: 28,
      height: 28,
      borderRadius: 14,
      backgroundColor: '#F5F5F7',
      justifyContent: 'center',
      alignItems: 'center',
      borderWidth: 0,
    },
    stepBadgeCompleted: {
      backgroundColor: '#FF6B35',
    },
    stepBadgeCurrent: {
      backgroundColor: '#FFFFFF',
      borderWidth: 2,
      borderColor: '#FF6B35',
    },
    stepBadgePending: {
      backgroundColor: '#F5F5F7',
    },
    stepBadgeText: {
      fontSize: 13,
      fontWeight: '600',
      color: '#999',
    },
    stepBadgeTextCompleted: {
      color: '#FFFFFF',
      fontSize: 14,
    },
    stepBadgeTextCurrent: {
      color: '#FF6B35',
    },
    stepBadgeTextPending: {
      color: '#BBB',
    },
    // 步骤标题
    stepTitle: {
      marginTop: 8,
      fontSize: 12,
      color: '#999',
      fontWeight: '500',
      textAlign: 'center',
    },
    stepTitleCompleted: {
      color: '#FF6B35',
      fontWeight: '600',
    },
    stepTitleCurrent: {
      color: '#333',
      fontWeight: '600',
    },
    stepTitlePending: {
      color: '#BBB',
    },
    // 连接线
    connector: {
      width: 60,
      height: 28,
      justifyContent: 'center',
      alignItems: 'center',
    },
    connectorLine: {
      width: '100%',
      height: 2,
      backgroundColor: '#E5E5E5',
      borderRadius: 1,
    },
    connectorLineCompleted: {
      backgroundColor: '#FF6B35',
    },
  });
}

export default StepIndicator;
