@props([
    'src' => null,
    'filename' => 'Audio Message',
    'size' => null,
    'class' => ''
])

@php
    $id = uniqid('audio-player-');
@endphp

<div {{ $attributes->class(['audio-player', $class]) }} 
     x-data="audioPlayer('{{ $src }}')"
     x-init="init()">
     
    <div class="audio-player-container bg-light rounded p-3 d-flex align-items-center gap-3">
        <!-- Play/Pause Button -->
        <button type="button"
                x-on:click="togglePlayback()"
                :disabled="!canPlay"
                class="btn btn-sm btn-icon btn-primary audio-play-btn"
                :class="{ 'btn-success': isPlaying }"
                :title="isPlaying ? '{{ __('Pause') }}' : '{{ __('Play') }}'">
            <x-ui.nicon x-show="!isPlaying && !isLoading" name="play"/>
            <x-ui.nicon x-show="isPlaying" name="pause"/>
            <div x-show="isLoading" class="spinner-border spinner-border-sm" role="status">
                <span class="visually-hidden">{{ __('Loading...') }}</span>
            </div>
        </button>

        <!-- Audio Info and Progress -->
        <div class="audio-info flex-grow-1">
            <div class="d-flex align-items-center justify-content-between mb-1">
                <span class="audio-filename small fw-medium text-dark">
                    <x-ui.nicon name="music" class="me-1 text-primary"/>
                    {{ $filename }}
                </span>
                @if($size)
                    <span class="audio-size small text-muted">{{ $size }}</span>
                @endif
            </div>
            
            <!-- Progress Bar -->
            <div class="audio-progress-container position-relative">
                <div class="progress audio-progress" style="height: 4px; cursor: pointer;"
                     x-on:click="seekTo($event)">
                    <div class="progress-bar bg-primary" 
                         :style="`width: ${progress}%`"
                         role="progressbar" 
                         :aria-valuenow="progress" 
                         aria-valuemin="0" 
                         aria-valuemax="100"></div>
                </div>
            </div>
            
            <!-- Time Display -->
            <div class="audio-times d-flex justify-content-between mt-1">
                <span class="current-time small text-muted" x-text="formatTime(currentTime)">0:00</span>
                <span class="total-time small text-muted" x-text="formatTime(duration)">0:00</span>
            </div>
        </div>

        <!-- Volume Control (Optional) -->
        <div class="audio-volume d-none d-md-flex align-items-center">
            <x-ui.nicon name="volume-2" class="text-muted me-2 fs-14px"/>
            <input type="range" 
                   class="form-range volume-slider" 
                   x-model="volume"
                   x-on:input="setVolume($event.target.value)"
                   min="0" 
                   max="1" 
                   step="0.1" 
                   style="width: 60px;">
        </div>

        <!-- Download Button -->
        @if($src)
            <a href="{{ $src }}" 
               download="{{ $filename }}"
               class="btn btn-sm btn-icon btn-light text-muted"
               title="{{ __('Download audio') }}">
                <x-ui.nicon name="download"/>
            </a>
        @endif
    </div>

    <!-- Hidden Audio Element -->
    <audio x-ref="audio" 
           preload="metadata"
           x-on:loadstart="isLoading = true"
           x-on:loadedmetadata="onLoadedMetadata()"
           x-on:canplay="onCanPlay()"
           x-on:timeupdate="onTimeUpdate()"
           x-on:ended="onEnded()"
           x-on:error="onError()">
        @if($src)
            <source src="{{ $src }}" type="audio/mpeg">
            <source src="{{ $src }}" type="audio/wav">
            <source src="{{ $src }}" type="audio/webm">
        @endif
        {{ __('Your browser does not support the audio element.') }}
    </audio>
</div>

<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('audioPlayer', (src) => ({
        // State
        isPlaying: false,
        isLoading: false,
        canPlay: false,
        currentTime: 0,
        duration: 0,
        volume: 1,
        progress: 0,
        
        init() {
            if (src) {
                this.$refs.audio.src = src;
                this.$refs.audio.load();
            }
        },
        
        togglePlayback() {
            if (!this.canPlay) return;
            
            if (this.isPlaying) {
                this.pause();
            } else {
                this.play();
            }
        },
        
        async play() {
            try {
                await this.$refs.audio.play();
                this.isPlaying = true;
            } catch (error) {
                console.error('Error playing audio:', error);
            }
        },
        
        pause() {
            this.$refs.audio.pause();
            this.isPlaying = false;
        },
        
        seekTo(event) {
            if (!this.canPlay || this.duration === 0) return;
            
            const rect = event.target.getBoundingClientRect();
            const clickX = event.clientX - rect.left;
            const width = rect.width;
            const percentage = clickX / width;
            const newTime = percentage * this.duration;
            
            this.$refs.audio.currentTime = newTime;
        },
        
        setVolume(value) {
            this.volume = parseFloat(value);
            this.$refs.audio.volume = this.volume;
        },
        
        onLoadedMetadata() {
            this.duration = this.$refs.audio.duration || 0;
            this.isLoading = false;
        },
        
        onCanPlay() {
            this.canPlay = true;
            this.isLoading = false;
        },
        
        onTimeUpdate() {
            this.currentTime = this.$refs.audio.currentTime || 0;
            if (this.duration > 0) {
                this.progress = (this.currentTime / this.duration) * 100;
            }
        },
        
        onEnded() {
            this.isPlaying = false;
            this.currentTime = 0;
            this.progress = 0;
            this.$refs.audio.currentTime = 0;
        },
        
        onError() {
            this.isLoading = false;
            this.canPlay = false;
            console.error('Error loading audio file');
        },
        
        formatTime(seconds) {
            if (isNaN(seconds) || seconds === 0) return '0:00';
            
            const mins = Math.floor(seconds / 60);
            const secs = Math.floor(seconds % 60);
            return `${mins}:${secs.toString().padStart(2, '0')}`;
        }
    }));
});
</script>

<style>
.audio-player-container {
    max-width: 400px;
    border: 1px solid rgba(0,0,0,0.1);
    transition: all 0.2s ease;
}

.audio-player-container:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.audio-play-btn {
    border-radius: 50% !important;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.audio-progress {
    border-radius: 2px;
    background-color: rgba(0,0,0,0.1);
}

.audio-progress .progress-bar {
    transition: width 0.1s ease;
}

.audio-progress:hover {
    transform: scaleY(1.5);
    transition: transform 0.2s ease;
}

.volume-slider {
    width: 60px;
    height: 4px;
}

.volume-slider::-webkit-slider-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #526cd6;
    cursor: pointer;
}

.volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #526cd6;
    cursor: pointer;
    border: none;
}

.audio-filename {
    display: flex;
    align-items: center;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audio-times {
    font-size: 11px;
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .audio-player-container {
        flex-direction: column;
        gap: 12px !important;
    }
    
    .audio-info {
        width: 100%;
    }
    
    .audio-filename {
        max-width: 100%;
    }
}
</style>