import { Suspense } from 'react'

import { isAnonymousMode } from '@/lib/auth/provider'
import type { AppUser } from '@/lib/auth/types'
import { cn } from '@/lib/utils'

import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarHeader,
  SidebarMenu,
  SidebarRail,
  SidebarTrigger
} from '@/components/ui/sidebar'

import { ChatHistorySection } from './sidebar/chat-history-section'
import { ChatHistorySkeleton } from './sidebar/chat-history-skeleton'
import { HomeLink } from './sidebar/home-link'
import { LibraryMenuItem } from './sidebar/library-menu-item'
import { NewChatMenuItem } from './sidebar/new-chat-menu-item'
import { VersionFooter } from './sidebar/version-footer'
import { VersionFooterSkeleton } from './sidebar/version-footer-skeleton'
import { IconLogo } from './ui/icons'

export default function AppSidebar({ user }: { user?: AppUser | null }) {
  // Anonymous mode has no per-user library, and the server actions reject it,
  // so the entry point follows the same switch the pages use.
  const libraryAvailable = !isAnonymousMode()
  const versionFooterEnabled = process.env.MORPHIC_CLOUD_DEPLOYMENT !== 'true'

  return (
    <Sidebar side="left" variant="sidebar" collapsible="offcanvas">
      <SidebarHeader className="flex flex-row justify-between items-center">
        <HomeLink className="flex items-center gap-2 px-2 py-3">
          <IconLogo className={cn('size-5')} />
          <span className="font-semibold text-sm">Morphic</span>
        </HomeLink>
        <SidebarTrigger />
      </SidebarHeader>
      <SidebarContent className="flex flex-col px-2 py-4 h-full">
        <SidebarMenu>
          <NewChatMenuItem />
          {libraryAvailable && <LibraryMenuItem />}
        </SidebarMenu>
        <div className="flex-1 overflow-y-auto">
          <Suspense fallback={<ChatHistorySkeleton />}>
            <ChatHistorySection />
          </Suspense>
        </div>
      </SidebarContent>
      {versionFooterEnabled && (
        <SidebarFooter>
          <Suspense fallback={<VersionFooterSkeleton />}>
            <VersionFooter user={user} />
          </Suspense>
        </SidebarFooter>
      )}
      <SidebarRail />
    </Sidebar>
  )
}