---
// AuthGuard component - protects content that requires authentication
export interface Props {
  redirectTo?: string;
  loginRequired?: boolean;
}

const { redirectTo = "/en", loginRequired = true } = Astro.props;
---

<div id="auth-guard" class="min-h-screen">
  <!-- Loading state -->
  <div id="auth-loading" class="flex items-center justify-center min-h-screen">
    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-yellow-600"></div>
  </div>

  <!-- Not authenticated state -->
  <div id="auth-required" class="hidden">
    <div class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full">
      <div class="text-center">
        <div class="max-w-2xl mx-auto">
          <h1 class="text-3xl font-bold text-neutral-800 dark:text-neutral-200 mb-4">
            Access Restricted
          </h1>

          <p class="text-lg text-neutral-600 dark:text-neutral-400 mb-8">
            You need to be signed in to access the AI Luggage Generator. Create a free account to start designing custom luggage with artificial intelligence.
          </p>

          <div class="space-y-4">
            <a
              href="/en/login"
              class="inline-flex items-center justify-center px-8 py-3 bg-brand-600 hover:bg-brand-700 text-white font-semibold rounded-lg transition-colors mr-4"
            >
              Sign In
            </a>

            <a
              href="/en/register"
              class="inline-flex items-center justify-center px-8 py-3 border-2 border-brand-600 text-brand-600 hover:bg-brand-50 dark:hover:bg-brand-900/20 font-semibold rounded-lg transition-colors"
            >
              Create Account
            </a>
          </div>

          <div class="mt-8 bg-neutral-50 dark:bg-neutral-800 p-6 rounded-xl">
            <h3 class="font-semibold text-neutral-800 dark:text-neutral-200 mb-3">
              What you get with a free account:
            </h3>
            <ul class="space-y-2 text-sm text-neutral-600 dark:text-neutral-400 text-left max-w-md mx-auto">
              <li>• AI-powered luggage design generation</li>
              <li>• High-quality product visualizations</li>
              <li>• Download generated images</li>
              <li>• Professional project inspiration</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Authenticated content -->
  <div id="auth-content" class="hidden">
    <slot />
  </div>
</div>

<!-- Authentication Logic -->
<script is:inline>
  function checkAuthState() {
    const authGuard = document.getElementById('auth-guard');
    const loadingDiv = document.getElementById('auth-loading');
    const requiredDiv = document.getElementById('auth-required');
    const contentDiv = document.getElementById('auth-content');

    // Check if user is authenticated (simple localStorage check)
    const isAuthenticated = localStorage.getItem('sharetone_user_authenticated') === 'true';
    const userEmail = localStorage.getItem('sharetone_user_email');

    // Hide loading
    loadingDiv.classList.add('hidden');

    if (isAuthenticated && userEmail) {
      // User is authenticated, show protected content
      requiredDiv.classList.add('hidden');
      contentDiv.classList.remove('hidden');

      // Update navbar to show user info
      updateNavbarAuth(userEmail);
    } else {
      // User is not authenticated, show login prompt
      contentDiv.classList.add('hidden');
      requiredDiv.classList.remove('hidden');
    }
  }

  function updateNavbarAuth(email) {
    // Find login button and replace with user info
    const loginBtn = document.querySelector('[data-hs-overlay="#hs-toggle-between-modals-login-modal"]');
    if (loginBtn && loginBtn.tagName === 'BUTTON') {
      loginBtn.innerHTML = `
        <div class="flex items-center space-x-2">
          <div class="w-8 h-8 bg-yellow-100 dark:bg-yellow-900/50 rounded-full flex items-center justify-center">
            <span class="text-sm font-medium text-yellow-800 dark:text-yellow-200">
              ${email.charAt(0).toUpperCase()}
            </span>
          </div>
          <span class="hidden sm:block text-sm text-neutral-700 dark:text-neutral-300">
            ${email}
          </span>
          <svg class="w-4 h-4 text-neutral-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
          </svg>
        </div>
      `;

      // Add logout functionality
      loginBtn.onclick = (e) => {
        e.preventDefault();
        if (confirm('Are you sure you want to sign out?')) {
          localStorage.removeItem('sharetone_user_authenticated');
          localStorage.removeItem('sharetone_user_email');
          window.location.reload();
        }
      };
    }
  }

  // Listen for successful authentication
  window.addEventListener('sharetone-auth-success', (event) => {
    const { email } = event.detail;
    localStorage.setItem('sharetone_user_authenticated', 'true');
    localStorage.setItem('sharetone_user_email', email);
    checkAuthState();
  });

  // Check auth state on page load
  document.addEventListener('DOMContentLoaded', checkAuthState);

  // Check auth state when returning from another page
  document.addEventListener('visibilitychange', () => {
    if (!document.hidden) {
      checkAuthState();
    }
  });
</script>