Arkie-Library-Frontend/src/components/SearchPanel.tsx

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

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>;
};

const TAG_SOURCE_LIMIT = 80;
const TAG_RESULT_LIMIT = 12;

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 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,
}: 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 langParam = useMemo(() => langQuery(lang), [lang]);

  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]);

  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>
        )}

        <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>

        {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>
  );
}