<template>
  <aside class="bg-noctune-cream flex flex-col h-full">
    <nav class="p-4 space-y-2">
      <router-link to="/home"
        class="flex items-center gap-3 px-4 py-3 rounded-lg font-bold text-black hover:bg-noctune-teal/20 transition-colors"
        :class="{ 'bg-noctune-teal text-black': isActive('/home') }">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
        <span class="tracking-wide">HOME</span>
      </router-link>

      <router-link to="/library"
        class="flex items-center gap-3 px-4 py-3 rounded-lg font-bold text-black hover:bg-noctune-teal/20 transition-colors"
        :class="{ 'bg-noctune-teal text-black': isActive('/library') }">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/></svg>
        <span class="tracking-wide">LIBRARY</span>
      </router-link>

      <div class="relative group">
        <router-link to="/playlist"
          class="flex items-center gap-3 px-4 py-3 rounded-lg font-bold text-black hover:bg-noctune-teal/20 transition-colors"
          :class="{ 'bg-noctune-teal text-black': isActive('/playlist') || isActivePrefix('/playlist/') }">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M3 10h11v2H3v-2zm0-4h11v2H3V6zm0 8h7v2H3v-2zm13-1v8l6-4-6-4z"/></svg>
          <span class="tracking-wide">PLAYLIST</span>
          <svg class="w-4 h-4 ml-auto text-gray-500 group-hover:rotate-180 transition-transform" fill="currentColor" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>
        </router-link>

        <div class="absolute left-0 top-full mt-1 w-56 bg-white border-2 border-black rounded-lg shadow-[4px_4px_0px_0px_#000] opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 max-h-72 overflow-y-auto">
          <div v-if="playlists.length" class="p-2">
            <div v-for="pl in playlists" :key="pl._id"
              @click="router.push(`/playlist/${pl._id}`)"
              class="flex items-center gap-2 px-3 py-2 rounded-lg cursor-pointer hover:bg-noctune-teal/20 transition-colors text-sm font-medium text-black"
            >
              <svg class="w-4 h-4 flex-shrink-0 text-gray-500" fill="currentColor" viewBox="0 0 24 24"><path d="M3 10h11v2H3v-2zm0-4h11v2H3V6zm0 8h7v2H3v-2zm13-1v8l6-4-6-4z"/></svg>
              <span class="truncate">{{ pl.name }}</span>
            </div>
          </div>
          <div v-else class="p-4 text-center text-sm text-gray-500">No playlists yet</div>
          <div class="border-t-2 border-gray-200 p-2">
            <router-link to="/playlist"
              class="block px-3 py-2 rounded-lg text-sm font-bold text-noctune-teal hover:bg-noctune-teal/20 transition-colors text-center">
              Browse All Playlists
            </router-link>
          </div>
        </div>
      </div>

      <router-link v-if="authStore.isAdmin" to="/admin/tracks"
        class="flex items-center gap-3 px-4 py-3 rounded-lg font-bold text-black hover:bg-noctune-orange/20 transition-colors"
        :class="{ 'bg-noctune-orange text-black': isActive('/admin/tracks') }">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm-3 17l-4-4 1.41-1.41L11 16.17l6.59-6.59L19 11l-8 8z"/></svg>
        <span class="tracking-wide">UPLOAD TRACK</span>
      </router-link>
    </nav>

    <div class="mx-4 border-t-2 border-gray-300 my-2"></div>

    <div class="px-4">
      <button @click="openCreatePlaylist" class="w-full bg-noctune-yellow border-2 border-black rounded-lg py-3 px-4 font-bold flex items-center gap-2 hover:bg-yellow-400 transition-colors">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 4v16m8-8H4"/></svg>
        <span class="tracking-wide">CREATE PLAYLIST</span>
      </button>
    </div>

    <div class="flex-1"></div>

    <CreatePlaylistModal :show="showCreateModal" @close="showCreateModal = false" @created="onPlaylistCreated" />
  </aside>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAuthStore } from '../stores/authStore.js'
import api from '../lib/api.js'
import { useAuthGate } from '../composables/useAuthGate.js'
import CreatePlaylistModal from './CreatePlaylistModal.vue'

const route = useRoute()
const router = useRouter()
const authStore = useAuthStore()

const playlists = ref([])
const showCreateModal = ref(false)

const { requireAuth } = useAuthGate()

const isActive = (path) => route.path === path
const isActivePrefix = (prefix) => route.path.startsWith(prefix)

async function fetchPlaylists() {
  if (!authStore.isLoggedIn) return
  try {
    const { data } = await api.get('/playlists')
    if (data.success) playlists.value = data.data
  } catch {}
}

function openCreatePlaylist() {
  requireAuth({
    redirectTo: '/login',
    onAuthenticated: () => { showCreateModal.value = true }
  })
}

function onPlaylistCreated(playlist) {
  showCreateModal.value = false
  playlists.value.unshift(playlist)
}

onMounted(fetchPlaylists)
</script>
