"use client";
import * as React from "react";
import { usePathname, useRouter } from "next/navigation";
import { Archive, Bot, FolderKanban, Link2, MessageSquare, Pin, Sparkles, User, WandSparkles } from "lucide-react";
import type { SearchConversationHit, SearchMessageHit, SearchModelHit, SearchPromptHit, SearchProjectHit, SearchPresetHit, SearchGroup, SearchResponse } from "@/lib/client/types";
import { useApp } from "@/components/app/store";
import { ProviderIcon } from "@/components/brand/provider-icon";
import { providerName } from "@/lib/client/providers";
import { cn, formatRelative } from "@/lib/utils";
import { Highlight } from "./highlight";

export const GROUP_LABELS: Record<SearchGroup, string> = {
  conversations: "Conversations",
  messages: "Messages",
  models: "Models",
  prompts: "Prompts",
  projects: "Projects",
  presets: "Presets",
};

export const GROUP_ORDER: SearchGroup[] = ["conversations", "messages", "projects", "models", "prompts", "presets"];

export function groupItems(data: SearchResponse, group: SearchGroup): unknown[] {
  return data[group] as unknown[];
}

/* ------------------------------------------------------------------------------------------------
 * Navigation — one place that knows where every hit goes.
 *   messages → /app/chat/<conversationId>#<messageId> (chat-view scrolls to the anchor)
 * ---------------------------------------------------------------------------------------------- */
export function useSearchNavigation(opts: { onNavigate?: (href: string | null) => void } = {}) {
  const router = useRouter();
  const pathname = usePathname();
  const { setSelectedModelKey } = useApp();
  const done = opts.onNavigate;

  const go = React.useCallback(
    (href: string) => {
      done?.(href);
      router.push(href);
    },
    [router, done],
  );

  return React.useMemo(
    () => ({
      openConversation: (c: SearchConversationHit) => go(`/app/chat/${c.id}`),
      openMessage: (m: SearchMessageHit) => {
        const href = `/app/chat/${m.conversationId}#${m.id}`;
        go(href);
        // Same conversation already open: the route does not remount, so scroll ourselves.
        if (pathname === `/app/chat/${m.conversationId}`) {
          requestAnimationFrame(() => document.getElementById(m.id)?.scrollIntoView({ block: "center", behavior: "smooth" }));
        }
      },
      openModel: (m: SearchModelHit) => {
        setSelectedModelKey(m.key);
        window.dispatchEvent(new CustomEvent("polyllm:switch-model", { detail: { modelKey: m.key } }));
        if (!/^\/app\/chat/.test(pathname)) go("/app/chat");
        else done?.(null);
      },
      // Library prompts insert into the composer (workstream D contract); legacy presets open their editor.
      openPrompt: (p: SearchPromptHit) => go(p.kind === "library" ? `/app/chat?promptId=${p.id}` : `/app/prompts?edit=${p.id}`),
      openProject: (p: SearchProjectHit) => go(`/app/projects/${p.id}`),
      openPreset: (p: SearchPresetHit) => go(`/app/chat?preset=${p.id}`),
    }),
    [go, pathname, setSelectedModelKey, done],
  );
}

/* ------------------------------------------------------------------------------------------------
 * Row contents (presentational — wrapped by <button> on phones or <Command.Item> in the palette)
 * ---------------------------------------------------------------------------------------------- */
const iconBox = "flex size-8 shrink-0 items-center justify-center rounded-lg bg-bg-muted text-fg-muted [&_svg]:size-4";

function modelShort(key: string | null): string | null {
  if (!key) return null;
  const [, ...rest] = key.split("/");
  return rest.join("/") || key;
}

export function ConversationHitContent({ hit, terms, dense }: { hit: SearchConversationHit; terms: string[]; dense?: boolean }) {
  return (
    <>
      <span className={iconBox}>
        <ProviderIcon provider={hit.provider} size={16} />
      </span>
      <span className="min-w-0 flex-1">
        <span className={cn("flex items-center gap-1.5", dense ? "text-[13.5px]" : "text-[15px]")}>
          <Highlight text={hit.title} terms={terms} className="truncate font-medium text-fg" />
          {hit.pinned ? <Pin className="size-3 shrink-0 text-fg-subtle" aria-label="Pinned" /> : null}
          {hit.archived ? <Archive className="size-3 shrink-0 text-fg-subtle" aria-label="Archived" /> : null}
          {hit.shared ? <Link2 className="size-3 shrink-0 text-fg-subtle" aria-label="Shared" /> : null}
        </span>
        <span className="mt-0.5 flex items-center gap-1.5 truncate text-[11.5px] tabular-nums text-fg-subtle">
          <span>{formatRelative(hit.lastMessageAt ?? hit.updatedAt)}</span>
          <span aria-hidden>·</span>
          <span>{hit.messageCount} msg</span>
          {hit.modelKey ? (
            <>
              <span aria-hidden>·</span>
              <span className="truncate">{modelShort(hit.modelKey)}</span>
            </>
          ) : null}
        </span>
      </span>
    </>
  );
}

