// import React, { useRef, useState, useEffect } from "react";
// import { BarcodeScanner } from "@capacitor-mlkit/barcode-scanning";
// import { BsUpcScan } from "react-icons/bs";
// import { BrowserMultiFormatReader } from "@zxing/library";
// import { Capacitor } from "@capacitor/core";
// import { DefaultModal } from "../Components/Modal/DefaultModal";

// export default function BarCodeScan({ onScan }) {
//     const isMobileApp = Capacitor.getPlatform() !== "web";
//     const [scanning, setScanning] = useState(false);
//     const [modalOpen, setModalOpen] = useState(false);
//     const videoRef = useRef(null);
//     const codeReaderRef = useRef(null);
//     const streamRef = useRef(null);

//     const startScan = async () => {
//         if (scanning) return;
//         setScanning(true);

//         if (isMobileApp) {
//             // Mobile: MLKit scanner
//             try {
//                 const perm = await BarcodeScanner.requestPermissions();
//                 if (perm.camera !== "granted") {
//                     alert("Camera permission not granted");
//                     setScanning(false);
//                     return;
//                 }

//                 const { barcodes } = await BarcodeScanner.scan();
//                 if (barcodes && barcodes.length > 0) {
//                     onScan(barcodes[0].rawValue);
//                 }
//             } catch (err) {
//                 alert("Error scanning barcode: " + err.message);
//             } finally {
//                 setScanning(false);
//             }
//         } else {
//             // Web: open modal and start camera
//             setModalOpen(true);
//             setTimeout(() => startWebScan(), 50); // wait for modal DOM
//         }
//     };

//     const startWebScan = async () => {
//         try {
//             codeReaderRef.current = new BrowserMultiFormatReader();
//             streamRef.current = await navigator.mediaDevices.getUserMedia({
//                 video: { facingMode: "environment" },
//             });
//             if (videoRef.current) {
//                 videoRef.current.srcObject = streamRef.current;
//                 videoRef.current.play();
//             }

//             codeReaderRef.current.decodeFromVideoDevice(
//                 null,
//                 videoRef.current,
//                 (result) => {
//                     if (result) {
//                         onScan(result.getText());
//                         stopWebScan();
//                         setModalOpen(false);
//                     }
//                 }
//             );
//         } catch (err) {
//             alert("Error accessing camera: " + err.message);
//             setScanning(false);
//             setModalOpen(false);
//         }
//     };

//     const stopWebScan = () => {
//         if (streamRef.current) {
//             streamRef.current.getTracks().forEach((track) => track.stop());
//             streamRef.current = null;
//         }
//         if (codeReaderRef.current) {
//             codeReaderRef.current.reset();
//             codeReaderRef.current = null;
//         }
//         setScanning(false);
//     };

//     const closeModal = () => {
//         stopWebScan();
//         setModalOpen(false);
//     };

//     // Stop camera if component unmounts
//     useEffect(() => () => stopWebScan(), []);

//     return (
//         <div style={{ display: "flex", justifyContent: "center", padding: 20 }}>
//             {!scanning && (
//                 <BsUpcScan
//                     onClick={startScan}
//                     style={{ fontSize: 32, color: "#007bff", cursor: "pointer" }}
//                 />
//             )}

//             <DefaultModal
//                 title="Barcode Reader"
//                 width={500}
//                 open={modalOpen}
//                 footer={false}
//                 handleCancel={() => {
//                     closeModal();
//                 }}
//             >
//                 <div
//                     style={{
//                         display: "flex",
//                         flexDirection: "column",
//                         alignItems: "center",
//                         justifyContent: "center",
//                     }}
//                 >
//                     <video
//                         ref={videoRef}
//                         style={{
//                             width: "100%",
//                             maxWidth: 400,
//                             borderRadius: 8,
//                             border: "2px solid #000",
//                         }}
//                     />

//                     <button
//                         onClick={closeModal}
//                         style={{
//                             marginTop: 20,
//                             padding: "10px 20px",
//                             fontSize: 16,
//                             borderRadius: 8,
//                             border: "none",
//                             cursor: "pointer",
//                         }}
//                     >
//                         Close
//                     </button>
//                 </div>
//             </DefaultModal>

//         </div>
//     );
// }

import React, { useRef, useState, useEffect } from "react";
import { BarcodeScanner } from "@capacitor-mlkit/barcode-scanning";
import { BsUpcScan } from "react-icons/bs";
import { Capacitor } from "@capacitor/core";
import { DefaultModal } from "../Components/Modal/DefaultModal";
import QrScanner from "qr-scanner/qr-scanner.min.js";
import {
    BrowserMultiFormatReader,
    BarcodeFormat,
} from "@zxing/library";

QrScanner.WORKER_PATH = new URL(
    "qr-scanner/qr-scanner-worker.min.js",
    import.meta.url
).toString();

