⌨️ Keyboard Shortcuts

// Alpine.js init() içinde
init() {
    // ... mevcut init kodu

    // Keyboard shortcuts listener
    this.initKeyboardShortcuts();
},

initKeyboardShortcuts() {
    document.addEventListener('keydown', (e) => {
        // Input/textarea içinde ise klavye kısayollarını devre dışı bırak
        if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
            return;
        }

        // Modifier keys
        const isShift = e.shiftKey;
        const isCtrl = e.ctrlKey || e.metaKey;

        switch(e.key.toLowerCase()) {
            case ' ': // Space
                e.preventDefault();
                this.togglePlayPause();
                break;

            case 'n': // Next
                e.preventDefault();
                this.nextTrack();
                break;

            case 'p': // Previous
                e.preventDefault();
                this.previousTrack();
                break;

            case 'arrowright': // Right arrow
                if (isShift) {
                    e.preventDefault();
                    this.seek(10); // 10 saniye ileri
                } else {
                    e.preventDefault();
                    this.nextTrack();
                }
                break;

            case 'arrowleft': // Left arrow
                if (isShift) {
                    e.preventDefault();
                    this.seek(-10); // 10 saniye geri
                } else {
                    e.preventDefault();
                    this.previousTrack();
                }
                break;

            case 'arrowup': // Up arrow
                e.preventDefault();
                this.setVolume(Math.min(100, this.volume + 10));
                break;

            case 'arrowdown': // Down arrow
                e.preventDefault();
                this.setVolume(Math.max(0, this.volume - 10));
                break;

            case 'm': // Mute
                e.preventDefault();
                this.toggleMute();
                break;

            case 's': // Shuffle
                e.preventDefault();
                this.toggleShuffle();
                break;

            case 'r': // Repeat
                e.preventDefault();
                this.cycleRepeat();
                break;

            case 'q': // Queue
                e.preventDefault();
                this.showQueue = !this.showQueue;
                break;

            case 'l': // Like (favorite)
                e.preventDefault();
                if (this.currentSong) {
                    this.toggleFavorite(this.currentSong.song_id);
                }
                break;
        }
    });

    console.log('⌨️ Keyboard shortcuts initialized');
},

// Seek fonksiyonu (ileri/geri sar)
seek(seconds) {
    if (!this.currentSong) return;

    const newTime = this.currentTime + seconds;

    if (this.isHlsStream && this.hlsAudio) {
        // HLS için
        const hlsAudio = this.getActiveHlsAudio();
        if (hlsAudio) {
            hlsAudio.currentTime = Math.max(0, Math.min(newTime, this.duration));
        }
    } else if (this.howl) {
        // Howler için
        this.howl.seek(Math.max(0, Math.min(newTime, this.duration)));
    }

    console.log(`⏩ Seeked: ${seconds > 0 ? '+' : ''}${seconds}s`);
}

// Kısayol kullanıldığında toast göster
showShortcutToast(action, key) {
    this.showToast(`${action} (${key})`, 'info', 1500); // 1.5 saniye
}

// Örnek kullanım:
togglePlayPause() {
    if (this.isPlaying) {
        this.pause();
        this.showShortcutToast('⏸️ Duraklatıldı', 'Space');
    } else {
        this.play();
        this.showShortcutToast('▶️ Oynatılıyor', 'Space');
    }
}

<!-- Keyboard shortcuts help modal -->
<div x-show="showShortcutsHelp"
     x-transition
     class="fixed inset-0 z-50 flex items-center justify-center bg-black/80"
     @click.self="showShortcutsHelp = false">

    <div class="bg-gray-900 rounded-xl p-6 w-full max-w-3xl">
        <div class="flex items-center justify-between mb-6">
            <h3 class="text-2xl font-bold text-white">⌨️ Klavye Kısayolları</h3>
            <button @click="showShortcutsHelp = false">
                <i class="fas fa-times text-gray-400"></i>
            </button>
        </div>

        <div class="grid grid-cols-2 gap-4">
            <!-- Oynatma Kontrolleri -->
            <div class="bg-gray-950 p-4 rounded-lg">
                <h4 class="text-blue-400 font-bold mb-3">Oynatma</h4>
                <div class="space-y-2 text-sm">
                    <div class="flex justify-between">
                        <span class="text-gray-400">Oynat/Duraklat</span>
                        <kbd class="bg-gray-800 px-2 py-1 rounded text-green-400">Space</kbd>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-400">Sonraki Şarkı</span>
                        <kbd class="bg-gray-800 px-2 py-1 rounded text-green-400">N</kbd>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-400">Önceki Şarkı</span>
                        <kbd class="bg-gray-800 px-2 py-1 rounded text-green-400">P</kbd>
                    </div>
                </div>
            </div>

            <!-- Ses Kontrolleri -->
            <div class="bg-gray-950 p-4 rounded-lg">
                <h4 class="text-blue-400 font-bold mb-3">Ses</h4>
                <div class="space-y-2 text-sm">
                    <div class="flex justify-between">
                        <span class="text-gray-400">Ses Aç</span>
                        <kbd class="bg-gray-800 px-2 py-1 rounded text-green-400">↑</kbd>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-400">Ses Kıs</span>
                        <kbd class="bg-gray-800 px-2 py-1 rounded text-green-400">↓</kbd>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-400">Sessiz</span>
                        <kbd class="bg-gray-800 px-2 py-1 rounded text-green-400">M</kbd>
                    </div>
                </div>
            </div>
        </div>

        <p class="text-gray-500 text-sm mt-4 text-center">
            💡 Kısayol listesini açmak için: <kbd class="bg-gray-800 px-2 py-1 rounded">?</kbd> tuşuna basın
        </p>
    </div>
</div>

<!-- Help button (player bar'da) -->
<button @click="showShortcutsHelp = true"
        class="text-gray-400 hover:text-white"
        title="Klavye Kısayolları">
    <i class="fas fa-keyboard"></i>
</button>