<template>
  <form class="space-y-4" @submit.prevent="onSubmit">
    <div>
      <label class="block text-sm text-gray-600 mb-1">کلمه</label>
      <input v-model="form.word" type="text" class="w-full border rounded px-3 py-2 focus:outline-none focus:ring focus:border-primary" required />
    </div>
    <div class="flex items-center space-x-2 rtl:space-x-reverse">
      <input id="is_correct" v-model="form.is_correct" type="checkbox" class="h-4 w-4 text-primary" />
      <label for="is_correct" class="text-sm text-gray-700">درست است</label>
    </div>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
      <div>
        <label class="block text-sm text-gray-600 mb-1">ریشه</label>
        <input v-model="form.stem" type="text" class="w-full border rounded px-3 py-2" />
      </div>
      <div>
        <label class="block text-sm text-gray-600 mb-1">اصل</label>
        <input v-model="form.origin" type="text" class="w-full border rounded px-3 py-2" />
      </div>
    </div>
    <div>
      <label class="block text-sm text-gray-600 mb-1">کلاس واژه</label>
      <input v-model="wordClass" type="text" placeholder="مثال: noun, plural_noun" class="w-full border rounded px-3 py-2" />
    </div>
    <div>
      <label class="block text-sm text-gray-600 mb-1">برچسب‌ها</label>
      <input v-model="tagsString" type="text" placeholder="مثال: formal, literary" class="w-full border rounded px-3 py-2" />
    </div>
    <div>
      <label class="block text-sm text-gray-600 mb-1">زبان</label>
      <input v-model="langString" type="text" placeholder="مثال: persian, arabic" class="w-full border rounded px-3 py-2" />
    </div>
    <div>
      <label class="block text-sm text-gray-600 mb-1">دامنه</label>
      <input v-model="scopeString" type="text" placeholder="مثال: ادبیات, آموزش" class="w-full border rounded px-3 py-2" />
    </div>
    <div>
      <label class="block text-sm text-gray-600 mb-1">توضیح مدیر</label>
      <textarea v-model="form.admin_description" rows="3" class="w-full border rounded px-3 py-2"></textarea>
    </div>
    <div class="pt-2">
      <button type="submit" class="px-4 py-2 rounded bg-primary text-white hover:opacity-90">ذخیره</button>
    </div>
  </form>
</template>

<script>
export default {
  name: 'WordForm',
  props: {
    value: { type: Object, required: true }
  },
  data() {
    return {
      form: { ...this.value },
      tagsStringLocal: (this.value.tags || []).join(', '),
      langStringLocal: (this.value.lang || []).join(', '),
      scopeStringLocal: (this.value.scope || []).join(', '),
      wordClassLocal: (this.value.word_class || []).join(', ')
    };
  },
  computed: {
    tagsString: {
      get() { return this.tagsStringLocal; },
      set(v) { this.tagsStringLocal = v; this.form.tags = this.csvToArray(v); }
    },
    langString: {
      get() { return this.langStringLocal; },
      set(v) { this.langStringLocal = v; this.form.lang = this.csvToArray(v); }
    },
    scopeString: {
      get() { return this.scopeStringLocal; },
      set(v) { this.scopeStringLocal = v; this.form.scope = this.csvToArray(v); }
    },
    wordClass: {
      get() { return this.wordClassLocal; },
      set(v) { this.wordClassLocal = v; this.form.word_class = this.csvToArray(v); }
    }
  },
  methods: {
    csvToArray(v) {
      return (v || '')
        .split(',')
        .map(s => s.trim())
        .filter(Boolean);
    },
    onSubmit() {
      this.$emit('submit', this.form);
    }
  }
};
</script>

<style>
</style>


