<script setup lang="ts">
import { PROJECT_STATUSES, type ProjectStatus } from "@workspace/schema/constants";

const props = withDefaults(
  defineProps<{
    name?: string;
    description?: string;
    status?: ProjectStatus;
    saving?: boolean;
  }>(),
  {
    name: "",
    description: "",
    status: "active",
  },
);

const emit = defineEmits<{
  submit: [body: { name: string; description?: string; status: string }];
}>();

const name = ref(props.name);
const description = ref(props.description);
const status = ref(props.status);

function onSubmit() {
  emit("submit", {
    name: name.value,
    description: description.value || undefined,
    status: status.value,
  });
}
</script>

<template>
  <form class="space-y-6" @submit.prevent="onSubmit">
    <UFormField label="Name" required>
      <UInput v-model="name" placeholder="Project name" class="w-full" required />
    </UFormField>

    <UFormField label="Description">
      <UTextarea v-model="description" placeholder="Optional description" class="w-full" :rows="3" />
    </UFormField>

    <UFormField label="Status">
      <USelect v-model="status" :items="PROJECT_STATUSES.map((s) => ({ label: s, value: s }))" class="w-full" />
    </UFormField>

    <div class="flex gap-3 justify-end">
      <UButton label="Cancel" color="neutral" variant="outline" to="/projects" />
      <UButton type="submit" label="Save" color="primary" :loading="saving" />
    </div>
  </form>
</template>
