frontend-admin / Daocheng-Yading

  import { useState, useEffect, useMemo, useRef } from "react";
  import {
    Search,
    FileText,
    Image,
    Video,
    Play,
    ChevronLeft,
    ChevronRight,
    Library,
  } from "lucide-react";
  import { KIOSK_EVENT, loadKnowledgeEntries, type KnowledgeEntry } from "../kioskStorage";
  import { PAGE_CONTENT_INSET } from "../pageContentInset";

  import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogHeader,
    DialogTitle,
  } from "../components/ui/dialog";
  import { useI18n } from "../i18n";
  import { resolveKioskMediaUrl } from "../api/kioskApi";

  
  /** 搜索框下方固定展示的关键词（顺序与文案一致） */
  const QUICK_KEYWORDS = [
    "天体物理",
    "教程",
    "日食",
    "星云",
    "暗物质",
    "望远镜",
    "深空摄影",
  ] as const;
  
  /** 每页条数（大屏约 5 列×2 行，共 10 条） */
  const PAGE_SIZE = 10;
  
  function buildPageList(totalPages: number, currentPage: number): (number | "ellipsis")[] {
    if (totalPages <= 12) {
      return Array.from({ length: totalPages }, (_, i) => i + 1);
    }
    const set = new Set<number>([1, totalPages, currentPage]);
    for (let p = currentPage - 2; p <= currentPage + 2; p++) {
      if (p >= 1 && p <= totalPages) set.add(p);
    }
    const sorted = [...set].sort((a, b) => a - b);
    const out: (number | "ellipsis")[] = [];
    for (let i = 0; i < sorted.length; i++) {
      const p = sorted[i]!;
      if (i > 0 && p - sorted[i - 1]! > 1) {
        out.push("ellipsis");
      }
      out.push(p);
    }
    return out;
  }
  
  function matchesQuery(item: KnowledgeEntry, raw: string): boolean {
    const q = raw.trim();
    if (q === "") return true;
    const lower = q.toLowerCase();
    if (item.title.toLowerCase().includes(lower) || item.content.toLowerCase().includes(lower)) {
      return true;
    }
    return item.tags.some((t) => t.includes(q) || t.toLowerCase().includes(lower));
  }
  

  /** 有条目视频地址即可播放（类型误选为「文字」时也能在知识库观看） */
  function hasKnowledgeVideoUrl(item: KnowledgeEntry): boolean {
    return typeof item.videoUrl === "string" && item.videoUrl.trim() !== "";
  }
  

  export function SearchPage() {

    const { t } = useI18n();

    const [dbRev, setDbRev] = useState(0);
    const [searchQuery, setSearchQuery] = useState("");
    const [page, setPage] = useState(1);

    const [activeItem, setActiveItem] = useState<KnowledgeEntry | null>(null);

    const searchInputRef = useRef<HTMLInputElement>(null);
  
    useEffect(() => {
      const h = () => setDbRev((r) => r + 1);
      window.addEventListener(KIOSK_EVENT, h);
      window.addEventListener("storage", h);
      return () => {
        window.removeEventListener(KIOSK_EVENT, h);
        window.removeEventListener("storage", h);
      };
    }, []);
  
    const searchResults = useMemo(() => loadKnowledgeEntries(), [dbRev]);
  
    const filteredResults = useMemo(
      () => searchResults.filter((item) => matchesQuery(item, searchQuery)),
      [searchResults, searchQuery]
    );
  
    const totalPages = Math.max(1, Math.ceil(filteredResults.length / PAGE_SIZE));
  
    useEffect(() => {
      setPage(1);
    }, [searchQuery, dbRev]);
  
    useEffect(() => {
      setPage((p) => Math.min(p, totalPages));
    }, [totalPages]);
  
    const currentPage = Math.min(page, totalPages);
    const pageItems = filteredResults.slice(
      (currentPage - 1) * PAGE_SIZE,
      currentPage * PAGE_SIZE
    );
  
    const toggleKeyword = (word: string) => {
      setSearchQuery((prev) => (prev.trim() === word ? "" : word));
    };
  
    const getTypeIcon = (type: string) => {
      switch (type) {
        case "文字":
          return FileText;
        case "图片":
          return Image;
        case "视频":
          return Video;
        default:
          return FileText;
      }
    };
  
    const goPage = (p: number) => {
      setPage(Math.max(1, Math.min(p, totalPages)));
    };
  
    return (
      <div
        className={`flex h-full min-h-0 w-full flex-1 flex-col overflow-hidden ${PAGE_CONTENT_INSET}`}
      >
        <div className="flex h-full min-h-0 w-full min-w-0 flex-col overflow-hidden">
          {/* 左：标题 · 右：搜索框，关键词仅在搜索框下方 */}
          <div className="shrink-0 pb-2">
            <div className="flex w-full min-w-0 flex-col gap-2 sm:flex-row sm:items-start sm:justify-between sm:gap-4">
              <div className="flex min-w-0 shrink-0 items-center gap-2 text-xl font-bold text-white sm:text-2xl">
                <Library className="h-6 w-6 shrink-0 text-sky-400" aria-hidden />

                <span className="truncate">{t("search.title")}</span>

              </div>
              <div className="flex w-full min-w-0 flex-col gap-1.5 sm:ml-auto sm:min-w-0 sm:flex-1 sm:max-w-[min(38rem,calc(100vw-2rem))] md:max-w-[min(44rem,calc(100vw-2.5rem))]">
                <form
                  className="flex w-full min-w-0 shrink-0 gap-2"
                  onSubmit={(e) => {
                    e.preventDefault();
                    searchInputRef.current?.blur();
                  }}
                >
                  <div className="relative min-w-0 flex-1">
                    <input
                      ref={searchInputRef}
                      type="search"
                      name="q"
                      value={searchQuery}
                      onChange={(e) => setSearchQuery(e.target.value)}

                      placeholder={t("search.placeholder")}

                      autoComplete="off"
                      className="w-full rounded-lg border border-white/25 bg-transparent py-1.5 pl-8 pr-2.5 text-xs text-white placeholder-blue-300/80 transition-all focus:border-sky-400/80 focus:outline-none focus:ring-1 focus:ring-sky-400/30 sm:py-2 sm:pl-9 sm:text-sm"
                    />
                    <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-blue-300/90 sm:left-3 sm:h-4 sm:w-4" />
                  </div>
                  <button
                    type="submit"
                    className="shrink-0 rounded-lg bg-sky-500/90 px-3 py-1.5 text-xs font-medium text-white shadow-sm transition-colors hover:bg-sky-400/95 active:bg-sky-500 sm:px-4 sm:py-2 sm:text-sm"
                  >

                    {t("search.button")}

                  </button>
                </form>
                <div className="flex max-h-[2.125rem] flex-wrap gap-x-1 gap-y-0 overflow-hidden sm:max-h-[2.375rem] sm:gap-x-1.5">
                  {QUICK_KEYWORDS.map((word) => {
                    const active = searchQuery.trim() === word;
                    return (
                      <button
                        key={word}
                        type="button"
                        onClick={() => toggleKeyword(word)}
                        className={`shrink-0 border-0 bg-transparent px-0 py-0 text-left !text-[11px] font-normal leading-snug transition-colors sm:!text-[12px] ${
                          active
                            ? "font-semibold text-sky-300 underline decoration-sky-400/80 underline-offset-2"
                            : "text-blue-100/90 hover:text-white"
                        }`}
                      >
                        {word}
                      </button>
                    );
                  })}
                </div>
              </div>
            </div>
          </div>
  
          {/* 搜索结果 + 分页 */}
          <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
            <div className="mb-1.5 shrink-0">
              <h3 className="text-sm font-medium text-white sm:text-base">

                {t("search.foundPrefix")}{" "}
                <span className="text-sky-400">{filteredResults.length}</span>{" "}
                {t("search.foundSuffix")}

              </h3>
            </div>
  
            {filteredResults.length > 0 && (
              <>
                <div className="grid min-h-0 flex-1 auto-rows-max content-start grid-cols-2 gap-2 overflow-hidden sm:grid-cols-3 md:grid-cols-5 md:gap-2">
                  {pageItems.map((result) => {
                    const Icon = getTypeIcon(result.type);
                    return (
                      <article
                        key={result.id}

                        role="button"
                        tabIndex={0}
                        onClick={() => setActiveItem(result)}
                        onKeyDown={(e) => {
                          if (e.key === "Enter" || e.key === " ") {
                            e.preventDefault();
                            setActiveItem(result);
                          }
                        }}
                        className="group flex min-h-0 min-w-0 cursor-pointer flex-col overflow-hidden rounded-lg border border-white/20 bg-white/10 transition-all hover:border-sky-400/45 hover:shadow-md hover:shadow-sky-400/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/70"

                      >
                        <div className="relative h-[8.75rem] w-full shrink-0 overflow-hidden bg-zinc-900/50 sm:h-[10rem] md:h-[11.5rem]">
                          {result.image ? (
                            <img

                              src={resolveKioskMediaUrl(result.image)}

                              alt=""
                              className="absolute inset-0 h-full w-full object-cover object-center transition-transform duration-300 group-hover:scale-105"
                            />
                          ) : (
                            <div className="flex h-full w-full items-center justify-center text-blue-300/50">
                              <Icon className="h-8 w-8 sm:h-9 sm:w-9" strokeWidth={1.25} />
                            </div>
                          )}

                          {result.type === "视频" || hasKnowledgeVideoUrl(result) ? (

                            <div
                              className="pointer-events-none absolute inset-0 z-[1] flex items-center justify-center bg-black/20 transition-colors group-hover:bg-black/30"
                              aria-hidden
                            >
                              <span className="flex h-9 w-9 items-center justify-center rounded-full bg-white/95 text-sky-600 shadow-md ring-2 ring-white/40 sm:h-10 sm:w-10">
                                <Play className="ml-0.5 h-4 w-4 fill-current sm:h-[1.15rem] sm:w-[1.15rem]" strokeWidth={0} />
                              </span>
                            </div>
                          ) : null}
                          <span className="absolute right-1 top-1 z-[2] rounded bg-black/50 px-1 py-px text-[9px] font-medium text-white backdrop-blur-sm sm:text-[10px]">
                            {result.type}
                          </span>
                        </div>
                        <div className="flex flex-col gap-1 px-1.5 py-1.5 sm:px-2 sm:py-2">
                          <h4 className="line-clamp-2 shrink-0 text-xs font-bold leading-snug text-white group-hover:text-sky-200 sm:text-sm">
                            {result.title}
                          </h4>
                          {result.content.trim() ? (
                            <p className="line-clamp-2 text-xs leading-relaxed text-blue-100/85 sm:text-[13px]">
                              {result.content.trim()}
                            </p>
                          ) : null}
                          <div className="mt-0.5 grid w-full min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-x-2 border-t border-white/10 pt-1">
                            <div className="flex min-w-0 flex-wrap items-center gap-1 sm:gap-1.5">
                              {result.tags.length > 0 ? (
                                <>
                                  {result.tags.slice(0, 3).map((tag) => (
                                    <span
                                      key={tag}
                                      className="max-w-full truncate rounded bg-sky-500/15 px-1 py-0.5 text-[10px] text-sky-200/95 ring-1 ring-sky-400/20 sm:text-xs"
                                    >
                                      {tag}
                                    </span>
                                  ))}
                                  {result.tags.length > 3 ? (
                                    <span className="text-[10px] text-blue-300/65 sm:text-xs">
                                      +{result.tags.length - 3}
                                    </span>
                                  ) : null}
                                </>
                              ) : null}
                            </div>
                            <time
                              className="shrink-0 text-right text-[10px] tabular-nums text-blue-300/75 sm:text-xs"
                              dateTime={result.date}
                            >
                              {result.date}
                            </time>
                          </div>
                        </div>
                      </article>
                    );
                  })}
                </div>
  
                <nav
                  className="mt-1.5 w-full min-w-0 shrink-0 overflow-x-auto overflow-y-visible pb-0.5 [-ms-overflow-style:none] [scrollbar-width:none] sm:mt-2 [&::-webkit-scrollbar]:hidden"

                  aria-label={t("pager.label")}

                >
                  <div className="ml-auto flex w-max max-w-none flex-nowrap items-center gap-1.5 sm:gap-2">
                    <span className="shrink-0 text-[11px] tabular-nums text-blue-200 sm:text-xs">

                      {t("pager.page")} {currentPage} / {totalPages}

                    </span>
                    <button
                      type="button"
                      onClick={() => goPage(currentPage - 1)}
                      disabled={currentPage <= 1}
                      className="flex shrink-0 items-center gap-1 rounded-md border border-white/20 bg-white/5 px-2 py-1 text-[11px] text-white transition-colors hover:bg-white/10 disabled:pointer-events-none disabled:opacity-35 sm:px-2.5 sm:py-1.5 sm:text-xs"
                    >
                      <ChevronLeft className="h-3.5 w-3.5 shrink-0" aria-hidden />

                      {t("pager.prev")}

                    </button>
                    <div className="flex shrink-0 flex-nowrap items-center gap-1">
                      {buildPageList(totalPages, currentPage).map((item, idx) =>
                        item === "ellipsis" ? (
                          <span
                            key={`e-${idx}`}
                            className="shrink-0 px-0.5 text-[11px] text-blue-200/90 sm:text-xs"
                            aria-hidden
                          >
                            …
                          </span>
                        ) : (
                          <button
                            key={item}
                            type="button"
                            onClick={() => goPage(item)}
                            aria-current={item === currentPage ? "page" : undefined}
                            className={`min-w-[1.75rem] shrink-0 rounded-md border border-white/15 px-1.5 py-1 text-[11px] font-medium transition-colors sm:min-w-[2rem] sm:text-xs ${
                              item === currentPage
                                ? "border-sky-400/50 bg-sky-500/90 text-blue-950"
                                : "bg-white/10 text-white hover:border-white/25 hover:bg-white/15"
                            }`}
                          >
                            {item}
                          </button>
                        )
                      )}
                    </div>
                    <button
                      type="button"
                      onClick={() => goPage(currentPage + 1)}
                      disabled={currentPage >= totalPages}
                      className="flex shrink-0 items-center gap-1 rounded-md border border-white/20 bg-white/5 px-2 py-1 text-[11px] text-white transition-colors hover:bg-white/10 disabled:pointer-events-none disabled:opacity-35 sm:px-2.5 sm:py-1.5 sm:text-xs"
                    >

                      {t("pager.next")}

                      <ChevronRight className="h-3.5 w-3.5 shrink-0" aria-hidden />
                    </button>
                  </div>
                </nav>
              </>
            )}
  
            {filteredResults.length === 0 && (
              <div className="flex min-h-0 flex-1 flex-col items-center justify-center gap-2 py-4 text-center">
                <Search className="h-10 w-10 text-blue-400 opacity-50 sm:h-12 sm:w-12" />

                <p className="text-sm text-blue-300 sm:text-base">{t("search.noneTitle")}</p>
                <p className="text-xs text-blue-400/90">{t("search.noneHint")}</p>

              </div>
            )}
          </div>
        </div>

  
        <Dialog open={activeItem != null} onOpenChange={(open) => (open ? null : setActiveItem(null))}>
          <DialogContent className="max-w-[min(56rem,calc(100%-2rem))] border-white/15 bg-blue-950/70 text-white backdrop-blur-xl">
            {activeItem ? (
              <div className="grid min-h-0 gap-4 md:grid-cols-[minmax(0,1.1fr)_minmax(0,1fr)]">
                <div className="min-h-0">
                  <DialogHeader>
                    <DialogTitle className="text-white">{activeItem.title}</DialogTitle>
                    <DialogDescription className="text-blue-100/80">
                      {activeItem.type} · {activeItem.date}
                      {activeItem.tags.length ? ` · ${activeItem.tags.join(" / ")}` : ""}
                    </DialogDescription>
                  </DialogHeader>
  
                  <div className="mt-3 whitespace-pre-wrap text-sm leading-relaxed text-blue-50/90">
                    {activeItem.content?.trim() ? activeItem.content.trim() : "（无详细内容）"}
                  </div>
                </div>
  
                <div className="min-h-0 space-y-2">
                  {hasKnowledgeVideoUrl(activeItem) ? (
                    <div className="space-y-1.5">
                      <p className="text-xs text-blue-200/90">视频（点击播放器控件播放）</p>
                      <video
                        className="aspect-video w-full max-h-[min(70vh,28rem)] rounded-md border border-white/15 bg-black/70"
                        controls
                        playsInline
                        preload="metadata"
                        poster={
                          activeItem.image
                            ? resolveKioskMediaUrl(activeItem.image)
                            : undefined
                        }
                        src={resolveKioskMediaUrl(activeItem.videoUrl)}
                      >
                        您的浏览器不支持视频播放。
                      </video>
                    </div>
                  ) : activeItem.type === "视频" ? (
                    activeItem.image ? (
                      <div className="space-y-1.5">
                        <p className="text-xs text-amber-200/90">本条为「视频」类型但未填写视频地址，暂显示封面图。</p>
                        <img
                          src={resolveKioskMediaUrl(activeItem.image)}
                          alt={activeItem.title}
                          className="w-full rounded-md border border-white/10 bg-black/30 object-contain"
                          loading="lazy"
                        />
                      </div>
                    ) : (
                      <div className="flex aspect-video w-full items-center justify-center rounded-md border border-white/10 bg-black/40 text-sm text-blue-100/80">
                        暂无视频地址
                      </div>
                    )
                  ) : activeItem.image ? (
                    <img
                      src={resolveKioskMediaUrl(activeItem.image)}
                      alt={activeItem.title}
                      className="w-full rounded-md border border-white/10 bg-black/30 object-contain"
                      loading="lazy"
                    />
                  ) : (
                    <div className="flex aspect-video w-full items-center justify-center rounded-md border border-white/10 bg-black/40 text-sm text-blue-100/80">
                      暂无封面与视频
                    </div>
                  )}
                  {hasKnowledgeVideoUrl(activeItem) && activeItem.image ? (
                    <p className="text-[11px] leading-snug text-blue-300/80">
                      上图为视频封面；播放请使用上方控件。
                    </p>
                  ) : null}
                </div>
              </div>
            ) : (
              <div className="text-sm text-white"> </div>
            )}
          </DialogContent>
        </Dialog>

      </div>
    );
  }