import { useUiStore } from '~/store/ui'
import { usePlayerStore } from '~/store/player'
import { onBeforeUnmount, onUnmounted, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useDataStore } from '~/store/data'

export default defineNuxtPlugin((nuxtApp) => {
  // Ne s'exécuter que côté client
  if (process.server) return

  const ui = useUiStore()
  const player = usePlayerStore()
  const route = useRoute()
  const dataStore = useDataStore()

  function isInputElement(target: EventTarget | null): boolean {
    return (
      target instanceof HTMLInputElement ||
      target instanceof HTMLTextAreaElement ||
      target instanceof HTMLSelectElement ||
      (target instanceof HTMLElement && target.isContentEditable)
    )
  }

  function handleKeyDown(e: KeyboardEvent) {
    console.log('Key pressed:', e.code, 'Key:', e.key, 'Target:', e.target)

    // Ne pas interférer avec les champs de formulaire
    if (isInputElement(e.target as HTMLElement)) {
      console.log('Input element, ignoring key')
      return
    }

    // Gestion du raccourci de recherche (Ctrl+F / Cmd+F)
    if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'f') {
      e.preventDefault()
      if (!ui.showSearch) {
        ui.openSearch()
      }
      return
    }

    // Gestion des autres touches uniquement si pas de touche de contrôle enfoncée
    if (e.ctrlKey || e.altKey || e.metaKey) {
      return
    }

    switch (e.code) {
      // Gestion de la barre d'espace pour play/pause
      case 'Space':
        console.log('Space pressed, toggling play/pause')
        e.preventDefault()
        e.stopPropagation()
        if (player.currentTrack) {
          console.log('Toggling play state')
          player.togglePlay()
        } else {
          console.log('No current track to play/pause')
        }
        return false

      // Gestion de la touche Échap pour fermer la boîte
      case 'Escape':
        e.preventDefault()
        ui.closeBox()
        break

      // Gestion de la touche Entrée pour ouvrir une boîte
      case 'Enter':
        if (document.activeElement?.id) {
          e.preventDefault()
          ui.selectBox(document.activeElement.id)
          window.scrollTo({ top: 0, behavior: 'smooth' })
        }
        break

      // Gestion des touches fléchées (à implémenter si nécessaire)
      case 'ArrowUp':
      case 'ArrowDown':
      case 'ArrowLeft':
      case 'ArrowRight':
        // Implémentation future de la navigation au clavier
        break
    }
  }

  // Ajout de l'écouteur d'événements avec capture pour intercepter l'événement plus tôt
  window.addEventListener('keydown', handleKeyDown, { capture: true, passive: false })
  console.log('Keyboard event listener added')

  // Nettoyage lors de la destruction
  const stop = () => {
    window.removeEventListener('keydown', handleKeyDown)
  }

  // Nettoyage quand le composant est démonté
  onUnmounted(stop)

  // Nettoyage quand la page est déchargée
  if (process.client) {
    window.addEventListener('unload', stop)
    onBeforeUnmount(() => {
      window.removeEventListener('unload', stop)
    })
  }
})