import * as React from "react"
import { useAgentClient, partsFromResponseBlocks } from "@agents24/react"
import { AgentResponseTimeline } from "@agents24/chat-react/ui"
import { useDelegationTasks, type DelegationHistory, type DelegationTask } from "@agents24/chat-react/runtime"
import { Button } from "../ui/button"

export function SubagentTasks({ threadId }: { threadId: string | null }) {
  const client = useAgentClient()
  const source = React.useMemo(() => ({ events: (input: { threadId: string; after: number; signal: AbortSignal }) =>
    client.threads.delegations.events(input) }), [client])
  const { tasks, error, refresh } = useDelegationTasks({ threadId, source })
  const [selection, setSelection] = React.useState<{ threadId: string | null; handle: string | null }>({ threadId: null, handle: null })
  const selected = selection.threadId === threadId ? selection.handle : null
  if (!threadId || (!tasks.length && !error)) return null
  return <section aria-label="Subagent tasks" className="mx-auto w-full max-w-3xl px-4 py-2 text-sm">
    <details>
      <summary className="cursor-pointer font-medium">Tasks ({tasks.length})</summary>
      {error ? <p role="alert">Task updates are unavailable. Retrying…</p> : null}
      <ul className="max-h-56 overflow-y-auto">
        {tasks.map(task => <li key={task.handle} style={{ paddingInlineStart: Math.max(0, task.depth - 1) * 12 }}>
          <button type="button" className="flex w-full items-center justify-between gap-3 rounded-md px-2 py-2 text-start hover:bg-muted"
            onClick={() => setSelection({ threadId, handle: selected === task.handle ? null : task.handle })} aria-expanded={selected === task.handle}>
            <span className="min-w-0 truncate">{task.name}{task.background ? " · Background" : ""}</span>
            <span className="shrink-0 text-xs text-muted-foreground">{task.status.replaceAll("_", " ")}</span>
          </button>
        </li>)}
      </ul>
      {tasks.filter(task => task.handle === selected).map(task =>
        <TaskConversation key={`${threadId}:${task.handle}`} threadId={threadId} task={task} onChanged={refresh} />)}
    </details>
  </section>
}

function TaskConversation({ threadId, task, onChanged }: {
  threadId: string; task: DelegationTask; onChanged: () => void
}) {
  const client = useAgentClient()
  const [history, setHistory] = React.useState<DelegationHistory | null>(null)
  const [earlier, setEarlier] = React.useState<DelegationHistory["turns"]>([])
  const historyInitialized = React.useRef(false)
  const [before, setBefore] = React.useState<number | null>(null)
  const [error, setError] = React.useState<string | null>(null)
  const [busy, setBusy] = React.useState(false)
  const operation = React.useRef<{ action: "interrupt" | "cancel"; id: string } | null>(null)
  React.useEffect(() => {
    const controller = new AbortController()
    let timer: ReturnType<typeof setTimeout>
    const refresh = async () => {
      try {
        const page = await client.threads.delegations.history({ threadId, handle: task.handle, signal: controller.signal })
        if (controller.signal.aborted) return
        setHistory(page)
        if (!historyInitialized.current) {
          historyInitialized.current = true
          setBefore(page.paging.next_before_turn_index)
        }
      } catch {
        if (!controller.signal.aborted) setError("Task history could not be loaded.")
      } finally {
        if (!controller.signal.aborted) timer = setTimeout(refresh, 2000)
      }
    }
    void refresh()
    return () => { controller.abort(); clearTimeout(timer) }
  }, [client, threadId, task.handle])
  const loadEarlier = async () => {
    if (before === null) return
    setBusy(true)
    try {
      const page = await client.threads.delegations.history({ threadId, handle: task.handle, before })
      setEarlier(current => [...page.turns, ...current])
      setBefore(page.paging.next_before_turn_index)
    } catch { setError("Earlier task history could not be loaded.") }
    finally { setBusy(false) }
  }
  const act = async (action: "interrupt" | "cancel") => {
    setBusy(true); setError(null)
    if (operation.current?.action !== action) operation.current = { action, id: crypto.randomUUID() }
    try {
      await client.threads.delegations.act({ threadId, handle: task.handle,
        action: { action, operation_id: operation.current.id } })
      operation.current = null
      onChanged()
    } catch { setError("The task action could not be completed. Try again.") }
    finally { setBusy(false) }
  }
  const turns = Array.from(new Map([...earlier, ...(history?.turns || [])].map(turn => [turn.id, turn])).values())
    .sort((a, b) => a.turn_index - b.turn_index)
  return <div className="space-y-3 rounded-md bg-muted/30 p-3">
    <h3 className="font-medium">{task.name}</h3>
    {error ? <p role="alert">{error}</p> : null}
    <div className="flex flex-wrap gap-2">
      {task.capabilities.interrupt ? <Button variant="secondary" size="sm" disabled={busy} onClick={() => void act("interrupt")}>Interrupt</Button> : null}
      {task.capabilities.cancel ? <Button variant="secondary" size="sm" disabled={busy} onClick={() => void act("cancel")}>Cancel task</Button> : null}
      {before !== null ? <Button variant="ghost" size="sm" disabled={busy} onClick={() => void loadEarlier()}>Earlier exchanges</Button> : null}
    </div>
    <div className="max-h-[55dvh] space-y-4 overflow-y-auto break-words">
      {turns.map(turn => <article key={turn.id} className="space-y-2">
        {turn.assignment_instruction ? <p className="whitespace-pre-wrap text-muted-foreground">{turn.assignment_instruction}</p> : null}
        {turn.user_input_text ? <p className="whitespace-pre-wrap">{turn.user_input_text}</p> : null}
        {turn.exchanges?.map(exchange => <div key={exchange.id} className="whitespace-pre-wrap break-words text-sm">
          <p className="text-xs font-medium">{exchange.sender === "parent" ? "Parent Agent" : "Subagent update"}</p>
          {exchange.text}
        </div>)}
        <AgentResponseTimeline message={{ id: turn.id, role: "assistant", createdAt: turn.created_at, content: turn.assistant_output_text || "", parts: partsFromResponseBlocks(turn.response_blocks) }} />
      </article>)}
    </div>
  </div>
}