@props([
    'model' => null,
    'maxDuration' => 300, // 5 minutes
    'maxSize' => '5MB',
    'class' => ''
])

@php
    $wireModel = $attributes->whereStartsWith('wire:model')->first();
    $model = $model ?? $wireModel;
    $id = uniqid('audio-recorder-');
@endphp

<div {{ $attributes->class(['audio-recorder', $class]) }} 
     x-data="audioRecorder('{{ $model }}', {{ $maxDuration }})"
     x-init="init()">
     
    <!-- Recording Controls -->
    <div class="audio-recorder-controls d-flex align-items-center gap-2">
        <!-- Record Button -->
        <button type="button"
                x-show="!isRecording && !audioFile && !isRequestingPermission"
                x-on:click="startRecording()"
                x-bind:disabled="!isSupported || permissionState === 'denied'"
                class="btn btn-sm btn-icon btn-light text-primary audio-record-btn"
                x-bind:title="getRecordButtonTitle()">
            <x-ui.nicon name="mic"/>
        </button>

        <!-- Permission Request Button -->
        <button type="button"
                x-show="isRequestingPermission"
                disabled
                class="btn btn-sm btn-icon btn-warning audio-record-btn">
            <div class="spinner-border spinner-border-sm" role="status">
                <span class="visually-hidden">{{ __('Requesting permission...') }}</span>
            </div>
        </button>

        <!-- Recording in Progress -->
        <div x-show="isRecording" class="d-flex align-items-center gap-2">
            <button type="button"
                    x-on:click="stopRecording()"
                    class="btn btn-sm btn-icon btn-danger audio-stop-btn pulse">
                <x-ui.nicon name="stop"/>
            </button>
            <div class="recording-info d-flex align-items-center">
                <div class="recording-indicator"></div>
                <span class="recording-duration text-danger fw-medium" x-text="formatTime(recordingDuration)">0:00</span>
            </div>
        </div>

        <!-- Audio Preview -->
        <div x-show="audioFile && !isRecording" class="audio-preview d-flex align-items-center gap-2">
            <button type="button"
                    x-on:click="playPreview()"
                    x-show="!isPlaying"
                    class="btn btn-sm btn-icon btn-success">
                <x-ui.nicon name="play"/>
            </button>
            <button type="button"
                    x-on:click="pausePreview()"
                    x-show="isPlaying"
                    class="btn btn-sm btn-icon btn-success">
                <x-ui.nicon name="pause"/>
            </button>
            
            <div class="audio-info">
                <span class="audio-duration text-muted small" x-text="formatTime(audioDuration)">0:00</span>
            </div>
            
            <button type="button"
                    x-on:click="deleteRecording()"
                    class="btn btn-sm btn-icon btn-light text-danger ms-2">
                <x-ui.nicon name="trash"/>
            </button>
        </div>

        <!-- Error Display -->
        <div x-show="error" class="audio-error text-danger small" x-text="error"></div>
    </div>

    <!-- Hidden File Input for Livewire -->
    <input type="file" 
           x-ref="fileInput"
           wire:model="{{ $model }}"
           accept="audio/*"
           class="d-none">
</div>

