import React, { useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { Reminder, REMINDER_OPTIONS } from '@/types';
import { useSettings } from '@/theme';
import { OptionPickerModal } from '@/components/OptionPickerModal';
import Svg, { Path, Circle } from 'react-native-svg';

interface ReminderSelectorProps {
  value: Reminder;
  onChange: (value: Reminder) => void;
  hasDueDate: boolean;
}

export function ReminderSelector({ value, onChange, hasDueDate }: ReminderSelectorProps) {
  const { theme } = useSettings();
  const [showPicker, setShowPicker] = useState(false);

  const selected = REMINDER_OPTIONS.find((o) => o.value === value) ?? REMINDER_OPTIONS[0];
  const disabled = !hasDueDate;

  return (
    <View style={styles.container}>
      <Text style={[styles.label, { color: theme.text }]}>Reminder</Text>
      <TouchableOpacity
        style={[
          styles.row,
          { backgroundColor: theme.card, borderColor: theme.borderStrong },
          value !== 'none' && { borderColor: theme.accent, backgroundColor: theme.accentSoft },
          disabled && { opacity: 0.5 },
        ]}
        onPress={() => setShowPicker(true)}
        disabled={disabled}
        activeOpacity={0.8}
      >
        <Svg width={20} height={20} viewBox="0 0 24 24">
          <Path
            d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.94 1.94 0 0 0 3.4 0"
            stroke={value !== 'none' ? theme.accent : theme.textMuted}
            strokeWidth={1.5}
            strokeLinecap="round"
            strokeLinejoin="round"
            fill="none"
          />
          <Circle cx={18.5} cy={5.5} r={3.5} fill={value !== 'none' ? theme.accent : 'transparent'} stroke={value !== 'none' ? theme.accent : theme.textMuted} strokeWidth={1.5} />
        </Svg>
        <Text
          style={[
            styles.valueText,
            { color: value !== 'none' ? theme.text : theme.textMuted },
            value !== 'none' && styles.valueTextFilled,
          ]}
        >
          {value !== 'none' ? selected.label : 'No reminder'}
        </Text>
        <View style={styles.chevron}>
          <Svg width={16} height={16} viewBox="0 0 24 24">
            <Path d="M9 18l6-6-6-6" stroke={theme.textMuted} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" fill="none" />
          </Svg>
        </View>
      </TouchableOpacity>
      {!hasDueDate && (
        <Text style={[styles.hint, { color: theme.textMuted }]}>Set a due date to add a reminder.</Text>
      )}

      <OptionPickerModal
        visible={showPicker}
        title="Reminder"
        options={REMINDER_OPTIONS.map((o) => ({ value: o.value, label: o.label }))}
        selectedValue={value}
        onSelect={(v) => onChange(v as Reminder)}
        onClose={() => setShowPicker(false)}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    gap: 8,
  },
  label: {
    fontSize: 14,
    fontWeight: '600',
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 10,
    paddingVertical: 12,
    paddingHorizontal: 14,
    borderRadius: 12,
    borderWidth: 1,
  },
  valueText: {
    flex: 1,
    fontSize: 15,
  },
  valueTextFilled: {
    fontWeight: '500',
  },
  chevron: {
    transform: [{ rotate: '-90deg' }],
  },
  hint: {
    fontSize: 12,
    marginLeft: 4,
  },
});
