import { AssistantMessage, ToolPart } from "@opencode-ai/sdk/v2/client"
import { useData } from "../context"
import { useDiffComponent } from "../context/diff"
import { getDirectory, getFilename } from "@opencode-ai/util/path"
import { checksum } from "@opencode-ai/util/encode"
import { batch, createEffect, createMemo, For, Match, onCleanup, ParentProps, Show, Switch } from "solid-js"
import { createResizeObserver } from "@solid-primitives/resize-observer"
import { DiffChanges } from "./diff-changes"
import { Typewriter } from "./typewriter"
import { Message, Part } from "./message-part"
import { Markdown } from "./markdown"
import { Accordion } from "./accordion"
import { StickyAccordionHeader } from "./sticky-accordion-header"
import { FileIcon } from "./file-icon"
import { Icon } from "./icon"
import { Card } from "./card"
import { Dynamic } from "solid-js/web"
import { Button } from "./button"
import { Spinner } from "./spinner"
import { createStore } from "solid-js/store"
import { DateTime, DurationUnit, Interval } from "luxon"

export function SessionTurn(
  props: ParentProps<{
    sessionID: string
    messageID: string
    stepsExpanded?: boolean
    onStepsExpandedToggle?: () => void
    onUserInteracted?: () => void
    classes?: {
      root?: string
      content?: string
      container?: string
    }
  }>,
) {
  const data = useData()
  const diffComponent = useDiffComponent()
  const messages = createMemo(() => data.store.message[props.sessionID] ?? [])
  const userMessages = createMemo(() =>
    messages()
      .filter((m) => m.role === "user")
      .sort((a, b) => a.id.localeCompare(b.id)),
  )
  const lastUserMessage = createMemo(() => userMessages().at(-1)!)
  const message = createMemo(() => userMessages().find((m) => m.id === props.messageID)!)
  const status = createMemo(
    () =>
      data.store.session_status[props.sessionID] ?? {
        type: "idle",
      },
  )
  const working = createMemo(() => status().type !== "idle" && message().id === lastUserMessage().id)
  const retry = createMemo(() => {
    const s = status()
    if (s.type !== "retry") return
    return s
  })

  const assistantMessages = createMemo(() => {
    return messages().filter((m) => m.role === "assistant" && m.parentID == message().id) as AssistantMessage[]
  })
  const assistantParts = createMemo(() => assistantMessages().flatMap((m) => data.store.part[m.id]) ?? [])
  const lastAssistantMessage = createMemo(() => assistantMessages().at(-1))
  const error = createMemo(() => assistantMessages().find((m) => m.error)?.error)
  const parts = createMemo(() => data.store.part[message().id] ?? [])
  const lastTextPart = createMemo(() =>
    assistantParts()
      .filter((p) => p?.type === "text")
      .at(-1),
  )
  const summary = createMemo(() => message().summary?.body)
  const response = createMemo(() => lastTextPart()?.text)
  const hasSteps = createMemo(() => assistantParts().some((p) => p?.type === "tool"))

  const currentTask = createMemo(
    () =>
      assistantParts().findLast(
        (p) =>
          p &&
          p.type === "tool" &&
          p.tool === "task" &&
          p.state &&
          "metadata" in p.state &&
          p.state.metadata &&
          p.state.metadata.sessionId &&
          p.state.status === "running",
      ) as ToolPart,
  )
  const resolvedParts = createMemo(() => {
    let resolved = assistantParts()
    const task = currentTask()
    if (task && task.state && "metadata" in task.state && task.state.metadata?.sessionId) {
      const messages = data.store.message[task.state.metadata.sessionId as string]?.filter(
        (m) => m.role === "assistant",
      )
      resolved = messages?.flatMap((m) => data.store.part[m.id]) ?? assistantParts()
    }
    return resolved
  })
  const lastPart = createMemo(() => resolvedParts().slice(-1)?.at(0))
  const rawStatus = createMemo(() => {
    const last = lastPart()
    if (!last) return undefined

    if (last.type === "tool") {
      switch (last.tool) {
        case "task":
          return "Delegating work"
        case "todowrite":
        case "todoread":
          return "Planning next steps"
        case "read":
          return "Gathering context"
        case "list":
        case "grep":
        case "glob":
          return "Searching the codebase"
        case "webfetch":
          return "Searching the web"
        case "edit":
        case "write":
          return "Making edits"
        case "bash":
          return "Running commands"
        default:
          break
      }
    } else if (last.type === "reasoning") {
      const text = last.text ?? ""
      const match = text.trimStart().match(/^\*\*(.+?)\*\*/)
      if (match) return `Thinking · ${match[1].trim()}`
      return "Thinking"
    } else if (last.type === "text") {
      return "Gathering thoughts"
    }
    return undefined
  })
  const hasDiffs = createMemo(() => message().summary?.diffs?.length)
  const isShellMode = createMemo(() => {
    if (parts().some((p) => p?.type !== "text" || !p?.synthetic)) return false
    if (assistantParts().length !== 1) return false
    const assistantPart = assistantParts()[0]
    if (assistantPart?.type !== "tool") return false
    if (assistantPart?.tool !== "bash") return false
    return true
  })

  function duration() {
    const completed = lastAssistantMessage()?.time.completed
    const from = DateTime.fromMillis(message().time.created)
    const to = completed ? DateTime.fromMillis(completed) : DateTime.now()
    const interval = Interval.fromDateTimes(from, to)
    const unit: DurationUnit[] = interval.length("seconds") > 60 ? ["minutes", "seconds"] : ["seconds"]

    return interval.toDuration(unit).normalize().toHuman({
      notation: "compact",
      unitDisplay: "narrow",
      compactDisplay: "short",
      showZeros: false,
    })
  }

  let scrollRef: HTMLDivElement | undefined
  const [store, setStore] = createStore({
    contentRef: undefined as HTMLDivElement | undefined,
    stickyTitleRef: undefined as HTMLDivElement | undefined,
    stickyTriggerRef: undefined as HTMLDivElement | undefined,
    lastScrollTop: 0,
    autoScrolled: false,
    userScrolled: false,
    stickyHeaderHeight: 0,
    retrySeconds: 0,
    status: rawStatus(),
    duration: duration(),
  })

  createEffect(() => {
    const r = retry()
    if (!r) {
      setStore("retrySeconds", 0)
      return
    }
    const updateSeconds = () => {
      const next = r.next
      if (next) setStore("retrySeconds", Math.max(0, Math.round((next - Date.now()) / 1000)))
    }
    updateSeconds()
    const timer = setInterval(updateSeconds, 1000)
    onCleanup(() => clearInterval(timer))
  })

  function handleScroll() {
    if (!scrollRef || store.autoScrolled) return
    const scrollTop = scrollRef.scrollTop
    console.log("scrollTop", scrollTop)
    console.log("clientHeight", store.contentRef?.clientHeight)
    const reset = scrollTop <= 0 && store.lastScrollTop > 0 && working() && !store.userScrolled
    if (reset) {
      setStore("lastScrollTop", scrollTop)
      requestAnimationFrame(scrollToBottom)
      return
    }
    const scrolledUp = scrollTop < store.lastScrollTop - 50
    if (scrolledUp && working()) {
      console.log("scrolled up")
      setStore("userScrolled", true)
      props.onUserInteracted?.()
    }
    setStore("lastScrollTop", scrollTop)
  }

  function handleInteraction() {
    if (working()) {
      setStore("userScrolled", true)
      props.onUserInteracted?.()
    }
  }

  function scrollToBottom() {
    if (!scrollRef || store.userScrolled || !working()) return
    setStore("autoScrolled", true)
    requestAnimationFrame(() => {
      scrollRef?.scrollTo({ top: scrollRef.scrollHeight, behavior: "smooth" })
      requestAnimationFrame(() => {
        batch(() => {
          setStore("lastScrollTop", scrollRef?.scrollTop ?? 0)
          setStore("autoScrolled", false)
        })
      })
    })
  }

  createResizeObserver(() => store.contentRef, scrollToBottom)

  createEffect(() => {
    if (!working()) setStore("userScrolled", false)
  })

  createResizeObserver(
    () => store.stickyTitleRef,
    ({ height }) => {
      const triggerHeight = store.stickyTriggerRef?.offsetHeight ?? 0
      setStore("stickyHeaderHeight", height + triggerHeight + 8)
    },
  )

  createResizeObserver(
    () => store.stickyTriggerRef,
    ({ height }) => {
      const titleHeight = store.stickyTitleRef?.offsetHeight ?? 0
      setStore("stickyHeaderHeight", titleHeight + height + 8)
    },
  )

  createEffect(() => {
    const timer = setInterval(() => {
      setStore("duration", duration())
    }, 1000)
    onCleanup(() => clearInterval(timer))
  })

  let lastStatusChange = Date.now()
  let statusTimeout: number | undefined
  createEffect(() => {
    const newStatus = rawStatus()
    if (newStatus === store.status || !newStatus) return

    const timeSinceLastChange = Date.now() - lastStatusChange
    if (timeSinceLastChange >= 2500) {
      setStore("status", newStatus)
      lastStatusChange = Date.now()
      if (statusTimeout) {
        clearTimeout(statusTimeout)
        statusTimeout = undefined
      }
    } else {
      if (statusTimeout) clearTimeout(statusTimeout)
      statusTimeout = setTimeout(() => {
        setStore("status", rawStatus())
        lastStatusChange = Date.now()
        statusTimeout = undefined
      }, 2500 - timeSinceLastChange) as unknown as number
    }
  })

  return (
    <div data-component="session-turn" class={props.classes?.root}>
      <div ref={scrollRef} onScroll={handleScroll} data-slot="session-turn-content" class={props.classes?.content}>
        <div onClick={handleInteraction}>
          <div
            ref={(el) => setStore("contentRef", el)}
            data-message={message().id}
            data-slot="session-turn-message-container"
            class={props.classes?.container}
            style={{ "--sticky-header-height": `${store.stickyHeaderHeight}px` }}
          >
            <Switch>
              <Match when={isShellMode()}>
                <Part part={assistantParts()[0]} message={message()} defaultOpen />
              </Match>
              <Match when={true}>
                {/* Title (sticky) */}
                <div ref={(el) => setStore("stickyTitleRef", el)} data-slot="session-turn-sticky-title">
                  <div data-slot="session-turn-message-header">
                    <div data-slot="session-turn-message-title">
                      <Switch>
                        <Match when={working()}>
                          <Typewriter as="h1" text={message().summary?.title} data-slot="session-turn-typewriter" />
                        </Match>
                        <Match when={true}>
                          <h1>{message().summary?.title}</h1>
                        </Match>
                      </Switch>
                    </div>
                  </div>
                </div>
                {/* User Message */}
                <div data-slot="session-turn-message-content">
                  <Message message={message()} parts={parts()} />
                </div>
                {/* Trigger (sticky) */}
                <Show when={working() || hasSteps()}>
                  <div ref={(el) => setStore("stickyTriggerRef", el)} data-slot="session-turn-response-trigger">
                    <Button
                      data-expandable={assistantMessages().length > 0}
                      data-slot="session-turn-collapsible-trigger-content"
                      variant="ghost"
                      size="small"
                      onClick={props.onStepsExpandedToggle ?? (() => {})}
                    >
                      <Show when={working()}>
                        <Spinner />
                      </Show>
                      <Switch>
                        <Match when={retry()}>
                          <span data-slot="session-turn-retry-message">
                            {(() => {
                              const r = retry()
                              if (!r) return ""
                              return r.message.length > 60 ? r.message.slice(0, 60) + "..." : r.message
                            })()}
                          </span>
                          <span data-slot="session-turn-retry-seconds">
                            · retrying {store.retrySeconds > 0 ? `in ${store.retrySeconds}s ` : ""}
                          </span>
                          <span data-slot="session-turn-retry-attempt">(#{retry()?.attempt})</span>
                        </Match>
                        <Match when={working()}>{store.status ?? "Considering next steps"}</Match>
                        <Match when={props.stepsExpanded}>Hide steps</Match>
                        <Match when={!props.stepsExpanded}>Show steps</Match>
                      </Switch>
                      <span>·</span>
                      <span>{store.duration}</span>
                      <Show when={assistantMessages().length > 0}>
                        <Icon name="chevron-grabber-vertical" size="small" />
                      </Show>
                    </Button>
                  </div>
                </Show>
                {/* Response */}
                <Show when={props.stepsExpanded && assistantMessages().length > 0}>
                  <div data-slot="session-turn-collapsible-content-inner">
                    <For each={assistantMessages()}>
                      {(assistantMessage) => {
                        const parts = createMemo(() => data.store.part[assistantMessage.id] ?? [])
                        const last = createMemo(() =>
                          parts()
                            .filter((p) => p?.type === "text")
                            .at(-1),
                        )
                        return (
                          <Switch>
                            <Match when={response() && lastTextPart()?.id === last()?.id}>
                              <Message message={assistantMessage} parts={parts().filter((p) => p?.id !== last()?.id)} />
                            </Match>
                            <Match when={true}>
                              <Message message={assistantMessage} parts={parts()} />
                            </Match>
                          </Switch>
                        )
                      }}
                    </For>
                    <Show when={error()}>
                      <Card variant="error" class="error-card">
                        {error()?.data?.message as string}
                      </Card>
                    </Show>
                  </div>
                </Show>
                {/* Summary */}
                <Show when={!working()}>
                  <div data-slot="session-turn-summary-section">
                    <div data-slot="session-turn-summary-header">
                      <Switch>
                        <Match when={summary()}>
                          {(summary) => (
                            <>
                              <h2 data-slot="session-turn-summary-title">Summary</h2>
                              <Markdown data-slot="session-turn-markdown" data-diffs={hasDiffs()} text={summary()} />
                            </>
                          )}
                        </Match>
                        <Match when={response()}>
                          {(response) => (
                            <>
                              <h2 data-slot="session-turn-summary-title">Response</h2>
                              <Markdown data-slot="session-turn-markdown" data-diffs={hasDiffs()} text={response()} />
                            </>
                          )}
                        </Match>
                      </Switch>
                    </div>
                    <Accordion data-slot="session-turn-accordion" multiple>
                      <For each={message().summary?.diffs ?? []}>
                        {(diff) => (
                          <Accordion.Item value={diff.file}>
                            <StickyAccordionHeader>
                              <Accordion.Trigger>
                                <div data-slot="session-turn-accordion-trigger-content">
                                  <div data-slot="session-turn-file-info">
                                    <FileIcon
                                      node={{ path: diff.file, type: "file" }}
                                      data-slot="session-turn-file-icon"
                                    />
                                    <div data-slot="session-turn-file-path">
                                      <Show when={diff.file.includes("/")}>
                                        <span data-slot="session-turn-directory">{getDirectory(diff.file)}&lrm;</span>
                                      </Show>
                                      <span data-slot="session-turn-filename">{getFilename(diff.file)}</span>
                                    </div>
                                  </div>
                                  <div data-slot="session-turn-accordion-actions">
                                    <DiffChanges changes={diff} />
                                    <Icon name="chevron-grabber-vertical" size="small" />
                                  </div>
                                </div>
                              </Accordion.Trigger>
                            </StickyAccordionHeader>
                            <Accordion.Content data-slot="session-turn-accordion-content">
                              <Dynamic
                                component={diffComponent}
                                before={{
                                  name: diff.file!,
                                  contents: diff.before!,
                                  cacheKey: checksum(diff.before!),
                                }}
                                after={{
                                  name: diff.file!,
                                  contents: diff.after!,
                                  cacheKey: checksum(diff.after!),
                                }}
                              />
                            </Accordion.Content>
                          </Accordion.Item>
                        )}
                      </For>
                    </Accordion>
                  </div>
                </Show>
                <Show when={error() && !props.stepsExpanded}>
                  <Card variant="error" class="error-card">
                    {error()?.data?.message as string}
                  </Card>
                </Show>
              </Match>
            </Switch>
          </div>
          {props.children}
        </div>
      </div>
    </div>
  )
}
