import React, { useState, useEffect } from 'react';
import { View, Text, Modal, TouchableOpacity, Vibration, StyleSheet, Dimensions } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { CameraView, useCameraPermissions } from 'expo-camera';
import { X, ScanLine } from 'lucide-react-native';

interface QrScanModalProps {
    visible: boolean;
    onClose: () => void;
    onScan: (data: string) => void;
}

export default function QrScanModal({ visible, onClose, onScan }: QrScanModalProps) {
    const [permission, requestPermission] = useCameraPermissions();
    const [scanned, setScanned] = useState(false);
    const { width, height } = Dimensions.get('window');
    const squareSize = Math.min(width * 0.8, height * 0.8, 400);

    // Permission Handling and Reset Scanned State on Modal Open
    useEffect(() => {
        if (visible) {
            setScanned(false);
            if (permission && !permission.granted && permission.canAskAgain) {
                requestPermission();
            }
        }
    }, [visible, permission]);

    const handleBarCodeScanned = ({ type, data }: { type: string; data: string }) => {
        if (scanned) return;
        setScanned(true);
        Vibration.vibrate();
        console.log(`Bar code with type ${type} and data ${data} has been scanned!`);
        onScan(data);
        onClose();
    };

    if (!permission) {
        return <View />;
    }

    if (!permission.granted && visible) {
        requestPermission();
    }

    return (
        <Modal
            visible={visible}
            animationType="slide"
            presentationStyle="fullScreen"
            onRequestClose={onClose}
        >
            <View className="flex-1 bg-black">
                {/* Camera Full Screen */}
                <CameraView
                    style={StyleSheet.absoluteFillObject}
                    facing="back"
                    onBarcodeScanned={scanned ? undefined : handleBarCodeScanned}
                    barcodeScannerSettings={{
                        barcodeTypes: ["qr"],
                    }}
                />

                {/* Dark Overlay with Transparent "Hole" (Visually Simulated with Borders or Opacity) */}
                <SafeAreaView className="flex-1 justify-between bg-black/60 pt-8">
                    {/* Header Overlay */}
                    <View className="items-center">
                        <Text className="text-white text-xl font-bold">Scansiona QR Code</Text>
                        <Text className="text-gray-300 text-base mt-1">Inquadra il codice nel riquadro</Text>
                    </View>

                    {/* Central Area (Transparent for the camera) */}
                    <View className="items-center justify-center" style={{ height: squareSize }}>
                        <View style={{ width: squareSize, height: squareSize }}
                            className="border-2 border-[#099499] bg-transparent relative justify-center items-center">
                            {/* Decorative Corners */}
                            <View className="absolute top-0 left-0 w-6 h-6 border-l-4 border-t-4 border-[#099499]" />
                            <View className="absolute top-0 right-0 w-6 h-6 border-r-4 border-t-4 border-[#099499]" />
                            <View className="absolute bottom-0 left-0 w-6 h-6 border-l-4 border-b-4 border-[#099499]" />
                            <View className="absolute bottom-0 right-0 w-6 h-6 border-r-4 border-b-4 border-[#099499]" />

                            {/* Animated Scan Line or Icon */}
                            {!scanned && <ScanLine color="#099499" size={40} className="opacity-50" />}
                        </View>
                    </View>

                    {/* Footer Overlay */}
                    <View className="items-center justify-end pb-12">
                        <TouchableOpacity onPress={onClose} className="bg-white/20 p-4 rounded-full">
                            <X color="white" size={32} />
                        </TouchableOpacity>
                        <Text className="text-white mt-4 font-medium">Chiudi</Text>
                    </View>
                </SafeAreaView>
            </View>
        </Modal>
    );
}