<template>
  <div class="multisteps-form__panel" :class="isActive ? activeClass : ''">
    <h6 class="mb-3 text-dark font-weight-bold">Informations du Défunt</h6>

    <div class="row">
      <div class="col-md-6 mb-3">
        <label class="form-label">Prénom</label>
        <input
          v-model="formData.first_name"
          type="text"
          class="form-control"
          :class="{ 'is-invalid': hasError('first_name') }"
          placeholder="Prénom du défunt"
          maxlength="191"
        />
        <div v-if="getFieldError('first_name')" class="invalid-feedback">
          {{ getFieldError("first_name") }}
        </div>
      </div>
      <div class="col-md-6 mb-3">
        <label class="form-label">Nom *</label>
        <input
          v-model="formData.last_name"
          type="text"
          class="form-control"
          :class="{ 'is-invalid': hasError('last_name') }"
          placeholder="Nom du défunt"
          required
          maxlength="191"
        />
        <div v-if="getFieldError('last_name')" class="invalid-feedback">
          {{ getFieldError("last_name") }}
        </div>
      </div>
      <div class="col-md-6 mb-3">
        <label class="form-label">Date de naissance</label>
        <input
          v-model="formData.birth_date"
          type="date"
          class="form-control"
          :class="{ 'is-invalid': hasError('birth_date') }"
        />
        <div v-if="getFieldError('birth_date')" class="invalid-feedback">
          {{ getFieldError("birth_date") }}
        </div>
      </div>
      <div class="col-md-6 mb-3">
        <label class="form-label">Date de décès</label>
        <input
          v-model="formData.death_date"
          type="date"
          class="form-control"
          :class="{ 'is-invalid': hasError('death_date') }"
        />
        <div v-if="getFieldError('death_date')" class="invalid-feedback">
          {{ getFieldError("death_date") }}
        </div>
      </div>
      <div class="col-md-6 mb-3">
        <label class="form-label">Lieu de décès</label>
        <input
          v-model="formData.place_of_death"
          type="text"
          class="form-control"
          :class="{ 'is-invalid': hasError('place_of_death') }"
          placeholder="Lieu de décès"
          maxlength="255"
        />
        <div v-if="getFieldError('place_of_death')" class="invalid-feedback">
          {{ getFieldError("place_of_death") }}
        </div>
      </div>
      <div class="col-md-6 mb-3">
        <label class="form-label">Genre</label>
        <select v-model="formData.gender" class="form-select">
          <option value="">Sélectionner</option>
          <option value="male">Homme</option>
          <option value="female">Femme</option>
          <option value="other">Autre</option>
        </select>
      </div>
      <div class="col-md-12 mb-3">
        <label class="form-label">Notes</label>
        <textarea
          v-model="formData.notes"
          class="form-control"
          :class="{ 'is-invalid': hasError('notes') }"
          rows="3"
          placeholder="Notes supplémentaires..."
        ></textarea>
        <div v-if="getFieldError('notes')" class="invalid-feedback">
          {{ getFieldError("notes") }}
        </div>
      </div>
    </div>
    <div class="d-flex justify-content-end mt-3">
      <button
        type="button"
        class="btn bg-gradient-primary"
        @click="$emit('next')"
        :disabled="validating"
      >
        <span v-if="validating">
          <i class="fas fa-spinner fa-spin me-2"></i>
          Validation...
        </span>
        <span v-else>
          Suivant
          <i class="fas fa-arrow-right ms-2"></i>
        </span>
      </button>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, toRefs } from "vue";

const props = defineProps({
  formData: {
    type: Object,
    required: true,
  },
  isActive: {
    type: Boolean,
    default: false,
  },
  activeClass: {
    type: String,
    default: "js-active",
  },
  errors: {
    type: Array,
    default: () => [],
  },
  validating: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["next"]);

// Error helpers using props
const getFieldError = (field) => {
  const error = props.errors.find((err) => err.field === field);
  return error ? error.message : "";
};

const hasError = (field) => {
  return props.errors.some((err) => err.field === field);
};
</script>
