import {
  ArrowLeftIcon,
  ArrowRightIcon,
  ChevronDownIcon,
  ChevronUpIcon,
  Loader2Icon,
  SearchIcon,
} from "lucide-react";
import { useLayoutEffect, useRef, type KeyboardEvent, type RefObject } from "react";
import { MarkdownText } from "../markdown";
import { Button } from "../../../ui/button";
import { SearchMarkdown } from "./search-markdown-highlight";
import { SearchText } from "./search-text";
import { cn } from "../../lib/utils";

/** Hidden/unmounted dialog panes must not overwrite the last visible position. */
function useRetainedScroll(
  element: RefObject<HTMLDivElement | null>,
  position: RefObject<number> | undefined,
  ready: boolean,
  revision: unknown,
  identity: string,
) {
  const restoration = useRef<{
    node: HTMLDivElement;
    position: RefObject<number>;
    identity: string;
    savedPosition: number;
    restored: boolean;
  } | null>(null);
  useLayoutEffect(() => {
    const node = element.current;
    if (!ready || !node || !position) {
      restoration.current = null;
      return;
    }
    // New batches may render between the browser's scroll and its asynchronous
    // event. Do not replay a stale saved position over an already-live pane.
    // A new query, remount, or explicit caller reset starts a fresh restoration.
    if (
      restoration.current?.node !== node ||
      restoration.current.position !== position ||
      restoration.current.identity !== identity ||
      restoration.current.savedPosition !== position.current
    )
      restoration.current = {
        node,
        position,
        identity,
        savedPosition: position.current,
        restored: false,
      };
    const current = restoration.current;
    if (current.restored) return;
    const desired = position.current;
    let frame = 0;
    const restore = () => {
      if (current.restored || node.clientHeight === 0) return;
      // Revalidation/hidden mobile panes may not have enough layout yet.
      if (node.scrollHeight - node.clientHeight < desired) return;
      node.scrollTop = desired;
      current.restored = true;
    };
    restore();
    frame = requestAnimationFrame(restore);
    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(restore);
    observer?.observe(node);
    return () => {
      cancelAnimationFrame(frame);
      observer?.disconnect();
    };
  }, [element, position, ready, revision, identity]);
  return (node: HTMLDivElement) => {
    if (ready && restoration.current?.restored && node.clientHeight > 0 && position) {
      position.current = node.scrollTop;
      restoration.current.savedPosition = node.scrollTop;
    }
  };
}

export type SearchResultSummary = {
  sessionId: string;
  title: string;
  subtitle: string;
  snippet: string;
  matchingMessages: number;
  titleMatch: boolean;
};

export function SearchResultsView(props: {
  query: string;
  results: SearchResultSummary[];
  selectedId: string | null;
  onSelect: (id: string) => void;
  loading: boolean;
  error: string | null;
  onRetry: () => void;
  hasMore: boolean;
  onMore: () => void;
  scrollPosition?: RefObject<number> | undefined;
  active?: boolean | undefined;
}) {
  const list = useRef<HTMLDivElement>(null);
  const saveScroll = useRetainedScroll(
    list,
    props.scrollPosition,
    // Title results are interactive while the independent message scan runs.
    // Loading only prevents persistence when it has replaced the actual rows.
    props.active !== false && !!props.query.trim() && props.results.length > 0,
    props.results,
    props.query,
  );
  function onKeyDown(event: KeyboardEvent) {
    if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
    if (!props.results.length) return;
    event.preventDefault();
    const current = props.results.findIndex((result) => result.sessionId === props.selectedId);
    const next = Math.max(
      0,
      Math.min(props.results.length - 1, current + (event.key === "ArrowDown" ? 1 : -1)),
    );
    props.onSelect(props.results[next]!.sessionId);
    list.current?.querySelectorAll<HTMLButtonElement>("[data-search-result]")[next]?.focus();
  }
  return (
    <div
      ref={list}
      className="min-h-0 overflow-y-auto overscroll-contain"
      aria-label="Matching sessions"
      onKeyDown={onKeyDown}
      onScroll={(event) => {
        saveScroll(event.currentTarget);
      }}
    >
      {props.query.trim() && props.error ? (
        <div className="flex items-center gap-2 px-4 py-3 text-sm" role="alert">
          <span>{props.error}</span>
          <Button variant="outline" size="sm" onClick={props.onRetry}>
            Retry search
          </Button>
        </div>
      ) : null}
      {!props.query.trim() ? (
        <SearchMessage>Search session titles and messages across this workspace.</SearchMessage>
      ) : props.loading && props.results.length === 0 ? (
        <SearchMessage>
          <Loader2Icon className="size-4 animate-spin" aria-hidden="true" />
          <span role="status">Searching conversations…</span>
        </SearchMessage>
      ) : props.results.length === 0 && props.error ? null : props.results.length === 0 ? (
        <SearchMessage>
          <SearchIcon className="size-5" aria-hidden="true" />
          <span role="status">No matching sessions. Try a shorter phrase or different words.</span>
        </SearchMessage>
      ) : (
        <>
          <div className="sr-only" role="status">
            {props.results.length} matching sessions{props.hasMore ? ", more available" : ""}
          </div>
          {props.results.map((result) => (
            <button
              key={result.sessionId}
              type="button"
              data-search-result=""
              aria-pressed={props.selectedId === result.sessionId}
              onClick={() => props.onSelect(result.sessionId)}
              className={cn(
                "block w-full border-b border-border/60 px-4 py-4 text-left outline-hidden hover:bg-surface-2 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
                props.selectedId === result.sessionId && "bg-surface-2",
              )}
            >
              <div className="truncate text-sm font-medium text-fg">
                <SearchText text={result.title} query={props.query} />
              </div>
              {result.subtitle && result.subtitle !== "Message match" ? (
                <div className="mt-1 truncate text-xs text-fg-subtle">{result.subtitle}</div>
              ) : null}
              {result.snippet && result.snippet.trim() !== result.title.trim() ? (
                <p className="mt-2 line-clamp-3 break-words text-sm leading-relaxed text-fg-muted">
                  <SearchText text={result.snippet} query={props.query} />
                </p>
              ) : null}
              <div className="mt-2 text-xs text-fg-subtle">
                {result.matchingMessages > 0 ? "Message match" : "Title or opening message match"}
              </div>
            </button>
          ))}
          {props.hasMore ? (
            <div className="p-3">
              <Button
                variant="ghost"
                className="w-full"
                disabled={props.loading}
                onClick={props.onMore}
              >
                {props.loading ? "Loading…" : "More results"}
              </Button>
            </div>
          ) : null}
        </>
      )}
    </div>
  );
}

