import React from "react";
import { Modal, Pressable, StyleSheet, View } from "react-native";
import { Text } from "./ui/text";
import { Button } from "./ui/button";
import { CheckCircle2, X } from "@/lib/icons";
import { useColorScheme } from "nativewind";

interface ConfirmSubmitModalProps {
  visible: boolean;
  onClose: () => void;
  onConfirm: () => void;
  title?: string;
  description?: string;
  confirmText?: string;
  cancelText?: string;
  loading?: boolean;
}

export function ConfirmSubmitModal({
  visible,
  onClose,
  onConfirm,
  title = "Confirm submission",
  description = "Are you sure all the information is correct? Please review before proceeding.",
  confirmText = "Yes, submit",
  cancelText = "Review again",
  loading = false,
}: ConfirmSubmitModalProps) {
  const { colorScheme } = useColorScheme();
  const isDark = colorScheme === "dark";

  return (
    <Modal
      transparent
      visible={visible}
      animationType="fade"
      onRequestClose={onClose}
    >
      <Pressable
        style={StyleSheet.absoluteFill}
        className="bg-black/60 items-center justify-center p-6"
        onPress={onClose}
      >
        <Pressable
          className="w-full max-w-sm bg-card rounded-[6px] border border-border overflow-hidden"
          onPress={(e) => e.stopPropagation()}
        >
          <View className="flex-row items-center justify-between px-5 pt-5 pb-2">
            <View className="flex-row items-center gap-3 flex-1">
              <View className="p-2 rounded-full bg-primary/10">
                <CheckCircle2 size={20} color="#ea580c" />
              </View>
              <Text variant="h4" className="font-sans-black tracking-tight flex-1">
                {title}
              </Text>
            </View>
            <Button
              variant="ghost"
              size="icon"
              className="h-8 w-8"
              onPress={onClose}
            >
              <X size={18} color={isDark ? "#94a3b8" : "#64748b"} />
            </Button>
          </View>

          <View className="px-5 pb-6">
            <Text
              variant="p"
              className="text-muted-foreground font-sans-medium leading-5"
            >
              {description}
            </Text>
          </View>

          <View className="flex-row border-t border-border p-3 gap-3">
            <Button
              variant="outline"
              className="flex-1 h-12 rounded-[6px]"
              onPress={onClose}
              disabled={loading}
            >
              <Text className="font-sans-bold text-xs">
                {cancelText}
              </Text>
            </Button>
            <Button
              variant="default"
              className="flex-1 h-12 rounded-[6px] bg-primary"
              onPress={onConfirm}
              loading={loading}
            >
              <Text className="text-white font-sans-bold text-xs">
                {confirmText}
              </Text>
            </Button>
          </View>
        </Pressable>
      </Pressable>
    </Modal>
  );
}