import React, { useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, ScrollView, Modal, Pressable, KeyboardAvoidingView } from 'react-native';
import { useCategories } from '@/hooks/useDatabase';
import { useSettings } from '@/theme';

interface CategorySelectorProps {
  value: string;
  onChange: (value: string) => void;
  error?: string;
}

export function CategorySelector({ value, onChange, error }: CategorySelectorProps) {
  const categories = useCategories();
  const { theme } = useSettings();
  const [showModal, setShowModal] = useState(false);

  const selectedCategory = categories.find(c => c.id === value);

  return (
    <View style={styles.container}>
      <Text style={[styles.label, { color: theme.text }]}>Category</Text>
      <TouchableOpacity
        style={[
          styles.selectorButton,
          { backgroundColor: theme.inputBg, borderColor: theme.borderStrong },
        ]}
        onPress={() => setShowModal(true)}
        activeOpacity={0.8}
        accessibilityRole="button"
        accessibilityLabel="Select category"
        accessibilityHint="Opens a list of categories to choose from"
      >
        <View style={styles.selectorContent}>
<View style={styles.selectorRow}>
          <View style={[styles.colorCircle, { backgroundColor: selectedCategory?.color || '#9E9E9E' }]} />
          <Text style={[styles.selectorValue, { color: theme.text }]}>{selectedCategory?.name || 'None'}</Text>
        </View>
        </View>
        <Svg width={20} height={20} viewBox="0 0 24 24">
          <Path d="M9 18l6-6-6-6" stroke={theme.textMuted} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" fill="none" />
        </Svg>
      </TouchableOpacity>
      {error && <Text style={[styles.errorText, { color: '#E53935' }]}>{error}</Text>}

      <Modal visible={showModal} transparent animationType="fade" onRequestClose={() => setShowModal(false)}>
        <KeyboardAvoidingView
          style={[styles.modalOverlay, { backgroundColor: 'rgba(0,0,0,0.5)' }]}
          behavior="padding"
        >
          <Pressable style={styles.modalOverlay} onPress={() => setShowModal(false)}>
            <Pressable style={[styles.modalSheet, { backgroundColor: theme.sheetBg }]}>
              <View style={styles.modalHeader}>
                <Text style={[styles.modalTitle, { color: theme.text }]}>Select Category</Text>
                <TouchableOpacity onPress={() => setShowModal(false)} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }} accessibilityRole="button" accessibilityLabel="Close category picker">
                  <Text style={[styles.closeText, { color: theme.textMuted }]}>✕</Text>
                </TouchableOpacity>
              </View>
              <ScrollView contentContainerStyle={styles.modalContent}>
                <TouchableOpacity
                  style={[
                    styles.modalOption,
                    { backgroundColor: theme.card, borderColor: theme.borderStrong },
                    !value && { borderColor: theme.accent, backgroundColor: theme.accentSoft, borderWidth: 2 },
                  ]}
                  onPress={() => { onChange(''); setShowModal(false); }}
                  activeOpacity={0.8}
                  accessibilityRole="radio"
                  accessibilityLabel="No category"
                  accessibilityState={{ selected: !value }}
                >
                  <View style={[styles.colorCircle, { backgroundColor: '#9E9E9E' }, !value && styles.colorCircleSelected]} />
                  <Text style={[
                    styles.categoryName,
                    { color: theme.textSecondary },
                    !value && { color: theme.accent, fontWeight: '600' },
                  ]}>
                    None
                  </Text>
                  {!value && (
                    <Svg width={20} height={20} 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>
                {categories.map((category) => (
                  <TouchableOpacity
                    key={category.id}
                    style={[
                      styles.modalOption,
                      { backgroundColor: theme.card, borderColor: theme.borderStrong },
                      value === category.id && { borderColor: theme.accent, backgroundColor: theme.accentSoft, borderWidth: 2 },
                    ]}
                    onPress={() => { onChange(category.id); setShowModal(false); }}
                    activeOpacity={0.8}
                    accessibilityRole="radio"
                    accessibilityLabel={`Category ${category.name}`}
                    accessibilityState={{ selected: value === category.id }}
                  >
                    <View style={[styles.colorCircle, { backgroundColor: category.color }, value === category.id && styles.colorCircleSelected]} />
                    <Text style={[
                      styles.categoryName,
                      { color: theme.textSecondary },
                      value === category.id && { color: theme.accent, fontWeight: '600' },
                    ]}>
                      {category.name}
                    </Text>
                    {value === category.id && (
                      <Svg width={20} height={20} 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>
                ))}
              </ScrollView>
            </Pressable>
          </Pressable>
        </KeyboardAvoidingView>
      </Modal>
    </View>
  );
}

import Svg, { Path } from 'react-native-svg';

const styles = StyleSheet.create({
  container: {
    gap: 6,
  },
  label: {
    fontSize: 14,
    fontWeight: '600',
  },
  selectorButton: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingVertical: 14,
    paddingHorizontal: 12,
    borderRadius: 12,
    borderWidth: 1,
    minHeight: 52,
  },
  selectorContent: {
    flex: 1,
  },
  selectorRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 10,
  },
  colorCircle: {
    width: 12,
    height: 12,
    borderRadius: 6,
  },
  colorCircleSelected: {
    width: 14,
    height: 14,
    borderRadius: 7,
  },
  selectorValue: {
    fontSize: 15,
    fontWeight: '500',
  },
  errorText: {
    fontSize: 12,
    marginLeft: 4,
  },
  modalOverlay: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 24,
  },
  modalSheet: {
    width: '100%',
    maxWidth: 400,
    borderRadius: 20,
    overflow: 'hidden',
    maxHeight: '80%',
  },
  modalHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: 20,
    borderBottomWidth: 1,
  },
  modalTitle: {
    fontSize: 18,
    fontWeight: '700',
  },
  closeText: {
    fontSize: 22,
    fontWeight: '300',
  },
  modalContent: {
    padding: 12,
    gap: 8,
  },
  modalOption: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    gap: 12,
    paddingVertical: 14,
    paddingHorizontal: 16,
    borderRadius: 12,
    borderWidth: 1,
  },
  categoryName: {
    fontSize: 15,
    fontWeight: '500',
    flex: 1,
  },
});