---
import Layout from '../layouts/Layout.astro';

let error = '';
let success = '';

if (Astro.request.method === 'POST') {
  const formData = await Astro.request.formData();
  const name = formData.get('name');
  const email = formData.get('email');
  const password = formData.get('password');
  const confirmPassword = formData.get('confirmPassword');
  
  if (password !== confirmPassword) {
    error = 'รหัสผ่านไม่ตรงกัน';
  } else if (password.length < 6) {
    error = 'รหัสผ่านต้องมีอย่างน้อย 6 ตัวอักษร';
  } else {
    const res = await fetch(new URL('/api/auth/register', Astro.url).toString(), {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name, email, password })
    });
    
    if (res.ok) {
      const { token, user } = await res.json();
      Astro.cookies.set('session', token, { 
        path: '/', 
        httpOnly: true,
        secure: import.meta.env.PROD,
        sameSite: 'lax',
        maxAge: 60 * 60 * 24 * 7 // 7 days
      });
      return Astro.redirect('/');
    } else {
      const data = await res.json();
      error = data.error || 'เกิดข้อผิดพลาด กรุณาลองใหม่';
    }
  }
}
---

<Layout title="สมัครสมาชิก">
  <div class="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4">
    <div class="max-w-md w-full">
      <div class="text-center mb-8">
        <a href="/" class="inline-block mb-4">
          <span class="text-2xl font-bold text-blue-600">ร้านของเรา</span>
        </a>
        <h1 class="text-3xl font-bold text-gray-900">สมัครสมาชิก</h1>
        <p class="text-gray-600 mt-2">มีบัญชีอยู่แล้ว? <a href="/login" class="text-blue-600 hover:underline font-medium">เข้าสู่ระบบ</a></p>
      </div>
      
      <form method="POST" class="bg-white shadow-xl rounded-2xl p-8">
        {error && (
          <div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg text-red-600 text-sm">
            {error}
          </div>
        )}
        
        {success && (
          <div class="mb-6 p-4 bg-green-50 border border-green-200 rounded-lg text-green-600 text-sm">
            {success}
          </div>
        )}
        
        <div class="mb-6">
          <label class="block text-sm font-medium text-gray-700 mb-2">ชื่อ-นามสกุล</label>
          <input 
            type="text" 
            name="name" 
            required 
            class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
            placeholder="สมชาย มั่นคง"
          />
        </div>
        
        <div class="mb-6">
          <label class="block text-sm font-medium text-gray-700 mb-2">อีเมล</label>
          <input 
            type="email" 
            name="email" 
            required 
            class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
            placeholder="your@email.com"
          />
        </div>
        
        <div class="mb-6">
          <label class="block text-sm font-medium text-gray-700 mb-2">รหัสผ่าน</label>
          <input 
            type="password" 
            name="password" 
            required 
            minlength="6" 
            class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
            placeholder="อย่างน้อย 6 ตัวอักษร"
          />
        </div>
        
        <div class="mb-6">
          <label class="block text-sm font-medium text-gray-700 mb-2">ยืนยันรหัสผ่าน</label>
          <input 
            type="password" 
            name="confirmPassword" 
            required 
            class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
            placeholder="ยืนยันรหัสผ่านอีกครั้ง"
          />
        </div>
        
        <div class="mb-6">
          <label class="flex items-start">
            <input type="checkbox" required class="w-4 h-4 mt-1 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
            <span class="ml-2 text-sm text-gray-600">
              ฉันยอมรับ <a href="/terms" class="text-blue-600 hover:underline">เงื่อนไขการใช้งาน</a> และ <a href="/privacy" class="text-blue-600 hover:underline">นโยบายความเป็นส่วนตัว</a>
            </span>
          </label>
        </div>
        
        <button 
          type="submit" 
          class="w-full bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 focus:ring-4 focus:ring-blue-200 transition-colors"
        >
          สมัครสมาชิก
        </button>
        
        <p class="mt-6 text-center text-sm text-gray-500">
          สมัครเพื่อเป็นร้านค้า? <a href="/vendor/register" class="text-blue-600 hover:underline">ลงทะเบียนร้านค้า</a>
        </p>
      </form>
    </div>
  </div>
</Layout>
