import { Info, Search as SearchIcon, X } from "lucide-react";
import {
  useEffect,
  useMemo,
  useRef,
  useState,
  type ReactNode,
  type Ref,
} from "react";
import { Link } from "react-router-dom";
import { getJSON, itemsOrEmpty, readJSONCache } from "../api";
import { langQuery, type Lang } from "../i18n";
import type { Post, PostListResponse } from "../types/post";
import { MessageBubble } from "./messageStream/MessageBubble";
import { postDisplayText, postTitleText } from "./messageStream/utils/postText";

type TagItem = {
  name: string;
  count: number;
};

type SearchPanelProps = {
  lang: Lang;
  t: (key: string) => string;
  query: string;
  onQueryChange: (value: string) => void;
  onSearch: () => void;
  variant?: "mobile" | "desktop";
  showInput?: boolean;
  panelRef?: Ref<HTMLDivElement>;
  onResultClick?: () => void;
};

const TAG_SOURCE_LIMIT = 80;
const TAG_RESULT_LIMIT = 12;
const SEARCH_PREVIEW_LIMIT = 5;
const SEARCH_DEBOUNCE_MS = 300;

function buildPostsUrl(params: Record<string, string | number | undefined>) {
  const sp = new URLSearchParams();
  Object.entries(params).forEach(([key, value]) => {
    if (value !== undefined && value !== "") sp.set(key, String(value));
  });
  return `/api/posts?${sp.toString()}`;
}

function buildSearchUrl(params: Record<string, string | number | undefined>) {
  const sp = new URLSearchParams();
  Object.entries(params).forEach(([key, value]) => {
    if (value !== undefined && value !== "") sp.set(key, String(value));
  });
  return `/api/posts/search?${sp.toString()}`;
}

function escapeRegex(value: string): string {
  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
}

function highlightText(text: string, query: string): ReactNode {
  const clean = query.trim();
  if (!clean || !text) return text;

  const parts = text.split(new RegExp(`(${escapeRegex(clean)})`, "gi"));
  return parts.map((part, index) =>
    part.toLowerCase() === clean.toLowerCase() ? (
      <mark
        key={`${part}-${index}`}
        className="rounded bg-ark-gold/20 px-0.5 text-ark-gold"
      >
        {part}
      </mark>
    ) : (
      part
    ),
  );
}

function snippetFor(post: Post, lang: Lang, query: string): string {
  const text = postDisplayText(post, lang).replace(/\s+/g, " ").trim();
  if (!text) return "";

  const clean = query.trim().toLowerCase();
  const index = clean ? text.toLowerCase().indexOf(clean) : -1;
  if (index === -1) return text.slice(0, 110);

  const start = Math.max(0, index - 36);
  const end = Math.min(text.length, index + clean.length + 74);
  return `${start > 0 ? "…" : ""}${text.slice(start, end)}${end < text.length ? "…" : ""}`;
}

function metaFor(post: Post): string {
  const parts = [
    post.categorySlug,
    post.postType,
    ...(post.tags ?? []).map((tag) => `#${tag}`),
    post.attachments[0]?.filename,
  ].filter(Boolean);
  return parts.slice(0, 4).join(" · ");
}

function extractTags(posts: Post[]): TagItem[] {
  const counts = new Map<string, number>();
  posts.forEach((post) => {
    post.tags?.forEach((tag) => {
      const clean = tag.trim();
      if (!clean) return;
      counts.set(clean, (counts.get(clean) ?? 0) + 1);
    });
  });

  return [...counts.entries()]
    .map(([name, count]) => ({ name, count }))
    .sort((a, b) => b.count - a.count || a.name.localeCompare(b.name))
    .slice(0, 12);
}

