import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle } from "react";
import { FaMicrophone, FaMicrophoneSlash } from "react-icons/fa";
import './VoiceToText.scss'
const VoiceToTextItemCard = forwardRef(({ setVoiceData, setprodQty, uomNames = [] }, ref) => {
    const [formData, setFormData] = useState({ product: "", qty: "", uom: "" });
    const [transcript, setTranscript] = useState("");
    const [isListening, setIsListening] = useState(false);
    const recognitionRef = useRef(null);

    const numberWords = {
        one: "1", two: "2", three: "3", four: "4", five: "5",
        six: "6", seven: "7", eight: "8", nine: "9", ten: "10"
    };

    const listening = () => {
        console.log('Voice listening started');
        // your voice start logic here
        if (isListening) {
            stopListening();
        } else {
            startListening();
        }
    };
    useImperativeHandle(ref, () => ({
        listening,
    }));


    const extractEntities = (text) => {
        if (typeof text !== "string") return { product: "", qty: "", uom: "" };

        const lowerUomNames = (uomNames?.length ? uomNames : [
            "kg", "kgs", "gram", "grams", "litre", "litres", "pack", "packs", "piece", "pieces"
        ]).map(u => u?.toLowerCase());

        const words = text?.toLowerCase().split(/\s+/);
        const numberWords = {
            one: "1", two: "2", three: "3", four: "4", five: "5",
            six: "6", seven: "7", eight: "8", nine: "9", ten: "10"
        };

        let qty = "";
        let uom = "";
        const productWords = [];

        for (let i = 0; i < words.length; i++) {
            const word = words[i];
            const numVal = numberWords[word] || (isNaN(word) ? null : word);

            if (lowerUomNames.includes(word)) {
                uom = word;
            } else if (numVal) {
                qty = numVal;
            } else {
                productWords.push(word);
            }
        }

        const cleanProduct = productWords
            .filter(w => w !== qty && w !== uom)
            .join(" ")
            .trim();

        return {
            product: cleanProduct,
            qty,
            uom
        };
    };


    useEffect(() => {
        const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

        if (!SpeechRecognition) {
            alert("Speech Recognition not supported");
            return;
        }

        const recognition = new SpeechRecognition();
        recognition.lang = "en-US";
        recognition.continuous = false;

        recognition.onresult = (event) => {
            const spokenText = event.results[0][0].transcript;
            setTranscript(spokenText);

            const { product, qty, uom } = extractEntities(spokenText);
            setFormData({ product, qty, uom });

            // Send to parent component
            if (setVoiceData) setVoiceData({ product, qty, uom });
            if (setprodQty) setprodQty(qty); // optional
        };

        recognition.onerror = (err) => console.error("Speech recognition error:", err);
        recognition.onend = () => {
            setIsListening(false);
        };
        recognitionRef.current = recognition;
    }, [setVoiceData, setprodQty, uomNames]);

    // const startListening = () => {
    //     recognitionRef.current?.start();
    //     setIsListening(true);
    //     setTranscript("");
    //     setVoiceData && setVoiceData("");
    // };
    const startListening = async () => {
        try {
            // Step 1: Check microphone access
            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
            stream.getTracks().forEach(track => track.stop()); // stop test mic stream

            // Step 2: Try starting speech recognition
            try {
        recognitionRef.current?.start();
        setIsListening(true);
        setTranscript("");
                if (setVoiceData) setVoiceData("");
            } catch (err) {
                console.error("SpeechRecognition start error:", err);
                alert("Unable to start speech recognition. Please check mic access or try again.");
                setIsListening(false);
            }

        } catch (error) {
            console.error("Microphone access denied or not available", error);
            alert("Microphone not connected or permission denied.");
            setIsListening(false);
        }
    };

    const stopListening = () => {
        if (recognitionRef.current) {
            console.log("Stopping voice recognition...");
            recognitionRef.current.stop();
        } else {
            console.warn("Recognition not initialized");
        }

        setIsListening(false);
    };

    return (
        <div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
            <button>
                {isListening ? <FaMicrophone /> : <FaMicrophoneSlash />}
            </button>

            <div style={{ display: 'flex', flexDirection: 'column-reverse', alignItems: 'center', gap: '5px' }}>
                {isListening && (
                    <div style={{ display: "flex", gap: "5px" }}>
                        <div style={dotStyle(0)}></div>
                        <div style={dotStyle(0.2)}></div>
                        <div style={dotStyle(0.4)}></div>
                    </div>
                )}
                {!isListening && <div>Voice</div>}
            </div>
            {/* <div style={{ marginTop: "20px" }}>
                <strong>Transcript:</strong> {transcript}
                <br />
                <strong>Product:</strong> {formData.product} <br />
                <strong>Qty:</strong> {formData.qty} <br />
                <strong>UOM:</strong> {formData.uom}
            </div> */}
        </div>
    );
});

export default VoiceToTextItemCard;

// Style for dots (voice loader)
const dotStyle = (delay = 0) => ({
    width: "8px",
    height: "8px",
    borderRadius: "50%",
    background: "#ff1744",
    animation: "pulse-color 1s infinite ease-in-out",
    animationDelay: `${delay}s`,
});
