import React from "react";
import { View } from "react-native";
import { Button } from "~/components/ui/button";
import { Text } from "~/components/ui/text";
import { LucideChevronLeft } from "lucide-react-native";

// Number Button Component
interface NumberButtonProps {
  value: string;
  onPress: (value: string) => void;
  variant?: "default" | "special";
  icon?: React.ReactNode;
  size?: "default" | "small";
}

export const NumberButton = ({
  value,
  onPress,
  variant = "default",
  icon,
  size = "default",
}: NumberButtonProps) => {
  const sizeClasses = size === "small" ? "w-20 h-14 mx-2" : "w-24 h-18 mx-2";
  const textSize = size === "small" ? "text-xl" : "text-3xl";
  const baseClasses = `rounded-3xl ${sizeClasses} flex items-center justify-center active:scale-95 bg-[#111111]`;

  return (
    <Button
      className={`${baseClasses}`}
      onPress={() => onPress(value)}
      onLongPress={variant === "special" ? () => onPress("clear") : undefined}
    >
      {icon ? (
        icon
      ) : (
        <Text className={`${textSize} font-dmsans-medium text-white`}>
          {value}
        </Text>
      )}
    </Button>
  );
};

// Number Pad Component
interface NumberPadProps {
  onNumberPress: (value: string) => void;
  showDecimal?: boolean;
}

export const NumberPad: React.FC<NumberPadProps> = ({
  onNumberPress,
  showDecimal = true,
}) => {
  return (
    <View className="w-full space-y-3 items-center">
      {/* Row 1: 1, 2, 3 */}
      <View className="flex flex-row justify-center">
        <NumberButton value="1" onPress={onNumberPress} size="small" />
        <NumberButton value="2" onPress={onNumberPress} size="small" />
        <NumberButton value="3" onPress={onNumberPress} size="small" />
      </View>

      {/* Row 2: 4, 5, 6 */}
      <View className="flex flex-row justify-center">
        <NumberButton value="4" onPress={onNumberPress} size="small" />
        <NumberButton value="5" onPress={onNumberPress} size="small" />
        <NumberButton value="6" onPress={onNumberPress} size="small" />
      </View>

      {/* Row 3: 7, 8, 9 */}
      <View className="flex flex-row justify-center">
        <NumberButton value="7" onPress={onNumberPress} size="small" />
        <NumberButton value="8" onPress={onNumberPress} size="small" />
        <NumberButton value="9" onPress={onNumberPress} size="small" />
      </View>

      {/* Row 4: decimal/empty, 0, backspace */}
      <View className="flex flex-row justify-center">
        {showDecimal ? (
          <NumberButton value="." onPress={onNumberPress} size="small" />
        ) : (
          <View className="w-16 h-12 mx-2" /> /* Empty space */
        )}
        <NumberButton value="0" onPress={onNumberPress} size="small" />
        <NumberButton
          value="backspace"
          onPress={onNumberPress}
          variant="special"
          size="small"
          icon={<LucideChevronLeft size={24} />}
        />
      </View>
    </View>
  );
};

// Smaller Number Pad for PIN (with smaller buttons)
export const PinNumberPad: React.FC<{
  onNumberPress: (value: string) => void;
}> = ({ onNumberPress }) => {
  const baseKeyClasses =
    "flex-1 h-14 rounded-3xl bg-[#111111] items-center justify-center";

  const renderNumberKey = (label: string) => (
    <Button
      key={label}
      className={baseKeyClasses}
      onPress={() => onNumberPress(label)}
    >
      <Text className="text-2xl font-dmsans-medium text-white">{label}</Text>
    </Button>
  );

  return (
    <View className="w-full px-8 space-y-4">
      {/* Row 1: 1, 2, 3 */}
      <View className="flex flex-row space-x-4">
        {renderNumberKey("1")}
        {renderNumberKey("2")}
        {renderNumberKey("3")}
      </View>

      {/* Row 2: 4, 5, 6 */}
      <View className="flex flex-row space-x-4">
        {renderNumberKey("4")}
        {renderNumberKey("5")}
        {renderNumberKey("6")}
      </View>

      {/* Row 3: 7, 8, 9 */}
      <View className="flex flex-row space-x-4">
        {renderNumberKey("7")}
        {renderNumberKey("8")}
        {renderNumberKey("9")}
      </View>

      {/* Row 4: empty, 0, backspace */}
      <View className="flex flex-row space-x-4">
        <View className="flex-1" />

        <Button className={baseKeyClasses} onPress={() => onNumberPress("0")}>
          <Text className="text-2xl font-dmsans-medium text-white">0</Text>
        </Button>

        <Button
          className={baseKeyClasses}
          onPress={() => onNumberPress("backspace")}
          onLongPress={() => onNumberPress("clear")}
        >
          <LucideChevronLeft size={24} color="white" />
        </Button>
      </View>
    </View>
  );
};