---
import Layout from '../../layouts/Layout.astro';
import Header from '../../components/layout/Header';
import Footer from '../../components/layout/Footer';

const { searchParams } = Astro.url;
const refNo = searchParams.get('ref') || 'ORD-' + Date.now().toString().slice(-8);
const orderId = searchParams.get('order');
---

<Layout title="สั่งซื้อสำเร็จ">
  <Header />
  
  <div class="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4">
    <div class="max-w-md w-full text-center">
      <div class="w-24 h-24 mx-auto mb-6 bg-green-100 rounded-full flex items-center justify-center animate-bounce">
        <svg class="w-12 h-12 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
        </svg>
      </div>
      
      <h1 class="text-3xl font-bold mb-4 text-gray-900">สั่งซื้อสำเร็จ!</h1>
      
      <p class="text-gray-600 mb-6">
        ขอบคุณที่สั่งซื้อกับเรา
      </p>
      
      <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
        <p class="text-sm text-gray-500 mb-2">หมายเลขคำสั่งซื้อ</p>
        <p class="text-2xl font-bold text-blue-600">{refNo}</p>
      </div>
      
      <p class="text-gray-500 mb-8">
        เราได้ส่งรายละเอียดการสั่งซื้อไปยังอีเมลของคุณแล้ว<br/>
        กรุณาชำระเงินตามช่องทางที่คุณเลือก
      </p>
      
      <div class="space-y-3">
        <a 
          href={orderId ? `/account/orders/${orderId}` : '/account/orders'} 
          class="block w-full bg-blue-600 text-white py-3 px-4 rounded-lg font-medium hover:bg-blue-700 transition-colors"
        >
          ดูสถานะคำสั่งซื้อ
        </a>
        <a 
          href="/" 
          class="block w-full border border-gray-300 py-3 px-4 rounded-lg font-medium hover:bg-gray-50 transition-colors text-gray-700"
        >
          กลับไปหน้าแรก
        </a>
      </div>
      
      <!-- Order Summary -->
      <div class="mt-8 bg-gray-50 rounded-xl p-6 text-left">
        <h3 class="font-bold mb-4">สิ่งที่ควรทำ</h3>
        <ul class="space-y-3 text-sm text-gray-600">
          <li class="flex items-start gap-2">
            <span class="text-green-500">1.</span>
            <span>ตรวจสอบอีเมลเพื่อดูรายละเอียดการชำระเงิน</span>
          </li>
          <li class="flex items-start gap-2">
            <span class="text-green-500">2.</span>
            <span>ชำระเงินภายใน 24 ชั่วโมง</span>
          </li>
          <li class="flex items-start gap-2">
            <span class="text-green-500">3.</span>
            <span>สินค้าจะถูกจัดส่งภายหลังการยืนยันการชำระเงิน</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
  
  <Footer />
</Layout>
