import React from 'react';
import { View, Text, StyleSheet, Modal, TouchableOpacity, FlatList } from 'react-native';
import { useSettings } from '@/theme';
import Svg, { Path, Circle } from 'react-native-svg';

export interface PickerOption {
  value: string;
  label: string;
  color?: string;
}

interface OptionPickerModalProps {
  visible: boolean;
  title: string;
  options: PickerOption[];
  selectedValue?: string | string[];
  onSelect: (value: string | string[]) => void;
  onClose: () => void;
  multiSelect?: boolean;
}

export function OptionPickerModal({ visible, title, options, selectedValue, onSelect, onClose, multiSelect = false }: OptionPickerModalProps) {
  const { theme } = useSettings();

  const selectedValues = Array.isArray(selectedValue) ? selectedValue : selectedValue == null ? [] : [selectedValue];

  return (
    <Modal visible={visible} transparent animationType="fade" onRequestClose={onClose}>
      <View style={[styles.overlay, { backgroundColor: theme.overlay }]}>
        <View style={[styles.sheet, { backgroundColor: theme.sheetBg }]}>
          <Text style={[styles.title, { color: theme.text }]}>{title}</Text>
          <FlatList
            data={options}
            keyExtractor={(item) => item.value}
            renderItem={({ item }) => {
              const selected = selectedValues.includes(item.value);
              return (
                <TouchableOpacity
                  style={[
                    styles.option,
                    { borderColor: selected ? theme.accent : theme.borderStrong },
                    selected && { backgroundColor: theme.accentSoft },
                  ]}
                  onPress={() => {
                    if (multiSelect) {
                      const newValues = selected
                        ? selectedValues.filter((v) => v !== item.value)
                        : [...selectedValues, item.value];
                      onSelect(newValues);
                    } else {
                      onSelect(item.value);
                      onClose();
                    }
                  }}
                  activeOpacity={0.7}
                  accessibilityRole={multiSelect ? 'checkbox' : 'button'}
                  accessibilityLabel={item.label}
                  accessibilityState={multiSelect ? { checked: selected } : { selected }}
                >
                  {item.color && (
                    <View style={[styles.dot, { backgroundColor: item.color }]} />
                  )}
                  <Text style={[styles.optionText, { color: selected ? theme.accent : theme.textSecondary }]}>
                    {item.label}
                  </Text>
                  {multiSelect ? (
                    <Svg width={22} height={22} viewBox="0 0 24 24">
                      <Circle cx={12} cy={12} r={10} stroke={selected ? theme.accent : theme.borderStrong} strokeWidth={2} fill={selected ? theme.accent : 'transparent'} />
                      {selected && (
                        <Path d="M8 12l3 3 6-6" stroke="#FFFFFF" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" fill="none" />
                      )}
                    </Svg>
                  ) : selected && (
                    <Svg width={18} height={18} viewBox="0 0 24 24">
                      <Path d="M5 12l5 5 9-10" stroke={theme.accent} strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" fill="none" />
                    </Svg>
                  )}
                </TouchableOpacity>
              );
            }}
            ItemSeparatorComponent={() => <View style={{ height: 8 }} />}
            ListFooterComponent={
              <TouchableOpacity
                style={[styles.cancelButton, { borderColor: theme.borderStrong }]}
                onPress={onClose}
                activeOpacity={0.7}
                accessibilityRole="button"
                accessibilityLabel="Cancel"
              >
                <Text style={[styles.cancelText, { color: theme.textSecondary }]}>Cancel</Text>
              </TouchableOpacity>
            }
            contentContainerStyle={styles.listContent}
          />
        </View>
      </View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    justifyContent: 'flex-end',
  },
  sheet: {
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    paddingTop: 16,
    paddingBottom: 32,
    maxHeight: '75%',
  },
  title: {
    fontSize: 16,
    fontWeight: '700',
    textAlign: 'center',
    marginBottom: 16,
  },
  listContent: {
    paddingHorizontal: 16,
  },
  option: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
    paddingHorizontal: 16,
    paddingVertical: 14,
    borderRadius: 12,
    borderWidth: 1,
  },
  dot: {
    width: 14,
    height: 14,
    borderRadius: 7,
  },
  optionText: {
    fontSize: 15,
    fontWeight: '500',
    flex: 1,
  },
  cancelButton: {
    marginTop: 12,
    paddingVertical: 14,
    borderRadius: 12,
    borderWidth: 1,
    alignItems: 'center',
  },
  cancelText: {
    fontSize: 15,
    fontWeight: '600',
  },
});
