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

import { Info, Search as SearchIcon, X } from "lucide-react";
import { useEffect, useMemo, useRef, useState } from "react";
import { getJSON, itemsOrEmpty } 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;
};

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,
}: 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(() => {
    inputRef.current?.focus();
  }, []);

  useEffect(() => {
    let cancelled = false;
    setIsTagLoading(true);
    getJSON<PostListResponse>(
      buildPostsUrl({
        lang: langParam,
        sort: "latest",
        limit: TAG_SOURCE_LIMIT,
      }),
    )
      .then((res) => {
        if (cancelled) return;
        setTags(extractTags(itemsOrEmpty(res.items)));
      })
      .catch(() => {
        if (!cancelled) setTags([]);
      })
      .finally(() => {
        if (!cancelled) setIsTagLoading(false);
      });

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

  const showTagPosts = (tag: string) => {
    setSelectedTag(tag);
    onQueryChange(tag);
    setIsPostLoading(true);
    getJSON<PostListResponse>(
      buildSearchUrl({ lang: langParam, q: tag, limit: TAG_RESULT_LIMIT }),
    )
      .then((res) => {
        const exactMatches = itemsOrEmpty(res.items).filter((post) =>
          post.tags?.some((postTag) => postTag.trim() === tag),
        );
        setTagPosts(exactMatches);
      })
      .catch(() => setTagPosts([]))
      .finally(() => setIsPostLoading(false));
  };

  return (
    <div className="fixed inset-x-0 bottom-0 top-[64px] z-50 overflow-y-auto bg-[#0f0f13] md:hidden">
      <div className="border-t border-white/10 px-5 pb-6 pt-3 max-[360px]:px-3">
        <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 border border-ark-gold bg-[#191921] px-3 shadow-[0_0_0_2px_rgba(245,180,53,0.12)]">
            <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-sm 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-start gap-1.5 text-[11px] leading-4 text-[#777985]">
          <Info size={15} className="mt-0.5 shrink-0" />
          <span>{t("searchPanelHint")}</span>
        </div>

        <section className="mt-5">
          <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>
  );
}