import { Modal, Text, TextInput, TouchableOpacity, View } from 'react-native';
import { useApp } from '../context/AppContext';
import styles from '../styles/index';
import { hexToRgb, rgbToHex } from '../utils/helpers';

export function ColorPickerModal() {
  const {
    colorPickerVisible,
    setColorPickerVisible,
    tempR,
    setTempR,
    tempG,
    setTempG,
    tempB,
    setTempB,
    updateMasterSetting,
    themeColor,
    masterSettings,
  } = useApp();

  return (
    <Modal visible={colorPickerVisible} transparent animationType="fade">
      <View style={styles.modalOverlay}>
        <View style={styles.modalContent}>
          <Text style={{ fontSize: 22, fontWeight: 'bold', marginBottom: 20, textAlign: 'center' }}>
            Choose Theme Color
          </Text>

          <View style={{ alignItems: 'center', marginBottom: 20 }}>
            <View
              style={[
                styles.colorPreview,
                { backgroundColor: rgbToHex(tempR, tempG, tempB), width: 100, height: 100, borderRadius: 50 },
              ]}
            />
          </View>

          {[
            ['R', tempR, setTempR],
            ['G', tempG, setTempG],
            ['B', tempB, setTempB],
          ].map(([label, value, setter]) => (
            <View key={label} style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 10 }}>
              <Text style={{ width: 20, fontWeight: 'bold' }}>{label}</Text>
              <TouchableOpacity
                onPress={() => setter(Math.max(0, value - 10))}
                style={{ padding: 10, backgroundColor: '#eee', borderRadius: 5, marginHorizontal: 5 }}
              >
                <Text>-</Text>
              </TouchableOpacity>
              <TextInput
                style={{ borderWidth: 1, borderColor: '#ccc', padding: 5, width: 60, textAlign: 'center' }}
                value={value.toString()}
                onChangeText={t => setter(Math.min(255, Math.max(0, parseInt(t) || 0)))}
                keyboardType="numeric"
              />
              <TouchableOpacity
                onPress={() => setter(Math.min(255, value + 10))}
                style={{ padding: 10, backgroundColor: '#eee', borderRadius: 5, marginHorizontal: 5 }}
              >
                <Text>+</Text>
              </TouchableOpacity>
            </View>
          ))}

          <TouchableOpacity
            style={[styles.packBtn, { backgroundColor: themeColor, marginTop: 10 }]}
            onPress={() => {
              const newColor = rgbToHex(tempR, tempG, tempB);
              updateMasterSetting('themeColor', newColor);
              setColorPickerVisible(false);
            }}
          >
            <Text style={{ color: '#fff', fontWeight: 'bold', fontSize: 16 }}>SAVE</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={[styles.packBtn, { backgroundColor: '#ccc', marginTop: 10 }]}
            onPress={() => setColorPickerVisible(false)}
          >
            <Text style={{ color: '#000', fontWeight: 'bold', fontSize: 16 }}>CANCEL</Text>
          </TouchableOpacity>
        </View>
      </View>
    </Modal>
  );
}