<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('audioRecorder', (wireModel, maxDuration) => ({
        // State
        isSupported: false,
        isRecording: false,
        isPlaying: false,
        recordingDuration: 0,
        audioDuration: 0,
        audioFile: null,
        error: null,
        permissionState: 'unknown', // 'unknown', 'granted', 'denied', 'prompt'
        isRequestingPermission: false,
        
        // Media objects
        mediaRecorder: null,
        audioChunks: [],
        stream: null,
        previewAudio: null,
        recordingInterval: null,
        
        init() {
            this.isSupported = navigator.mediaDevices && navigator.mediaDevices.getUserMedia;
            if (!this.isSupported) {
                console.warn('Audio recording not supported in this browser.');
                this.error = '{{ __('Audio recording is not supported in your browser') }}';
                return;
            }
            
            // Check current permission state
            this.checkMicrophonePermission();
        },
        
        async checkMicrophonePermission() {
            console.log('Checking microphone permission...');
            if (!navigator.permissions) {
                this.permissionState = 'unknown';
                return;
            }
            
            try {
                const permission = await navigator.permissions.query({ name: 'microphone' });
                this.permissionState = permission.state;
                
                // Listen for permission changes
                permission.onchange = () => {
                    this.permissionState = permission.state;
                    if (permission.state === 'denied') {
                        this.error = '{{ __('Microphone access denied. Please enable microphone permissions in your browser settings.') }}';
                    } else if (permission.state === 'granted') {
                        this.error = null;
                    }
                };
            } catch (error) {
                console.log('Permission query not supported:', error);
                this.permissionState = 'unknown';
            }
        },
        
        async startRecording() {
            if (!this.isSupported) {
                this.error = '{{ __('Audio recording is not supported in your browser') }}';
                return;
            }

            try {
                this.error = null;
                this.isRequestingPermission = true;
                
                // Request microphone permission explicitly
                this.stream = await navigator.mediaDevices.getUserMedia({ 
                    audio: {
                        echoCancellation: true,
                        noiseSuppression: true,
                        autoGainControl: true
                    } 
                });
                
                this.isRequestingPermission = false;
                this.permissionState = 'granted';
                
                this.mediaRecorder = new MediaRecorder(this.stream, {
                    mimeType: MediaRecorder.isTypeSupported('audio/webm') ? 'audio/webm' : 'audio/mp4'
                });
                
                this.audioChunks = [];
                this.recordingDuration = 0;
                
                this.mediaRecorder.ondataavailable = (event) => {
                    if (event.data.size > 0) {
                        this.audioChunks.push(event.data);
                    }
                };
                
                this.mediaRecorder.onstop = () => {
                    this.createAudioFile();
                    this.stopStream();
                };
                
                this.mediaRecorder.start();
                this.isRecording = true;
                
                // Update duration every second
                this.recordingInterval = setInterval(() => {
                    this.recordingDuration++;
                    if (this.recordingDuration >= maxDuration) {
                        this.stopRecording();
                    }
                }, 1000);
                
            } catch (error) {
                this.isRequestingPermission = false;
                console.error('Error starting recording:', error);
                
                if (error.name === 'NotAllowedError') {
                    this.permissionState = 'denied';
                    this.error = '{{ __('Microphone access denied. Please enable microphone permissions and try again.') }}';
                } else if (error.name === 'NotFoundError') {
                    this.error = '{{ __('No microphone found. Please connect a microphone and try again.') }}';
                } else if (error.name === 'NotReadableError') {
                    this.error = '{{ __('Microphone is already in use by another application.') }}';
                } else {
                    this.error = '{{ __('Could not access microphone. Please check permissions.') }}';
                }
                
                this.stopStream();
            }
        },
        
        stopRecording() {
            if (this.mediaRecorder && this.mediaRecorder.state !== 'inactive') {
                this.mediaRecorder.stop();
            }
            this.isRecording = false;
            if (this.recordingInterval) {
                clearInterval(this.recordingInterval);
                this.recordingInterval = null;
            }
        },
        
        createAudioFile() {
            if (this.audioChunks.length === 0) return;
            
            const mimeType = this.mediaRecorder.mimeType;
            const audioBlob = new Blob(this.audioChunks, { type: mimeType });
            
            // Create a File object for Livewire
            const fileName = `voice-message-${Date.now()}.${mimeType.includes('webm') ? 'webm' : 'mp4'}`;
            const audioFile = new File([audioBlob], fileName, { type: mimeType });
            
            this.audioFile = audioFile;
            this.calculateDuration(audioBlob);
            
            // Create a FileList-like object and assign to the hidden input
            const dt = new DataTransfer();
            dt.items.add(audioFile);
            this.$refs.fileInput.files = dt.files;
            
            // Trigger change event for Livewire
            this.$refs.fileInput.dispatchEvent(new Event('change', { bubbles: true }));
        },
        
        calculateDuration(blob) {
            const audio = new Audio();
            audio.src = URL.createObjectURL(blob);
            audio.onloadedmetadata = () => {
                this.audioDuration = Math.floor(audio.duration);
                URL.revokeObjectURL(audio.src);
            };
        },
        
        playPreview() {
            if (!this.audioFile) return;
            
            if (this.previewAudio) {
                this.previewAudio.pause();
                URL.revokeObjectURL(this.previewAudio.src);
            }
            
            this.previewAudio = new Audio();
            this.previewAudio.src = URL.createObjectURL(this.audioFile);
            
            this.previewAudio.onended = () => {
                this.isPlaying = false;
            };
            
            this.previewAudio.play();
            this.isPlaying = true;
        },
        
        pausePreview() {
            if (this.previewAudio) {
                this.previewAudio.pause();
                this.isPlaying = false;
            }
        },
        
        deleteRecording() {
            this.audioFile = null;
            this.audioDuration = 0;
            this.isPlaying = false;
            
            if (this.previewAudio) {
                this.previewAudio.pause();
                URL.revokeObjectURL(this.previewAudio.src);
                this.previewAudio = null;
            }
            
            // Clear the file input
            this.$refs.fileInput.value = '';
            this.$refs.fileInput.dispatchEvent(new Event('change', { bubbles: true }));
        },
        
        stopStream() {
            if (this.stream) {
                this.stream.getTracks().forEach(track => track.stop());
                this.stream = null;
            }
        },
        
        formatTime(seconds) {
            const mins = Math.floor(seconds / 60);
            const secs = seconds % 60;
            return `${mins}:${secs.toString().padStart(2, '0')}`;
        },
        
        getRecordButtonTitle() {
            if (!this.isSupported) {
                return '{{ __('Audio recording not supported') }}';
            }
            if (this.permissionState === 'denied') {
                return '{{ __('Microphone access denied. Please enable permissions in browser settings.') }}';
            }
            if (this.permissionState === 'prompt') {
                return '{{ __('Click to allow microphone access and start recording') }}';
            }
            return '{{ __('Record audio message') }}';
        },
        
        // Cleanup on component destroy
        destroy() {
            this.stopRecording();
            this.stopStream();
            if (this.previewAudio) {
                this.previewAudio.pause();
                URL.revokeObjectURL(this.previewAudio.src);
            }
        }
    }));
});
</script>

<style>
.audio-recorder-controls {
    padding: 8px;
}

.audio-record-btn {
    border-radius: 50% !important;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.audio-record-btn:hover:not(:disabled) {
    background-color: #526cd6 !important;
    color: white !important;
    transform: scale(1.05);
}

.audio-record-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.audio-record-btn.btn-warning {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
}

.audio-stop-btn {
    border-radius: 50% !important;
    width: 36px;
    height: 36px;
}

.pulse {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}

.recording-indicator {
    width: 8px;
    height: 8px;
    background-color: #dc3545;
    border-radius: 50%;
    margin-right: 8px;
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.3; }
}

.recording-duration {
    font-size: 14px;
    min-width: 40px;
}

.audio-preview {
    background: rgba(40, 167, 69, 0.1);
    border-radius: 20px;
    padding: 4px 12px;
}

.audio-info {
    min-width: 40px;
}

.audio-error {
    max-width: 200px;
}
</style>