Arkie-Library-Frontend/src/layouts/PublicLayout.tsx

import { Globe, Menu, Search as SearchIcon, X } from "lucide-react";
import { useState } from "react";
import { Link, Outlet, useLocation, useNavigate } from "react-router-dom";
import { ArkLogoMark } from "../components/ArkLogoMark";
import { useI18n, type Lang } from "../i18n";
import { adminUiPrefix } from "../adminPaths";

type PublicNavWhich =
  | "home"
  | "browseAll"
  | "categories"
  | "browseLatest"
  | "browseRecommended"
  | "browsePopular"
  | "favorites"
  | "wallet"
  | "about";

function navIsActive(
  pathname: string,
  search: string,
  hash: string,
  which: PublicNavWhich,
): boolean {
  const sp = new URLSearchParams(search);
  switch (which) {
    case "home":
      return pathname === "/";
    case "browseAll":
      return pathname === "/browse" && !sp.has("sort");
    case "categories":
      return pathname === "/" && hash === "#categories";
    case "browseLatest":
      return pathname === "/browse" && sp.get("sort") === "latest";
    case "browseRecommended":
      return pathname === "/browse" && sp.get("sort") === "recommended";
    case "browsePopular":
      return pathname === "/browse" && sp.get("sort") === "popular";
    case "favorites":
      return pathname === "/favorites";
    case "wallet":
      return pathname === "/wallet";
    case "about":
      return pathname === "/about";
    default:
      return false;
  }
}

function navClassName(active: boolean) {
  return [
    "shrink-0 rounded-sm px-2 py-2 text-[13px] font-medium leading-none whitespace-nowrap no-underline outline-none transition-colors",
    "focus-visible:ring-2 focus-visible:ring-ark-gold/90 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg",
    active
      ? "text-ark-gold visited:text-ark-gold"
      : "text-[#d7d7dc] visited:text-[#d7d7dc] hover:text-ark-gold",
  ].join(" ");
}

