<template>
  <div class="max-w-6xl mx-auto p-8 bg-gradient-to-b from-pink-50 to-red-50 shadow-lg rounded-xl">
    <!-- Judul -->
    <div class="text-center mb-10">
      <h1 class="text-3xl md:text-4xl font-extrabold text-red-700 drop-shadow-sm">
        💍 Form Pemesanan Undangan Pernikahan 💐
      </h1>
      <p class="text-gray-600 mt-2">Isi data berikut untuk membuat undangan pernikahan Anda</p>
    </div>

    <form @submit.prevent="submitForm" class="space-y-10">
      <!-- Paket Starter (Informasi) -->
      <section class="p-6 bg-white rounded-xl shadow-sm border border-gray-200">
        <h2 class="text-lg font-bold text-gray-800 mb-4">Paket Undangan</h2>
        <div class="p-4 border rounded-xl bg-blue-50">
          <div class="font-semibold text-gray-800 mb-2">Starter</div>
          <div class="text-gray-600 mb-2">Fitur:</div>
          <ul class="list-disc list-inside text-gray-600">
            <li>1x Acara</li>
            <li>Masa Aktif 3 Bulan</li>
            <li>Fitur standar: Nama Tamu Personal, maks. 100 Tamu, Request Musik</li>
          </ul>
        </div>
      </section>

      <!-- Info Template -->
      <section class="p-6 bg-white rounded-xl shadow-sm border border-gray-200">
        <h2 class="text-lg font-bold text-gray-800 mb-4">Template & Detail Paket</h2>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
          <input v-model="form.nama_template" type="text" placeholder="Nama Template" class="input-readonly" readonly />
          <input v-model="form.kategori" type="text" placeholder="Kategori" class="input-readonly" readonly />
          <input v-model="form.harga" type="text" placeholder="Harga" class="input-readonly" readonly />
          <input v-model="form.tanggal_pemesanan" type="text" placeholder="Tanggal Pemesanan" class="input-readonly"
            readonly />
        </div>
      </section>

      <!-- Data Pemesan -->
      <section class="p-6 bg-white rounded-xl shadow-sm border border-gray-200">
        <h2 class="text-lg font-bold text-gray-800 mb-4">Data Pemesan</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label class="block text-sm text-gray-600 mb-1">Nama Pemesan</label>
            <input v-model="form.nama_pemesan" type="text" class="input" required />
          </div>
          <div>
            <label class="block text-sm text-gray-600 mb-1">No. WhatsApp</label>
            <input v-model="form.no_hp" type="text" class="input" required />
          </div>
          <div class="md:col-span-2">
            <label class="block text-sm text-gray-600 mb-1">Email</label>
            <input v-model="form.email" type="email" class="input" required />
          </div>
        </div>
      </section>

      <!-- Data Pengantin -->
      <section class="p-6 bg-white rounded-xl shadow-sm border border-gray-200">
        <h2 class="text-lg font-bold text-gray-800 mb-4">Data Pengantin</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label class="block text-sm mb-1">Nama Pengantin Pria</label>
            <input v-model="form.nama_pria" type="text" class="input" required />
          </div>
          <div>
            <label class="block text-sm mb-1">Nama Pengantin Wanita</label>
            <input v-model="form.nama_wanita" type="text" class="input" required />
          </div>
          <div>
            <label class="block text-sm mb-1">Orang Tua Pengantin Pria</label>
            <input v-model="form.ortu_pria" type="text" class="input" />
          </div>
          <div>
            <label class="block text-sm mb-1">Orang Tua Pengantin Wanita</label>
            <input v-model="form.ortu_wanita" type="text" class="input" />
          </div>
        </div>
      </section>

      <!-- Data Acara -->
      <section class="p-6 bg-white rounded-xl shadow-sm border border-gray-200">
        <h2 class="text-lg font-bold text-gray-800 mb-4">Detail Acara (1x Acara)</h2>
        <div v-for="(acara, index) in form.acaras" :key="index" class="mb-6 border-b pb-4">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label class="block text-sm mb-1">Nama Acara</label>
              <input v-model="acara.nama" type="text" class="input" required />
            </div>
            <div>
              <label class="block text-sm mb-1">Tanggal Acara</label>
              <input v-model="acara.tanggal" type="date" class="input" required />
            </div>
            <div>
              <label class="block text-sm mb-1">Jam</label>
              <input v-model="acara.jam" type="time" class="input" />
            </div>
            <div>
              <label class="block text-sm mb-1">Lokasi</label>
              <input v-model="acara.lokasi" type="text" class="input" required />
            </div>
            <div class="md:col-span-2">
              <label class="block text-sm mb-1">Request Lagu</label>
              <input v-model="acara.request_lagu" type="text" class="input"
                placeholder="Contoh: Lagu pengantin, playlist, dsb." />
            </div>
          </div>
        </div>
      </section>

      <!-- Submit -->
      <div class="mt-10 text-center">
        <button type="submit"
          class="bg-blue-600 text-white px-10 py-3 rounded-xl font-semibold shadow-md hover:bg-blue-700 hover:shadow-lg transition"
          :disabled="loading">
          {{ loading ? "Mengirim..." : "Kirim & Konfirmasi Admin" }}
        </button>
      </div>

      <!-- Alert -->
      <div v-if="success" class="mt-6 p-4 text-green-800 bg-green-100 rounded-lg text-center font-medium">
        ✅ Form berhasil dikirim! Tunggu konfirmasi admin.
      </div>
      <div v-if="error" class="mt-6 p-4 text-red-800 bg-red-100 rounded-lg text-center font-medium">
        ❌ Gagal mengirim form. Cek kembali inputan Anda.
      </div>
    </form>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue"
