import type { ReactNode } from 'react'
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarHeader,
  SidebarInset,
  SidebarProvider,
  SidebarTrigger,
} from '@mdxui/primitives/sidebar'
import { Separator } from '@mdxui/primitives/separator'
import type { AppConfig, NavGroup, UserIdentity } from '../types'
import { AppProvider } from '../context/app-context'

export interface AppShellProps {
  /** App configuration */
  config: AppConfig
  /** Navigation groups for the sidebar */
  navigation?: NavGroup[]
  /** Current user identity */
  user?: UserIdentity
  /** Whether the app is loading */
  isLoading?: boolean
  /** Content to render in the sidebar header (e.g., logo, team switcher) */
  header?: ReactNode
  /** Content to render in the sidebar navigation area */
  nav?: ReactNode
  /** Content to render in the sidebar footer (e.g., user menu) */
  footer?: ReactNode
  /** Content to render in the page header (e.g., breadcrumbs) */
  pageHeader?: ReactNode
  /** Main content area */
  children: ReactNode
  /** Whether the sidebar should be collapsible */
  collapsible?: 'offcanvas' | 'icon' | 'none'
  /** Sidebar variant */
  variant?: 'sidebar' | 'floating' | 'inset'
  /** Default open state of the sidebar */
  defaultOpen?: boolean
  /** Controlled open state */
  open?: boolean
  /** Callback when open state changes */
  onOpenChange?: (open: boolean) => void
  /** Additional className for the main content area */
  mainClassName?: string
}

/**
 * AppShell provides the core layout structure for admin/app interfaces.
 * It wraps content in an AppProvider and renders a sidebar-based layout.
 *
 * @example
 * ```tsx
 * <AppShell
 *   config={{ name: 'Admin', basePath: '/admin' }}
 *   navigation={navGroups}
 *   user={currentUser}
 *   header={<TeamSwitcher />}
 *   nav={<NavMain />}
 *   footer={<NavUser />}
 *   pageHeader={<AppBreadcrumbs />}
 * >
 *   <Dashboard />
 * </AppShell>
 * ```
 */
export function AppShell({
  config,
  navigation = [],
  user,
  isLoading,
  header,
  nav,
  footer,
  pageHeader,
  children,
  collapsible = 'icon',
  variant = 'inset',
  defaultOpen,
  open,
  onOpenChange,
  mainClassName,
}: AppShellProps) {
  return (
    <AppProvider config={config} navigation={navigation} user={user} isLoading={isLoading}>
      <SidebarProvider defaultOpen={defaultOpen} open={open} onOpenChange={onOpenChange}>
        <Sidebar collapsible={collapsible} variant={variant}>
          {header && <SidebarHeader>{header}</SidebarHeader>}
          {nav && <SidebarContent>{nav}</SidebarContent>}
          {footer && <SidebarFooter className="pb-4">{footer}</SidebarFooter>}
        </Sidebar>
        <SidebarInset>
          {pageHeader && (
            <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
              <div className="flex items-center gap-2 px-4">
                <SidebarTrigger className="-ml-1" />
                <Separator orientation="vertical" className="mr-2 data-[orientation=vertical]:h-4" />
                {pageHeader}
              </div>
            </header>
          )}
          <main className={mainClassName ?? 'flex-1 overflow-auto p-4 pt-0'}>
            {children}
          </main>
        </SidebarInset>
      </SidebarProvider>
    </AppProvider>
  )
}