<script setup lang="ts">
import { reactive, watch } from "vue";
import { useI18n } from "vue-i18n";
import type { CreateKolPackageRequest } from "@geo/shared-types";

const props = defineProps<{
  open: boolean;
  initialValue?: Partial<CreateKolPackageRequest>;
}>();

const emit = defineEmits<{
  (e: "update:open", value: boolean): void;
  (e: "submit", value: CreateKolPackageRequest): void;
}>();

const { t } = useI18n();

const formState = reactive<CreateKolPackageRequest>({
  name: "",
  description: "",
  industry: "",
  tags: [],
  price_note: "",
  cover_url: "",
});

watch(
  () => props.open,
  (isOpen) => {
    if (isOpen) {
      Object.assign(formState, {
        name: props.initialValue?.name || "",
        description: props.initialValue?.description || "",
        industry: props.initialValue?.industry || "",
        tags: props.initialValue?.tags || [],
        price_note: props.initialValue?.price_note || "",
        cover_url: props.initialValue?.cover_url || "",
      });
    }
  }
);

function handleOk() {
  if (!formState.name.trim()) return;
  emit("submit", { ...formState });
  emit("update:open", false);
}

function handleCancel() {
  emit("update:open", false);
}
</script>

<template>
  <a-modal
    :open="open"
    :title="initialValue ? t('kol.manage.editPackage') : t('kol.manage.createPackage')"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form layout="vertical">
      <a-form-item :label="t('common.title')" required>
        <a-input v-model:value="formState.name" :placeholder="t('common.inputPlease')" />
      </a-form-item>
      
      <a-form-item :label="t('common.description')">
        <a-textarea v-model:value="formState.description" :rows="3" />
      </a-form-item>

      <a-form-item :label="t('kol.marketplace.filter.industry')">
        <a-input v-model:value="formState.industry" />
      </a-form-item>

      <a-form-item label="Tags">
        <a-select v-model:value="formState.tags" mode="tags" style="width: 100%" placeholder="Add tags" />
      </a-form-item>

      <a-form-item label="Price Note">
        <a-input v-model:value="formState.price_note" />
      </a-form-item>

      <a-form-item label="Cover URL">
        <a-input v-model:value="formState.cover_url" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
