<template>
  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-md mx-4">
      <!-- Header -->
      <div class="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Create Collection</h3>
        <rs-button
          variant="text"
          size="sm"
          @click="$emit('close')"
          class="p-2"
        >
          <Icon name="ic:outline-close" size="16" />
        </rs-button>
      </div>

      <!-- Content -->
      <div class="p-6">
        <FormKit
          type="text"
          v-model="collectionName"
          label="Collection Name"
          placeholder="Enter collection name"
          validation="required"
          outer-class="mb-4"
          @keyup.enter="createCollection"
        />
        
        <FormKit
          type="textarea"
          v-model="collectionDescription"
          label="Description (optional)"
          placeholder="Describe this collection"
          rows="3"
          outer-class="mb-4"
        />
      </div>

      <!-- Footer -->
      <div class="flex items-center justify-end gap-3 p-6 border-t border-gray-200 dark:border-gray-700">
        <rs-button
          variant="secondary"
          @click="$emit('close')"
        >
          Cancel
        </rs-button>
        <rs-button
          variant="primary"
          @click="createCollection"
          :disabled="!collectionName.trim()"
        >
          Create Collection
        </rs-button>
      </div>
    </div>
  </div>
</template>

<script setup>
const emit = defineEmits(['close', 'created'])

const collectionName = ref('')
const collectionDescription = ref('')

const createCollection = () => {
  if (!collectionName.value.trim()) return

  const newCollection = {
    id: Date.now(),
    name: collectionName.value.trim(),
    description: collectionDescription.value.trim(),
    requests: [],
    createdAt: new Date().toISOString()
  }

  emit('created', newCollection)
  emit('close')
}

// Focus the input when modal opens
onMounted(() => {
  nextTick(() => {
    const input = document.querySelector('input[type="text"]')
    if (input) input.focus()
  })
})
</script> 