export default function BarCodeScan({ onScan }) {
    const isMobileApp = Capacitor.getPlatform() !== "web";
    const [scanning, setScanning] = useState(false);
    const [modalOpen, setModalOpen] = useState(false);

    const videoRef = useRef(null);
    const qrScannerRef = useRef(null);
    const barcodeReaderRef = useRef(null);

    // -------------------------
    // START SCAN
    // -------------------------
    const startScan = async () => {
        if (scanning) return;
        setScanning(true);

        if (isMobileApp) {
            try {
                const perm = await BarcodeScanner.requestPermissions();
                if (perm.camera !== "granted") {
                    alert("Camera permission not granted");
                    setScanning(false);
                    return;
                }

                const { barcodes } = await BarcodeScanner.scan();
                if (barcodes?.length > 0) {
                    onScan(barcodes[0].rawValue);
                }
            } catch (err) {
                console.error(err);
            } finally {
                setScanning(false);
            }
        } else {
            setModalOpen(true);
        }
    };

    // -------------------------
    // START WEB SCAN (HYBRID)
    // -------------------------
    const startWebScan = async () => {
        if (!videoRef.current) return;

        // Start QR scanner (fast)
        qrScannerRef.current = new QrScanner(
            videoRef.current,
            (result) => {
                stopWebScan();
                onScan(result.data);
                setModalOpen(false);
            },
            {
                maxScansPerSecond: 25,
            }
        );

        await qrScannerRef.current.start();

        // Start Barcode scanner (ZXing)
        barcodeReaderRef.current = new BrowserMultiFormatReader(undefined, {
            possibleFormats: [
                BarcodeFormat.CODE_128,
                BarcodeFormat.EAN_13,
                BarcodeFormat.UPC_A,
                BarcodeFormat.UPC_E,
            ],
        });

        barcodeReaderRef.current.timeBetweenDecodingAttempts = 50;

        barcodeReaderRef.current.decodeFromVideoDevice(
            null,
            videoRef.current,
            (result) => {
                if (result) {
                    stopWebScan();
                    onScan(result.getText());
                    setModalOpen(false);
                }
            }
        );
    };

    const stopWebScan = () => {
        if (qrScannerRef.current) {
            qrScannerRef.current.stop();
            qrScannerRef.current.destroy();
            qrScannerRef.current = null;
        }

        if (barcodeReaderRef.current) {
            barcodeReaderRef.current.reset();
            barcodeReaderRef.current = null;
        }

        setScanning(false);
    };

    const closeModal = () => {
        stopWebScan();
        setModalOpen(false);
    };

    useEffect(() => {
        if (modalOpen) {
            startWebScan();
        }
    }, [modalOpen]);

    useEffect(() => {
        return () => stopWebScan();
    }, []);

    return (
        <div style={{ display: "flex", justifyContent: "center", padding: 20 }}>
            {!scanning && (
                <BsUpcScan
                    onClick={startScan}
                    style={{
                        fontSize: 32,
                        color: "#007bff",
                        cursor: "pointer",
                    }}
                />
            )}

            {/* <DefaultModal
                title="QR / Barcode Reader"
                width={500}
                open={modalOpen}
                footer={false}
                handleCancel={closeModal}
            >
                <div style={{ display: "flex", justifyContent: "center" }}>
                    <video
                        ref={videoRef}
                        style={{
                            width: "100%",
                            maxWidth: 400,
                            borderRadius: 8,
                        }}
                    />
                </div>

                <button
                    onClick={closeModal}
                    style={{
                        marginTop: 20,
                        padding: "10px 20px",
                        fontSize: 16,
                        borderRadius: 8,
                        border: "none",
                        cursor: "pointer",
                    }}
                >
                    Close
                </button>
            </DefaultModal> */}
            <DefaultModal
    title="QR / Barcode Reader"
    width={500}
    open={modalOpen}
    footer={false}
    handleCancel={closeModal}
>
    <div
        style={{
            position: "relative",
            width: "100%",
            maxWidth: 400,
            margin: "auto",
        }}
    >
        {/* VIDEO */}
        <video
            ref={videoRef}
            style={{
                width: "100%",
                borderRadius: 8,
            }}
        />

        {/* DARK OVERLAY */}
        <div
            style={{
                position: "absolute",
                top: 0,
                left: 0,
                width: "100%",
                height: "100%",
                background: "rgba(0,0,0,0.5)",
                borderRadius: 8,
            }}
        />

        {/* SCAN BOX */}
        <div
            style={{
                position: "absolute",
                top: "50%",
                left: "50%",
                width: "70%",
                height: "60%",
                transform: "translate(-50%, -50%)",
                border: "3px solid #00ff00",
                borderRadius: 12,
                boxShadow: "0 0 0 2000px rgba(0,0,0,0.4)",
            }}
        />

        {/* SCAN LINE */}
        <div
            style={{
                position: "absolute",
                left: "15%",
                width: "70%",
                height: 2,
                background: "red",
                animation: "scanAnimation 2s infinite linear",
            }}
        />
    </div>

    <button
        onClick={closeModal}
        style={{
            marginTop: 20,
            padding: "10px 20px",
            fontSize: 16,
            borderRadius: 8,
            border: "none",
            cursor: "pointer",
        }}
    >
        Close
    </button>

    {/* Animation */}
    <style>
        {`
        @keyframes scanAnimation {
            0% { top: 25%; }
            50% { top: 70%; }
            100% { top: 25%; }
        }
        `}
    </style>
</DefaultModal>
        </div>
    );
}