import Header from '@/components/template/Header'
import MobileNav from '@/components/template/MobileNav'
import Notification from '@/components/template/Notification'
import SideNav from '@/components/template/SideNav'
import SideNavToggle from '@/components/template/SideNavToggle'
import SidePanel from '@/components/template/SidePanel'
import UserDropdown from '@/components/template/UserDropdown'
import { useStoreState } from '@/store'
import LanguageSelector from '../template/LanguageSelector'
import Search from '../template/Search'
import StackedSideNav from '../template/StackedSideNav'
import AiAssistant from '../template/AiAssistant'
import { DynamicRouter } from '@/routes/dynamicRouter'

const HeaderActionsStart = () => {
  return (
    <>
      <MobileNav />
      <SideNavToggle />
      <Search />
    </>
  )
}

const HeaderActionsEnd = () => {
  return (
    <>
      <AiAssistant />
      <Notification />
      <LanguageSelector />
      <SidePanel className="hidden" />
      <UserDropdown hoverable={false} />
    </>
  )
}

const ClassicLayout = () => {
  const sideNavCollapse = useStoreState((state) => state.theme.layout.sideNavCollapse)

  return (
    <div className="app-layout-classic flex flex-auto flex-col">
      <div className="flex flex-auto min-w-0">
        {sideNavCollapse ? <StackedSideNav /> : <SideNav />}
        <div className="flex flex-col flex-auto min-h-screen min-w-0 relative w-full">
          <Header
            container={false}
            className="shadow dark:shadow-2xl"
            headerStart={<HeaderActionsStart />}
            headerEnd={<HeaderActionsEnd />}
          />
          <div className="h-full flex flex-auto flex-col">
            <DynamicRouter />
          </div>
        </div>
      </div>
    </div>
  )
}

export default ClassicLayout