<template>
  <section class="content-grid">
    <v-card class="span-5 panel-pad">
      <h2 class="section-title mb-4">Asset template</h2>
      <v-text-field v-model="localForm.name" label="Name" />
      <v-textarea v-model="localForm.description" label="Description" rows="2" />
      <v-select v-model="localForm.defaults.category" :items="categoryItems" label="Category" />
      <v-text-field v-model.number="localForm.defaults.useful_life_months" type="number" label="Useful life months" />
      <v-select v-model="localForm.defaults.depreciation_method" :items="methodItems" item-title="title" item-value="value" label="Depreciation method" />
      <v-divider class="my-4" />
      <div class="toolbar-row mb-3">
        <h3 class="section-title">Custom fields</h3>
        <v-spacer />
        <v-btn variant="tonal" size="small" prepend-icon="mdi-plus" @click="addField">Add field</v-btn>
      </div>
      <div v-if="!localForm.custom_fields.length" class="quiet text-body-2 mb-4">No custom fields defined.</div>
      <div v-for="(field, index) in localForm.custom_fields" :key="field.local_id" class="custom-field-row">
        <v-text-field v-model="field.label" label="Label" @update:model-value="syncFieldKey(field)" />
        <v-text-field v-model="field.key" label="Key" />
        <v-select v-model="field.type" :items="customFieldTypes" item-title="title" item-value="value" label="Type" />
        <v-text-field v-if="field.type !== 'bool'" v-model="field.defaultValue" label="Default" />
        <v-switch v-else v-model="field.defaultValue" label="Default" color="primary" density="compact" hide-details />
        <v-switch v-model="field.required" label="Required" color="primary" density="compact" hide-details />
        <v-btn icon="mdi-delete" variant="text" color="error" @click="localForm.custom_fields.splice(index, 1)" />
      </div>
      <v-btn color="primary" prepend-icon="mdi-content-save" @click="$emit('save-template', localForm)">Save template</v-btn>
    </v-card>
    <v-card class="span-7 panel-pad">
      <h2 class="section-title mb-4">Templates</h2>
      <v-list lines="two">
        <v-list-item v-for="template in templates" :key="template.id" prepend-icon="mdi-form-select">
          <v-list-item-title>{{ template.name }}</v-list-item-title>
          <v-list-item-subtitle>{{ template.description }}</v-list-item-subtitle>
          <template #append>
            <v-chip size="small" variant="tonal">{{ template.custom_fields.length }} fields</v-chip>
          </template>
        </v-list-item>
      </v-list>
    </v-card>
  </section>
</template>

<script>
import { slugFieldKey } from '../utils/assets';
import { clonePlain } from '../utils/clone';

export default {
  props: {
    categoryItems: { type: Array, required: true },
    customFieldTypes: { type: Array, required: true },
    methodItems: { type: Array, required: true },
    templateForm: { type: Object, required: true },
    templates: { type: Array, required: true }
  },
  emits: ['save-template'],
  data() {
    return {
      localForm: clonePlain(this.templateForm)
    };
  },
  watch: {
    templateForm: {
      handler(value) {
        this.localForm = clonePlain(value);
      },
      deep: true
    }
  },
  methods: {
    addField() {
      this.localForm.custom_fields.push({
        local_id: crypto.randomUUID ? crypto.randomUUID() : String(Date.now() + Math.random()),
        key: '',
        label: '',
        type: 'text',
        required: false,
        defaultValue: ''
      });
    },
    syncFieldKey(field) {
      if (!field.key) field.key = slugFieldKey(field.label);
    }
  }
};
</script>