export function PublicLayout() {
  const { t, lang, setLang } = useI18n();
  const { pathname, search, hash } = useLocation();
  const [open, setOpen] = useState(false);
  const [q, setQ] = useState("");
  const nav = useNavigate();

  const na = (which: PublicNavWhich) =>
    navIsActive(pathname, search, hash, which);

  const goSearch = () => {
    const s = q.trim();
    if (!s) return;
    nav(`/search?q=${encodeURIComponent(s)}`);
    setOpen(false);
  };

  return (
    <div className="min-h-full flex flex-col pb-20 md:pb-0">
      <header className="sticky top-0 z-40 border-b border-ark-line bg-ark-nav/98 backdrop-blur-md">
        <div className="mx-auto max-w-[1280px] px-4 py-[15px] min-[440px]:px-5 sm:px-6 md:px-9 xl:px-0">
          {/* Single row (md+): logo | scrollable nav (左對齊，可橫向滑動) | 搜尋 + 語言 */}
          <div className="flex h-10 items-center gap-2 lg:gap-4">
            <Link
              to="/"
              className="flex min-w-0 shrink-0 items-center gap-2.5 rounded-sm text-xl font-bold tracking-wide text-ark-gold outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
            >
              <ArkLogoMark className="h-10 w-10 shrink-0" />
              <span className="max-w-[7.125rem] truncate text-ark-gold sm:inline">
                {t("brand")}
              </span>
            </Link>

            <nav
              className="header-nav-scroll hidden min-w-0 flex-1 items-center justify-center gap-4 overflow-x-auto overflow-y-hidden py-1 min-[1200px]:flex lg:gap-5"
              aria-label={t("mainNav")}
            >
              <Link
                to="/"
                className={navClassName(na("home"))}
                aria-current={na("home") ? "page" : undefined}
              >
                {t("home")}
              </Link>
              <Link
                to="/browse"
                className={navClassName(na("browseAll"))}
                aria-current={na("browseAll") ? "page" : undefined}
              >
                {t("all")}
              </Link>
              <Link
                to="/#categories"
                className={navClassName(na("categories"))}
                aria-current={na("categories") ? "page" : undefined}
              >
                {t("categories")}
              </Link>
              <Link
                to="/browse?sort=latest"
                className={navClassName(na("browseLatest"))}
                aria-current={na("browseLatest") ? "page" : undefined}
              >
                {t("latest")}
              </Link>
              <Link
                to="/browse?sort=recommended"
                className={navClassName(na("browseRecommended"))}
                aria-current={na("browseRecommended") ? "page" : undefined}
              >
                {t("official")}
              </Link>
              <Link
                to="/browse?sort=popular"
                className={navClassName(na("browsePopular"))}
                aria-current={na("browsePopular") ? "page" : undefined}
              >
                {t("popular")}
              </Link>
              <Link
                to="/favorites"
                className={navClassName(na("favorites"))}
                aria-current={na("favorites") ? "page" : undefined}
              >
                {t("favorites")}
              </Link>
              <Link
                to="/wallet"
                className={navClassName(na("wallet"))}
                aria-current={na("wallet") ? "page" : undefined}
              >
                {t("wallet")}
              </Link>
            </nav>

            <div className="flex min-w-0 flex-1 items-center justify-end gap-2 min-[1200px]:flex-none">
              <div className="hidden h-10 min-w-0 flex-1 items-center gap-2 rounded-full border border-ark-line bg-[#1a1b20] py-2 pl-3 pr-3 shadow-inner md:flex min-[1200px]:w-44 min-[1200px]:flex-none lg:pr-4 xl:w-52">
                <SearchIcon size={16} className="shrink-0 text-[#c6c7cf]" />
                <input
                  value={q}
                  onChange={(e) => setQ(e.target.value)}
                  onKeyDown={(e) => e.key === "Enter" && goSearch()}
                  placeholder={t("searchPlaceholder")}
                  className="min-w-0 flex-1 rounded-md bg-transparent text-sm text-neutral-200 outline-none placeholder:text-[#777985] focus-visible:ring-2 focus-visible:ring-ark-gold/60 focus-visible:ring-offset-2 focus-visible:ring-offset-[#1a1b20]"
                />
              </div>
              <div className="hidden h-10 items-center gap-2 rounded-full border border-ark-line bg-[#1a1b20] px-2 py-2 md:flex lg:px-3">
                <Globe
                  size={16}
                  className="shrink-0 text-ark-gold/80"
                  aria-hidden
                />
                <select
                  className="max-w-[6.5rem] cursor-pointer truncate rounded-md bg-transparent text-sm text-neutral-200 outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 lg:max-w-none"
                  value={lang}
                  onChange={(e) => setLang(e.target.value as Lang)}
                  aria-label={t("langLabel")}
                >
                  <option value="zh-TW">繁體中文</option>
                  <option value="zh-CN">简体中文</option>
                  <option value="en">English</option>
                </select>
              </div>
              <button
                type="button"
                className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-ark-line bg-[#1a1b20] text-neutral-200 outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg min-[1200px]:hidden"
                onClick={() => setOpen((v) => !v)}
                aria-label="menu"
              >
                {open ? <X size={18} /> : <Menu size={18} />}
              </button>
            </div>
          </div>
        </div>

        {open ? (
          <div className="grid gap-2 border-t border-ark-line bg-ark-nav px-4 py-3 min-[440px]:px-5 sm:px-6 md:px-9 min-[1200px]:hidden">
            <div className="mb-1 flex items-center gap-2 rounded-full border border-ark-line bg-[#1a1b20] px-3 py-2">
              <SearchIcon size={16} className="shrink-0 text-[#c6c7cf]" />
              <input
                value={q}
                onChange={(e) => setQ(e.target.value)}
                onKeyDown={(e) => e.key === "Enter" && goSearch()}
                placeholder={t("searchPlaceholder")}
                className="flex-1 bg-transparent text-sm outline-none placeholder:text-[#777985]"
              />
            </div>
            <Link
              to="/"
              className={navClassName(na("home"))}
              aria-current={na("home") ? "page" : undefined}
              onClick={() => setOpen(false)}
            >
              {t("home")}
            </Link>
            <Link
              to="/browse"
              className={navClassName(na("browseAll"))}
              aria-current={na("browseAll") ? "page" : undefined}
              onClick={() => setOpen(false)}
            >
              {t("all")}
            </Link>
            <Link
              to="/#categories"
              className={navClassName(na("categories"))}
              aria-current={na("categories") ? "page" : undefined}
              onClick={() => setOpen(false)}
            >
              {t("categories")}
            </Link>
            <Link
              to="/favorites"
              className={navClassName(na("favorites"))}
              aria-current={na("favorites") ? "page" : undefined}
              onClick={() => setOpen(false)}
            >
              {t("favorites")}
            </Link>
            <Link
              to="/browse?sort=latest"
              className={navClassName(na("browseLatest"))}
              aria-current={na("browseLatest") ? "page" : undefined}
              onClick={() => setOpen(false)}
            >
              {t("latest")}
            </Link>
            <Link
              to="/browse?sort=recommended"
              className={navClassName(na("browseRecommended"))}
              aria-current={na("browseRecommended") ? "page" : undefined}
              onClick={() => setOpen(false)}
            >
              {t("official")}
            </Link>
            <Link
              to="/browse?sort=popular"
              className={navClassName(na("browsePopular"))}
              aria-current={na("browsePopular") ? "page" : undefined}
              onClick={() => setOpen(false)}
            >
              {t("popular")}
            </Link>
            <Link
              to="/wallet"
              className={navClassName(na("wallet"))}
              aria-current={na("wallet") ? "page" : undefined}
              onClick={() => setOpen(false)}
            >
              {t("wallet")}
            </Link>
            <Link
              to="/about"
              className={navClassName(na("about"))}
              aria-current={na("about") ? "page" : undefined}
              onClick={() => setOpen(false)}
            >
              {t("footerAbout")}
            </Link>
          </div>
        ) : null}
      </header>

      <main className="mx-auto w-full max-w-[1280px] flex-1 px-4 py-6 min-[440px]:px-5 sm:px-6 md:px-9 md:py-10 xl:px-0">
        <Outlet />
      </main>

      <footer className="mt-auto border-t border-ark-line bg-ark-nav/90 mb-20 md:mb-0">
        <div className="mx-auto flex max-w-[1280px] flex-wrap gap-x-6 gap-y-2 px-4 py-6 text-sm text-neutral-400 min-[440px]:px-5 sm:px-6 md:px-9 xl:px-0">
          <Link
            to="/about"
            className="rounded-sm outline-none hover:text-ark-gold2 focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
          >
            {t("footerAbout")}
          </Link>
          <Link
            to="/wallet"
            className="rounded-sm outline-none hover:text-ark-gold2 focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
          >
            {t("profile")}
          </Link>
          {import.meta.env.VITE_DISABLE_ADMIN !== "true" ? (
            <Link
              to={`${adminUiPrefix}/login`}
              className="rounded-sm outline-none hover:text-ark-gold2 focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
            >
              {t("footerAdminLogin")}
            </Link>
          ) : null}
        </div>
      </footer>

      <nav className="md:hidden fixed bottom-0 inset-x-0 z-40 border-t border-ark-line bg-ark-nav/95 backdrop-blur">
        <div className="grid grid-cols-4 gap-1 px-1 py-2 text-center text-[11px]">
          <BottomNavIcon
            to="/"
            label={t("home")}
            icon="home"
            active={pathname === "/"}
          />
          <BottomNavIcon
            to="/browse"
            label={t("all")}
            icon="document"
            active={
              pathname === "/browse" && !new URLSearchParams(search).get("sort")
            }
          />
          <BottomNavIcon
            to="/favorites"
            label={t("favorites")}
            icon="heart"
            active={pathname === "/favorites"}
          />
          <BottomNavIcon
            to="/browse?sort=latest"
            label={t("latest")}
            icon="update"
            active={
              pathname === "/browse" &&
              new URLSearchParams(search).get("sort") === "latest"
            }
          />
        </div>
      </nav>
    </div>
  );
}

const NAVBAR_ICON_BASE = "/assets/ark-library/navbar";

function BottomNavIcon({
  to,
  label,
  icon,
  active,
}: {
  to: string;
  label: string;
  icon: "home" | "document" | "heart" | "update";
  active: boolean;
}) {
  const src = active
    ? `${NAVBAR_ICON_BASE}/${icon}-active.svg`
    : `${NAVBAR_ICON_BASE}/${icon}-inactive.svg`;
  return (
    <Link
      to={to}
      className={[
        "flex flex-col items-center gap-1 rounded-lg py-1 outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg",
        active ? "text-ark-gold" : "text-neutral-400",
      ].join(" ")}
    >
      <img
        src={src}
        alt=""
        className={[
          "mx-auto h-7 w-7 object-contain",
          active ? "opacity-100" : "opacity-55",
        ].join(" ")}
        width={28}
        height={28}
        loading="lazy"
        decoding="async"
      />
      <span className="leading-tight">{label}</span>
    </Link>
  );
}