<template>
  <BaseDialog
    :model-value="modelValue"
    @update:model-value="$emit('update:modelValue', $event)"
    :title="$t('quickAddMember.title')"
    size="medium"
    :close-on-overlay="false"
    @close="handleClose"
  >
    <div class="quick-add-form">
      <div class="form-row">
        <div class="form-group">
          <label for="firstName">{{ $t('quickAddMember.firstName') }}:</label>
          <input 
            type="text" 
            id="firstName" 
            :value="localMember.firstName"
            @input="updateMember('firstName', $event.target.value)"
            required 
            class="form-input"
            :placeholder="$t('quickAddMember.firstName')"
          />
        </div>
        <div class="form-group">
          <label for="lastName">{{ $t('quickAddMember.lastName') }}:</label>
          <input 
            type="text" 
            id="lastName" 
            :value="localMember.lastName"
            @input="updateMember('lastName', $event.target.value)"
            class="form-input"
            :placeholder="$t('members.lastName')"
          />
        </div>
      </div>
      <div class="form-row">
        <div class="form-group">
          <label for="birthDate">{{ $t('quickAddMember.birthDate') }}:</label>
          <input 
            type="date" 
            id="birthDate" 
            :value="localMember.birthDate"
            @input="updateMember('birthDate', $event.target.value)"
            class="form-input" 
          />
        </div>
        <div class="form-group">
          <label for="gender">{{ $t('quickAddMember.gender') }}:</label>
          <select id="gender" :value="localMember.gender" @change="updateMember('gender', $event.target.value)" class="form-select">
            <option value="">{{ $t('quickAddMember.pleaseSelect') }}</option>
            <option value="male">{{ $t('members.genderMale') }}</option>
            <option value="female">{{ $t('members.genderFemale') }}</option>
            <option value="diverse">{{ $t('members.genderDiverse') }}</option>
          </select>
        </div>
      </div>
    </div>
    
    <template #footer>
      <button class="btn-secondary" @click="handleClose">{{ $t('quickAddMember.cancel') }}</button>
      <button 
        class="btn-primary" 
        @click="handleSubmit" 
        :disabled="!isValid"
      >
        {{ $t('quickAddMember.createAndAdd') }}
      </button>
    </template>
  </BaseDialog>
</template>

<script>
import BaseDialog from './BaseDialog.vue';

export default {
  name: 'QuickAddMemberDialog',
  components: {
    BaseDialog
  },
  props: {
    modelValue: {
      type: Boolean,
      default: false
    },
    member: {
      type: Object,
      default: () => ({ firstName: '', lastName: '', birthDate: '', gender: '' })
    }
  },
  emits: ['update:modelValue', 'close', 'submit', 'update:member'],
  data() {
    return {
      localMember: { ...this.member }
    };
  },
  computed: {
    isValid() {
      return this.localMember.firstName && this.localMember.firstName.trim() !== '';
    }
  },
  watch: {
    member: {
      handler(newVal) {
        this.localMember = { ...newVal };
      },
      deep: true
    }
  },
  methods: {
    updateMember(field, value) {
      this.localMember[field] = value;
      this.$emit('update:member', { ...this.localMember });
    },
    
    handleClose() {
      this.$emit('update:modelValue', false);
      this.$emit('close');
    },
    handleSubmit() {
      if (this.isValid) {
        this.$emit('submit', this.localMember);
      }
    }
  }
};
</script>

<style scoped>
.quick-add-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.25rem;
}

.form-row {
  display: flex;
  gap: 1rem;
}

.form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-weight: 600;
  color: var(--text-color);
  font-size: 0.9rem;
}

.form-input,
.form-select {
  width: 100%;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.9rem;
  background: var(--surface-muted);
  color: var(--text-color);
}

.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px var(--primary-light);
}

.btn-primary,
.btn-secondary {
  padding: 0.65rem 1.4rem;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
  color: var(--text-on-primary);
}

.btn-primary:hover:not(:disabled) {
  opacity: 0.9;
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-secondary {
  background: var(--surface-color);
  border-color: var(--border-color);
  color: var(--text-color);
}

.btn-secondary:hover {
  background: var(--surface-muted);
  border-color: var(--primary-soft);
}

@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
  }
}
</style>
