import { View, StyleSheet, TouchableOpacity } from 'react-native';
import { ThemedText } from '@/components/themed-text';
import { useThemeColor } from '@/hooks/use-theme-color';
import { FormFieldSchema } from '@/lib/types/template-run';

interface ColorInputFieldProps {
  field: FormFieldSchema;
  value: string;
  onChange: (value: string) => void;
  error?: string;
}

const DEFAULT_COLORS = [
  '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7',
  '#DDA0DD', '#98D8C8', '#F7DC6F', '#BB8FCE', '#85C1E2',
  '#F8B739', '#52B788', '#F72585', '#7209B7', '#3A0CA3',
  '#000000', '#FFFFFF', '#808080', '#FF0000', '#00FF00'
];

export function ColorInputField({ field, value, onChange, error }: ColorInputFieldProps) {
  const borderColor = useThemeColor({}, 'border');
  const errorColor = useThemeColor({}, 'error');
  const backgroundColor = useThemeColor({}, 'background');

  const handleColorSelect = (color: string) => {
    onChange(color);
  };

  return (
    <View style={styles.container}>
      {field.label && (
        <ThemedText style={styles.label}>
          {field.label}
          {field.required && <ThemedText style={[styles.required, { color: errorColor }]}> *</ThemedText>}
        </ThemedText>
      )}

      {/* 当前选中的颜色 */}
      <View style={styles.currentColorContainer}>
        <ThemedText style={styles.currentColorLabel}>当前颜色:</ThemedText>
        <View style={styles.currentColorRow}>
          <View
            style={[
              styles.currentColorBox,
              { backgroundColor: value || '#000000' }
            ]}
          />
          <ThemedText style={styles.currentColorValue}>
            {value || '#000000'}
          </ThemedText>
        </View>
      </View>

      {/* 颜色选择器 */}
      <View style={[
        styles.colorPicker,
        {
          borderColor: error ? errorColor : borderColor,
          backgroundColor,
        }
      ]}>
        <View style={styles.colorGrid}>
          {DEFAULT_COLORS.map((color, index) => (
            <TouchableOpacity
              key={index}
              style={[
                styles.colorOption,
                {
                  backgroundColor: color,
                  borderWidth: value === color ? 3 : 1,
                  borderColor: value === color ? '#007AFF' : borderColor,
                }
              ]}
              onPress={() => handleColorSelect(color)}
              activeOpacity={0.8}
            />
          ))}
        </View>
      </View>

      {/* 自定义颜色输入 */}
      <TouchableOpacity
        style={[
          styles.customColorButton,
          {
            borderColor: error ? errorColor : borderColor,
            backgroundColor,
          }
        ]}
        onPress={() => {
          // 这里可以集成更高级的颜色选择器
          // 目前使用简单的颜色切换
          const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
          handleColorSelect(randomColor);
        }}
        activeOpacity={0.8}
      >
        <ThemedText style={styles.customColorText}>
          随机颜色
        </ThemedText>
      </TouchableOpacity>

      {field.description && (
        <ThemedText style={styles.description}>{field.description}</ThemedText>
      )}

      {error && (
        <ThemedText style={[styles.errorText, { color: errorColor }]}>
          {error}
        </ThemedText>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    marginBottom: 16,
  },
  label: {
    fontSize: 16,
    fontWeight: '600',
    marginBottom: 8,
  },
  required: {
    fontSize: 16,
    fontWeight: '600',
  },
  currentColorContainer: {
    marginBottom: 12,
  },
  currentColorLabel: {
    fontSize: 14,
    marginBottom: 4,
  },
  currentColorRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  currentColorBox: {
    width: 32,
    height: 32,
    borderRadius: 16,
    borderWidth: 1,
    borderColor: '#ddd',
  },
  currentColorValue: {
    fontSize: 14,
    fontFamily: 'monospace',
  },
  colorPicker: {
    borderWidth: 1,
    borderRadius: 8,
    padding: 12,
    marginBottom: 8,
  },
  colorGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 8,
  },
  colorOption: {
    width: 36,
    height: 36,
    borderRadius: 18,
    marginBottom: 4,
  },
  customColorButton: {
    borderWidth: 1,
    borderRadius: 8,
    paddingVertical: 8,
    paddingHorizontal: 12,
    alignItems: 'center',
    marginBottom: 8,
  },
  customColorText: {
    fontSize: 14,
  },
  description: {
    fontSize: 12,
    opacity: 0.7,
    marginTop: 4,
  },
  errorText: {
    fontSize: 12,
    marginTop: 4,
  },
});