<x-splade-script>
    let mediaRecorder;
    let recordedBlobs;

    document.getElementById('start-recording').addEventListener('click', startRecording);
    document.getElementById('stop-recording').addEventListener('click', stopRecording);

    async function startRecording() {
        recordedBlobs = [];
        let stream = await navigator.mediaDevices.getUserMedia({video: true, audio: true});
        mediaRecorder = new MediaRecorder(stream);

        mediaRecorder.ondataavailable = (event) => {
            if (event.data && event.data.size > 0) {
                recordedBlobs.push(event.data);
            }
        };

        mediaRecorder.start();
        document.getElementById('start-recording').classList.add('hidden');
        document.getElementById('stop-recording').classList.remove('hidden');
    }

    function stopRecording() {
        mediaRecorder.stop();
        document.getElementById('stop-recording').classList.add('hidden');
        document.querySelector('form button[type="submit"]').classList.remove('hidden');
    }

    document.getElementById('video-form').addEventListener('submit', (e) => {
        e.preventDefault();
        const blob = new Blob(recordedBlobs, {type: 'video/webm'});
        const file = new File([blob], 'recorded-video.webm', {type: 'video/webm'});
        const dataTransfer = new DataTransfer();
        dataTransfer.items.add(file);
        document.getElementById('video-input').files = dataTransfer.files;
        e.target.submit();
    });
</x-splade-script>