import { Menu } from 'lucide-react'
import { Outlet } from 'react-router-dom'

import { OrganizationSwitcher } from '@/components/organization/organization-switcher'
import { AppLogo } from '@/components/navigation/app-logo'
import { SidebarNav } from '@/components/navigation/sidebar'
import { UserMenu } from '@/components/navigation/user-menu'
import { ThemeToggle } from '@/components/theme/theme-toggle'
import { Button } from '@/components/ui/button'
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'

export const AppShell = () => {
  return (
    <div className="flex min-h-screen bg-background text-foreground">
      <aside className="hidden w-64 flex-col border-r bg-card/30 p-4 shadow-sm md:flex">
        <AppLogo className="mb-6" />
        <OrganizationSwitcher />
        <div className="mt-6 flex-1">
          <SidebarNav />
        </div>
      </aside>
      <div className="flex flex-1 flex-col">
        <header className="flex items-center justify-between border-b bg-card/30 px-4 py-3">
          <div className="flex items-center gap-3">
            <Sheet>
              <SheetTrigger asChild>
                <Button variant="ghost" size="icon" className="md:hidden">
                  <Menu className="h-5 w-5" />
                </Button>
              </SheetTrigger>
              <SheetContent side="left" className="w-64">
                <AppLogo className="mb-6" />
                <OrganizationSwitcher />
                <div className="mt-6">
                  <SidebarNav />
                </div>
              </SheetContent>
            </Sheet>
            <div className="md:hidden">
              <AppLogo />
            </div>
          </div>
          <div className="flex items-center gap-2">
            <div className="hidden sm:block">
              <OrganizationSwitcher />
            </div>
            <ThemeToggle />
            <UserMenu />
          </div>
        </header>
        <main className="flex-1 bg-muted/20 p-4 md:p-6">
          <Outlet />
        </main>
      </div>
    </div>
  )
}