import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
} from '@/components/ui/sidebar'
import { useInfiniteChats } from '@/features/agent/api/list-chats'
import { useAppStore } from '@/store'
import { useListBoards } from '@/features/board/api/list-boards'
import { ChatMenuItem, NewChatItem } from './chat'
import { BoardItem, DashboardMenuItem, NewBoardItem } from './board'
import { ChatsDialog } from './chats-dialog'
import { useMemo, useState } from 'react'
import type { Chat } from '@/features/agent/types/chat'
import { AwardIcon, ChatHistoryIcon, InstallAppIcon, LogoutIcon, UserProfileIcon } from '@/components/icons'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { ModeToggle } from '@/components/mode-toggle'
import { HomeMenuItem } from './home'
import { useNavigate } from '@tanstack/react-router'
import { BILLING_ENABLED } from '@/config/billing'
import { TierBadge } from '@/features/user-settings/components/tier-badge'


/**
 * Props for the AppSidebar component.
 *
 * @property onLogout - Callback function to handle user logout.
 */
type AppSidebarProps = {
  onLogout: () => void
}


/**
 * Application Sidebar Component.
 */
const CHAT_HISTORY_PAGE_SIZE = 50

export function AppSidebar({ onLogout }: AppSidebarProps) {
  const navigate = useNavigate()
  const userId = useAppStore(s => s.userId)
  const userEmail = useAppStore(s => s.userEmail)
  const userPlan = useAppStore(s => s.userPlan)

  const initials = useMemo(() => {
    if (!userEmail) return 'U'
    const name = userEmail.split('@')[0] || 'user'
    return name.slice(0, 2).toUpperCase()
  }, [userEmail])

  const [chatsDialogOpen, setChatsDialogOpen] = useState(false)

  const { data: chatPagesData } = useInfiniteChats({
    pageSize: CHAT_HISTORY_PAGE_SIZE,
    graphUid: "any",
    userId
  })
  const { data: boards = [] } = useListBoards(userId)

  const chatHistoryItems = useMemo<Chat[]>(
    () => chatPagesData?.pages.flat() ?? [],
    [chatPagesData]
  )

  const chatItems = useMemo(
    () => chatHistoryItems.map(chat => (
      <ChatMenuItem key={chat.uid} chatId={chat.uid} label={chat.label} />
    )),
    [chatHistoryItems]
  )

  const { myBoards, sharedBoards } = useMemo(() => {
    const mine: typeof boards = []
    const shared: typeof boards = []
    for (const board of boards) {
      if (board.role === "owner") {
        mine.push(board)
      } else {
        shared.push(board)
      }
    }
    return { myBoards: mine, sharedBoards: shared }
  }, [boards])

  const myBoardItems = useMemo(
    () =>
      myBoards.map((board) => (
        <BoardItem key={board.uid} boardId={board.uid} label={board.label} />
      )),
    [myBoards],
  )

  const sharedBoardItems = useMemo(
    () =>
      sharedBoards.map((board) => (
        <BoardItem
          key={board.uid}
          boardId={board.uid}
          label={board.label}
          sharedByEmail={board.ownerEmail}
        />
      )),
    [sharedBoards],
  )

  return (
    <Sidebar variant="sidebar" collapsible="offcanvas">
      <SidebarContent className="w-full h-full flex flex-col overflow-hidden">
        <SidebarGroup className="shrink-0">
          <SidebarGroupContent>
            <SidebarMenu>
              <SidebarMenuItem>
                <div className="flex items-center gap-2">
                  <SidebarMenuButton
                    className="h-auto py-2 min-w-0 flex-1"
                    onClick={() => navigate({ to: "/" })}
                  >
                    <img src="/dim0.svg" alt="Dim0 Home" className="h-7 w-7 shrink-0" />
                    <span className="font-medium">Dim0</span>
                  </SidebarMenuButton>

                  <button
                    type="button"
                    className="inline-flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
                    onClick={() => navigate({ to: "/install" })}
                    aria-label="Install app"
                    title="Install app"
                  >
                    <InstallAppIcon className="size-4" strokeWidth={2} />
                  </button>
                </div>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>

        <div className="min-h-0 flex-1 overflow-y-auto scrollbar-thin">
          <div className="pb-0">
            <SidebarGroup>
              <SidebarGroupLabel><span>WORKSPACE</span></SidebarGroupLabel>
              <SidebarGroupContent>
                <SidebarMenu>
                  <HomeMenuItem />
                  <DashboardMenuItem />
                  <NewBoardItem />
                  {myBoardItems}
                </SidebarMenu>
              </SidebarGroupContent>
            </SidebarGroup>

            {sharedBoardItems.length > 0 && (
              <SidebarGroup>
                <SidebarGroupLabel><span>SHARED WITH ME</span></SidebarGroupLabel>
                <SidebarGroupContent>
                  <SidebarMenu>
                    {sharedBoardItems}
                  </SidebarMenu>
                </SidebarGroupContent>
              </SidebarGroup>
            )}

            <SidebarGroup>
              <SidebarGroupLabel><span>CHATS</span></SidebarGroupLabel>
              <SidebarGroupContent>
                <SidebarMenu>
                  <NewChatItem />
                  <SidebarMenuSub>
                    {chatItems}
                  </SidebarMenuSub>
                  <SidebarMenuItem>
                    <SidebarMenuButton
                      onClick={() => setChatsDialogOpen(true)}
                      className="font-medium text-xs"
                    >
                      <ChatHistoryIcon className="size-4 shrink-0" strokeWidth={2} />
                      <span>View all chats</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                </SidebarMenu>
              </SidebarGroupContent>
            </SidebarGroup>
          </div>
        </div>

        <ChatsDialog open={chatsDialogOpen} onOpenChange={setChatsDialogOpen} />

        <SidebarGroup className="shrink-0 border-t border-sidebar-border/50 pt-2">
          <SidebarGroupContent>
            <SidebarMenu>
              <SidebarMenuItem>
                <div className="flex items-center gap-2 w-full">
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <SidebarMenuButton className="h-auto py-2 flex items-center gap-2 font-medium text-xs min-w-0 flex-1">
                        <Avatar className="h-8 w-8 -ml-2 shrink-0">
                          <AvatarImage alt={userEmail} />
                          <AvatarFallback>{initials}</AvatarFallback>
                        </Avatar>
                        <div className="min-w-0 flex-1">
                          <span
                            className="truncate block"
                            title={userEmail}
                          >
                            {userEmail}
                          </span>
                          {BILLING_ENABLED ? (
                            <div className="mt-1">
                              <TierBadge plan={userPlan} />
                            </div>
                          ) : null}
                        </div>
                      </SidebarMenuButton>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="start" side="top" className="w-56">
                      <DropdownMenuItem
                        className='text-xs'
                        onClick={() => navigate({ to: "/settings" })}
                      >
                        <UserProfileIcon className="mr-2 h-4 w-4" strokeWidth={2} />
                        <span>Profile</span>
                      </DropdownMenuItem>
                      {BILLING_ENABLED ? (
                        <DropdownMenuItem
                          className='text-xs bg-gradient-to-br from-secondary-foreground/10 via-secondary-foreground/5 to-transparent text-secondary-foreground'
                          onClick={() => navigate({ to: "/settings/billing" })}
                        >
                          <AwardIcon className="mr-2 h-4 w-4 text-secondary-foreground" strokeWidth={2} />
                          <span>Upgrade Plan</span>
                        </DropdownMenuItem>
                      ) : null}
                      <DropdownMenuSeparator />
                      <DropdownMenuItem onClick={onLogout} className='text-xs'>
                        <LogoutIcon className="mr-2 h-4 w-4" strokeWidth={2} />
                        <span>Logout</span>
                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>

                  <div className="ml-auto shrink-0 pt-1">
                    <ModeToggle aria-label="Toggle theme" />
                  </div>
                </div>
              </SidebarMenuItem>
            </SidebarMenu>
            <div className="px-2 w-full text-center text-[11px] text-muted-foreground">
              v{__APP_VERSION__}
            </div>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
    </Sidebar>
  )
}
