Arkie-Library-Frontend/src/pages/Browse.tsx

import { useEffect, useMemo, useState } from "react";
import { useSearchParams } from "react-router-dom";
import { getJSON, itemsOrEmpty, type Resource } from "../api";
import { ResourceCard } from "../components/ResourceCard";
import { ResourceListFooter } from "../components/ResourceListFooter";
import { useI18n } from "../i18n";
import { typeFilterLabel } from "../resourceTypeLabels";

const types = [
  "all",
  "image",
  "video",
  "ppt",
  "pdf",
  "text",
  "link",
  "archive",
] as const;
const resourceLangCodes = ["", "zh-TW", "zh-CN", "en"] as const;

function resourceLangLabel(t: (k: string) => string, code: string) {
  if (!code) return t("filterLanguageAll");
  if (code === "zh-TW") return t("lang_zh_TW");
  if (code === "zh-CN") return t("lang_zh_CN");
  return t("lang_en");
}

export function Browse() {
  const { t, lang } = useI18n();
  const [sp, setSp] = useSearchParams();
  const sort = sp.get("sort") || "latest";
  const type = sp.get("type") || "all";
  const tag = (sp.get("tag") || "").trim();
  const resourceLang = sp.get("language") || "";
  const page = Math.max(1, parseInt(sp.get("page") || "1", 10) || 1);
  const limit = 24;

  const [items, setItems] = useState<Resource[]>([]);
  const [total, setTotal] = useState(0);
  const [err, setErr] = useState<string | null>(null);

  const query = useMemo(() => {
    const p = new URLSearchParams();
    p.set("lang", lang);
    p.set("sort", sort);
    p.set("limit", String(limit));
    p.set("page", String(page));
    if (type && type !== "all") p.set("type", type);
    if (resourceLang) p.set("language", resourceLang);
    if (tag) p.set("tag", tag);
    return p.toString();
  }, [lang, sort, type, resourceLang, tag, page]);

  useEffect(() => {
    setErr(null);
    getJSON<{ items: Resource[]; total?: number }>(`/api/resources?${query}`)
      .then((r) => {
        setItems(itemsOrEmpty(r.items));
        setTotal(typeof r.total === "number" ? r.total : 0);
      })
      .catch((e) => setErr(String(e)));
  }, [query]);

  const setPage = (next: number) => {
    const n = new URLSearchParams(sp);
    if (next <= 1) n.delete("page");
    else n.set("page", String(next));
    setSp(n);
  };

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
        <h1 className="text-2xl font-bold">{t("all")}</h1>
        <div className="flex flex-wrap gap-2">
          {(
            [
              ["latest", t("latest")],
              ["recommended", t("official")],
              ["popular", t("popular")],
              ["published", t("sortPublished")],
            ] as const
          ).map(([k, label]) => (
            <button
              key={k}
              type="button"
              onClick={() => {
                const n = new URLSearchParams(sp);
                n.set("sort", k);
                n.delete("page");
                setSp(n);
              }}
              className={`rounded-full border px-3 py-1 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg ${
                sort === k
                  ? "border-ark-gold text-ark-gold2"
                  : "border-ark-line"
              }`}
            >
              {label}
            </button>
          ))}
        </div>
      </div>

      <div className="flex flex-wrap gap-2">
        {types.map((tp) => (
          <button
            key={tp}
            type="button"
            onClick={() => {
              const n = new URLSearchParams(sp);
              n.delete("page");
              if (tp === "all") n.delete("type");
              else n.set("type", tp);
              setSp(n);
            }}
            className={`rounded-full border px-3 py-1 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg ${
              type === tp || (tp === "all" && !sp.get("type"))
                ? "border-ark-gold text-ark-gold2"
                : "border-ark-line"
            }`}
          >
            {typeFilterLabel(t, tp)}
          </button>
        ))}
      </div>

      <div className="space-y-2">
        <div className="text-xs font-medium uppercase tracking-wide text-neutral-500">
          {t("resourceLangFilter")}
        </div>
        <div className="flex flex-wrap gap-2">
          {resourceLangCodes.map((code) => (
            <button
              key={code || "all"}
              type="button"
              onClick={() => {
                const n = new URLSearchParams(sp);
                n.delete("page");
                if (!code) n.delete("language");
                else n.set("language", code);
                setSp(n);
              }}
              className={`rounded-full border px-3 py-1 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg ${
                (code === "" && !resourceLang) || resourceLang === code
                  ? "border-ark-gold text-ark-gold2"
                  : "border-ark-line"
              }`}
            >
              {resourceLangLabel(t, code)}
            </button>
          ))}
        </div>
      </div>

      {tag ? (
        <div className="flex flex-wrap items-center gap-2">
          <span className="text-sm text-neutral-400">
            {t("search")}: <span className="text-ark-gold2">{tag}</span>
          </span>
          <button
            type="button"
            onClick={() => {
              const n = new URLSearchParams(sp);
              n.delete("tag");
              n.delete("page");
              setSp(n);
            }}
            className="rounded-full border border-ark-line px-3 py-1 text-xs text-neutral-200 outline-none hover:border-ark-gold focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
          >
            {t("filterTagClear")}
          </button>
        </div>
      ) : null}

      {err ? <div className="text-red-300">{err}</div> : null}

      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        {items.map((r) => (
          <ResourceCard key={r.id} r={r} />
        ))}
      </div>

      <ResourceListFooter
        page={page}
        limit={limit}
        total={total}
        t={t}
        onPrev={() => setPage(page - 1)}
        onNext={() => setPage(page + 1)}
      />
    </div>
  );
}