import React from 'react';
import { StyleSheet, View, TouchableOpacity, Text, Dimensions, Vibration, Platform } from 'react-native';
import { Delete } from 'lucide-react-native';
import { useTheme } from '@/context/ThemeContext';

interface CustomKeyboardProps {
  onKeyPress: (key: string) => void;
  value: string;
  isSmallScreen?: boolean;
}

export default function CustomKeyboard({ onKeyPress, value, isSmallScreen = false }: CustomKeyboardProps) {
  const { colors, theme } = useTheme();
  
  const handleKeyPress = (key: string) => {
    // Provide haptic feedback on native platforms
    if (Platform.OS !== 'web') {
      try {
        Vibration.vibrate(10);
      } catch (error) {
        console.error("Vibration error:", error);
      }
    }
    
    onKeyPress(key);
  };
  
  const renderKey = (key: string) => {
    const isDeleteKey = key === 'delete';
    
    return (
      <TouchableOpacity
        key={key}
        style={[
          styles.key,
          {
            backgroundColor: theme === 'dark' 
              ? isDeleteKey ? 'rgba(231, 76, 60, 0.1)' : 'rgba(0, 0, 0, 0.3)' 
              : isDeleteKey ? 'rgba(231, 76, 60, 0.1)' : 'rgba(0, 0, 0, 0.05)',
            height: isSmallScreen ? 45 : 50,
          }
        ]}
        onPress={() => handleKeyPress(key)}
        activeOpacity={0.7}
      >
        {isDeleteKey ? (
          <Delete size={isSmallScreen ? 18 : 22} color={colors.error} />
        ) : (
          <Text style={[
            styles.keyText, 
            { 
              color: colors.text,
              fontSize: isSmallScreen ? 18 : 22,
            }
          ]}>
            {key}
          </Text>
        )}
      </TouchableOpacity>
    );
  };

  return (
    <View style={styles.keyboard}>
      <View style={styles.row}>
        {['1', '2', '3'].map(renderKey)}
      </View>
      <View style={styles.row}>
        {['4', '5', '6'].map(renderKey)}
      </View>
      <View style={styles.row}>
        {['7', '8', '9'].map(renderKey)}
      </View>
      <View style={styles.row}>
        {['.', '0', 'delete'].map(renderKey)}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  keyboard: {
    width: '100%',
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 8,
  },
  key: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 10,
    marginHorizontal: 4,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
    elevation: 2,
  },
  keyText: {
    fontWeight: '600',
  },
});