export type SearchPreviewMessage = {
  key: string;
  role: "user" | "assistant";
  text: string;
  selected: boolean;
  formatted?: boolean | undefined;
  snippet?: string | undefined;
  offset?: number | undefined;
};

export function SearchPreviewView(props: {
  title: string;
  query: string;
  messages: SearchPreviewMessage[];
  loading: boolean;
  error: string | null;
  onRetry: () => void;
  onOpen: () => void;
  onBack: () => void;
  onPrevious: () => void;
  onNext: () => void;
  previousDisabled: boolean;
  nextDisabled: boolean;
  counter: string;
  titleOnly: boolean;
  scrollPosition?: RefObject<number> | undefined;
  active?: boolean | undefined;
}) {
  const body = useRef<HTMLDivElement>(null);
  const saveScroll = useRetainedScroll(
    body,
    props.scrollPosition,
    props.active !== false && props.messages.length > 0,
    props.messages,
    props.query,
  );
  return (
    <section aria-label="Conversation preview" className="flex min-h-0 min-w-0 flex-1 flex-col">
      <header className="flex shrink-0 items-center gap-2 border-b border-border px-4 py-3">
        <Button
          variant="ghost"
          size="icon-sm"
          className="md:hidden"
          onClick={props.onBack}
          aria-label="Back to search results"
        >
          <ArrowLeftIcon className="size-4" />
        </Button>
        <h3 className="min-w-0 flex-1 truncate text-sm font-medium">{props.title}</h3>
        <Button
          size="sm"
          onClick={props.onOpen}
          disabled={!props.titleOnly && props.messages.length === 0}
        >
          {props.titleOnly ? "Open session" : "Open here"}
          <ArrowRightIcon className="size-3.5" />
        </Button>
      </header>
      <div
        ref={body}
        data-search-preview-scroll=""
        onScroll={(event) => {
          saveScroll(event.currentTarget);
        }}
        className="min-h-0 min-w-0 flex-1 overflow-y-auto overscroll-contain px-5 py-4"
      >
        {props.error ? (
          <div className="flex items-center gap-2 text-sm" role="alert">
            <span>{props.error}</span>
            <Button variant="outline" size="sm" onClick={props.onRetry}>
              Retry preview
            </Button>
          </div>
        ) : null}
        {props.loading && props.messages.length === 0 ? (
          <SearchMessage>
            <span role="status">Loading context…</span>
          </SearchMessage>
        ) : props.titleOnly && !props.error ? (
          <SearchMessage>This session title matches. No matching message was found.</SearchMessage>
        ) : (
          props.messages.map((message) => (
            <article
              key={message.key}
              className={cn(
                "mb-5 min-w-0 border-l-2 pl-3",
                message.selected ? "border-brand" : "border-transparent",
              )}
            >
              <p className="mb-1 text-xs font-medium text-fg-subtle">
                {message.role === "user" ? "User" : "Assistant"}
                {message.selected ? " · Matching passage" : ""}
              </p>
              {message.formatted ? (
                <div className="min-w-0 text-sm leading-6 text-fg">
                  {message.selected ? (
                    <SearchMarkdown
                      text={message.text}
                      query={props.query}
                      snippet={message.snippet ?? message.text}
                      offset={message.offset}
                    />
                  ) : (
                    <MarkdownText text={message.text} compact softLineBreaks suppressImages />
                  )}
                </div>
              ) : (
                <p className="whitespace-pre-wrap break-words text-sm leading-6 text-fg">
                  <SearchText text={message.text} query={props.query} />
                </p>
              )}
            </article>
          ))
        )}
      </div>
      {!props.titleOnly ? (
        <footer className="flex shrink-0 items-center gap-2 border-t border-border px-4 py-2">
          <span className="flex-1 text-xs text-fg-muted" role="status">
            {props.counter}
          </span>
          <Button
            variant="ghost"
            size="icon-sm"
            onClick={props.onPrevious}
            disabled={props.previousDisabled || props.loading}
            aria-label="Previous match in preview"
          >
            <ChevronUpIcon className="size-4" />
          </Button>
          <Button
            variant="ghost"
            size="icon-sm"
            onClick={props.onNext}
            disabled={props.nextDisabled || props.loading}
            aria-label="Next match in preview"
          >
            <ChevronDownIcon className="size-4" />
          </Button>
        </footer>
      ) : null}
    </section>
  );
}

function SearchMessage({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex min-h-32 flex-col items-center justify-center gap-3 px-6 py-8 text-center text-sm leading-6 text-fg-muted">
      {children}
    </div>
  );
}