import { useState } from 'react'
import { NavLink, Outlet } from 'react-router-dom'
import { ApiError } from './api'
import { useAuth } from './AuthContext'

export function Layout() {
  const { currentUser, logout, isElevated, requestElevation } = useAuth()
  const [elevationError, setElevationError] = useState<string | null>(null)

  async function handleElevate() {
    setElevationError(null)
    try {
      await requestElevation()
    } catch (err) {
      setElevationError(err instanceof ApiError ? err.message : 'Kunne ikke forhøje rettigheder')
    }
  }

  return (
    <div>
      <nav className="navbar">
        <span className="navbar-brand">Fælles Vinindkøb — Admin</span>
        <div className="navbar-links">
          <NavLink to="/deltagere">Deltagere</NavLink>
          <NavLink to="/runder">Runder</NavLink>
          {currentUser?.is_superadmin &&
            (isElevated ? (
              <span className="elevated-badge" title="Udløber automatisk efter 5 minutter">
                Rettigheder forhøjet ✓
              </span>
            ) : (
              <button className="link-button" onClick={handleElevate}>
                Forhøj rettigheder
              </button>
            ))}
          {currentUser && (
            <>
              <span className="navbar-user">{currentUser.name}</span>
              <button className="link-button" onClick={logout}>
                Log ud
              </button>
            </>
          )}
        </div>
      </nav>
      {elevationError && <p className="content error">{elevationError}</p>}
      <main className="content">
        <Outlet />
      </main>
    </div>
  )
}