import { Outlet } from 'react-router-dom'

import { TopNav } from '../components/layout/TopNav'
import { ShellStatusBar } from '../components/layout/ShellStatusBar'
import { CommandPalette } from '../components/navigation/CommandPalette'

export function AppShell() {
  return (
    <div className="relative min-h-screen overflow-x-hidden bg-slate-950 text-slate-100">
      <div
        aria-hidden="true"
        className="pointer-events-none fixed inset-0 -z-10 bg-[radial-gradient(circle_at_top_left,rgba(34,211,238,0.12),transparent_34rem),radial-gradient(circle_at_bottom_right,rgba(59,130,246,0.1),transparent_30rem)]"
      />

      <a
        href="#mechanica-main-content"
        className="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[60] focus:rounded-lg focus:border focus:border-cyan-300 focus:bg-slate-950 focus:px-4 focus:py-2 focus:text-sm focus:font-semibold focus:text-cyan-100 focus:shadow-2xl focus:outline-none"
        onClick={() => {
          window.setTimeout(() => {
            document
              .getElementById('mechanica-main-content')
              ?.focus({ preventScroll: true })
          }, 0)
        }}
      >
        Skip to main content
      </a>

      <TopNav />

      <main
        id="mechanica-main-content"
        tabIndex={-1}
        className="relative z-0 mx-auto w-full max-w-[1440px] px-4 pb-24 pt-6 outline-none sm:px-6 lg:px-8"
      >
        <Outlet />
      </main>

      <ShellStatusBar />
      <CommandPalette />
    </div>
  )
}

export default AppShell