import { useRoute } from "vue-router"

const form = ref({
  selectedPaket: "starter",
  nama_template: "Undangan Minimalis",
  kategori: "Pernikahan",
  harga: "100.000",
  tanggal_pemesanan: new Date().toLocaleDateString("id-ID"),
  nama_pemesan: "",
  no_hp: "",
  email: "",
  nama_pria: "",
  nama_wanita: "",
  ortu_pria: "",
  ortu_wanita: "",
  acaras: [{ nama: "", tanggal: "", jam: "", lokasi: "", request_lagu: "" }],
})

const loading = ref(false)
const success = ref(false)
const error = ref(false)
const template = ref(null)
const route = useRoute()

const adminWaNumber = "6281234567890" // ganti dengan nomor WA admin

onMounted(async () => {
  try {
    const templateId = route.query.template_id
    if (!templateId) throw new Error("Template ID tidak ditemukan di URL")

    const res = await fetch(`http://localhost:8000/api/templates/${templateId}`)
    if (!res.ok) throw new Error("Gagal ambil template")
    template.value = await res.json()

    form.value.nama_template = template.value.nama_template
    form.value.kategori = template.value.kategori?.nama || "Pernikahan"
    form.value.harga = new Intl.NumberFormat('id-ID').format(template.value.harga)
    form.value.tanggal_pemesanan = new Date().toLocaleDateString("id-ID")
  } catch (err) {
    console.error("Error fetch template:", err)
  }
})

const submitForm = async () => {
  try {
    if (!template.value) {
      throw new Error("Template belum dimuat, tidak bisa submit!")
    }
    loading.value = true
    success.value = false
    error.value = false

    const res = await fetch("http://localhost:8000/api/pelanggans", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        nama_pemesan: form.value.nama_pemesan,
        email: form.value.email,
        no_tlpn: form.value.no_hp,  // 🔥 ganti no_hp -> no_tlpn
        template_id: template.value.id,
        form: JSON.stringify({      // 🔥 pastikan dikirim string, bukan object
          nama_pengantin: form.value.nama_pria + " & " + form.value.nama_wanita,
          tanggal_acara: form.value.acaras[0].tanggal,
          lokasi: form.value.acaras[0].lokasi
        })
      }),
    })


    const data = await res.json()
    if (!res.ok) throw new Error(data.message || "Gagal simpan data")
    success.value = true

    // --- Langsung buka WhatsApp Admin ---
    const f = form.value
    const pesan = `
Halo Admin, saya ingin memesan undangan.
Nama Pemesan: ${f.nama_pemesan}
No. WA: ${f.no_hp}
Email: ${f.email}

Template: ${f.nama_template}
Kategori: ${f.kategori}
Harga: ${f.harga}

Nama Pengantin: ${f.nama_pria} & ${f.nama_wanita}
Orang Tua Pria: ${f.ortu_pria}
Orang Tua Wanita: ${f.ortu_wanita}

Acara:
${f.acaras.map(a => `- ${a.nama}, ${a.tanggal}, ${a.jam || "-"} WIB, Lokasi: ${a.lokasi}, Request Lagu: ${a.request_lagu || "-"}`).join("\n")}
    `
    window.open(`https://wa.me/${adminWaNumber}?text=${encodeURIComponent(pesan)}`, "_blank")

  } catch (err) {
    console.error("Catch error:", err)
    error.value = true
  } finally {
    loading.value = false
  }
}
</script>

<style>
.input {
  border: 1px solid #d1d5db;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  width: 100%;
  font-size: 0.875rem;
}

.input-readonly {
  border: 1px solid #d1d5db;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background-color: #f9fafb;
  color: #4b5563;
}
</style>
