---
// Redirect to the new login page
return Astro.redirect('/login-new');
---

<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>


    <!-- Loading State -->
    <div id="auth-loading" class="fixed inset-0 z-50 bg-black bg-opacity-50 flex items-center justify-center">
      <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="flex flex-col items-center space-y-4">
          <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-400"></div>
          <p class="text-lg font-medium" style="color: var(--glass-text-primary);">Checking authentication...</p>
        </div>
      </div>
    </div>

    <div id="main-content" class="relative z-10 flex-1 container mx-auto px-4 py-4 lg:py-6 flex items-center" style="display: none;">
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 sm:gap-8 lg:gap-12 items-center max-w-6xl mx-auto w-full">
        
        <!-- Left Column: Brand & Features -->
        <div class="lg:pr-8">
          <!-- Brand Header -->
          <div class="text-center lg:text-left mb-8">
            
            <h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-light mb-4 tracking-tight" style="color: var(--glass-text-primary);">
              Black Canyon
              <span class="font-bold" style="color: var(--glass-text-accent);">
                Tickets
              </span>
            </h1>
            <p class="text-base sm:text-lg lg:text-xl mb-6 lg:mb-8 max-w-2xl leading-relaxed" style="color: var(--glass-text-secondary);">
              Elegant ticketing platform for Colorado's most prestigious venues
            </p>
            <div class="flex flex-wrap justify-center lg:justify-start gap-4 text-xs lg:text-sm mb-6" style="color: var(--glass-text-tertiary);">
              <span class="flex items-center">
                <span class="w-2 h-2 rounded-full mr-2" style="background: var(--glass-text-accent);"></span>
                Self-serve event setup
              </span>
              <span class="flex items-center">
                <span class="w-2 h-2 rounded-full mr-2" style="background: var(--glass-text-accent);"></span>
                Automated Stripe payouts
              </span>
              <span class="flex items-center">
                <span class="w-2 h-2 rounded-full mr-2" style="background: var(--glass-text-accent);"></span>
                Mobile QR scanning — no apps required
              </span>
            </div>
          </div>

          <!-- Core Features -->
          <div class="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-3 gap-4 mb-6">
            <div class="backdrop-blur-lg rounded-xl p-4 text-center" style="background: var(--glass-bg); border: 1px solid var(--glass-border);">
              <div class="w-10 h-10 rounded-lg flex items-center justify-center mx-auto mb-2" style="background: var(--glass-text-accent);">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                  <path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z" />
                </svg>
              </div>
              <h3 class="font-semibold text-sm mb-1" style="color: var(--glass-text-primary);">Quick Setup</h3>
              <p class="text-xs" style="color: var(--glass-text-tertiary);">Create events in minutes</p>
            </div>
            
            <div class="backdrop-blur-lg rounded-xl p-4 text-center" style="background: var(--glass-bg); border: 1px solid var(--glass-border);">
              <div class="w-10 h-10 rounded-lg flex items-center justify-center mx-auto mb-2" style="background: var(--success-color);">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
              </div>
              <h3 class="font-semibold text-sm mb-1" style="color: var(--glass-text-primary);">Fast Payments</h3>
              <p class="text-xs" style="color: var(--glass-text-tertiary);">Automated Stripe payouts</p>
            </div>
            
            <div class="backdrop-blur-lg rounded-xl p-4 text-center" style="background: var(--glass-bg); border: 1px solid var(--glass-border);">
              <div class="w-10 h-10 rounded-lg flex items-center justify-center mx-auto mb-2" style="background: var(--glass-text-accent);">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                </svg>
              </div>
              <h3 class="font-semibold text-sm mb-1" style="color: var(--glass-text-primary);">Live Analytics</h3>
              <p class="text-xs" style="color: var(--glass-text-tertiary);">Dashboard + exports</p>
            </div>
          </div>

        </div>

        <!-- Right Column: Login Form -->
        <div class="w-full max-w-md mx-auto lg:max-w-lg">
          <div class="relative group">
            <div class="absolute inset-0 rounded-2xl blur opacity-20 group-hover:opacity-30 transition-opacity" style="background: var(--glass-text-accent);"></div>
            <div class="relative backdrop-blur-xl rounded-2xl p-6 sm:p-8 shadow-2xl" style="background: var(--glass-bg-lg); border: 1px solid var(--glass-border);">
            <!-- Form Header -->
            <div class="text-center mb-6 sm:mb-8">
              <h2 class="text-xl sm:text-2xl font-bold mb-2" style="color: var(--glass-text-primary);">Organizer Login</h2>
              <p class="text-sm sm:text-base" style="color: var(--glass-text-secondary);">Manage your events and track ticket sales</p>
            </div>

            <!-- Login Form -->
            <div id="auth-form">
              <form id="login-form" class="space-y-5 sm:space-y-6">
                <input type="hidden" id="csrf-token" value={csrfToken} />
                <div>
                  <label for="email" class="block text-sm font-medium mb-2" style="color: var(--glass-text-primary);">
                    Email address
                  </label>
                  <input
                    id="email"
                    name="email"
                    type="email"
                    autocomplete="email"
                    required
                    class="appearance-none block w-full px-4 py-3 backdrop-blur-lg rounded-lg shadow-sm focus:outline-none focus:ring-2 transition-colors"
                    style="background: var(--glass-bg-input); border: 1px solid var(--glass-border); color: var(--glass-text-primary); --tw-placeholder-opacity: 1; placeholder: var(--glass-placeholder);"
                    placeholder="Enter your email"
                  />
                </div>

                <div>
                  <label for="password" class="block text-sm font-medium text-white mb-2">
                    Password
                  </label>
                  <input
                    id="password"
                    name="password"
                    type="password"
                    autocomplete="current-password"
                    required
                    class="appearance-none block w-full px-4 py-3 bg-white/10 backdrop-blur-lg border border-white/20 rounded-lg shadow-sm placeholder-white/60 text-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition-colors"
                    placeholder="Enter your password"
                  />
                </div>

                <div id="name-field" class="hidden">
                  <label for="name" class="block text-sm font-medium text-white mb-2">
                    Full Name
                  </label>
                  <input
                    id="name"
                    name="name"
                    type="text"
                    autocomplete="name"
                    class="appearance-none block w-full px-4 py-3 bg-white/10 backdrop-blur-lg border border-white/20 rounded-lg shadow-sm placeholder-white/60 text-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition-colors"
                    placeholder="Enter your full name"
                  />
                </div>

                <div>
                  <button
                    type="submit"
                    class="w-full flex justify-center py-3 sm:py-4 px-4 border border-transparent rounded-lg shadow-lg text-sm sm:text-base font-medium text-white bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 hover:shadow-xl touch-manipulation min-h-[44px]"
                  >
                    Sign in
                  </button>
                </div>

                <div class="text-center">
                  <button
                    type="button"
                    id="toggle-mode"
                    class="text-sm sm:text-base text-blue-400 hover:text-blue-300 font-medium transition-colors touch-manipulation py-2 px-4 rounded-lg hover:bg-white/5 min-h-[44px]"
                  >
                    Don't have an account? Sign up
                  </button>
                </div>
              </form>
            </div>

            <div id="error-message" class="mt-4 text-sm text-red-400 hidden"></div>
            
            <!-- Privacy Policy and Terms Links -->
            <div class="mt-6 pt-6 border-t border-white/20">
              <div class="text-center text-xs text-white/60">
                By signing up, you agree to our
                <a href="/terms" target="_blank" class="text-blue-400 hover:text-blue-300 underline">
                  Terms of Service
                </a>
                and
                <a href="/privacy" target="_blank" class="text-blue-400 hover:text-blue-300 underline">
                  Privacy Policy
                </a>
              </div>
            </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>

  <!-- Minimal Footer -->
  <footer class="relative z-10 py-4 lg:py-6">
    <div class="container mx-auto px-4">
      <div class="flex flex-col items-center space-y-2">
        <div class="flex space-x-6">
          <a href="/support" class="text-white/40 hover:text-white/60 text-xs lg:text-sm transition-colors">
            Support
          </a>
          <a href="/terms" class="text-white/40 hover:text-white/60 text-xs lg:text-sm transition-colors">
            Terms
          </a>
          <a href="/privacy" class="text-white/40 hover:text-white/60 text-xs lg:text-sm transition-colors">
            Privacy
          </a>
        </div>
        <p class="text-white/30 text-xs">
          © 2024 Black Canyon Tickets • Montrose, CO
        </p>
      </div>
    </div>
  </footer>
