import React from 'react';
import { View, StyleSheet, TouchableOpacity, ScrollView, Dimensions } from 'react-native';
import { OnboardingColors } from '@/constants/OnboardingTheme';
import { SerifText } from './SerifText';
import SelectedIcon from '@/assets/images/icon/selected_icon.svg';
import BtnNotClicked from '@/assets/images/icon/btn_Notclicked.svg';
import BtnClicked from '@/assets/images/icon/btn_clicked.svg';

const { height } = Dimensions.get('window');

interface Option {
  id: string;
  label: string;
}

interface SelectionStepProps {
  options: Option[];
  selectedIds: string[];
  onToggle: (id: string) => void;
  onNext: () => void;
}

export function SelectionStep({ options, selectedIds, onToggle, onNext }: SelectionStepProps) {
  const hasSelection = selectedIds.length > 0;

  return (
    <View style={styles.container}>
      <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.optionsList}>
        {options.map((option) => {
          const isSelected = selectedIds.includes(option.id);
          return (
            <TouchableOpacity
              key={option.id}
              style={styles.optionCard}
              onPress={() => onToggle(option.id)}
              activeOpacity={0.7}
            >
              <SerifText style={styles.optionText}>{option.label}</SerifText>
              {isSelected && (
                <View style={styles.iconWrapper}>
                  <SelectedIcon width={20} height={20} />
                </View>
              )}
            </TouchableOpacity>
          );
        })}
      </ScrollView>

      {/* 底部按钮：距离底部 12% 高度 */}
      <View style={styles.footer}>
        <TouchableOpacity 
          onPress={onNext} 
          disabled={!hasSelection}
          activeOpacity={0.8}
        >
          {hasSelection ? <BtnClicked width={87} height={57} /> : <BtnNotClicked width={87} height={57} />}
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 20,
  },
  optionsList: {
    paddingBottom: 150, // 为底部按钮留出空间
  },
  optionCard: {
    width: '100%',
    height: 75,
    backgroundColor: OnboardingColors.cardBackground,
    borderRadius: 20,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 24,
    marginBottom: 12,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.05,
    shadowRadius: 10,
    elevation: 2,
  },
  optionText: {
    fontSize: 18,
    color: OnboardingColors.textPrimary,
    fontWeight: '500',
    flex: 1,
  },
  iconWrapper: {
    marginLeft: 10,
  },
  footer: {
    position: 'absolute',
    bottom: height * 0.12,
    left: 0,
    right: 0,
    alignItems: 'center',
  }
});