import React from 'react';
import { View, StyleSheet, TouchableOpacity, Text, Platform } from 'react-native';
import { useTranslation } from 'react-i18next';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { OnboardingColors } from '@/constants/OnboardingTheme';
import AddIcon from '@/assets/images/icon/add_icon.svg';
import ReduceIcon from '@/assets/images/icon/reduce_icon.svg';
import BtnClicked from '@/assets/images/icon/btn_clicked.svg';

interface ReminderStepProps {
  value: number;
  onChange: (value: number) => void;
  onFinish: () => void;
  onSkip?: () => void;
}

export function ReminderStep({ value, onChange, onFinish }: ReminderStepProps) {
  const { t } = useTranslation();
  const insets = useSafeAreaInsets();

  const handleReduce = () => {
    // 允许 0～5；0 表示关闭每日提醒
    if (value > 0) onChange(value - 1);
  };

  const handleAdd = () => {
    if (value < 5) onChange(value + 1);
  };

  return (
    <View style={styles.container}>
      <View style={styles.counterContainer}>
        <TouchableOpacity onPress={handleReduce} activeOpacity={0.7}>
          <ReduceIcon width={47} height={47} />
        </TouchableOpacity>

        <View style={styles.numberWrapper}>
          <Text style={styles.numberText}>{value}</Text>
          <Text style={styles.unitText}>{t('dailyReminder.timesUnit')}</Text>
        </View>

        <TouchableOpacity onPress={handleAdd} activeOpacity={0.7}>
          <AddIcon width={47} height={47} />
        </TouchableOpacity>
      </View>

      <View style={[styles.footer, { bottom: insets.bottom + 16 }]}>
        <TouchableOpacity onPress={onFinish} activeOpacity={0.8}>
          <BtnClicked width={87} height={57} />
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    paddingTop: 20,
  },
  counterContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    width: '100%',
    marginTop: 40,
  },
  numberWrapper: {
    flexDirection: 'row',
    alignItems: 'flex-end',
    marginHorizontal: 40,
  },
  numberText: {
    fontSize: 107,
    fontFamily: Platform.OS === 'ios' ? 'STIX Two Text' : 'serif',
    fontWeight: '600',
    color: OnboardingColors.textPrimary,
    lineHeight: 120,
  },
  unitText: {
    fontSize: 17,
    fontFamily: Platform.OS === 'ios' ? 'STIX Two Text' : 'serif',
    fontWeight: '600',
    color: OnboardingColors.textPrimary,
    marginBottom: 20,
    marginLeft: 4,
  },
  footer: {
    position: 'absolute',
    alignItems: 'center',
  },
});