import { useLayoutEffect, useState } from 'react'
import { Outlet, useLocation } from 'react-router-dom'
import { AppShell } from '@astryxdesign/core/AppShell'
import { Icon } from '@astryxdesign/core/Icon'
import { IconButton } from '@astryxdesign/core/IconButton'
import { NavIcon } from '@astryxdesign/core/NavIcon'
import { SideNav, SideNavItem, SideNavSection } from '@astryxdesign/core/SideNav'
import { TopNav, TopNavHeading } from '@astryxdesign/core/TopNav'
import { Moon, Sparkles, Sun } from 'lucide-react'
import { isRouteActive, navRoutes } from '../app-routes'
import { useThemeMode } from '../theme/useThemeMode'

export function AppLayout() {
  const { pathname } = useLocation()
  const { mode, toggleMode } = useThemeMode()
  const [isMobileNavOpen, setIsMobileNavOpen] = useState(false)

  useLayoutEffect(() => {
    const main = document.getElementById('astryx-app-shell-main')
    if (main) main.scrollTop = 0
    window.scrollTo(0, 0)
  }, [pathname])

  const nextMode = mode === 'light' ? 'dark' : 'light'

  return (
    <AppShell
      height="fill"
      contentPadding={0}
      mobileNav={{
        isOpen: isMobileNavOpen,
        onOpenChange: setIsMobileNavOpen,
      }}
      topNav={
        <TopNav
          label="主导航"
          heading={
            <TopNavHeading
              heading="Astryx 起始模板"
              headingHref="/"
              logo={
                <NavIcon
                  icon={<Icon icon={Sparkles} size="sm" color="inherit" />}
                />
              }
            />
          }
          endContent={
            <IconButton
              label={`切换到${nextMode === 'dark' ? '深色' : '浅色'}主题`}
              tooltip={`切换到${nextMode === 'dark' ? '深色' : '浅色'}主题`}
              variant="ghost"
              icon={<Icon icon={mode === 'light' ? Moon : Sun} />}
              onClick={toggleMode}
            />
          }
        />
      }
      sideNav={
        <SideNav collapsible>
          <SideNavSection title="探索">
            {navRoutes.map(({ label, path, icon }) => (
              <SideNavItem
                key={path}
                label={label}
                href={path}
                icon={icon}
                selectedIcon={icon}
                isSelected={isRouteActive(path, pathname)}
                onClick={() => setIsMobileNavOpen(false)}
              />
            ))}
          </SideNavSection>
        </SideNav>
      }>
      <Outlet />
    </AppShell>
  )
}