import {
  agentChatRuntimeErrorMessage,
  type AgentChatRuntime,
} from "@agents24/chat-react/runtime"
import type { Agents24ChatScaffoldComponents } from "../../app"
import type { ThreadMessage } from "@agents24/client"
import { AgentChatQueue, queuedMessageComposerFiles, useLiveCompletionRuns, type AgentChatComposerFile } from "@agents24/chat-react/ui"
import { CircleAlert, LoaderCircle, SquarePen, X } from "lucide-react"
import * as React from "react"
import type { Agents24ChatIdentity } from "../../identity"

import { ChatComposer } from "./chat-composer"
import { ChatMessage } from "./chat-message"
import { SubagentTasks } from "./subagent-tasks"
import { ThemeMenu } from "./theme-menu"
import { ThreadSidebar } from "./thread-sidebar"
import { TurnOutline } from "./turn-outline"
import { isScaffoldTimelineLoading } from "./timeline-loading"
import { Button } from "../ui/button"
import {
  LatestThreadScroller,
  latestThreadAnchorId,
} from "@agents24/chat-react"
import { SidebarInset, SidebarProvider, SidebarTrigger, useSidebar } from "../ui/sidebar"

const LOADING_INPUT_CONTRACT = {
  version: "agents24.runtime-inputs.v3" as const,
  modalities: {
    text: { enabled: false, required: false },
    files: { enabled: false, required: false, allowed_mime_types: [] },
    images: { enabled: false, required: false, allowed_mime_types: [] },
    audio: { enabled: false, required: false, allowed_mime_types: [], recording_enabled: false },
  },
  limits: { max_attachments_per_turn: 0, max_file_bytes: 0, max_total_bytes: 0 },
  retention: { mode: "thread_lifetime" as const },
}

function PersistentSidebarTrigger() {
  return (
    <div className="pointer-events-none fixed start-3 top-0 z-[60] flex h-12 items-center">
      <SidebarTrigger className="pointer-events-auto [&_svg]:size-[18px]" />
    </div>
  )
}

function CollapsedHeaderActions({ onNew }: { onNew: () => void }) {
  const { isMobile, openMobile, state } = useSidebar()
  const sidebarVisible = isMobile ? openMobile : state === "expanded"
  if (sidebarVisible) return null
  return (
    <>
      <div className="h-8 w-17 shrink-0" aria-hidden="true" />
      <div className="pointer-events-none fixed start-12 top-0 z-[60] flex h-12 items-center">
        <Button className="pointer-events-auto" variant="ghost" size="icon-sm" aria-label="New chat" onClick={onNew}>
          <SquarePen />
        </Button>
      </div>
    </>
  )
}

function OperationErrorNotice({ runtime }: { runtime: AgentChatRuntime }) {
  const error = runtime.operationError || runtime.backgroundError
  if (!error) return null
  return (
    <div className="pointer-events-none absolute inset-x-0 top-3 z-40 flex justify-center px-4">
      <div className="pointer-events-auto flex max-w-lg items-start gap-2 rounded-lg border border-destructive/20 bg-background px-3 py-2 text-sm shadow-md" role="alert">
        <CircleAlert className="mt-0.5 size-4 shrink-0 text-destructive" />
        <span className="min-w-0 flex-1 wrap-break-word">
          {agentChatRuntimeErrorMessage(error) || "The chat could not complete that action."}
        </span>
        <Button
          aria-label="Dismiss error"
          onClick={runtime.operationError ? runtime.clearOperationError : runtime.controller.clearBackgroundError}
          size="icon-xs"
          variant="ghost"
        >
          <X />
        </Button>
      </div>
    </div>
  )
}

