<template>
  <Dialog
    :visible="visible"
    @update:visible="val => $emit('update:visible', val)"
    modal
    header="참가 신청/수정"
    :style="{ width: '400px' }"
    :closable="true"
    @hide="$emit('close')"
  >
    <div class="flex flex-wrap gap-3">
      <!-- 회원 선택 -->
      <div class="w-full min-w-[200px]">
        <label>회원</label>
        <Select
          v-model="selectedMember"
          :options="memberOptions"
          optionLabel="name"
          placeholder="회원 선택"
          class="w-full"
          filter
          filterPlaceholder="이름으로 검색"
        >
          <!-- 선택된 값 표시 -->
          <template #value="slotProps">
            <div v-if="slotProps.value && slotProps.value.isNewGuest" class="flex align-items-center text-primary font-bold">
              <i class="pi pi-user-plus mr-2" /> 신규 게스트 추가
            </div>
            <div v-else-if="slotProps.value" class="flex align-items-center">
              <Tag :value="slotProps.value.group" :severity="slotProps.value.group === '참가자' ? 'success' : 'info'" class="mr-2" />
              <span style="font-weight:bold;">{{ slotProps.value.name }}</span>
              <span style="color:#888; font-size:0.93em; margin-left: 0.5em;">
                {{ getMemberTypeLabel(slotProps.value.memberType) }} / {{ getGenderLabel(slotProps.value.gender) }} / 에버리지: {{ slotProps.value.average ?? '-' }}
              </span>
            </div>
            <span v-else>
              {{ slotProps.placeholder }}
            </span>
          </template>
          <!-- 옵션 목록 표시 -->
          <template #option="slotProps">
            <div v-if="slotProps.option.isNewGuest" class="flex align-items-center text-primary font-bold">
              <i class="pi pi-user-plus mr-2" /> 신규 게스트 추가
            </div>
            <div v-else class="flex align-items-center">
              <Tag :value="slotProps.option.group" :severity="slotProps.option.group === '참가자' ? 'success' : 'info'" class="mr-2" />
              <span style="font-weight:bold;">{{ slotProps.option.name }}</span>
              <span style="color:#888; font-size:0.93em; margin-left: 0.5em;">
                {{ getMemberTypeLabel(slotProps.option.memberType) }} / {{ getGenderLabel(slotProps.option.gender) }} / 에버리지: {{ slotProps.option.average ?? '-' }}
              </span>
            </div>
          </template>
        </Select>
        <small v-if="submitted && !selectedMemberId" class="p-error">회원을 선택해주세요.</small>

        <!-- 신규 게스트 추가 입력폼 -->
        <div v-if="selectedMember && selectedMember.isNewGuest" class="w-full border p-3 rounded bg-gray-50 mt-2">
          <div class="mb-2">
            <label>이름*</label>
            <InputText v-model="newGuest.name" class="w-full" />
          </div>
          <div class="mb-2">
            <label>성별*</label>
            <Select v-model="newGuest.gender" :options="GENDER_OPTIONS" optionLabel="name" optionValue="value" placeholder="성별 선택" class="w-full" />
          </div>
          <div class="mb-2">
            <label>연락처</label>
            <InputText v-model="newGuest.phone" class="w-full" />
          </div>
          <Button label="게스트 추가" class="mt-1" @click="addNewGuest" :disabled="!newGuest.name || !newGuest.gender" />
        </div>
      </div>
      
      <!-- 참가 상태 -->
      <div class="w-full min-w-[200px]">
        <label>참가 상태</label>
        <Select
          v-model="status"
          :options="PARTICIPANT_STATUS_OPTIONS"
          optionLabel="name"
          optionValue="value"
          placeholder="상태를 선택하세요"
          checkmark
          class="w-full"
        />
        <small v-if="submitted && !status" class="p-error">참가 상태를 선택해주세요.</small>
      </div>
      <!-- 납부 상태 -->
      <div class="flex-1 min-w-[200px]">
        <label>납부 상태</label>
        <Select
          v-model="paymentStatus"
          :options="PAYMENT_STATUS_OPTIONS"
          optionLabel="name"
          optionValue="value"
          placeholder="납부 상태를 선택하세요"
          checkmark
          class="w-full"
        />
        <small v-if="submitted && !paymentStatus" class="p-error">납부 상태를 선택해주세요.</small>
      </div>
      <!-- 비고 -->
      <div class="w-full">
        <label>비고</label>
        <InputText v-model="comment" class="w-full" />
      </div>
      <div v-if="error" class="w-full p-error p-mb-2">{{ error }}</div>
      <div class="w-full flex justify-content-end gap-2 mt-3">
        <Button type="submit" label="확인" @click="submit" />
        <Button type="button" label="취소" severity="secondary" @click="$emit('close')" />
      </div>
    </div>
  </Dialog>
</template>

<script setup>
import {
  GENDER_OPTIONS,
  PARTICIPANT_STATUS_OPTIONS,
  PAYMENT_STATUS_OPTIONS,
  getGenderLabel,
  getMemberTypeLabel
} from '@/utils/enumMappings';
import { ref, computed, watch } from 'vue';
import Tag from 'primevue/tag';
import InputText from 'primevue/inputtext';
import Select from 'primevue/select';
import Button from 'primevue/button';
const props = defineProps({
  publicHash: String,
  participants: Array,
  availableMembers: Array,
  visible: Boolean, // Dialog의 v-model:visible과 연결
  eventStatus: String
});
const emits = defineEmits(['close', 'updated', 'update:visible', 'guest-added']);

