<template>
  >
  <form @submit.prevent="onSubmit" class="mx-auto mt-10 max-w-lg space-y-8">
    <!-- 1) 성함 -->
    <div>
      <label
        for="name"
        class="block text-sm font-medium text-gray-900 dark:text-gray-100"
      >
        성함 (Your Name)
      </label>
      <input
        v-model="form.name"
        type="text"
        id="name"
        required
        class="mt-1 block w-full rounded-md bg-white dark:bg-gray-800 px-3.5 py-2 text-base text-gray-900 dark:text-gray-100 border outline-1 outline-offset-1 outline-gray-300 dark:outline-gray-600 placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:outline-2 focus:outline-indigo-600"
      />
    </div>

    <!-- 2) 와디즈 결제 번호 -->
    <div>
      <label
        for="paymentId"
        class="block text-sm font-medium text-gray-900 dark:text-gray-100"
      >
        와디즈 결제 번호 (Wadiz Payment ID)
      </label>
      <input
        v-model="form.paymentId"
        type="text"
        id="paymentId"
        required
        class="mt-1 block w-full rounded-md bg-white dark:bg-gray-800 px-3.5 py-2 text-base text-gray-900 dark:text-gray-100 border outline-1 outline-offset-1 outline-gray-300 dark:outline-gray-600 placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:outline-2 focus:outline-indigo-600"
      />
    </div>

    <!-- 3) 메일 -->
    <div>
      <label
        for="email"
        class="block text-sm font-medium text-gray-900 dark:text-gray-100"
      >
        메일 (Email)
      </label>
      <input
        v-model="form.email"
        type="email"
        id="email"
        required
        class="mt-1 block w-full rounded-md bg-white dark:bg-gray-800 px-3.5 py-2 text-base text-gray-900 dark:text-gray-100 border outline-1 outline-offset-1 outline-gray-300 dark:outline-gray-600 placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:outline-2 focus:outline-indigo-600"
      />
    </div>

    <!-- 4) 본인 연락처 -->
    <div>
      <label
        for="phone"
        class="block text-sm font-medium text-gray-900 dark:text-gray-100"
      >
        본인 연락처 (Your Phone)
      </label>
      <input
        v-model="form.phone"
        type="tel"
        id="phone"
        required
        class="mt-1 block w-full rounded-md bg-white dark:bg-gray-800 px-3.5 py-2 text-base text-gray-900 dark:text-gray-100 border outline-1 outline-offset-1 outline-gray-300 dark:outline-gray-600 placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:outline-2 focus:outline-indigo-600"
        placeholder="010-1234-5678"
      />
    </div>

    <!-- 5) 본인 참석 여부 -->
    <div>
      <span class="block text-sm font-medium text-gray-900 dark:text-gray-100"
        >본인 참석 여부 (Are you attending?)</span
      >
      <div class="mt-2 flex items-center gap-6">
        <label class="inline-flex items-center">
          <input
            type="radio"
            name="attending"
            value="yes"
            v-model="form.attending"
            class="h-4 w-4 text-indigo-600 border-gray-300 focus:ring-indigo-500"
          />
          <span class="ml-2 text-gray-700 dark:text-gray-300">예 (Yes)</span>
        </label>
        <label class="inline-flex items-center">
          <input
            type="radio"
            name="attending"
            value="no"
            v-model="form.attending"
            class="h-4 w-4 text-indigo-600 border-gray-300 focus:ring-indigo-500"
          />
          <span class="ml-2 text-gray-700 dark:text-gray-300">아니오 (No)</span>
        </label>
      </div>
    </div>

    <!-- 6) If “아니오”, show alternate attendee fields -->
    <transition name="fade" mode="out-in">
      <div v-if="form.attending === 'no'" class="space-y-4">
        <!-- 대리 참석자 성함 -->
        <div>
          <label
            for="altName"
            class="block text-sm font-medium text-gray-900 dark:text-gray-100"
          >
            대리 참석자 성함 (Alternate Attendee Name)
          </label>
          <input
            v-model="form.altName"
            type="text"
            id="altName"
            required
            class="mt-1 block w-full rounded-md bg-white dark:bg-gray-800 px-3.5 py-2 text-base text-gray-900 dark:text-gray-100 border outline-1 outline-offset-1 outline-gray-300 dark:outline-gray-600 placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:outline-2 focus:outline-indigo-600"
          />
        </div>
        <!-- 대리 참석자 연락처 -->
        <div>
          <label
            for="altPhone"
            class="block text-sm font-medium text-gray-900 dark:text-gray-100"
          >
            대리 참석자 연락처 (Alternate Attendee Phone)
          </label>
          <input
            v-model="form.altPhone"
            type="tel"
            id="altPhone"
            required
            class="mt-1 block w-full rounded-md bg-white dark:bg-gray-800 px-3.5 py-2 text-base text-gray-900 dark:text-gray-100 border outline-1 outline-offset-1 outline-gray-300 dark:outline-gray-600 placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:outline-2 focus:outline-indigo-600"
            placeholder="010-1234-5678"
          />
        </div>
      </div>
    </transition>

    <!-- 7) 기타 문의 사항 -->
    <div>
      <label
        for="remarks"
        class="block text-sm font-medium text-gray-900 dark:text-gray-100"
      >
        기타 문의 사항 (Other Remarks)
      </label>
      <textarea
        v-model="form.remarks"
        id="remarks"
        rows="4"
        class="mt-1 block w-full rounded-md bg-white dark:bg-gray-800 px-3.5 py-2 text-base text-gray-900 dark:text-gray-100 outline-1 outline-offset-1 outline-gray-300 dark:outline-gray-600 placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:outline-2 focus:outline-indigo-600"
        placeholder="예: 채팅으로 연락해주세요."
      />
    </div>

    <!-- Submit -->
    <div class="mt-6">
      <button
        type="submit"
        :disabled="submitting"
        class="inline-flex w-full justify-center rounded-md bg-indigo-600 dark:bg-indigo-500 px-4 py-2 text-base font-semibold text-white shadow-sm hover:bg-indigo-500 dark:hover:bg-indigo-400 focus:outline-none focus:ring-2 focus:ring-indigo-600 disabled:opacity-50"
      >
        {{ submitting ? '전송 중…' : '제출하기' }}
      </button>
    </div>

    <!-- Success / Error Message -->
    <p
      v-if="message"
      :class="
        messageError
          ? 'mt-4 text-sm text-red-600'
          : 'mt-4 text-sm text-green-600'
      "
    >
      {{ message }}
    </p>
  </form>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useNuxtApp } from '#app';

