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

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

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

  const selectedReminders = parseReminders(value);
  const disabled = !hasDueDate;

  const reminderLabels = selectedReminders.length > 0
    ? selectedReminders.map(r => REMINDER_OPTIONS.find(o => o.value === r)?.label).filter(Boolean).join(', ')
    : 'No reminder';

  return (
    <View style={styles.container}>
      <Text style={[styles.label, { color: theme.text }]}>Reminders</Text>
      <TouchableOpacity
        style={[
          styles.row,
          { backgroundColor: theme.card, borderColor: theme.borderStrong },
          selectedReminders.length > 0 && { borderColor: theme.accent, backgroundColor: theme.accentSoft },
          disabled && { opacity: 0.5 },
        ]}
        onPress={() => setShowPicker(true)}
        disabled={disabled}
        activeOpacity={0.8}
        accessibilityRole="button"
        accessibilityLabel="Reminders"
        accessibilityHint="Opens a list of reminder options"
        accessibilityState={{ disabled }}
      >
        <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={selectedReminders.length > 0 ? theme.accentText : theme.textSecondary}
            strokeWidth={1.8}
            strokeLinecap="round"
            strokeLinejoin="round"
            fill="none"
          />
          <Circle cx={18.5} cy={5.5} r={3.5} fill={selectedReminders.length > 0 ? theme.accent : 'transparent'} stroke={selectedReminders.length > 0 ? theme.accentText : theme.textSecondary} strokeWidth={1.8} />
        </Svg>
        <Text
          style={[
            styles.valueText,
            { color: selectedReminders.length > 0 ? theme.text : theme.textMuted },
            selectedReminders.length > 0 && styles.valueTextFilled,
          ]}
        >
          {reminderLabels}
        </Text>
        <View style={styles.chevron}>
          <Svg width={16} height={16} viewBox="0 0 24 24">
            <Path d="M9 18l6-6-6-6" stroke={theme.textSecondary} strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" fill="none" />
          </Svg>
        </View>
      </TouchableOpacity>
      {!hasDueDate && (
        <Text style={[styles.hint, { color: theme.textMuted }]}>Set a due date to add reminders.</Text>
      )}

      <OptionPickerModal
        visible={showPicker}
        title="Reminders"
        options={REMINDER_OPTIONS.filter((o) => o.value !== 'none').map((o) => ({ value: o.value, label: o.label }))}
        selectedValue={selectedReminders}
        onSelect={(v) => onChange(toRemindersString(v as Reminder[]))}
        onClose={() => setShowPicker(false)}
        multiSelect
      />
    </View>
  );
}

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