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

let error = '';

if (Astro.request.method === 'POST') {
  const formData = await Astro.request.formData();
  const email = formData.get('email');
  const password = formData.get('password');
  
  // Call login API
  const res = await fetch(new URL('/api/auth/login', Astro.url).toString(), {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ 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
    });
    
    const redirect = Astro.url.searchParams.get('redirect') || '/';
    return Astro.redirect(redirect);
  } else {
    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="/register" 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>
        )}
        
        <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 
            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="flex items-center justify-between mb-6">
          <label class="flex items-center">
            <input type="checkbox" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
            <span class="ml-2 text-sm text-gray-600">จดจำการเข้าสู่ระบบ</span>
          </label>
          <a href="/forgot-password" class="text-sm text-blue-600 hover:underline">ลืมรหัสผ่าน?</a>
        </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>
        
        <div class="mt-6">
          <div class="relative">
            <div class="absolute inset-0 flex items-center">
              <div class="w-full border-t border-gray-300"></div>
            </div>
            <div class="relative flex justify-center text-sm">
              <span class="px-4 bg-white text-gray-500">หรือ</span>
            </div>
          </div>
          
          <button type="button" class="mt-4 w-full flex items-center justify-center gap-3 border border-gray-300 py-3 rounded-lg hover:bg-gray-50 transition-colors">
            <svg class="w-5 h-5" viewBox="0 0 24 24">
              <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
              <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
              <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
              <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
            </svg>
            <span class="text-gray-700 font-medium">เข้าสู่ระบบด้วย Google</span>
          </button>
        </div>
      </form>
    </div>
  </div>
</Layout>
