import { getThreadActivity, type StoredChatThread } from "@agents24/react"
import { LoaderCircle, Pause, SquarePen, Trash2 } from "lucide-react"
import type { Agents24ChatIdentity } from "../../identity"
import { IdentityControl } from "./identity-control"

import { Button } from "../ui/button"
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuAction,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarRail,
  useSidebar,
} from "../ui/sidebar"

type Props = {
  activeThreadId: string | null
  hasMore: boolean
  isLoading: boolean
  isLoadingMore: boolean
  onDelete: (threadId: string) => Promise<void>
  onLoadMore: () => Promise<void>
  onNew: () => void
  onOpen: (threadId: string) => Promise<void>
  threads: StoredChatThread[]
  identity: Agents24ChatIdentity
}

function ThreadStatus({ thread }: { thread: StoredChatThread }) {
  const activity = getThreadActivity(thread)
  const waiting = ["paused", "waiting", "interrupted"].includes(activity.status || "")
  if (!activity.isSpinning && !waiting) return null
  const label = waiting ? "Waiting" : activity.status === "cancelling"
    ? "Cancelling"
    : activity.status === "queued"
      ? "Queued"
      : "Running"
  return (
    <span
      className="pointer-events-none absolute end-1 top-1/2 flex size-5 -translate-y-1/2 items-center justify-center text-muted-foreground transition-opacity group-hover/menu-item:opacity-0"
      role="status"
      aria-label={label}
      title={label}
    >
      {waiting ? <Pause className="size-3.5 text-amber-600" /> : <LoaderCircle className="size-3.5 animate-spin" />}
    </span>
  )
}

export function ThreadSidebar({ activeThreadId, hasMore, identity, isLoading, isLoadingMore, onDelete, onLoadMore, onNew, onOpen, threads }: Props) {
  const { setOpenMobile } = useSidebar()
  return (
    <Sidebar
      aria-label="Conversations"
      collapsible="offcanvas"
      data-agents24-chat-sidebar=""
      role="navigation"
    >
      <SidebarHeader className="gap-1 p-2">
        <div className="h-8 shrink-0" aria-hidden="true" />
        <Button className="w-full justify-start" variant="ghost" onClick={() => { onNew(); setOpenMobile(false) }}><SquarePen /> New chat</Button>
      </SidebarHeader>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupContent>
            <SidebarMenu>
              {threads.map((thread) => (
                <SidebarMenuItem key={thread.id}>
                  <SidebarMenuButton
                    className="pr-8 pl-3"
                    isActive={thread.id === activeThreadId}
                    title={String(thread.title || "New conversation")}
                    onClick={() => { void onOpen(thread.id).catch(() => undefined); setOpenMobile(false) }}
                  >
                    <span className="min-w-0 truncate">{String(thread.title || "New conversation")}</span>
                  </SidebarMenuButton>
                  <ThreadStatus thread={thread} />
                  <SidebarMenuAction
                    showOnHover
                    className="group-focus-within/menu-item:opacity-0 group-hover/menu-item:opacity-100"
                    aria-label={`Delete ${String(thread.title || "conversation")}`}
                    onClick={(event) => { event.stopPropagation(); if (window.confirm("Delete this conversation?")) void onDelete(thread.id).catch(() => undefined) }}
                  >
                    <Trash2 />
                  </SidebarMenuAction>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
            {!isLoading && threads.length === 0 && <p className="px-2 py-8 text-center text-xs text-muted-foreground">No conversations</p>}
            {hasMore && (
              <Button
                className="mt-2 w-full"
                disabled={isLoadingMore}
                size="sm"
                variant="ghost"
                onClick={() => void onLoadMore().catch(() => undefined)}
              >
                {isLoadingMore && <LoaderCircle className="animate-spin" />}
                Load more
              </Button>
            )}
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
      <SidebarFooter className="w-full min-w-0 p-2"><IdentityControl identity={identity} /></SidebarFooter>
      <SidebarRail />
    </Sidebar>
  )
}