---
import BaseLayout from '../layouts/BaseLayout.astro';
import Navbar from '../components/Navbar.astro';
import Footer from '../components/Footer.astro';
import { getBrandBySlug, formatWhatsAppNumber } from '../lib/api';

const brand = await getBrandBySlug('mr-bolen');
const waNumber = formatWhatsAppNumber(brand?.whatsapp || brand?.phone || '6281234567890');
---

<BaseLayout title="Preorder & Checkout — Mr. Bolen Group">
<Navbar currentBrand="mr-bolen" />

<main class="min-h-screen bg-[#f9f8f4] pt-24 pb-20">
  <div class="max-w-6xl mx-auto px-6 md:px-12">
    <div class="mb-10">
      <h1 class="font-serif text-4xl text-primary mb-2">Konfirmasi Preorder</h1>
      <p class="text-sm text-subtle font-light">Lengkapi data diri Anda untuk melanjutkan pesanan ke WhatsApp resmi kami.</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-10 items-start">
      
      <!-- DATA DIRI (Kiri) -->
      <div class="lg:col-span-7 bg-white p-8 border border-primary/10 shadow-sm rounded-lg">
        <h2 class="font-serif text-2xl text-primary mb-6 border-b border-primary/10 pb-4">Data Diri</h2>
        
        <form id="preorder-form" class="space-y-5">
          <div>
            <label for="nama" class="block text-xs uppercase tracking-widest text-muted mb-2">Nama Lengkap *</label>
            <input type="text" id="nama" required class="w-full border-b border-primary/20 bg-transparent px-0 py-2 text-dark focus:outline-none focus:border-primary transition-colors" placeholder="Masukkan nama Anda">
          </div>
          
          <div>
            <label for="nohp" class="block text-xs uppercase tracking-widest text-muted mb-2">Nomor WhatsApp *</label>
            <input type="tel" id="nohp" required class="w-full border-b border-primary/20 bg-transparent px-0 py-2 text-dark focus:outline-none focus:border-primary transition-colors" placeholder="Contoh: 08123456789">
          </div>

          <div>
            <label for="email" class="block text-xs uppercase tracking-widest text-muted mb-2">Email (Opsional)</label>
            <input type="email" id="email" class="w-full border-b border-primary/20 bg-transparent px-0 py-2 text-dark focus:outline-none focus:border-primary transition-colors" placeholder="Masukkan email Anda">
          </div>
          
          <div>
            <label for="alamat" class="block text-xs uppercase tracking-widest text-muted mb-2">Alamat Pengiriman Lengkap *</label>
            <textarea id="alamat" required rows="3" class="w-full border-b border-primary/20 bg-transparent px-0 py-2 text-dark focus:outline-none focus:border-primary transition-colors resize-none" placeholder="Masukkan alamat lengkap beserta detail patokan"></textarea>
          </div>

          <div>
            <label for="catatan" class="block text-xs uppercase tracking-widest text-muted mb-2">Catatan Pesanan (Opsional)</label>
            <textarea id="catatan" rows="2" class="w-full border-b border-primary/20 bg-transparent px-0 py-2 text-dark focus:outline-none focus:border-primary transition-colors resize-none" placeholder="Contoh: Pengiriman untuk acara jam 10 pagi"></textarea>
          </div>
        </form>
      </div>

      <!-- PESANAN (Kanan) -->
      <div class="lg:col-span-5 bg-white p-8 border border-primary/10 shadow-sm rounded-lg sticky top-28">
        <h2 class="font-serif text-2xl text-primary mb-6 border-b border-primary/10 pb-4">Ringkasan Pesanan</h2>
        
        <div id="checkout-items" class="max-h-[40vh] overflow-y-auto pr-2 mb-6 space-y-4">
          <!-- Diisi via JS -->
          <div class="text-sm text-subtle text-center py-4">Memuat pesanan...</div>
        </div>

        <div class="border-t border-primary/10 pt-4 space-y-2 mb-8">
          <div class="flex justify-between items-center">
            <span class="text-sm text-subtle">Subtotal</span>
            <span id="checkout-subtotal" class="font-serif text-lg text-dark">Rp 0</span>
          </div>
          <p class="text-[10px] text-muted italic">*Ongkos kirim akan dihitung oleh admin via WhatsApp</p>
        </div>

        <button id="btn-submit-wa" data-wa={waNumber} class="w-full py-4 bg-primary text-white text-xs font-bold uppercase tracking-widest rounded-full hover:bg-primary-container hover:shadow-lg transition-all flex items-center justify-center gap-2 cursor-pointer">
          <!-- WhatsApp Icon -->
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16">
            <path d="M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z"/>
          </svg>
          Kirim Preorder via WhatsApp
        </button>

      </div>
    </div>
  </div>
</main>
<Footer currentBrand="mr-bolen" />
</BaseLayout>

