frontend-admin / Daocheng-Yading

import { useState, useEffect } from "react";
import { Outlet, Link, useLocation } from "react-router";
import type { LucideIcon } from "lucide-react";
import {
  Menu,
  Home,
  Share2,
  Compass,
  Library,
  Globe,
  BookOpen,
  Wrench,
} from "lucide-react";
import { TibetanPattern } from "./TibetanPattern";
import { fetchAndApplyKioskBundle } from "../api/kioskApi";
import { DEFAULT_HOME_BG_URLS, KIOSK_EVENT, loadHomeBackgrounds } from "../kioskStorage";
import { useI18n } from "../i18n";

const BG_ROTATE_MS = 7000;

function preloadImages(urls: readonly string[]) {
  urls.forEach((src) => {
    const img = new Image();
    img.src = src;
  });
}

export function Layout() {
  const { t } = useI18n();
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [homeBgIndex, setHomeBgIndex] = useState(0);
  const [homeBackgrounds, setHomeBackgrounds] = useState(loadHomeBackgrounds);
  const location = useLocation();
  const isHome = location.pathname === "/";
  const isTourPage = location.pathname === "/tour";
  const isSearchPage = location.pathname === "/search";
  const isGuidePage = location.pathname === "/guide";
  const isWebPage = location.pathname === "/web";
  const isAdminPage = location.pathname === "/admin";
  const isViewportLockPage = isTourPage || isSearchPage || isGuidePage || isWebPage;
  /** 顶栏品牌标题全站统一（非首页顶栏显示） */
  const headerBrandTitle = t("brand.title");

  useEffect(() => {
    const sync = () => {
      setHomeBackgrounds(loadHomeBackgrounds());
    };
    window.addEventListener(KIOSK_EVENT, sync);
    return () => {
      window.removeEventListener(KIOSK_EVENT, sync);
    };
  }, []);

  /** 启动时从后端拉取 bundle 写入内存（不写 localStorage；失败时首页背景等仍用内置默认图） */
  useEffect(() => {
    let cancelled = false;
    void (async () => {
      try {
        await fetchAndApplyKioskBundle();
      } catch (e) {
        if (!cancelled) {
          console.warn("[kiosk] 无法从后端拉取 bundle", e);
        }
      }
    })();
    return () => {
      cancelled = true;
    };
  }, []);

  useEffect(() => {
    preloadImages(homeBackgrounds);
  }, [homeBackgrounds]);

  useEffect(() => {
    setHomeBgIndex((i) =>
      homeBackgrounds.length === 0 ? 0 : Math.min(i, homeBackgrounds.length - 1)
    );
  }, [homeBackgrounds.length]);

  useEffect(() => {
    if (!isHome) return;
    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
    if (reduceMotion.matches) return;

    const n = homeBackgrounds.length;
    if (n <= 1) return;
    const interval = window.setInterval(() => {
      setHomeBgIndex((prev) => (prev + 1) % n);
    }, BG_ROTATE_MS);
    return () => window.clearInterval(interval);
  }, [isHome, homeBackgrounds.length]);

  useEffect(() => {
    const root = document.documentElement;
    if (isViewportLockPage) {
      root.classList.add("app-viewport-lock");
    } else {
      root.classList.remove("app-viewport-lock");
    }
    return () => root.classList.remove("app-viewport-lock");
  }, [isViewportLockPage]);

  /** 与首页六块入口顺序、文案一致；首页不含「首页」项，顶栏保留首页便于返回 */
  const navItems: (
    | { id: string; path: string; label: string; icon: LucideIcon }
    | { id: string; href: string; label: string; icon: LucideIcon; external: true }
  )[] = [
    { id: "home", path: "/", label: t("nav.home"), icon: Home },
    { id: "tour", path: "/tour", label: t("nav.tour"), icon: Share2 },
    { id: "planetarium", path: "/planetarium", label: t("nav.planetarium"), icon: Compass },
    { id: "wiki", path: "/search", label: t("nav.wiki"), icon: Library },
    { id: "web", path: "/web", label: t("nav.web"), icon: Globe },
    { id: "guide", path: "/guide", label: t("nav.guide"), icon: BookOpen },
    { id: "maintain", path: "/admin", label: t("nav.maintain"), icon: Wrench },
  ];

  return (
    <div
      className={
        isViewportLockPage
          ? "relative flex h-full min-h-0 w-full max-w-[100%] flex-1 flex-col overflow-hidden"
          : isAdminPage
            ? "relative flex h-[100dvh] max-h-[100dvh] min-h-0 w-full max-w-[100%] flex-1 flex-col overflow-x-hidden overflow-y-hidden"
            : "layout-min-h-touch relative min-h-[100dvh] min-h-screen w-full min-w-0 max-w-[100%] overflow-x-hidden"
      }
    >
      {/* 动态背景层：首页多图轮播；其余页固定首页首张 + 与操作指南同款渐变 */}
      <div className="fixed inset-0 z-0" aria-hidden>
        {isHome ? (
          <>
            {(homeBackgrounds.length ? homeBackgrounds : [...DEFAULT_HOME_BG_URLS]).map((bg, index) => (
              <div
                key={`${bg}-${index}`}
                className="pointer-events-none absolute inset-0 bg-cover bg-center bg-no-repeat transition-opacity duration-2000 ease-in-out"
                style={{
                  backgroundImage: `url(${bg})`,
                  opacity: homeBgIndex === index ? 1 : 0,
                  zIndex: homeBgIndex === index ? 1 : 0,
                }}
              />
            ))}
            <div className="pointer-events-none absolute inset-0 z-[2] bg-gradient-to-b from-slate-950/55 via-blue-950/75 to-black/92" />
          </>
        ) : (
          <>
            <div
              className="pointer-events-none absolute inset-0 bg-cover bg-center bg-no-repeat"
              style={{
                backgroundImage: `url(${(homeBackgrounds[0] ?? DEFAULT_HOME_BG_URLS[0])})`,
              }}
            />
            <div className="pointer-events-none absolute inset-0 z-[2] bg-gradient-to-b from-slate-950/55 via-blue-950/75 to-black/92" />
          </>
        )}
      </div>

      {/* 藏式装饰纹理叠层（全站隐藏，与操作指南所用背景风格一致） */}
      <div className="pointer-events-none fixed inset-0 z-0 text-sky-300 opacity-0 transition-opacity duration-500">
        <TibetanPattern />
      </div>

      {/* 主容器：共享天文台为固定一屏高度；其余页至少一屏高 */}
      <div
        className={
          isViewportLockPage || isAdminPage
            ? "relative z-10 flex min-h-0 w-full min-w-0 flex-1 flex-col overflow-hidden"
            : "layout-min-h-touch relative z-10 flex min-h-[100dvh] min-h-screen w-full min-w-0 flex-col"
        }
      >
        {/* 顶部导航栏 */}
        <header
          className={`shrink-0 pt-[env(safe-area-inset-top,0px)] ${
            isHome
              ? "border-none bg-transparent shadow-none backdrop-blur-none"
              : "border-b border-white/10 bg-blue-950/40 backdrop-blur-md"
          }`}
        >
          {!isHome ? (
            <div className="px-4 py-3 sm:px-6 sm:py-3.5 lg:px-8 lg:py-4 landscape:py-2 landscape:lg:py-3">
              <div className="flex items-center justify-between gap-2 pl-[max(0px,env(safe-area-inset-left,0px))] pr-[max(0px,env(safe-area-inset-right,0px))] sm:gap-4">
                <div className="flex min-w-0 items-center gap-2 sm:gap-4">
                  <button
                    onClick={() => setSidebarOpen(!sidebarOpen)}
                    className="shrink-0 rounded-lg p-2 transition-colors hover:bg-white/10 lg:hidden"
                    type="button"
                    aria-label="打开菜单"
                  >
                    <Menu className="h-6 w-6 text-white" />
                  </button>
                  <h1 className="min-w-0 truncate text-lg font-bold text-white sm:text-xl lg:text-2xl">
                    {headerBrandTitle}
                  </h1>
                </div>

                <nav className="hidden shrink-0 flex-wrap items-center justify-end gap-1 lg:ml-auto lg:flex xl:gap-2">
                  {navItems.map((item) => {
                    const Icon = item.icon;
                    const isActive =
                      "path" in item && location.pathname === item.path;
                    const className = `flex items-center gap-1.5 rounded-lg px-3 py-2 text-sm transition-all xl:gap-2 xl:px-4 xl:py-2.5 xl:text-base ${
                      isActive
                        ? "bg-sky-500/90 text-white shadow-lg shadow-sky-500/30"
                        : "bg-transparent text-white hover:bg-white/10"
                    }`;
                    if ("external" in item && item.external) {
                      return (
                        <a
                          key={item.id}
                          href={item.href}
                          target="_blank"
                          rel="noopener noreferrer"
                          className={className}
                        >
                          <Icon className="h-5 w-5 shrink-0" />
                          <span className="font-medium">{item.label}</span>
                        </a>
                      );
                    }
                    return (
                      <Link key={item.id} to={item.path} className={className}>
                        <Icon className="h-5 w-5 shrink-0" />
                        <span className="font-medium">{item.label}</span>
                      </Link>
                    );
                  })}
                </nav>
              </div>
            </div>
          ) : null}
        </header>

        {/* 移动端侧边栏 */}
        {sidebarOpen && (
          <div
            className={`fixed inset-0 z-50 ${isHome ? "" : "lg:hidden"}`}
          >
            <div
              className="absolute inset-0 bg-black/60 backdrop-blur-sm"
              onClick={() => setSidebarOpen(false)}
            />
            <div className="absolute bottom-0 left-0 top-0 flex w-[min(100%,20rem)] max-w-[85vw] flex-col border-r border-white/10 bg-blue-950/95 p-4 pt-[max(1.5rem,env(safe-area-inset-top,0px))] backdrop-blur-xl sm:w-80 sm:p-6">
              <div className="flex items-center justify-between mb-8">
                <h2 className="text-xl font-bold text-white">导航菜单</h2>
                <button
                  onClick={() => setSidebarOpen(false)}
                  className="p-2 rounded-lg hover:bg-white/10 text-white"
                >
                  ×
                </button>
              </div>
              <nav className="space-y-2">
                {navItems.map((item) => {
                  const Icon = item.icon;
                  const isActive =
                    "path" in item && location.pathname === item.path;
                  const className = `flex items-center gap-3 px-4 py-4 rounded-lg transition-all ${
                    isActive
                      ? "bg-sky-500/90 text-white"
                      : "bg-transparent text-white hover:bg-white/10"
                  }`;
                  if ("external" in item && item.external) {
                    return (
                      <a
                        key={item.id}
                        href={item.href}
                        target="_blank"
                        rel="noopener noreferrer"
                        onClick={() => setSidebarOpen(false)}
                        className={className}
                      >
                        <Icon className="h-6 w-6 shrink-0" />
                        <span className="font-medium text-lg">{item.label}</span>
                      </a>
                    );
                  }
                  return (
                    <Link
                      key={item.id}
                      to={item.path}
                      onClick={() => setSidebarOpen(false)}
                      className={className}
                    >
                      <Icon className="h-6 w-6 shrink-0" />
                      <span className="font-medium text-lg">{item.label}</span>
                    </Link>
                  );
                })}
              </nav>
            </div>
          </div>
        )}

        {/* 页面内容；共享天文台单屏布局：占满剩余高度且不出现主区域整页滚动 */}
        <main
          className={`flex min-h-0 min-w-0 w-full flex-1 flex-col ${
            isHome ? "pb-[env(safe-area-inset-bottom,0px)]" : ""
          } ${
            isViewportLockPage || isAdminPage
              ? "overflow-x-hidden overflow-y-hidden"
              : "overflow-x-hidden overflow-y-auto"
          }`}
        >
          <div
            className={`w-full min-w-0 max-w-full ${
              isViewportLockPage || isAdminPage
                ? "flex min-h-0 flex-1 flex-col"
                : "my-auto shrink-0"
            }`}
          >
            <Outlet />
          </div>
        </main>
      </div>
    </div>
  );
}