</LoginLayout>

<script>
  // Force dark mode for this page immediately to prevent flashing
  document.documentElement.setAttribute('data-theme', 'dark');
  document.documentElement.classList.add('dark');
  document.documentElement.classList.remove('light');
  
  // Apply to body as well to prevent any flash
  document.body.classList.add('dark');
  document.body.classList.remove('light');
  
  // Override any global theme logic for this page
  (window as any).__FORCE_DARK_MODE__ = true;
  
  // Prevent theme changes on this page
  if (window.localStorage) {
    // Store original theme before forcing
    const originalTheme = localStorage.getItem('theme');
    if (originalTheme && originalTheme !== 'dark') {
      sessionStorage.setItem('originalTheme', originalTheme);
    }
    // Temporarily set to dark for consistency
    localStorage.setItem('theme', 'dark');
  }
  
  // Block any theme change events on this page
  window.addEventListener('themeChanged', (e) => {
    e.preventDefault();
    e.stopPropagation();
    // Force back to dark if anything tries to change it
    document.documentElement.setAttribute('data-theme', 'dark');
    document.documentElement.classList.add('dark');
    document.documentElement.classList.remove('light');
    document.body.classList.add('dark');
    document.body.classList.remove('light');
  }, true);
</script>

<script>
  import { supabase } from '../lib/supabase';

  // Get DOM elements
  const authLoading = document.getElementById('auth-loading') as HTMLDivElement;
  const mainContent = document.getElementById('main-content') as HTMLDivElement;
  const loginForm = document.getElementById('login-form') as HTMLFormElement;
  const toggleMode = document.getElementById('toggle-mode') as HTMLButtonElement;
  const nameField = document.getElementById('name-field') as HTMLDivElement;
  const nameInput = document.getElementById('name') as HTMLInputElement;
  const submitButton = loginForm.querySelector('button[type="submit"]') as HTMLButtonElement;
  const errorMessage = document.getElementById('error-message') as HTMLDivElement;

  // Debug logging
  console.log('[LOGIN] Page loaded, login form ready');

  let isSignUpMode = false;

  toggleMode.addEventListener('click', () => {
    isSignUpMode = !isSignUpMode;
    if (isSignUpMode) {
      nameField.classList.remove('hidden');
      nameInput.required = true;
      submitButton.textContent = 'Sign up';
      toggleMode.textContent = 'Already have an account? Sign in';
    } else {
      nameField.classList.add('hidden');
      nameInput.required = false;
      submitButton.textContent = 'Sign in';
      toggleMode.textContent = "Don't have an account? Sign up";
    }
  });

  loginForm.addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const formData = new FormData(loginForm);
    const email = formData.get('email') as string;
    const password = formData.get('password') as string;
    const name = formData.get('name') as string;

    try {
      errorMessage.classList.add('hidden');
      
      if (isSignUpMode) {
        const { error } = await supabase.auth.signUp({
          email,
          password,
          options: {
            data: {
              name,
            },
          },
        });
        
        if (error) throw error;
        
        alert('Check your email for the confirmation link!');
      } else {
        // Use the SSR-compatible login endpoint
        console.log('[LOGIN] Attempting login with:', { email });
        const response = await fetch('/api/auth/login', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-CSRF-Token': (document.getElementById('csrf-token') as HTMLInputElement)?.value || '',
          },
          body: JSON.stringify({ email, password }),
        });
        console.log('[LOGIN] Login response status:', response.status);
        
        const result = await response.json();
        
        if (!response.ok) {
          throw new Error(result.error || 'Login failed');
        }
        
        // Check for return URL parameter (support both 'returnTo' and 'redirect')
        const urlParams = new URLSearchParams(window.location.search);
        const returnTo = urlParams.get('returnTo') || urlParams.get('redirect');
        
        // Use the redirectTo from server or fallback to returnTo or default dashboard
        console.log('[LOGIN] Login response data:', result);
        console.log('[LOGIN] Login response data:', result);
        const finalRedirect = returnTo || result.redirectTo || '/dashboard';
        
        console.log('[LOGIN] Login successful, determined redirect path:', finalRedirect);
        console.log('[LOGIN] Current cookies BEFORE redirect:', document.cookie);
        
        // Clear cached session data to force fresh auth check on next page load
        sessionCache = null;
        sessionCacheTime = 0;
        try {
          sessionStorage.removeItem(SESSION_STORAGE_KEY);
          sessionStorage.removeItem(SESSION_STORAGE_TIME_KEY);
          console.log('[LOGIN] Cleared session cache after successful login');
        } catch (e) {
          console.warn('[LOGIN] Failed to clear sessionStorage cache:', e);
        }
        
        // Small delay to ensure session cookies are set properly
        console.log('[LOGIN] Applying small delay before redirect...');
        setTimeout(() => {
          console.log('[LOGIN] Executing redirect to:', finalRedirect);
          // Use window.location.href instead of replace to ensure proper navigation
          window.location.href = finalRedirect;
        }, 100);
      }
    } catch (error) {
      console.error('[LOGIN] Login process error:', error);
      errorMessage.textContent = (error as Error).message;
      errorMessage.classList.remove('hidden');
    }
  });

  // Add logging for initial session check on page load
  // Note: The page hides the form initially and shows a loading state
  // This check determines if the user is already logged in
  
  // Enhanced cache to avoid repeated session checks (prevent rate limiting)
  let sessionCache: { authenticated: boolean; [key: string]: any } | null = null;
  let sessionCacheTime = 0;
  const CACHE_DURATION = 10000; // 10 seconds - much shorter for login page
  
  // Also use browser sessionStorage for persistence across page interactions
  const SESSION_STORAGE_KEY = 'bct_session_cache';
  const SESSION_STORAGE_TIME_KEY = 'bct_session_cache_time';
  
  // Prevent multiple simultaneous requests
  let isCheckingAuth = false;
  
  async function checkAuthAndRedirect() {
    console.log('[LOGIN] Checking initial authentication status...');
    
    // Check if we should force a fresh auth check (bypass cache)
    const urlParams = new URLSearchParams(window.location.search);
    const forceRefresh = urlParams.has('refresh') || urlParams.has('force');
    
    // Prevent multiple simultaneous requests
    if (isCheckingAuth) {
      console.log('[LOGIN] Auth check already in progress, skipping...');
      return;
    }
    
    isCheckingAuth = true;
    
    try {
      const now = Date.now();
      
      // Check sessionStorage first (most persistent) - but skip if forcing refresh
      if (!forceRefresh) {
        try {
          const cachedResult = sessionStorage.getItem(SESSION_STORAGE_KEY);
          const cachedTime = sessionStorage.getItem(SESSION_STORAGE_TIME_KEY);
          
          if (cachedResult && cachedTime) {
            const timeDiff = now - parseInt(cachedTime);
            if (timeDiff < CACHE_DURATION) {
              console.log('[LOGIN] Using sessionStorage cached session result');
              const result = JSON.parse(cachedResult);
              
              if (result.authenticated) {
                console.log('[LOGIN] User is already authenticated (sessionStorage), redirecting to dashboard.');
                window.location.href = '/dashboard';
                return;
              } else {
                console.log('[LOGIN] User not authenticated (sessionStorage), showing login form.');
                hideLoading();
                return;
              }
            }
          }
        } catch (e) {
          console.log('[LOGIN] SessionStorage cache error:', e);
        }
      }
      
      // Check in-memory cache second - but skip if forcing refresh
      if (!forceRefresh && sessionCache && (now - sessionCacheTime) < CACHE_DURATION) {
        console.log('[LOGIN] Using in-memory cached session result');
        const result = sessionCache;
        
        if (result.authenticated) {
          console.log('[LOGIN] User is already authenticated (in-memory), redirecting to dashboard.');
          window.location.href = '/dashboard';
          return;
        } else {
          console.log('[LOGIN] User not authenticated (in-memory), showing login form.');
          hideLoading();
          return;
        }
      }
      
      const response = await fetch('/api/auth/session');
      
      // Handle rate limiting gracefully
      if (response.status === 429) {
        console.warn('[LOGIN] Rate limited, showing login form');
        hideLoading();
        return;
      }
      
      const result = await response.json();
      
      // Cache the result in both memory and sessionStorage
      sessionCache = result;
      sessionCacheTime = now;
      
      try {
        sessionStorage.setItem(SESSION_STORAGE_KEY, JSON.stringify(result));
        sessionStorage.setItem(SESSION_STORAGE_TIME_KEY, now.toString());
      } catch (e) {
        console.warn('[LOGIN] Failed to cache in sessionStorage:', e);
      }

      console.log('[LOGIN] Initial auth check result:', result);

      if (result.authenticated) {
        console.log('[LOGIN] User is already authenticated, redirecting to dashboard.');
        // Redirect authenticated users away from the login page
        window.location.href = '/dashboard'; // Or appropriate default authenticated route
      } else {
        console.log('[LOGIN] User not authenticated, showing login form.');
        hideLoading(); // Show the form if not authenticated
      }
    } catch (error) {
      console.error('[LOGIN] Error during initial auth check:', error);
      // If auth check fails, assume not authenticated and show form
      hideLoading();
    } finally {
      isCheckingAuth = false;
    }
  }

  // Show loading state initially
  function showLoading() {
    authLoading.style.display = 'flex';
    mainContent.style.display = 'none';
  }

  // Hide loading state and show content
  function hideLoading() {
    authLoading.style.display = 'none';
    mainContent.style.display = 'flex';
  }

  // Execute initial auth check when the page loads
  checkAuthAndRedirect();

</script>