const selectedMember = ref(null);
const memberOptions = computed(() => {
  // 참가자 목록에서 참가자 그룹 생성
  const participantOptions = (props.participants || []).map(m => ({
    ...m,
    group: '참가자',
    id: m.participantId,
    participantId: m.participantId,
    memberId: m.memberId
  }));
  
  // 미신청 그룹 생성 (참가자에 없는 회원만)
  const unregisteredOptions = (props.availableMembers || [])
    .filter(m => {
      // 이미 참가자로 등록된 회원은 제외
      return !participantOptions.some(p => 
        p.memberId === m.memberId || 
        (p.Member && m.name && p.Member.name === m.name)
      );
    })
    .map(m => ({
      ...m,
      group: '미신청',
      id: m.memberId,
      participantId: null,
      memberId: m.memberId
    }));
  
  // 두 그룹 합치기
  const baseOptions = [
    ...participantOptions,
    ...unregisteredOptions
  ].sort((a, b) => {
    const nameA = a.name || '';
    const nameB = b.name || '';
    return nameA.localeCompare(nameB, 'ko');
  });
  if (props.eventStatus === 'ready') {
    baseOptions.push({ name: '신규 게스트 추가', isNewGuest: true });
  }
  return baseOptions;
});

  
const selectedParticipantId = ref('');
const selectedMemberId = ref('');
watch(selectedMember, (val) => {
  selectedParticipantId.value = val ? val.participantId : '';
  selectedMemberId.value = val ? val.memberId : '';

  // 참가자라면 기존 정보 자동 세팅
  if (val) {
    const found = (props.participants || []).find(m => m.memberId === val.memberId);
    status.value = found?.status || '';
    paymentStatus.value = found?.paymentStatus || '';
    comment.value = found?.comment || '';
  }
});

const comment = ref('');
const status = ref('');
const paymentStatus = ref('');
const error = ref('');
const submitted = ref(false);

const newGuest = ref({ name: '', phone: '', gender: '' });

import PublicEventService from '@/services/PublicEventService';

async function addNewGuest() {
  error.value = '';
  if (!newGuest.value.name || !newGuest.value.gender) {
    error.value = '이름, 성별을 모두 입력하세요.';
    return;
  }
  try {
    // 실제 API 경로/파라미터는 상황에 맞게 수정 필요
    const res = await PublicEventService.createGuest(props.publicHash, {
      name: newGuest.value.name,
      phone: newGuest.value.phone || null,
      gender: newGuest.value.gender
    });
    if (!res || !res.data || !res.data.memberId) throw new Error('게스트 등록 실패');
    
    // 새 게스트를 멤버 옵션에 추가하고 자동 선택
    const guest = {
      ...res.data,
      group: '참가자',
      id: res.data.participantId,
      participantId: res.data.participantId,
      memberId: res.data.memberId,
      status: res.data.status || 'pending', // 참가 확정 상태 추가
      paymentStatus: res.data.paymentStatus || 'unpaid', // 결제 상태 추가
      Member: {
        name: newGuest.value.name,
        gender: newGuest.value.gender,
        average: newGuest.value.average || 0,
        handicap: res.data.handicap || 0
      }
    };
    
    // 이미 있는 게스트 업데이트 (선택 가능한 회원 목록)
    const existingGuestIndex = props.availableMembers.findIndex(m => 
      m.name === guest.Member.name && m.group === '게스트');
    
    // 이미 참가자 목록에 있는 게스트 업데이트
    const existingParticipantIndex = props.participants.findIndex(p => 
      p.memberId === guest.memberId || 
      (p.Member && p.Member.name === guest.Member.name && p.status === '미신청'));
    
    // 기존 데이터 업데이트 또는 새 데이터 추가
    if (existingGuestIndex !== -1) {
      // 기존 게스트 정보 업데이트
      Object.assign(props.availableMembers[existingGuestIndex], guest);
    } else {
      // 새 게스트 추가
      props.availableMembers.push(guest);
    }
    
    if (existingParticipantIndex !== -1) {
      // 기존 참가자 정보 업데이트
      Object.assign(props.participants[existingParticipantIndex], guest);
    } else {
      // 새 참가자 추가
      props.participants.push(guest);
    }
    
    // 선택값 세팅
    selectedMember.value = guest;
    selectedParticipantId.value = guest.participantId;
    selectedMemberId.value = guest.memberId;
    
    // 참가 상태와 회비 납부 상태 자동 선택
    status.value = guest.status;
    paymentStatus.value = guest.paymentStatus;
    comment.value = guest.comment || '';
    
    // 입력폼 초기화
    newGuest.value = { name: '', phone: '', gender: '' };
    
    // 부모 컴포넌트에 이벤트 발생
    emits('guest-added', guest);
  } catch (e) {
    error.value = e.message || '게스트 등록 중 오류 발생';
  }
}


async function submit() {
  submitted.value = true;
  error.value = '';
  if (!selectedMemberId.value || !status.value || !paymentStatus.value) {
    error.value = '모든 항목을 입력해주세요.';
    return;
  }
  try {
    const res = await PublicEventService.registerParticipant(props.publicHash, {
      participantId: selectedParticipantId.value,
      memberId: selectedMemberId.value,
      comment: comment.value,
      status: status.value,
      paymentStatus: paymentStatus.value
    });
    if (!res.ok) throw new Error('참가 신청에 실패했습니다.');
    emits('updated');
    emits('close');
  } catch (e) {
    error.value = e.message;
  }
}
</script>

<style scoped>

</style>
