import { useState, type ReactNode } from 'react'
import { useMatches } from 'react-router'
import type { PageMetadata } from '../route-config'
import CollapsedNavigation from './collapsed-navigation'
import { ActionButton } from '@react-spectrum/s2/ActionButton'
import { Tooltip, TooltipTrigger } from '@react-spectrum/s2/Tooltip'
import SidebarMenu from './sidebar-menu'
import MobileNavigation from './mobile-navigation'
import GlobalSettings from './global-settings'
import HomeIcon from '@react-spectrum/s2/icons/Home'
import ChevronLeftIcon from '@react-spectrum/s2/icons/ChevronLeft'
import ChevronRightIcon from '@react-spectrum/s2/icons/ChevronRight'
import styles from './layout-basic.module.css'

interface BasicLayoutProps {
  children: ReactNode
}

function BasicLayout({ children }: BasicLayoutProps) {
  const [isCollapsed, setIsCollapsed] = useState(false)
  const currentPage = useMatches().at(-1)?.handle as PageMetadata | undefined

  return (
    <div className={`${styles.appLayout}${isCollapsed ? ` ${styles.isCollapsed}` : ''}`}>
      <a className={styles.skipLink} href="#main-content">Skip to content</a>
      <aside id="sidebar" className={styles.sidebar} aria-label="Sidebar">
        <div className={styles.sidebarBrand} aria-label="React Spectrum">
          {isCollapsed ? <HomeIcon /> : 'React Spectrum'}
        </div>
        <nav className={styles.sidebarNavigation} aria-label="Main navigation">
          {isCollapsed && <CollapsedNavigation activePageId={currentPage?.id} />}
          <div className={styles.expandedNavigation} hidden={isCollapsed}>
            <SidebarMenu />
          </div>
        </nav>
      </aside>
      <div className={styles.contentLayout}>
        <header className={styles.topbar}>
          <MobileNavigation />
          <div className={styles.desktopMenuToggle}>
            <TooltipTrigger>
              <ActionButton
                aria-label={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
                aria-expanded={!isCollapsed}
                aria-controls="sidebar"
                isQuiet
                onPress={() => setIsCollapsed((collapsed) => !collapsed)}
              >
                {isCollapsed ? <ChevronRightIcon /> : <ChevronLeftIcon />}
              </ActionButton>
              <Tooltip>{isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}</Tooltip>
            </TooltipTrigger>
          </div>
          <span>{currentPage?.title}</span>
          <div className={styles.topbarActions}>
            <GlobalSettings />
          </div>
        </header>
        <main id="main-content" className={styles.pageContent} tabIndex={-1}>
          {children}
        </main>
      </div>
    </div>
  )
}

export default BasicLayout