---
export interface Props {
  title?: string;
  showBackLink?: boolean;
  backLinkUrl?: string;
  backLinkText?: string;
}

const { 
  title = "Dashboard", 
  showBackLink = false, 
  backLinkUrl = "/dashboard", 
  backLinkText = "← Back" 
} = Astro.props;
---

<!-- Unified Navigation -->
<nav class="sticky top-0 z-50 bg-white/90 backdrop-blur-lg shadow-xl border-b border-slate-200/50">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-20">
      <div class="flex items-center space-x-8">
        <a href="/dashboard" class="flex items-center">
          <span class="text-xl font-light text-gray-900">
            <span class="font-bold">P</span>ortal
          </span>
        </a>
        <div class="hidden md:flex items-center space-x-6">
          {showBackLink && (
          <div class="flex items-center space-x-3">
            <a 
              href={backLinkUrl} 
              class="text-slate-600 hover:text-slate-900 font-medium transition-colors duration-200"
            >
              {backLinkText}
            </a>
            <span class="text-slate-400">|</span>
          </div>
        )}
          <span class="text-slate-900 font-semibold">{title}</span>
        </div>
      </div>
      <div class="flex items-center space-x-4">
        <a 
          id="admin-dashboard-link"
          href="/admin/dashboard" 
          class="hidden bg-slate-800 hover:bg-slate-900 text-white px-4 py-2 rounded-xl text-sm font-medium transition-all duration-200 hover:shadow-md"
        >
          Admin Dashboard
        </a>
        <span id="user-name" class="text-sm text-slate-700 font-medium"></span>
        <button
          id="logout-btn"
          class="bg-slate-100 hover:bg-slate-200 text-slate-700 px-4 py-2 rounded-xl text-sm font-medium transition-all duration-200 hover:shadow-md"
        >
          Sign Out
        </button>
      </div>
    </div>
  </div>
</nav>

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

  // Initialize navigation functionality
  const userNameSpan = document.getElementById('user-name');
  const logoutBtn = document.getElementById('logout-btn');
  const adminDashboardLink = document.getElementById('admin-dashboard-link');

  // Check authentication and load user info
  async function initializeNavigation() {
    const { data: { session } } = await supabase.auth.getSession();
    if (!session) {
      window.location.href = '/';
      return;
    }

    // Load user info
    const { data: { user } } = await supabase.auth.getUser();
    if (user) {
      userNameSpan.textContent = user.user_metadata.name || user.email;
      
      // Check if user is admin and show admin dashboard link
      const { data: userProfile } = await supabase
        .from('users')
        .select('role')
        .eq('id', user.id)
        .single();
      
      if (userProfile?.role === 'admin') {
        adminDashboardLink.classList.remove('hidden');
      }
    }
  }

  // Logout functionality
  logoutBtn?.addEventListener('click', async () => {
    await supabase.auth.signOut();
    window.location.href = '/';
  });

  // Initialize when the page loads
  initializeNavigation();
</script>