<template>
  <div v-if="show" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50" @click.self="$emit('close')">
    <div class="bg-white rounded-2xl border-4 border-black p-6 w-full max-w-md mx-4 shadow-[8px_8px_0px_0px_#000]">
      <div class="flex items-center justify-between mb-6">
        <h2 class="text-xl font-black text-black">CREATE PLAYLIST</h2>
        <button @click="$emit('close')" class="text-gray-500 hover:text-black text-2xl leading-none">&times;</button>
      </div>

      <p v-if="error" class="text-red-500 text-sm mb-4 font-medium">{{ error }}</p>

      <div class="space-y-4">
        <div>
          <label class="block text-xs font-bold text-gray-600 mb-1 tracking-wider">NAME</label>
          <input
            v-model="name"
            type="text"
            placeholder="My awesome playlist"
            class="w-full border-2 border-black rounded-lg px-4 py-2 focus:outline-none text-black"
          />
        </div>

        <div>
          <label class="block text-xs font-bold text-gray-600 mb-1 tracking-wider">DESCRIPTION</label>
          <textarea
            v-model="description"
            placeholder="Optional description"
            rows="2"
            class="w-full border-2 border-black rounded-lg px-4 py-2 focus:outline-none resize-none text-black"
          />
        </div>

        <div>
          <label class="block text-xs font-bold text-gray-600 mb-1 tracking-wider">COVER IMAGE</label>
          <input
            type="file"
            accept="image/*"
            @change="onCoverChange"
            class="w-full text-sm text-gray-600 file:mr-3 file:py-2 file:px-4 file:border-2 file:border-black file:rounded-lg file:font-bold file:text-sm file:bg-noctune-yellow file:cursor-pointer"
          />
        </div>

        <button
          @click="handleCreate"
          :disabled="creating"
          class="w-full bg-noctune-teal border-2 border-black rounded-lg py-3 font-bold text-black hover:bg-teal-600 transition-colors disabled:opacity-50 cursor-pointer"
        >
          <span v-if="creating" class="inline-block w-4 h-4 border-2 border-black border-t-transparent rounded-full animate-spin mr-2" />
          {{ creating ? 'Creating...' : 'CREATE PLAYLIST' }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import api from '../lib/api.js'

const props = defineProps({ show: Boolean })
const emit = defineEmits(['close', 'created'])

const name = ref('')
const description = ref('')
const coverFile = ref(null)
const creating = ref(false)
const error = ref('')

function onCoverChange(e) {
  coverFile.value = e.target.files[0] || null
}

async function handleCreate() {
  error.value = ''
  if (!name.value?.trim()) {
    error.value = 'Playlist name is required'
    return
  }
  creating.value = true
  try {
    const formData = new FormData()
    formData.append('name', name.value.trim())
    if (description.value?.trim()) formData.append('description', description.value.trim())
    if (coverFile.value) formData.append('playlistCover', coverFile.value)

    const { data } = await api.post('/playlists', formData, {
      headers: { 'Content-Type': 'multipart/form-data' },
    })

    if (data.success) {
      emit('created', data.data)
      name.value = ''
      description.value = ''
      coverFile.value = null
    }
  } catch (err) {
    error.value = err.response?.data?.message || 'Failed to create playlist'
  } finally {
    creating.value = false
  }
}
</script>
