import { Outlet } from 'react-router-dom'
import { AuthTicketIcon, SceneDecor } from './AuthDecor'
import { AppSidebar } from './AppSidebar'
import { MobileBottomNav } from './MobileBottomNav'
import { AccountSwitcher } from './AccountSwitcher'
import { MemberMenu } from './MemberMenu'
import { JobMonitor } from './JobMonitor'
import { IslanderCompanion } from './islander/IslanderCompanion'
import { IslanderPageProvider } from '../lib/islander'
import { OnboardingBanner } from './OnboardingBanner'
import { OnboardingRouteGuard } from './OnboardingRouteGuard'
import { OnboardingProvider } from '../onboarding/OnboardingContext'
import { ThreadsAccountProvider } from '../threads/ThreadsAccountContext'

export function Layout() {
  return (
    <ThreadsAccountProvider>
      <OnboardingProvider>
      <div className="hx-scene ac-app-shell flex min-h-dvh flex-col">
        <SceneDecor />

        <div className="ac-workbench relative z-10 flex min-h-0 w-full flex-1">
          <AppSidebar />

          <div className="ac-workspace-column flex min-w-0 flex-1 flex-col">
            <header className="ac-app-chrome">
              <div className="ac-app-header-brand lg:hidden">
                <AuthTicketIcon className="ac-app-header-icon" />
                <div className="min-w-0">
                  <p className="display-en text-[10px] font-semibold tracking-[0.16em] text-accent uppercase">
                    Haixun Patrol
                  </p>
                  <h1 className="truncate text-lg font-bold leading-snug text-ink">巡樓管理台</h1>
                </div>
              </div>
              <div className="ac-app-chrome-spacer hidden min-w-0 flex-1 lg:block" aria-hidden />
              <div className="ac-app-header-actions flex shrink-0 items-center gap-2">
                <AccountSwitcher />
                <MemberMenu />
              </div>
            </header>

            <main className="ac-workspace layout-main min-h-0 min-w-0 flex-1">
              <IslanderPageProvider>
                <div className="ac-workspace-inner">
                  <OnboardingBanner />
                  <OnboardingRouteGuard>
                    <Outlet />
                  </OnboardingRouteGuard>
                </div>
              </IslanderPageProvider>
            </main>
          </div>
        </div>

        <MobileBottomNav />
        <JobMonitor />
        <IslanderCompanion />
      </div>
      </OnboardingProvider>
    </ThreadsAccountProvider>
  )
}