<script setup lang="ts">
import { ref } from 'vue';

const props = defineProps<{
  open: boolean;
  parentId?: string | null;
}>();

const emit = defineEmits(['update:open', 'created']);

const name = ref('');
const loading = ref(false);

const close = () => {
  emit('update:open', false);
  name.value = '';
};

const create = async () => {
  if (!name.value) return;
  loading.value = true;
  try {
    await $fetch('/api/folders', {
      method: 'POST',
      body: { name: name.value, parentId: props.parentId }
    });
    emit('created');
    close();
  } catch (error) {
    console.error(error);
  } finally {
    loading.value = false;
  }
};
</script>

<template>
  <UModal :open="open" @update:open="$emit('update:open', $event)">
    <template #content>
      <UCard>
        <template #header>
          <h3 class="text-xl font-semibold">New Folder</h3>
        </template>

        <form @submit.prevent="create" class="space-y-4">
          <UFormGroup label="Folder Name">
            <UInput v-model="name" placeholder="E.g., Projects" autofocus required />
          </UFormGroup>
          
          <div class="flex justify-end gap-3 mt-6">
            <UButton color="neutral" variant="ghost" @click="close">Cancel</UButton>
            <UButton type="submit" :loading="loading">Create</UButton>
          </div>
        </form>
      </UCard>
    </template>
  </UModal>
</template>
