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

const { t } = useI18n();

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="t('form.name')" required>
      <UInput v-model="name" :placeholder="t('form.namePlaceholder')" class="w-full" required />
    </UFormField>

    <UFormField :label="t('form.description')">
      <UTextarea v-model="description" :placeholder="t('form.descriptionPlaceholder')" class="w-full" :rows="3" />
    </UFormField>

    <UFormField :label="t('form.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="t('form.cancel')" icon="i-lucide-x" color="neutral" variant="outline" to="/projects" />
      <UButton type="submit" :label="t('form.save')" icon="i-lucide-save" color="primary" :loading="saving" />
    </div>
  </form>
</template>
