import { Link, Outlet, useNavigate } from 'react-router-dom'
import { useAuth } from '../context/AuthContext'

export function AdminLayout() {
  const { logout } = useAuth()
  const navigate = useNavigate()

  async function handleLogout() {
    await logout()
    navigate('/login')
  }

  return (
    <div className="min-h-screen flex flex-col">
      <nav className="bg-bg-elevated border-b border-border sticky top-0 z-50 backdrop-blur-md">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-14 items-center">
            <Link to="/admin/dashboard" className="text-lg font-bold text-text hover:text-accent transition-colors">
              Activiteiten Inventaris
            </Link>
            
            <div className="flex items-center gap-2">
              <Link 
                to="/admin/dashboard" 
                className="px-3 py-1.5 text-sm text-text-muted hover:text-text hover:bg-bg-card rounded-md transition-colors"
              >
                Dashboard
              </Link>
              <Link 
                to="/admin/users" 
                className="px-3 py-1.5 text-sm text-text-muted hover:text-text hover:bg-bg-card rounded-md transition-colors"
              >
                Gebruikers
              </Link>
              <Link 
                to="/admin/change-password" 
                className="px-3 py-1.5 text-sm text-text-muted hover:text-text hover:bg-bg-card rounded-md transition-colors"
              >
                Wachtwoord
              </Link>
              <button 
                onClick={handleLogout}
                className="px-3 py-1.5 text-sm text-danger hover:bg-danger-muted rounded-md transition-colors"
              >
                Uitloggen
              </button>
            </div>
          </div>
        </div>
      </nav>
      
      <main className="flex-1 max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-8">
        <Outlet />
      </main>
      
      <footer className="border-t border-border-light py-6 text-center text-text-faint text-sm">
        Activiteiten Inventaris Systeem
      </footer>
    </div>
  )
}