@include('header')
<div class="container-fluid flex-grow-1 container-p-y">
    <h4 class="font-weight-bold py-3 mb-0">Voice Recognition Test</h4>
    <p class="text-muted small">Speak into your microphone and the recognized text will appear in the textarea below. Works best in Chrome or Edge.</p>

    <div class="card mb-4">
        <div class="card-body">
            <div id="browser-warning" class="alert alert-warning d-none mb-3">
                Your browser does not support the Web Speech API. Please use Chrome or Edge.
            </div>

            <div class="form-row mb-3">
                <div class="form-group col-md-3">
                    <label class="form-label">Language</label>
                    <select class="form-control" id="speech-lang">
                        <option value="en-IN">English (India)</option>
                        <option value="en-US">English (US)</option>
                        <option value="hi-IN">Hindi (India)</option>
                        <option value="mr-IN">Marathi (India)</option>
                    </select>
                </div>
                <div class="form-group col-md-3">
                    <label class="form-label">Mode</label>
                    <select class="form-control" id="speech-mode">
                        <option value="continuous">Continuous (keeps listening)</option>
                        <option value="single">Single phrase</option>
                    </select>
                </div>
                <div class="form-group col-md-6 d-flex align-items-end">
                    <div>
                        <button type="button" class="btn btn-success mr-2" id="btn-start" disabled>
                            <i class="fas fa-microphone"></i> Start Listening
                        </button>
                        <button type="button" class="btn btn-danger mr-2" id="btn-stop" disabled>
                            <i class="fas fa-stop"></i> Stop
                        </button>
                        <button type="button" class="btn btn-secondary" id="btn-clear">
                            <i class="fas fa-eraser"></i> Clear Text
                        </button>
                    </div>
                </div>
            </div>

            <div class="mb-3">
                <span id="speech-status" class="badge badge-secondary">Idle</span>
                <span id="interim-preview" class="text-muted small ml-2"></span>
            </div>

            <div class="form-group">
                <label class="form-label">Recognized Text</label>
                <textarea class="form-control" id="speech-output" rows="12" placeholder="Your speech will be typed here..."></textarea>
            </div>

            <p class="text-muted small mb-0">
                Tip: Allow microphone access when prompted. For continuous mode, click Stop when you are done speaking.
            </p>
        </div>
    </div>
</div>
@include('footerscript')
<script type="text/javascript">
(function () {
    var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
    var recognition = null;
    var isListening = false;

    var $output = $('#speech-output');
    var $status = $('#speech-status');
    var $interim = $('#interim-preview');
    var $btnStart = $('#btn-start');
    var $btnStop = $('#btn-stop');
    var $btnClear = $('#btn-clear');
    var $browserWarning = $('#browser-warning');

    function setStatus(text, badgeClass) {
        $status.text(text).removeClass('badge-secondary badge-success badge-danger badge-warning').addClass(badgeClass);
    }

    function initRecognition() {
        if (!SpeechRecognition) {
            $browserWarning.removeClass('d-none');
            return;
        }

        recognition = new SpeechRecognition();
        recognition.interimResults = true;
        recognition.maxAlternatives = 1;

        recognition.onstart = function () {
            isListening = true;
            $btnStart.prop('disabled', true);
            $btnStop.prop('disabled', false);
            setStatus('Listening...', 'badge-success');
        };

        recognition.onresult = function (event) {
            var interimTranscript = '';
            var finalTranscript = '';

            for (var i = event.resultIndex; i < event.results.length; i++) {
                var transcript = event.results[i][0].transcript;
                if (event.results[i].isFinal) {
                    finalTranscript += transcript;
                } else {
                    interimTranscript += transcript;
                }
            }

            if (finalTranscript) {
                var current = $output.val();
                var separator = current && !current.endsWith(' ') && !current.endsWith('\n') ? ' ' : '';
                $output.val(current + separator + finalTranscript.trim());
                $interim.text('');
            } else {
                $interim.text(interimTranscript ? 'Hearing: ' + interimTranscript : '');
            }
        };

        recognition.onerror = function (event) {
            var message = event.error || 'unknown error';
            if (message === 'no-speech') {
                setStatus('No speech detected', 'badge-warning');
            } else if (message === 'not-allowed') {
                setStatus('Microphone access denied', 'badge-danger');
            } else if (message === 'aborted') {
                setStatus('Stopped', 'badge-secondary');
            } else {
                setStatus('Error: ' + message, 'badge-danger');
            }
            stopListening();
        };

        recognition.onend = function () {
            if (isListening && $('#speech-mode').val() === 'continuous') {
                try {
                    recognition.start();
                } catch (e) {
                    stopListening();
                }
            } else {
                stopListening();
            }
        };

        $btnStart.prop('disabled', false);
    }

    function applySettings() {
        if (!recognition) {
            return;
        }
        recognition.lang = $('#speech-lang').val();
        recognition.continuous = $('#speech-mode').val() === 'continuous';
    }

    function startListening() {
        if (!recognition || isListening) {
            return;
        }
        applySettings();
        $interim.text('');
        try {
            recognition.start();
        } catch (e) {
            setStatus('Could not start microphone', 'badge-danger');
        }
    }

    function stopListening() {
        isListening = false;
        $btnStart.prop('disabled', false);
        $btnStop.prop('disabled', true);
        $interim.text('');
        if ($status.text().indexOf('Error') === -1 && $status.text().indexOf('denied') === -1) {
            setStatus('Idle', 'badge-secondary');
        }
        if (recognition) {
            try {
                recognition.stop();
            } catch (e) {}
        }
    }

    $btnStart.on('click', startListening);
    $btnStop.on('click', stopListening);

    $btnClear.on('click', function () {
        $output.val('');
        $interim.text('');
    });

    $('#speech-lang, #speech-mode').on('change', function () {
        if (isListening) {
            stopListening();
        }
        applySettings();
    });

    initRecognition();
})();
</script>