import { NavLink, Outlet, useMatch } from 'react-router-dom'
import { ToastHost } from './components'
import { ModelStatusProvider } from './modelStatus'
import { ModelStatusBadge } from './ModelStatusBadge'

/* The shell: a thin top bar and whatever page is routed under it.
 *
 * M8 reduced this to the two places that are not inside a campaign. Upstream
 * carried five links — Home, Adventures, Scenarios, Settings, AI Chat — which
 * described AI-DnD's information architecture rather than this product's.
 * `BROWSER-UX-SPEC.md` §97 has one entry point (the campaign library) and puts
 * everything else *inside* a campaign, where it belongs: a Save Point, a piece
 * of knowledge and a story state are all things a campaign has, and none of
 * them mean anything at the top level.
 *
 * What went, and why:
 *
 *   Adventures   the library is now the landing page, so a second link to a
 *                second list of the same thing had nothing to point at.
 *   Scenarios    a scenario is a template for a campaign. The editor for one
 *                was a schema editor, a story-card table and an art picker —
 *                §93's "dangerous advanced features" almost exactly. Creating a
 *                campaign no longer requires one.
 *   AI Chat      a raw model console. Useful to whoever was debugging the
 *                fork; nothing to do with telling a story.
 *
 * The story screen deliberately does *not* show this bar's campaign links. It
 * has its own header, because on the one screen that matters the story is the
 * interface.
 */
export default function App() {
  // The story screen owns its whole viewport, so the shell gets out of the way.
  const playing = useMatch('/play/:id')

  return (
    <ModelStatusProvider>
      <ToastHost>
        <a className="skip-link" href="#main">Skip to main content</a>
        {!playing && (
          <nav className="topnav" aria-label="Main">
            <NavLink to="/" className="brand">Adventure Storyteller</NavLink>
            <div className="nav-links">
              <NavLink
                to="/"
                end
                className={({ isActive }) => `navlink${isActive ? ' active' : ''}`}
              >
                Campaigns
              </NavLink>
              <NavLink
                to="/settings"
                className={({ isActive }) => `navlink${isActive ? ' active' : ''}`}
              >
                Settings
              </NavLink>
            </div>
            <ModelStatusBadge />
          </nav>
        )}
        <main id="main">
          <Outlet />
        </main>
      </ToastHost>
    </ModelStatusProvider>
  )
}