export function MessageHitContent({ hit, terms, dense }: { hit: SearchMessageHit; terms: string[]; dense?: boolean }) {
  const isUser = hit.role === "user";
  return (
    <>
      <span className={cn(iconBox, "mt-0.5 self-start")}>{isUser ? <User /> : <Bot />}</span>
      <span className="min-w-0 flex-1">
        <span className="flex items-center gap-1.5 text-[11.5px] text-fg-subtle">
          <span className="truncate font-medium text-fg-muted">{hit.title}</span>
          <span aria-hidden>·</span>
          <span className="shrink-0">{isUser ? "You" : modelShort(hit.modelKey) ?? "Assistant"}</span>
          <span aria-hidden>·</span>
          <span className="shrink-0 tabular-nums">{formatRelative(hit.createdAt)}</span>
        </span>
        <Highlight text={hit.snippet} terms={terms} className={cn("mt-0.5 block text-fg", dense ? "line-clamp-2 text-[13px] leading-5" : "line-clamp-3 text-[14px] leading-5")} />
      </span>
    </>
  );
}

export function ModelHitContent({ hit, dense }: { hit: SearchModelHit; dense?: boolean }) {
  return (
    <>
      <span className={iconBox}>
        <ProviderIcon provider={hit.provider} size={16} />
      </span>
      <span className="min-w-0 flex-1">
        <span className={cn("block truncate font-medium text-fg", dense ? "text-[13.5px]" : "text-[15px]")}>{hit.displayName}</span>
        <span className="block truncate text-[11.5px] text-fg-subtle">
          {providerName(hit.provider)} · {hit.key.split("/").slice(1).join("/")}
          {hit.status === "deprecated" ? " · deprecated" : ""}
        </span>
      </span>
    </>
  );
}

export function PromptHitContent({ hit, terms, dense }: { hit: SearchPromptHit; terms: string[]; dense?: boolean }) {
  return (
    <>
      <span className={iconBox}>
        <WandSparkles />
      </span>
      <span className="min-w-0 flex-1">
        <Highlight text={hit.name} terms={terms} className={cn("block truncate font-medium text-fg", dense ? "text-[13.5px]" : "text-[15px]")} />
        <span className="block truncate text-[11.5px] text-fg-subtle">{hit.description || (hit.kind === "library" ? "Prompt library · insert into composer" : "Prompt preset")}</span>
      </span>
    </>
  );
}

export function ProjectHitContent({ hit, terms, dense }: { hit: SearchProjectHit; terms: string[]; dense?: boolean }) {
  return (
    <>
      <span className={iconBox} style={hit.color ? { color: hit.color } : undefined}>
        {hit.icon ? <span className="text-[15px] leading-none">{hit.icon}</span> : <FolderKanban />}
      </span>
      <span className="min-w-0 flex-1">
        <Highlight text={hit.name} terms={terms} className={cn("block truncate font-medium text-fg", dense ? "text-[13.5px]" : "text-[15px]")} />
        <span className="block truncate text-[11.5px] text-fg-subtle">{hit.description || "Project"}</span>
      </span>
    </>
  );
}

export function PresetHitContent({ hit, terms, dense }: { hit: SearchPresetHit; terms: string[]; dense?: boolean }) {
  return (
    <>
      <span className={iconBox}>
        <Sparkles />
      </span>
      <span className="min-w-0 flex-1">
        <Highlight text={hit.name} terms={terms} className={cn("block truncate font-medium text-fg", dense ? "text-[13.5px]" : "text-[15px]")} />
        <span className="block truncate text-[11.5px] text-fg-subtle">{hit.description || `Model preset · ${modelShort(hit.modelKey)}`}</span>
      </span>
    </>
  );
}

export const GROUP_ICONS: Record<SearchGroup, React.ReactNode> = {
  conversations: <MessageSquare />,
  messages: <MessageSquare />,
  models: <Bot />,
  prompts: <WandSparkles />,
  projects: <FolderKanban />,
  presets: <Sparkles />,
};