/**
 * This form will write a document to Firestore collection "wadizSubmissions".
 * Make sure you've set up a Nuxt plugin that provides `$firebase.firestore()` if you haven't already.
 */

const submitting = ref(false);
const message = ref('');
const messageError = ref(false);

// Form state
const form = ref({
  name: '',
  paymentId: '',
  email: '',
  phone: '',
  attending: 'yes', // default “yes”
  altName: '',
  altPhone: '',
  remarks: '',
});

async function onSubmit() {
  submitting.value = true;
  message.value = '';
  messageError.value = false;

  // Basic validation
  if (
    !form.value.name ||
    !form.value.paymentId ||
    !form.value.email ||
    !form.value.phone
  ) {
    message.value = '필수 항목을 모두 채워주세요.';
    messageError.value = true;
    submitting.value = false;
    return;
  }
  if (
    form.value.attending === 'no' &&
    (!form.value.altName || !form.value.altPhone)
  ) {
    message.value = '대리 참석자 정보를 모두 입력해주세요.';
    messageError.value = true;
    submitting.value = false;
    return;
  }

  // Prepare payload
  const payload = {
    name: form.value.name,
    paymentId: form.value.paymentId,
    email: form.value.email,
    phone: form.value.phone,
    attending: form.value.attending === 'yes',
    altName: form.value.attending === 'no' ? form.value.altName : null,
    altPhone: form.value.attending === 'no' ? form.value.altPhone : null,
    remarks: form.value.remarks,
    submittedAt: new Date(),
  };

  try {
    // Save to Firestore (collection “wadizSubmissions”)
    message.value = '성공적으로 제출되었습니다!';
    messageError.value = false;

    // Clear form
    form.value.name = '';
    form.value.paymentId = '';
    form.value.email = '';
    form.value.phone = '';
    form.value.attending = 'yes';
    form.value.altName = '';
    form.value.altPhone = '';
    form.value.remarks = '';
  } catch (err) {
    console.error(err);
    message.value = '제출 중 오류가 발생했습니다. 다시 시도해주세요.';
    messageError.value = true;
  } finally {
    submitting.value = false;
  }
}
</script>

<style scoped>
/* Fade transition for the conditional fields */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease-in-out;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
