import { useState } from 'react'
import { NavLink, Outlet } from 'react-router-dom'
import { ToastHost } from './components'
import Embers from './Embers.jsx'

// The shell: the nav bar and whatever page is routed under it.
//
// Upstream also carried the hosted deployment's account furniture here — a
// /auth/me lookup on mount, guest and sign-up prompts, a log-out button, a
// pageview beacon, and two nav links gated on server-side allowlists. M2
// removed the deployment those served. There is one local user, nothing to log
// in to, and nothing counting.
export default function App() {
  const [navOpen, setNavOpen] = useState(false) // mobile hamburger menu

  return (
    <ToastHost>
      <Embers />
      <nav className="topnav">
        <span className="brand">⚔ Adventure Storyteller</span>
        <button
          className="nav-hamburger"
          aria-label="Menu"
          aria-expanded={navOpen}
          onClick={() => setNavOpen((o) => !o)}
        >
          {navOpen ? '✕' : '☰'}
        </button>
        <div className={`nav-links${navOpen ? ' open' : ''}`} onClick={() => setNavOpen(false)}>
          <NavLink to="/" end className={({ isActive }) => `navlink${isActive ? ' active' : ''}`}>
            Home
          </NavLink>
          <NavLink to="/adventures" className={({ isActive }) => `navlink${isActive ? ' active' : ''}`}>
            Adventures
          </NavLink>
          <NavLink to="/scenarios" className={({ isActive }) => `navlink${isActive ? ' active' : ''}`}>
            Scenarios
          </NavLink>
          <NavLink to="/settings" className={({ isActive }) => `navlink${isActive ? ' active' : ''}`}>
            Settings
          </NavLink>
          <NavLink to="/chat" className={({ isActive }) => `navlink${isActive ? ' active' : ''}`}>
            AI Chat
          </NavLink>
        </div>
      </nav>
      <Outlet />
    </ToastHost>
  )
}