<template>
  <div v-if="fields.length" class="custom-fields">
    <div class="form-group" v-for="f in fields" :key="f.fieldid">
      <label>{{ f.label }}</label>

      <select v-if="f.datatype === 'select'" v-model="local[f.fieldid]" class="form-control">
        <option value="">-- none --</option>
        <option v-for="opt in f.options" :key="opt" :value="opt">{{ opt }}</option>
      </select>

      <label v-else-if="f.datatype === 'boolean'" class="checkbox-label">
        <input type="checkbox"
               :checked="local[f.fieldid] === 'true'"
               @change="local[f.fieldid] = $event.target.checked ? 'true' : 'false'" />
        Yes
      </label>

      <input v-else-if="f.datatype === 'date'" type="date" v-model="local[f.fieldid]" class="form-control" />
      <input v-else-if="f.datatype === 'number'" type="number" v-model="local[f.fieldid]" class="form-control" />
      <input v-else type="text" v-model="local[f.fieldid]" class="form-control" />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from 'vue'
import { customFieldsApi } from '../api'

const props = defineProps({
  // Asset type whose fields to render (needed even for a brand-new asset).
  assettypeid: { type: [Number, String], default: null },
  // Existing asset id, if editing - used to preload stored values.
  assetid: { type: [Number, String], default: null },
})

const fields = ref([])
const local = reactive({})

async function load() {
  fields.value = []
  Object.keys(local).forEach(k => delete local[k])
  if (!props.assettypeid) return
  try {
    // Definitions for this asset type (form-visible, active).
    const defsResponse = await customFieldsApi.list({ assettypeid: props.assettypeid })
    const defs = (defsResponse.data.data || []).filter(f => f.showonform)
    fields.value = defs

    // Seed blanks, then overlay stored values if editing.
    for (const f of defs) local[f.fieldid] = f.datatype === 'boolean' ? 'false' : ''
    if (props.assetid) {
      const valResponse = await customFieldsApi.forAsset(props.assetid)
      for (const f of (valResponse.data.data || [])) {
        if (f.value != null) local[f.fieldid] = String(f.value)
      }
    }
  } catch (err) {
    console.error('Error loading custom field defs:', err)
  }
}

// Persist current values against an asset id (parent calls after asset save).
async function save(assetid) {
  if (!assetid || !fields.value.length) return
  const values = {}
  for (const f of fields.value) values[f.fieldid] = local[f.fieldid]
  await customFieldsApi.saveForAsset(assetid, values)
}

onMounted(load)
watch(() => [props.assettypeid, props.assetid], load)

defineExpose({ save, hasFields: () => fields.value.length > 0 })
</script>

<style scoped>
.custom-fields {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
</style>
