import { createPortal } from 'react-dom'
import { Outlet } from 'react-router-dom'
import { SceneDecor } from './AuthDecor'
import { AppBrandLink } from './AppBrandLink'
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 { useIslanderUnlock } from '../hooks/useIslanderUnlock'
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() {
  const islanderUnlocked = useIslanderUnlock()

  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">
              <AppBrandLink />
              <div className="ac-app-chrome-spacer min-w-0 flex-1" 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 />
        {islanderUnlocked
          ? createPortal(<IslanderCompanion />, document.body)
          : null}
      </div>
      </OnboardingProvider>
    </ThreadsAccountProvider>
  )
}