<template>
  <div class="bookaro-booking-grid">
    <div class="bookaro-booking-col">
      <div class="step-header">
        <h3>{{ i18n.user_info_title }}</h3>
        <button class="bookaro-booking-btn --secondary back-btn" @click="$emit('back')">
          ❮ {{ i18n.back }}
        </button>
      </div>

      <div class="bookaro-form-grid">
        <div class="form-group">
          <label for="bookaro-booking-name">{{ i18n.name_label }}</label>
          <input
              id="bookaro-booking-name"
              v-model="local_name"
              type="text"
              :placeholder="i18n.name_placeholder"
          />
        </div>
        <div class="form-group">
          <label for="bookaro-booking-email">{{ i18n.email_label }}</label>
          <input
              id="bookaro-booking-email"
              v-model="local_email"
              type="email"
              :placeholder="i18n.email_placeholder"
          />
        </div>
        <div class="form-group">
          <label for="bookaro-booking-phone">
            {{ phoneLabel }}
          </label>
          <input
              id="bookaro-booking-phone"
              v-model="local_phone"
              type="text"
              :placeholder="i18n.phone_placeholder"
          />
          <div v-if="!phoneRequired" class="text-xs text-gray-500 mt-1">
            {{ optionalNote }}
          </div>
        </div>
        <div class="bookaro-hp-field" aria-hidden="true">
          <label for="bookaro-booking-website">Website</label>
          <input
              id="bookaro-booking-website"
              v-model="local_honeypot"
              type="text"
              autocomplete="off"
              tabindex="-1"
          />
        </div>
      </div>
    </div>

    <div class="bookaro-booking-col">
      <div v-if="error" class="error">{{ error }}</div>

      <slot name="before-confirm" />

      <div class="bookaro-booking-actions">
        <button
            :disabled="!isComplete"
            @click="confirmUserInfo"
            class="bookaro-booking-btn"
        >
          {{ submitLabel }}
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserInfoStep',
  props: {
    i18n: {
      type: Object,
      required: true
    },
    user_name: {
      type: String,
      required: true
    },
    user_email: {
      type: String,
      required: true
    },
    user_phone: {
      type: String,
      required: true
    },
    honeypot_value: {
      type: String,
      default: ''
    },
    phone_required: {
      type: Boolean,
      default: true
    },
    error: {
      type: String,
      required: false
    },
    submit_label: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      local_name: this.user_name,
      local_email: this.user_email,
      local_phone: this.user_phone,
      local_honeypot: this.honeypot_value
    };
  },
  computed: {
    phoneRequired() {
      return !!this.phone_required;
    },
    phoneLabel() {
      if (this.phoneRequired) {
        return this.i18n.phone_label;
      }
      const optional = this.i18n.optional_label;
      return `${this.i18n.phone_label} (${optional})`;
    },
    optionalNote() {
      return this.i18n.phone_optional_note || this.i18n.optional_label;
    },
    isComplete() {
      return !!(this.local_name && this.local_email && (this.phoneRequired ? this.local_phone : true));
    },
    submitLabel() {
      return this.submit_label || this.i18n.confirm_booking;
    }
  },
  methods: {
    confirmUserInfo() {
      this.$emit('advance', {
        user_name:  this.local_name,
        user_email: this.local_email,
        user_phone: this.local_phone,
        booking_honeypot: this.local_honeypot
      });
      this.$emit('submit-booking');
    }
  }
};
</script>

<style scoped>
.bookaro-hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
</style>



