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

<LoginLayout title="Login - Black Canyon Tickets">
  <main class="min-h-screen relative flex flex-col">
    <!-- Premium Hero Background with Animated Gradients -->
    <div class="absolute inset-0" style="background: var(--bg-gradient);">
      <!-- Animated Background Elements -->
      <div class="absolute inset-0 opacity-25">
        <!-- Large flowing orbs -->
        <div class="absolute top-20 left-20 w-72 h-72 rounded-full blur-3xl animate-float" style="background: var(--bg-orb-1); animation-duration: 18s;"></div>
        <div class="absolute bottom-20 right-20 w-80 h-80 rounded-full blur-3xl animate-float" style="background: var(--bg-orb-2); animation-duration: 22s; animation-delay: -3s;"></div>
        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-64 h-64 rounded-full blur-3xl animate-float" style="background: var(--bg-orb-3); animation-duration: 20s; animation-delay: -8s;"></div>
        <div class="absolute top-1/4 right-1/3 w-56 h-56 rounded-full blur-3xl animate-float" style="background: var(--bg-orb-4); animation-duration: 16s; animation-delay: -12s;"></div>
        <div class="absolute bottom-1/4 left-1/3 w-48 h-48 rounded-full blur-3xl animate-float" style="background: var(--bg-orb-5); animation-duration: 24s; animation-delay: -6s;"></div>
        
        <!-- Accent elements -->
        <div class="absolute top-1/6 left-2/3 w-28 h-28 rounded-full blur-2xl animate-pulse" style="background: var(--bg-orb-1); animation-duration: 4s;"></div>
        <div class="absolute bottom-1/6 right-2/3 w-20 h-20 rounded-full blur-2xl animate-pulse" style="background: var(--bg-orb-2); animation-duration: 5s; animation-delay: -1.5s;"></div>
      </div>
      
      <!-- Geometric Patterns -->
      <div class="absolute inset-0" style="opacity: var(--grid-opacity, 0.1);">
        <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
          <defs>
            <pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse">
              <path d="M 10 0 L 0 0 0 10" fill="none" stroke="currentColor" stroke-width="0.5" style="color: var(--grid-pattern);"/>
            </pattern>
          </defs>
          <rect width="100" height="100" fill="url(#grid)" />
        </svg>
      </div>
    </div>

    <!-- Main Content -->
    <div class="relative z-10 flex items-center justify-center min-h-screen px-4 py-8">
      <div class="w-full max-w-md">
        <!-- Login Form -->
        <div class="backdrop-blur-xl rounded-2xl p-8 shadow-2xl" style="background: var(--glass-bg-lg); border: 1px solid var(--glass-border);">
          <div class="text-center mb-8">
            <h1 class="text-3xl font-bold mb-2" style="color: var(--glass-text-primary);">Welcome Back</h1>
            <p class="text-lg opacity-90" style="color: var(--glass-text-secondary);">Sign in to your account</p>
          </div>
          
          <!-- Login Form -->
          <form id="login-form" class="space-y-6">
            <div>
              <label for="email" class="block text-sm font-medium mb-2" style="color: var(--glass-text-secondary);">
                Email Address
              </label>
              <input
                type="email"
                id="email"
                name="email"
                required
                class="w-full px-4 py-3 rounded-xl border transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500"
                style="background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: white;"
                placeholder="Enter your email"
              />
            </div>
            
            <div>
              <label for="password" class="block text-sm font-medium mb-2" style="color: var(--glass-text-secondary);">
                Password
              </label>
              <input
                type="password"
                id="password"
                name="password"
                required
                class="w-full px-4 py-3 rounded-xl border transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500"
                style="background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: white;"
                placeholder="Enter your password"
              />
            </div>
            
            <div id="error-message" class="hidden bg-red-500 bg-opacity-20 border border-red-500 text-red-100 px-4 py-3 rounded-xl"></div>
            
            <button
              type="submit"
              id="login-btn"
              class="w-full py-3 px-4 rounded-xl font-semibold text-white transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500"
              style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);"
            >
              Sign In
            </button>
          </form>
          
          <div class="mt-6 text-center">
            <p class="text-sm opacity-75" style="color: var(--glass-text-secondary);">
              Don't have an account? 
              <a href="/signup" class="text-blue-400 hover:text-blue-300 transition-colors">
                Contact us to get started
              </a>
            </p>
          </div>
        </div>
      </div>
    </div>
  </main>
</LoginLayout>

<script>
  // Handle login form submission
  document.getElementById('login-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;
    const errorMessage = document.getElementById('error-message');
    const loginBtn = document.getElementById('login-btn');
    
    // Clear previous errors
    errorMessage.classList.add('hidden');
    
    // Show loading state
    loginBtn.disabled = true;
    loginBtn.textContent = 'Signing in...';
    
    try {
      const response = await fetch('/api/auth/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ email, password }),
      });
      
      const data = await response.json();
      
      if (response.ok && data.success) {
        // Login successful, redirect to dashboard
        window.location.href = data.redirectTo || '/dashboard';
      } else {
        // Show error message
        errorMessage.textContent = data.error || 'Login failed. Please try again.';
        errorMessage.classList.remove('hidden');
        
        // Reset button
        loginBtn.disabled = false;
        loginBtn.textContent = 'Sign In';
      }
    } catch (error) {
      console.error('Login error:', error);
      errorMessage.textContent = 'An error occurred. Please try again.';
      errorMessage.classList.remove('hidden');
      
      // Reset button
      loginBtn.disabled = false;
      loginBtn.textContent = 'Sign In';
    }
  });
</script>

<style>
  /* Custom styles for the login form */
  input::placeholder {
    color: rgba(255, 255, 255, 0.5);
  }

  input:focus {
    border-color: rgba(59, 130, 246, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
  }

  button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  }

  button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
  }
</style>