import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { useSettings } from '@/theme';

interface ColorPickerInputProps {
  value: string;
  onChange: (color: string) => void;
}

const HEX_PATTERN = /^#[0-9a-fA-F]{6}$/;

export default function WebColorPickerInput({ value, onChange }: ColorPickerInputProps) {
  const { theme } = useSettings();
  const valid = HEX_PATTERN.test(value);
  const normalized = valid ? value.toUpperCase() : '#000000';

  return (
    <View style={styles.row}>
      {React.createElement('input', {
        type: 'color',
        value: normalized,
        onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
          if (HEX_PATTERN.test(e.target.value)) {
            onChange(e.target.value.toUpperCase());
          }
        },
        style: {
          width: 44,
          height: 44,
          padding: 0,
          border: `1px solid ${theme.borderStrong}`,
          borderRadius: 12,
          backgroundColor: 'transparent',
          cursor: 'pointer',
        },
      })}
      <Text style={[styles.hexText, { color: theme.textSecondary }]}>{normalized}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
  },
  hexText: {
    fontSize: 15,
    fontWeight: '500',
  },
});
