import React from "react";
import { Modal, Pressable, View, Dimensions, ScrollView } from "react-native";
import { Text } from "./ui/text";
import { ScanLine, X, Edit } from "@/lib/icons";
import { useColorScheme } from "nativewind";

const { height: SCREEN_HEIGHT } = Dimensions.get("window");

interface CreateMethodSheetProps {
  visible: boolean;
  onClose: () => void;
  onSelectScan: () => void;
  onSelectManual: () => void;
  title?: string;
}

export function CreateMethodSheet({
  visible,
  onClose,
  onSelectScan,
  onSelectManual,
  title = "Create",
}: CreateMethodSheetProps) {
  const { colorScheme } = useColorScheme();
  const isDark = colorScheme === "dark";

  return (
    <Modal
      visible={visible}
      transparent
      animationType="slide"
      onRequestClose={onClose}
    >
      <Pressable className="flex-1 bg-black/40" onPress={onClose}>
        <View className="flex-1 justify-end">
          <Pressable
            className="bg-card rounded-t-[36px] overflow-hidden border-t-[3px] border-border/20"
            style={{ maxHeight: SCREEN_HEIGHT * 0.5 }}
            onPress={(e) => e.stopPropagation()}
          >
            <View className="px-6 pb-4 pt-4 flex-row justify-between items-center">
              <View className="w-10" />
              <Text className="text-foreground font-sans-bold text-[18px]">
                {title}
              </Text>
              <Pressable
                onPress={onClose}
                className="h-8 w-8 bg-secondary/80 rounded-full items-center justify-center border border-border/10"
              >
                <X
                  size={14}
                  color={isDark ? "#f1f5f9" : "#0f172a"}
                  strokeWidth={2.5}
                />
              </Pressable>
            </View>

            <ScrollView
              className="px-5"
              showsVerticalScrollIndicator={false}
              contentContainerStyle={{ paddingBottom: 40 }}
            >
              <Pressable
                onPress={onSelectScan}
                className="flex-row items-center gap-3.5 p-4 mb-2 rounded-[6px] border border-border bg-card active:opacity-70"
              >
                <View className="h-10 w-10 rounded-full bg-primary/10 items-center justify-center">
                  <ScanLine color="#E46212" size={20} strokeWidth={2} />
                </View>
                <View className="flex-1">
                  <Text className="text-foreground text-[14px] font-sans-bold">
                    Scan
                  </Text>
                  <Text className="text-muted-foreground text-[12px] font-sans-medium mt-0.5">
                    Capture a photo and auto-fill the form
                  </Text>
                </View>
              </Pressable>

              <Pressable
                onPress={onSelectManual}
                className="flex-row items-center gap-3.5 p-4 mb-2 rounded-[6px] border border-border bg-card active:opacity-70"
              >
                <View className="h-10 w-10 rounded-full bg-primary/10 items-center justify-center">
                  <Edit color="#E46212" size={20} strokeWidth={2} />
                </View>
                <View className="flex-1">
                  <Text className="text-foreground text-[14px] font-sans-bold">
                    Enter manually
                  </Text>
                  <Text className="text-muted-foreground text-[12px] font-sans-medium mt-0.5">
                    Enter all the details yourself
                  </Text>
                </View>
              </Pressable>
            </ScrollView>
          </Pressable>
        </View>
      </Pressable>
    </Modal>
  );
}