<template>
  <form @submit.prevent="handleSubmit" class="form">
    <div class="field">
      <label>Name *</label>
      <InputText v-model="form.name" required class="w-full" />
    </div>

    <div class="field-row">
      <div class="field">
        <label>Breite (m) *</label>
        <InputNumber v-model="form.width_m" :min="0.1" :max="99" :step="0.1" :min-fraction-digits="1" required class="w-full" />
      </div>
      <div class="field">
        <label>Länge (m) *</label>
        <InputNumber v-model="form.length_m" :min="0.1" :max="99" :step="0.1" :min-fraction-digits="1" required class="w-full" />
      </div>
    </div>

    <div class="field">
      <label>Lage *</label>
      <Dropdown
        v-model="form.location"
        :options="locationOptions"
        option-label="label"
        option-value="value"
        required
        class="w-full"
      />
    </div>

    <div class="field">
      <label>Bodentyp</label>
      <Dropdown
        v-model="form.soil_type"
        :options="soilOptions"
        option-label="label"
        option-value="value"
        class="w-full"
      />
    </div>

    <div class="field">
      <label>Notizen</label>
      <Textarea v-model="form.notes" rows="2" class="w-full" />
    </div>

    <div class="dialog-footer">
      <Button type="button" label="Abbrechen" severity="secondary" text @click="$emit('cancel')" />
      <Button type="submit" label="Speichern" icon="pi pi-check" />
    </div>
  </form>
</template>

<script setup>
import { reactive, watch } from 'vue'
import InputText from 'primevue/inputtext'
import InputNumber from 'primevue/inputnumber'
import Dropdown from 'primevue/dropdown'
import Textarea from 'primevue/textarea'
import Button from 'primevue/button'

const props = defineProps({ initial: { type: Object, default: null } })
const emit = defineEmits(['save', 'cancel'])

const form = reactive({
  name: '',
  width_m: 1.0,
  length_m: 1.0,
  location: 'sonnig',
  soil_type: 'normal',
  notes: '',
})

watch(() => props.initial, (val) => {
  if (val) Object.assign(form, { name: val.name, width_m: Number(val.width_m), length_m: Number(val.length_m), location: val.location, soil_type: val.soil_type, notes: val.notes || '' })
}, { immediate: true })

const locationOptions = [
  { label: 'Sonnig', value: 'sonnig' },
  { label: 'Halbschatten', value: 'halbschatten' },
  { label: 'Schatten', value: 'schatten' },
]
const soilOptions = [
  { label: 'Normal', value: 'normal' },
  { label: 'Sandig', value: 'sandig' },
  { label: 'Lehmig', value: 'lehmig' },
  { label: 'Humusreich', value: 'humusreich' },
]

function handleSubmit() {
  emit('save', { ...form, notes: form.notes || null })
}
</script>

<style scoped>
.form { display: flex; flex-direction: column; gap: 0.75rem; }
.field { display: flex; flex-direction: column; gap: 0.3rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
label { font-size: 0.875rem; font-weight: 600; }
.w-full { width: 100%; }
.dialog-footer { display: flex; justify-content: flex-end; gap: 0.5rem; padding-top: 0.5rem; }
</style>
