import { useLocation } from '@solidjs/router'
import type { JSX } from 'solid-js'
import { createMemo, createSignal } from 'solid-js'
import { routeByPath } from '@/app/navigation'
import { Sidebar } from '@/components/layout/sidebar'
import { TopBar } from '@/components/layout/top-bar'

export const AppShell = (props: { children?: JSX.Element }) => {
  const location = useLocation()
  const [isSidebarOpen, setIsSidebarOpen] = createSignal(false)

  const currentRoute = createMemo(
    () => routeByPath(location.pathname) ?? routeByPath('/app/dashboard'),
  )

  return (
    <div class="grid min-h-screen lg:grid-cols-[16rem_1fr] bg-surface scanlines" data-testid="app-shell">
      <Sidebar mobileOpen={isSidebarOpen()} onCloseMobile={() => setIsSidebarOpen(false)} />

      <div class="relative flex min-w-0 flex-col">
        <TopBar
          pageTitle={currentRoute()?.label ?? 'SEEN'}
          pageDescription={currentRoute()?.description ?? 'YOUR PERSONAL MEDIA CONTROL CENTER'}
          onToggleSidebar={() => setIsSidebarOpen(true)}
        />

        <main class="flex-1 px-6 py-8 sm:px-8 sm:py-10">
          <div class="mx-auto w-full max-w-[1800px]">
            {props.children}
          </div>
        </main>
      </div>
    </div>
  )
}
