import React from 'react';
import { View, StyleSheet, TouchableOpacity, ScrollView, Text } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { OnboardingColors, OnboardingFont } from '@/constants/OnboardingTheme';
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';

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

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

export function SelectionStep({ options, selectedIds, onToggle, onNext, onSkip }: SelectionStepProps) {
  const hasSelection = selectedIds.length > 0;
  const insets = useSafeAreaInsets();
  const footerBottom = insets.bottom + 16;
  const footerButtonHeight = 57;
  // 底部留白加大，避免最后一项与按钮边框视觉重叠
  const footerPaddingBottom = footerBottom + footerButtonHeight + 40;

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

      {/* 底部按钮：距离底部 12% 高度 */}
      <View style={[styles.footer, { bottom: footerBottom }]}>
        <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,
  },
  scroll: {
    flex: 1,
  },
  optionsList: {
    // paddingBottom 由安全区 + 按钮高度动态计算，避免选项被遮住
  },
  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',
    fontFamily: OnboardingFont.question,
    flex: 1,
  },
  iconWrapper: {
    marginLeft: 10,
  },
  footer: {
    position: 'absolute',
    left: 0,
    right: 0,
    alignItems: 'center',
  },
  footerRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 16,
  },
  skipBtn: {
    paddingVertical: 10,
    paddingHorizontal: 14,
    borderRadius: 12,
    backgroundColor: 'rgba(0,0,0,0.04)',
  },
  skipText: {
    fontSize: 16,
    color: OnboardingColors.textMuted,
  },
});