@props(['for'])

{{--
    Speak an order instead of typing it. Uses the browser's own speech recognition (Chrome, Edge, Android), in English
    or Hindi, and adds each finished sentence to the textarea `$for` as a new line. Nothing is saved from here: the
    text still goes through Place Order and its review step.
--}}
<div
    x-data="{
        supported: !!(window.SpeechRecognition || window.webkitSpeechRecognition),
        lang: (() => { try { return localStorage.getItem('voiceLang') || 'en-IN'; } catch (e) { return 'en-IN'; } })(),
        listening: false,
        interim: '',
        message: '',
        recognition: null,
        textarea() { return document.getElementById(@js($for)); },
        setLang(code) {
            this.lang = code;
            try { localStorage.setItem('voiceLang', code); } catch (e) {}
            if (this.listening) { this.stop(); this.$nextTick(() => this.start()); }
        },
        toggle() { this.listening ? this.stop() : this.start(); },
        start() {
            const Recognition = window.SpeechRecognition || window.webkitSpeechRecognition;
            if (!Recognition) { return; }
            this.message = '';
            const recognition = new Recognition();
            recognition.lang = this.lang;
            recognition.continuous = true;
            recognition.interimResults = true;
            recognition.onresult = (event) => {
                let interim = '';
                for (let i = event.resultIndex; i < event.results.length; i++) {
                    const text = event.results[i][0].transcript.trim();
                    if (event.results[i].isFinal) { if (text) { this.append(text); } } else { interim += ' ' + text; }
                }
                this.interim = interim.trim();
            };
            recognition.onerror = (event) => {
                if (event.error === 'not-allowed' || event.error === 'service-not-allowed') {
                    this.message = 'Microphone is blocked. Allow it for this site in the browser address bar, then try again.';
                    this.listening = false;
                } else if (event.error === 'audio-capture') {
                    this.message = 'No microphone found.';
                    this.listening = false;
                } else if (event.error === 'network') {
                    this.message = 'Speech recognition needs an internet connection.';
                }
            };
            // The browser ends a session after a pause; keep going until Stop is pressed.
            recognition.onend = () => {
                this.interim = '';
                if (this.listening) { try { recognition.start(); } catch (e) { this.listening = false; } }
            };
            this.recognition = recognition;
            this.listening = true;
            try { recognition.start(); } catch (e) { this.listening = false; }
        },
        stop() {
            this.listening = false;
            this.interim = '';
            try { this.recognition && this.recognition.stop(); } catch (e) {}
        },
        append(text) {
            const box = this.textarea();
            if (!box) { return; }
            const current = box.value.replace(/\s+$/, '');
            box.value = (current ? current + '\n' : '') + text + '\n';
            box.dispatchEvent(new Event('input', { bubbles: true }));
            box.scrollTop = box.scrollHeight;
        },
    }"
    x-on:beforeunload.window="stop()"
    class="mt-2"
>
    <template x-if="!supported">
        <p class="text-xs text-gray-500 dark:text-gray-400">Voice input needs Chrome or Edge.</p>
    </template>

    <div x-show="supported" x-cloak class="flex flex-wrap items-center gap-2">
        <button type="button" x-on:click="toggle()"
            class="inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm font-medium shadow-sm"
            x-bind:class="listening ? 'border-red-300 bg-red-50 text-red-700 dark:bg-red-900/30 dark:text-red-300' : 'border-gray-300 bg-white text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200'">
            <span class="inline-block h-2.5 w-2.5 rounded-full" x-bind:class="listening ? 'bg-red-500 animate-pulse' : 'bg-gray-400'"></span>
            <span x-text="listening ? 'Stop' : 'Speak'"></span>
        </button>

        <div class="inline-flex overflow-hidden rounded-md border border-gray-300 text-sm dark:border-gray-600" role="group" aria-label="Language">
            <button type="button" x-on:click="setLang('en-IN')" class="px-3 py-1.5"
                x-bind:class="lang === 'en-IN' ? 'bg-indigo-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-200'">English</button>
            <button type="button" x-on:click="setLang('hi-IN')" class="border-l border-gray-300 px-3 py-1.5 dark:border-gray-600"
                x-bind:class="lang === 'hi-IN' ? 'bg-indigo-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-200'">हिंदी</button>
        </div>

        <span x-show="listening" class="text-xs text-gray-500 dark:text-gray-400">Listening&hellip; say one item and quantity at a time, for example &ldquo;Rosemary shampoo six pieces&rdquo;.</span>
    </div>

    <p x-show="interim" x-text="interim" class="mt-1 text-sm italic text-gray-400"></p>
    <p x-show="message" x-text="message" class="mt-1 text-xs text-red-600 dark:text-red-400"></p>
</div>