export function SearchPanel({
  lang,
  t,
  query,
  onQueryChange,
  onSearch,
  variant = "mobile",
  showInput = true,
  panelRef,
  onResultClick,
}: SearchPanelProps) {
  const inputRef = useRef<HTMLInputElement>(null);
  const [tags, setTags] = useState<TagItem[]>([]);
  const [selectedTag, setSelectedTag] = useState("");
  const [tagPosts, setTagPosts] = useState<Post[]>([]);
  const [isTagLoading, setIsTagLoading] = useState(false);
  const [isPostLoading, setIsPostLoading] = useState(false);
  const [previewPosts, setPreviewPosts] = useState<Post[]>([]);
  const [isPreviewLoading, setIsPreviewLoading] = useState(false);

  const langParam = useMemo(() => langQuery(lang), [lang]);
  const cleanQuery = query.trim();

  useEffect(() => {
    if (!showInput) return;
    // Avoid scroll-into-view: browsers default-scroll the focused element
    // into the viewport, which moves the underlying page when the search
    // overlay opens from a scrolled position. `preventScroll` keeps the page
    // exactly where it was.
    inputRef.current?.focus({ preventScroll: true });
  }, [showInput]);

  useEffect(() => {
    let cancelled = false;
    const tagsUrl = buildPostsUrl({
      lang: langParam,
      sort: "latest",
      limit: TAG_SOURCE_LIMIT,
    });
    const cachedTags = readJSONCache<PostListResponse>(tagsUrl);
    if (cachedTags) setTags(extractTags(itemsOrEmpty(cachedTags.items)));

    setIsTagLoading(!cachedTags);
    getJSON<PostListResponse>(tagsUrl)
      .then((res) => {
        if (cancelled) return;
        setTags(extractTags(itemsOrEmpty(res.items)));
      })
      .catch(() => {
        if (!cancelled && !cachedTags) setTags([]);
      })
      .finally(() => {
        if (!cancelled) setIsTagLoading(false);
      });

    return () => {
      cancelled = true;
    };
  }, [langParam]);

  useEffect(() => {
    if (selectedTag && selectedTag !== cleanQuery) {
      setSelectedTag("");
      setTagPosts([]);
    }
  }, [cleanQuery, selectedTag]);

  useEffect(() => {
    let cancelled = false;
    const q = cleanQuery;
    if (!q) {
      setPreviewPosts([]);
      setIsPreviewLoading(false);
      return;
    }

    const searchUrl = buildSearchUrl({
      lang: langParam,
      q,
      limit: SEARCH_PREVIEW_LIMIT,
    });
    const cachedPosts = readJSONCache<PostListResponse>(searchUrl);
    if (cachedPosts) setPreviewPosts(itemsOrEmpty(cachedPosts.items));

    setIsPreviewLoading(!cachedPosts);
    const timer = window.setTimeout(() => {
      getJSON<PostListResponse>(searchUrl)
        .then((res) => {
          if (!cancelled) setPreviewPosts(itemsOrEmpty(res.items));
        })
        .catch(() => {
          if (!cancelled && !cachedPosts) setPreviewPosts([]);
        })
        .finally(() => {
          if (!cancelled) setIsPreviewLoading(false);
        });
    }, SEARCH_DEBOUNCE_MS);

    return () => {
      cancelled = true;
      window.clearTimeout(timer);
    };
  }, [cleanQuery, langParam]);

  const showTagPosts = (tag: string) => {
    // Tapping the active tag again clears it (toggle) instead of staying stuck.
    if (selectedTag === tag) {
      setSelectedTag("");
      setTagPosts([]);
      onQueryChange("");
      return;
    }
    setSelectedTag(tag);
    onQueryChange(tag);
    const searchUrl = buildSearchUrl({
      lang: langParam,
      q: tag,
      limit: TAG_RESULT_LIMIT,
    });
    const cachedPosts = readJSONCache<PostListResponse>(searchUrl);
    if (cachedPosts) {
      setTagPosts(
        itemsOrEmpty(cachedPosts.items).filter((post) =>
          post.tags?.some((postTag) => postTag.trim() === tag),
        ),
      );
    }

    setIsPostLoading(!cachedPosts);
    getJSON<PostListResponse>(searchUrl)
      .then((res) => {
        const exactMatches = itemsOrEmpty(res.items).filter((post) =>
          post.tags?.some((postTag) => postTag.trim() === tag),
        );
        setTagPosts(exactMatches);
      })
      .catch(() => {
        if (!cachedPosts) setTagPosts([]);
      })
      .finally(() => setIsPostLoading(false));
  };

  const panelClassName =
    variant === "desktop"
      ? "ark-header-menu-enter fixed left-1/2 top-[72px] z-50 max-h-[min(70dvh,640px)] w-[min(720px,calc(100vw-3rem))] -translate-x-1/2 overflow-y-auto overscroll-contain rounded-3xl border border-white/10 bg-[#0f0f13] shadow-2xl shadow-black/60"
      : "ark-header-menu-enter fixed inset-x-0 bottom-0 top-[64px] z-50 overflow-y-auto overscroll-contain bg-[#0f0f13] md:hidden";
  const innerClassName =
    variant === "desktop"
      ? "px-5 pb-6 pt-4"
      : "border-t border-white/10 px-5 pb-6 pt-3 max-[360px]:px-3";

  return (
    <div ref={panelRef} className={panelClassName}>
      <div className={innerClassName}>
        {showInput ? (
          <>
            <div className="flex h-12 items-center gap-2">
              <div className="flex h-11 min-w-0 flex-1 items-center gap-2 rounded-full bg-[#191921] px-3 shadow-[0_0_0_2px_rgba(245,180,53,0.12)] ring-1 ring-inset ring-ark-gold">
                <SearchIcon size={18} className="shrink-0 text-ark-gold" />
                <input
                  ref={inputRef}
                  value={query}
                  onChange={(e) => onQueryChange(e.target.value)}
                  onKeyDown={(e) => e.key === "Enter" && onSearch()}
                  placeholder={t("searchPanelPlaceholder")}
                  className="min-w-0 flex-1 bg-transparent text-base text-neutral-100 outline-none placeholder:text-[#777985]"
                />
                <button
                  type="button"
                  onClick={() => onQueryChange("")}
                  className="shrink-0 rounded-full p-1 text-neutral-500 hover:bg-white/5 hover:text-neutral-200"
                  aria-label={t("clear")}
                >
                  <X size={18} />
                </button>
              </div>
              <button
                type="button"
                onClick={onSearch}
                className="h-10 shrink-0 rounded-full bg-ark-gold px-3 text-sm font-bold text-[#111114] transition hover:bg-ark-gold2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/70"
              >
                {t("searchSubmit")}
              </button>
            </div>

            <div className="mt-1 flex items-center gap-1.5 pl-3 text-[12px] leading-4 text-[#777985]">
              <Info size={14} className="shrink-0" />
              <span>{t("searchPanelHint")}</span>
            </div>
          </>
        ) : (
          <div className="mb-4 flex items-center gap-1.5 pl-1 text-[12px] leading-4 text-[#777985]">
            <Info size={14} className="shrink-0" />
            <span>{t("searchPanelHint")}</span>
          </div>
        )}

        {cleanQuery ? (
          <section className={showInput ? "mt-5" : "mt-0"}>
            <div className="mb-3 flex items-center justify-between">
              <h2 className="border-l-4 border-ark-gold pl-3 text-base font-bold text-neutral-100">
                {t("related")}
              </h2>
              {isPreviewLoading ? (
                <span className="text-xs text-neutral-500">…</span>
              ) : null}
            </div>

            {previewPosts.length > 0 ? (
              <div className="flex flex-col gap-2">
                {previewPosts.map((post) => {
                  const title =
                    postTitleText(post, lang) ||
                    post.attachments[0]?.filename ||
                    post.id;
                  const snippet = snippetFor(post, lang, cleanQuery);
                  const meta = metaFor(post);
                  return (
                    <Link
                      key={post.id}
                      to={`/browse?post=${encodeURIComponent(post.id)}`}
                      onClick={onResultClick}
                      className="block rounded-2xl border border-white/10 bg-[#191921] px-4 py-3 transition hover:border-ark-gold/60 hover:bg-[#22232D] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/70"
                    >
                      <div className="line-clamp-2 text-sm font-semibold leading-5 text-neutral-100">
                        {highlightText(title, cleanQuery)}
                      </div>
                      {meta ? (
                        <div className="mt-1 line-clamp-1 text-[12px] leading-4 text-[#A8A9AE]">
                          {highlightText(meta, cleanQuery)}
                        </div>
                      ) : null}
                      {snippet ? (
                        <div className="mt-1 line-clamp-2 text-[13px] leading-[18px] text-neutral-400">
                          {highlightText(snippet, cleanQuery)}
                        </div>
                      ) : null}
                    </Link>
                  );
                })}
              </div>
            ) : !isPreviewLoading ? (
              <p className="py-3 text-sm text-neutral-500">{t("noResults")}</p>
            ) : null}
          </section>
        ) : null}

        {!cleanQuery ? (
          <section className={showInput ? "mt-5" : "mt-0"}>
            <div className="mb-3 flex items-center justify-between">
              <h2 className="border-l-4 border-ark-gold pl-3 text-base font-bold text-neutral-100">
                {t("currentTags")}
              </h2>
            </div>

            {isTagLoading ? (
              <div className="py-3 text-sm text-neutral-500">
                {t("loading")}
              </div>
            ) : tags.length > 0 ? (
              <div className="flex flex-wrap gap-2">
                {tags.map((tag) => {
                  const active = selectedTag === tag.name;
                  return (
                    <button
                      key={tag.name}
                      type="button"
                      onClick={() => showTagPosts(tag.name)}
                      className={`rounded-full border px-3 py-1.5 text-xs font-bold transition ${
                        active
                          ? "border-ark-gold bg-ark-gold/15 text-ark-gold"
                          : "border-white/10 bg-[#232329] text-neutral-200 hover:border-ark-gold/60 hover:text-ark-gold"
                      }`}
                    >
                      #{tag.name}
                    </button>
                  );
                })}
              </div>
            ) : (
              <div className="py-3 text-sm text-neutral-500">
                {t("noTagsAvailable")}
              </div>
            )}
          </section>
        ) : null}

        {selectedTag ? (
          <section className="mt-6">
            <h2 className="mb-3 border-l-4 border-ark-gold pl-3 text-base font-bold text-neutral-100">
              {t("tagPostsTitle").replace("{{tag}}", selectedTag)}
            </h2>
            {isPostLoading ? (
              <div className="py-4 text-center text-xs text-neutral-500">…</div>
            ) : tagPosts.length > 0 ? (
              <div className="flex flex-col gap-3">
                {tagPosts.map((post) => (
                  <MessageBubble key={post.id} post={post} />
                ))}
              </div>
            ) : (
              <p className="py-6 text-center text-sm text-neutral-400">
                {t("noTagPosts")}
              </p>
            )}
          </section>
        ) : null}
      </div>
    </div>
  );
}