<script>
  import { getCart, getCartTotal, clearCart, type CartItem } from '../lib/cartStore';

  const formatRupiah = (price: number) => {
    return new Intl.NumberFormat("id-ID", {
      style: "currency",
      currency: "IDR",
      maximumFractionDigits: 0
    }).format(price);
  };

  const sanitizePhone = (val: string | undefined | null) => {
    if (!val) return '6281234567890';
    let clean = String(val).replace(/\D/g, '');
    if (clean.startsWith('0')) {
      clean = '62' + clean.slice(1);
    } else if (clean.startsWith('8')) {
      clean = '62' + clean;
    }
    return clean || '6281234567890';
  };

  document.addEventListener('DOMContentLoaded', () => {
    const cart: CartItem[] = getCart();
    const total: number = getCartTotal();
    
    const checkoutItems = document.getElementById('checkout-items');
    const checkoutSubtotal = document.getElementById('checkout-subtotal');
    
    // Redirect if cart empty
    if (cart.length === 0) {
      if (checkoutItems) checkoutItems.innerHTML = `<div class="text-center text-subtle text-sm py-4">Keranjang kosong. Redirecting...</div>`;
      setTimeout(() => {
        window.location.href = '/';
      }, 1500);
      return;
    }

    // Render items
    if (checkoutItems) {
      checkoutItems.innerHTML = cart.map((item: CartItem) => `
        <div class="flex items-center gap-3">
          <div class="w-16 h-16 rounded bg-bone overflow-hidden shrink-0">
            <img src="${item.image_url}" alt="${item.name}" class="w-full h-full object-cover" loading="lazy" decoding="async" />
          </div>
          <div class="flex-1 min-w-0">
            <h4 class="text-sm font-serif text-dark">${item.name}</h4>
            <div class="text-xs text-subtle">${item.quantity} x ${formatRupiah(item.price)}</div>
          </div>
          <div class="text-sm font-medium text-primary shrink-0">
            ${formatRupiah(item.price * item.quantity)}
          </div>
        </div>
      `).join('');
    }

    if (checkoutSubtotal) {
      checkoutSubtotal.textContent = formatRupiah(total);
    }

    // Handle Submit
    const btnSubmit = document.getElementById('btn-submit-wa') as HTMLButtonElement | null;
    const form = document.getElementById('preorder-form') as HTMLFormElement | null;

    btnSubmit?.addEventListener('click', (e) => {
      e.preventDefault();
      
      if (!form || !form.checkValidity()) {
        form?.reportValidity();
        return;
      }

      const nama = (document.getElementById('nama') as HTMLInputElement | null)?.value.trim() || '';
      const nohp = (document.getElementById('nohp') as HTMLInputElement | null)?.value.trim() || '';
      const email = (document.getElementById('email') as HTMLInputElement | null)?.value.trim() || '';
      const alamat = (document.getElementById('alamat') as HTMLTextAreaElement | null)?.value.trim() || '';
      const catatan = (document.getElementById('catatan') as HTMLTextAreaElement | null)?.value.trim() || '';

      const itemsSummary = cart.map((item: CartItem, idx: number) => 
        `${idx + 1}. ${item.name} (${item.quantity}x) - ${formatRupiah(item.price * item.quantity)}`
      ).join('\n');

      const messageText = `*HALO ADMIN MR. BOLEN, SAYA INGIN PREORDER*

*DATA DIRI*
• Nama: ${nama}
• No HP / WA: ${nohp}
${email ? `• Email: ${email}\n` : ''}• Alamat: ${alamat}
${catatan ? `• Catatan: ${catatan}\n` : ''}
*DETAIL PESANAN*
${itemsSummary}

*Total: ${formatRupiah(total)}*

(Mohon info ongkir dan konfirmasi pembayarannya, terima kasih!)`;

      const targetWa = sanitizePhone(btnSubmit?.dataset.wa);
      const waUrl = `https://wa.me/${targetWa}?text=${encodeURIComponent(messageText)}`;

      // Buka WhatsApp
      window.open(waUrl, '_blank');

      // Kosongkan keranjang belanja
      clearCart();

      // Update tampilan halaman
      if (checkoutItems) {
        checkoutItems.innerHTML = `
          <div class="text-center py-6 bg-emerald-50/60 rounded-lg border border-emerald-200/50 p-4 my-2">
            <div class="w-10 h-10 rounded-full bg-emerald-100 text-emerald-600 mx-auto flex items-center justify-center mb-2">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7" />
              </svg>
            </div>
            <h3 class="font-serif text-base text-dark font-medium mb-1">Preorder Berhasil Terkirim!</h3>
            <p class="text-xs text-subtle">Keranjang telah dikosongkan. Silakan lanjutkan obrolan dengan admin di WhatsApp.</p>
          </div>
        `;
      }

      if (btnSubmit) {
        btnSubmit.disabled = true;
        btnSubmit.classList.add('opacity-60', 'cursor-not-allowed', 'pointer-events-none');
        btnSubmit.innerHTML = `
          <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-emerald-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
          </svg>
          Pesanan Dialihkan ke WhatsApp
        `;
      }
    });
  });
</script>