export function ChatShell({
  components,
  identity,
  runtime,
  sidebar,
}: {
  components?: Agents24ChatScaffoldComponents
  identity: Agents24ChatIdentity
  runtime: AgentChatRuntime
  sidebar?: React.ReactNode
}) {
  const Composer = components?.Composer || ChatComposer
  const { controller } = runtime
  const isUploading = controller.runState === "uploading"
  const isRunning =
    controller.runState === "streaming"
    || controller.runState === "reconnecting"
    || controller.runState === "paused"
    || controller.runState === "cancelling"
  const isCancelling = controller.runState === "cancelling"
  const wasLiveRun = useLiveCompletionRuns(controller.activeRunId, isRunning)
  const activeTitle = controller.threads.find((thread) => thread.id === controller.activeThreadId)?.title
  const hasBlockingError = Boolean(runtime.fatalError && controller.messages.length === 0)
  const isEmptyState = controller.activeThreadId === null && controller.messages.length === 0 && !hasBlockingError
  const latestAnchorId = latestThreadAnchorId(controller.messages)
  const composerOverlayRef = React.useRef<HTMLDivElement>(null)
  const [composerOverlayHeight, setComposerOverlayHeight] = React.useState(192)
  const [restoredDraft, setRestoredDraft] = React.useState<{ revision: number; text: string; files: AgentChatComposerFile[] } | null>(null)
  const draftRevisionRef = React.useRef(0)
  const retractForEdit = React.useCallback(async (message: ThreadMessage) => {
    const draft = await controller.retractPendingMessage(message)
    setRestoredDraft({ revision: ++draftRevisionRef.current, text: draft.text,
      files: queuedMessageComposerFiles(draft),
    })
  }, [controller])

  React.useLayoutEffect(() => {
    const overlay = composerOverlayRef.current
    if (!overlay || isEmptyState) return

    const updateHeight = () => {
      setComposerOverlayHeight(Math.ceil(overlay.getBoundingClientRect().height))
    }

    updateHeight()
    const resizeObserver = new ResizeObserver(updateHeight)
    resizeObserver.observe(overlay)
    return () => resizeObserver.disconnect()
  }, [isEmptyState])

  return (
    <SidebarProvider
      className="h-svh min-h-0 overflow-hidden"
      data-agents24-chat=""
      data-agents24-chat-layout=""
    >
      <PersistentSidebarTrigger />
      {sidebar || <ThreadSidebar
        activeThreadId={controller.activeThreadId}
        hasMore={controller.hasMoreThreads}
        identity={identity}
        isLoading={controller.isLoadingThreads}
        isLoadingMore={controller.isLoadingMoreThreads}
        threads={controller.threads}
        onDelete={runtime.deleteThread}
        onLoadMore={controller.loadMoreThreads}
        onNew={runtime.newThread}
        onOpen={runtime.openThread}
      />}
      <SidebarInset className="h-svh min-h-0 overflow-hidden bg-background">
        <header
          className="flex h-12 shrink-0 items-center gap-2 border-b border-border/50 px-3 sm:px-4"
          data-agents24-chat-header=""
        >
          <CollapsedHeaderActions onNew={runtime.newThread} />
          <div className="min-w-0 flex-1">
            <h1 className="truncate text-sm font-medium">{String(activeTitle || "New chat")}</h1>
          </div>
          <ThemeMenu />
        </header>

        <section
          aria-label="Conversation"
          className="relative flex min-h-0 flex-1 flex-col overflow-hidden"
          data-agents24-chat-transcript=""
        >
          <OperationErrorNotice runtime={runtime} />
          <SubagentTasks threadId={controller.activeThreadId} />
          <LatestThreadScroller.Provider autoScroll defaultScrollPosition="last-anchor" scrollPreviousItemPeek={64}>
            {!isEmptyState && (
                <LatestThreadScroller.Root className="relative min-h-0 flex-1">
                  <LatestThreadScroller.Viewport preserveScrollOnPrepend>
                    <LatestThreadScroller.Content
                      className="mx-auto w-full max-w-3xl gap-3 px-4 pt-8 pb-0 sm:px-6 sm:pt-12"
                      style={{ paddingBottom: composerOverlayHeight + 72 }}
                    >
                      {controller.hasOlderTurns && (
                        <Button className="self-center" variant="ghost" size="sm" disabled={controller.isLoadingOlder} onClick={() => { void controller.loadOlder().catch(() => undefined) }}>
                          {controller.isLoadingOlder && <LoaderCircle className="animate-spin" />} Load earlier messages
                        </Button>
                      )}
                      {runtime.isBootstrapping && (
                        <div aria-label="Loading conversation" className="flex flex-1 items-center justify-center py-24 text-muted-foreground" role="status">
                          <LoaderCircle className="size-4 animate-spin" />
                        </div>
                      )}
                      {hasBlockingError && (
                        <div className="flex flex-1 flex-col items-center justify-center gap-3 py-24 text-center">
                          <CircleAlert className="size-5 text-destructive" />
                          <div><h2 className="font-medium">Couldn’t connect</h2><p className="mt-1 max-w-md text-sm text-muted-foreground">{runtime.errorMessage}</p></div>
                          <Button variant="outline" onClick={() => void runtime.retryBootstrap()}>Try again</Button>
                        </div>
                      )}
                      {controller.messages.map((message) => (
                        <LatestThreadScroller.Item
                          key={message.id}
                          messageId={message.id}
                          scrollAnchor={isRunning && message.id === latestAnchorId}
                          className="overflow-visible [content-visibility:visible]"
                        >
                          <ChatMessage
                            animateCompletion={wasLiveRun(message.runId)}
                            allowFeedback={runtime.allowFeedback}
                            getHitlActionState={runtime.getHitlActionState}
                            isLoading={isScaffoldTimelineLoading({
                              activeRunId: controller.activeRunId,
                              message,
                              runState: controller.runState,
                              streamingMessageId: controller.streamingMessageId,
                            })}
                            message={message}
                            onHitlAction={runtime.onHitlAction}
                            onRegenerate={() => controller.regenerate(message)}
                            onSetFeedback={(input) => controller.setFeedback(message, input)}
                            resolveAttachmentContent={runtime.resolveAttachmentContent}
                            Timeline={components?.Timeline}
                          />
                        </LatestThreadScroller.Item>
                      ))}
                    </LatestThreadScroller.Content>
                  </LatestThreadScroller.Viewport>
                  <TurnOutline messages={controller.messages} />
                </LatestThreadScroller.Root>
            )}

                <div
                  ref={composerOverlayRef}
                  className={isEmptyState
                    ? "pointer-events-none absolute inset-0 z-30 flex flex-col justify-center overflow-visible pb-20"
                    : "pointer-events-none absolute inset-x-0 bottom-0 z-30 overflow-visible pt-10"}
                  style={isEmptyState ? undefined : {
                    background: "linear-gradient(to bottom, transparent 0%, color-mix(in oklch, var(--background) 85%, transparent) 45%, var(--background) 65%, var(--background) 100%)",
                  }}
                >
                  {isEmptyState ? <div className="mx-auto mb-8 w-full max-w-3xl px-4 text-center sm:px-6">
                    <h2 className="text-3xl font-semibold tracking-tight sm:text-4xl">Ready when you are.</h2>
                  </div> : <div className="pointer-events-auto absolute inset-x-0 top-0 flex -translate-y-full justify-center pb-3">
                    <LatestThreadScroller.Button className="!relative !inset-auto !translate-x-0 rtl:!translate-x-0" />
                  </div>}
                  <div className="pointer-events-auto mx-auto w-full max-w-3xl px-4 sm:px-6">
                    <Composer
                      queue={<AgentChatQueue pending={controller.pendingMessages} queue={controller.messageQueue}
                      onRemove={controller.removePendingMessage}
                      onEdit={retractForEdit} onResume={controller.resumeQueue} />}
                      restoredDraft={restoredDraft}
                      inputContract={runtime.inputContract || LOADING_INPUT_CONTRACT}
                      contextWindow={runtime.contextWindow}
                      disabled={runtime.isBootstrapping || runtime.isChangingAgent || isUploading || hasBlockingError}
                      scopeKey={controller.activeThreadId}
                      focusKey={controller.activeThreadId}
                      forceExpanded={isEmptyState}
                      isCancelling={isCancelling}
                      isRunning={isRunning}
                      agentId={runtime.agentId}
                      agents={runtime.agents}
                      onAgentChange={(agentId) => { void runtime.changeAgent(agentId) }}
                      onStop={() => { void controller.cancelRun().catch(() => undefined) }}
                      modelId={runtime.modelId}
                      models={runtime.models}
                      onModelChange={runtime.changeModel}
                      onSubmit={(text, files) => runtime.submit({
                        text,
                        files: files.filter((file) => file.source).map((file) => ({
                          data: file.source!,
                          mediaType: file.mediaType,
                          name: file.filename,
                        })),
                        attachmentIds: files.flatMap((file) => file.persistedAttachmentId ? [file.persistedAttachmentId] : []),
                        attachments: files,
                      })}
                      utilityRow={isEmptyState ? "inline" : "below"}
                    />
                  </div>
                </div>
          </LatestThreadScroller.Provider>
        </section>
      </SidebarInset>
    </SidebarProvider>
  )
}