import React from "react";
import { View, Pressable, useColorScheme, useWindowDimensions } from "react-native";
import { Text } from "@/components/ui/text";
import { ChevronLeft } from "@/lib/icons";

interface KeypadProps {
  onPress: (value: string) => void;
  onDelete: () => void;
  disabled?: boolean;
}

const GAP = 10;
const H_PADDING = 16;

export function Keypad({ onPress, onDelete, disabled }: KeypadProps) {
  const { width: screenWidth } = useWindowDimensions();
  const isDark = useColorScheme() === "dark";
  const keyBg = isDark ? "rgba(255,255,255,0.12)" : "#F4F0EE";
  const iconColor = isDark ? "#f1f5f9" : "#251615";
  const keyW = (screenWidth - H_PADDING * 2 - GAP * 2) / 3;

  const renderNumKey = (label: string) => (
    <Pressable
      key={label}
      onPress={() => onPress(label)}
      disabled={disabled}
      className="items-center justify-center active:opacity-60"
      style={{ width: keyW, height: 55, borderRadius: 10, backgroundColor: keyBg }}
    >
      <Text className="text-foreground text-xl font-sans-bold">{label}</Text>
    </Pressable>
  );

  return (
    <View className="items-center pb-4" style={{ paddingHorizontal: H_PADDING }}>
      <View className="flex-row justify-center" style={{ gap: GAP }}>
        {renderNumKey("1")}
        {renderNumKey("2")}
        {renderNumKey("3")}
      </View>
      <View className="flex-row justify-center mt-3" style={{ gap: GAP }}>
        {renderNumKey("4")}
        {renderNumKey("5")}
        {renderNumKey("6")}
      </View>
      <View className="flex-row justify-center mt-3" style={{ gap: GAP }}>
        {renderNumKey("7")}
        {renderNumKey("8")}
        {renderNumKey("9")}
      </View>
      <View className="flex-row justify-center mt-3" style={{ gap: GAP }}>
        <View style={{ width: keyW, height: 55 }} />
        <Pressable
          onPress={() => onPress("0")}
          disabled={disabled}
          className="items-center justify-center active:opacity-60"
          style={{ width: keyW, height: 55, borderRadius: 10, backgroundColor: keyBg }}
        >
          <Text className="text-foreground text-xl font-sans-bold">0</Text>
        </Pressable>
        <Pressable
          onPress={onDelete}
          disabled={disabled}
          className="items-center justify-center active:opacity-60"
          style={{ width: keyW, height: 55, borderRadius: 10, backgroundColor: keyBg }}
        >
          <ChevronLeft size={24} color={iconColor} strokeWidth={2} />
        </Pressable>
      </View>
    </View>
  );
}