import { useState, useMemo, useCallback, useEffect, useRef, type ChangeEvent, type FormEvent, type ReactNode } from "react";
import {
  Settings,
  Image,
  Video,
  BookOpen,
  Search,
  Database,
  Save,
  Trash2,
  Plus,
  RotateCcw,
  Languages,
  Link2,
  LogOut,
  LockKeyhole,
  X,
} from "lucide-react";
import { DEFAULT_GUIDE_LOCALES } from "../guideContent";
import {
  DEFAULT_HOME_BG_URLS,
  DEFAULT_KNOWLEDGE_ENTRIES,
  emitKioskUpdate,
  loadGuideOverrides,
  loadHomeBackgrounds,
  loadKnowledgeEntries,
  loadVideoSourceConfig,
  loadWelcome,
  mergeGuideLocales,
  resetVideoSourceConfig,
  saveGuideOverrides,
  saveHomeBackgrounds,
  saveKnowledgeEntries,
  saveVideoSourceConfig,
  saveWelcome,
  type GuideOverrides,
  type KnowledgeEntry,
  type VideoProtocol,
  type VideoSourceConfig,
  type WelcomeMessages,
} from "../kioskStorage";
import { PAGE_CONTENT_INSET } from "../pageContentInset";
import {
  pushGuideToServer,
  pushHomeBackgroundsToServer,
  pushKnowledgeToServer,
  pushWelcomeToServer,
  shouldSyncAdminToServer,
} from "../api/kioskApi";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../components/ui/tabs";
import { toast } from "sonner";

type AdminTab =
  | "background"
  | "welcome"
  | "guide"
  | "query"
  | "knowledge"
  | "stream";

/** 系统维护「信息查询」列表最多展示条数 */
const QUERY_LIST_PREVIEW_MAX = 6;

const WELCOME_DEFAULTS: WelcomeMessages = {
  "zh-CN": "欢迎来到稻城天文台信息查询",
  en: "Welcome to the Daocheng Observatory Information Query",
  bo: "འདབ་ཆུ་གནམ་གཟིགས་ལྟེ་གནས་ཀྱི་ཆ་འཕྲིན་འཚོལ་ཞིབ་ལ་ཕེབས་པར་དགའ་བསུ་ཞུ།",
};

const ADMIN_AUTH_KEY = "kiosk_admin_auth_v1";
const ADMIN_USERNAME = "admin";
const ADMIN_PASSWORD = "admin@123";

function linesToItems(s: string): string[] {
  return s
    .split(/\r?\n/)
    .map((l) => l.trim())
    .filter(Boolean);
}

function itemsToLines(items: string[]): string {
  return items.join("\n");
}

export function AdminPage() {
  const [activeTab, setActiveTab] = useState<AdminTab>("background");
  const [isAuthed, setIsAuthed] = useState(() => {
    try {
      return sessionStorage.getItem(ADMIN_AUTH_KEY) === "1";
    } catch {
      return false;
    }
  });
  const [loginUser, setLoginUser] = useState("");
  const [loginPass, setLoginPass] = useState("");

  const [homeBgUrls, setHomeBgUrls] = useState<string[]>(() => loadHomeBackgrounds());
  const homeBgFileRef = useRef<HTMLInputElement>(null);
  const homeBgPickRef = useRef<{ kind: "append" } | { kind: "replace"; index: number }>({
    kind: "append",
  });
  const pairCoverFileRef = useRef<HTMLInputElement>(null);
  const pairVideoFileRef = useRef<HTMLInputElement>(null);

  const [welcome, setWelcome] = useState<WelcomeMessages>(() =>
    loadWelcome(WELCOME_DEFAULTS)
  );

  const [guideZhTouch, setGuideZhTouch] = useState("");
  const [guideZhSoft, setGuideZhSoft] = useState("");
  const [guideEnTouch, setGuideEnTouch] = useState("");
  const [guideEnSoft, setGuideEnSoft] = useState("");
  const [guideBoTouch, setGuideBoTouch] = useState("");
  const [guideBoSoft, setGuideBoSoft] = useState("");
  const [guideEditLang, setGuideEditLang] = useState<"zh-CN" | "en" | "bo">("zh-CN");

  const hydrateGuideEditors = useCallback(() => {
    const merged = mergeGuideLocales(DEFAULT_GUIDE_LOCALES, loadGuideOverrides());
    const zh = merged.find((l) => l.htmlLang === "zh-CN")!;
    const en = merged.find((l) => l.htmlLang === "en")!;
    const bo = merged.find((l) => l.htmlLang === "bo")!;
    setGuideZhTouch(itemsToLines(zh.touchItems));
    setGuideZhSoft(itemsToLines(zh.softwareItems));
    setGuideEnTouch(itemsToLines(en.touchItems));
    setGuideEnSoft(itemsToLines(en.softwareItems));
    setGuideBoTouch(itemsToLines(bo.touchItems));
    setGuideBoSoft(itemsToLines(bo.softwareItems));
  }, []);

  useEffect(() => {
    hydrateGuideEditors();
  }, [hydrateGuideEditors]);

  const [queryKeyword, setQueryKeyword] = useState("");
  const [queryType, setQueryType] = useState("全部");
  const [queryTag, setQueryTag] = useState("全部");
  const [knowledgeList, setKnowledgeList] = useState<KnowledgeEntry[]>(() =>
    loadKnowledgeEntries()
  );

  const [pairTitle, setPairTitle] = useState("");
  const [pairType, setPairType] = useState<"文字" | "图片" | "视频">("文字");
  const [pairContent, setPairContent] = useState("");
  const [pairTags, setPairTags] = useState("");
  const [pairImage, setPairImage] = useState("");
  const [pairVideo, setPairVideo] = useState("");
  const [pairDate, setPairDate] = useState(() =>
    new Date().toISOString().slice(0, 10)
  );
  const [videoSource, setVideoSource] = useState<VideoSourceConfig>(() =>
    loadVideoSourceConfig()
  );

  const queryFiltered = useMemo(() => {
    return knowledgeList.filter((item) => {
      const kw = queryKeyword.trim().toLowerCase();
      const okKw =
        kw === "" ||
        item.title.toLowerCase().includes(kw) ||
        item.content.toLowerCase().includes(kw);
      const okType = queryType === "全部" || item.type === queryType;
      const okTag = queryTag === "全部" || item.tags.includes(queryTag);
      return okKw && okType && okTag;
    });
  }, [knowledgeList, queryKeyword, queryType, queryTag]);

  const queryListPreview = useMemo(
    () => queryFiltered.slice(0, QUERY_LIST_PREVIEW_MAX),
    [queryFiltered]
  );

  const queryTags = useMemo(() => {
    const s = new Set<string>();
    knowledgeList.forEach((k) => k.tags.forEach((t) => s.add(t)));
    return ["全部", ...Array.from(s).sort()];
  }, [knowledgeList]);

  const saveBackgrounds = async () => {
    const home = homeBgUrls.filter((u) => u.trim().length > 0);
    const urls = home.length ? home : [...DEFAULT_HOME_BG_URLS];
    try {
      saveHomeBackgrounds(urls);
      toast.success("保存成功");
      if (shouldSyncAdminToServer()) {
        const ok = await pushHomeBackgroundsToServer(urls);
        if (!ok) toast.error("已保存到本地，同步服务器失败");
      }
    } catch {
      window.alert("保存失败：图片数据可能过大，请减少张数或压缩图片后再试。");
    }
  };

  const resetBackgrounds = () => {
    localStorage.removeItem("kiosk_bg_home_urls_v1");
    setHomeBgUrls([...DEFAULT_HOME_BG_URLS]);
    emitKioskUpdate();
  };

  const openHomeBgPicker = (target: { kind: "append" } | { kind: "replace"; index: number }) => {
    homeBgPickRef.current = target;
    homeBgFileRef.current?.click();
  };

  const onHomeBgFileChange = (e: ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    e.target.value = "";
    if (!file || !file.type.startsWith("image/")) return;
    const reader = new FileReader();
    reader.onload = () => {
      const dataUrl = reader.result as string;
      if (typeof dataUrl !== "string") return;
      const t = homeBgPickRef.current;
      if (t.kind === "append") {
        setHomeBgUrls((prev) => [...prev, dataUrl]);
      } else {
        setHomeBgUrls((prev) => {
          const next = [...prev];
          if (t.index >= 0 && t.index < next.length) next[t.index] = dataUrl;
          return next;
        });
      }
    };
    reader.readAsDataURL(file);
  };

  const onPairCoverFileChange = (e: ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    e.target.value = "";
    if (!file || !file.type.startsWith("image/")) return;
    const reader = new FileReader();
    reader.onload = () => {
      const dataUrl = reader.result as string;
      if (typeof dataUrl === "string") setPairImage(dataUrl);
    };
    reader.readAsDataURL(file);
  };

  const onPairVideoFileChange = (e: ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    e.target.value = "";
    if (!file || !file.type.startsWith("video/")) return;
    const reader = new FileReader();
    reader.onload = () => {
      const dataUrl = reader.result as string;
      if (typeof dataUrl === "string") setPairVideo(dataUrl);
    };
    reader.readAsDataURL(file);
  };

  const removeHomeBgAt = (index: number) => {
    setHomeBgUrls((prev) => prev.filter((_, i) => i !== index));
  };

  const saveWelcomeClick = async () => {
    saveWelcome(welcome);
    toast.success("保存成功");
    if (shouldSyncAdminToServer()) {
      const ok = await pushWelcomeToServer(welcome);
      if (!ok) toast.error("已保存到本地，同步服务器失败");
    }
  };

  const resetWelcome = () => {
    localStorage.removeItem("kiosk_welcome_v1");
    setWelcome({ ...WELCOME_DEFAULTS });
    emitKioskUpdate();
  };

  const saveGuideClick = async () => {
    const overrides: GuideOverrides = {
      "zh-CN": {
        touchItems: linesToItems(guideZhTouch),
        softwareItems: linesToItems(guideZhSoft),
      },
      en: {
        touchItems: linesToItems(guideEnTouch),
        softwareItems: linesToItems(guideEnSoft),
      },
      bo: {
        touchItems: linesToItems(guideBoTouch),
        softwareItems: linesToItems(guideBoSoft),
      },
    };
    saveGuideOverrides(overrides);
    toast.success("保存成功");
    if (shouldSyncAdminToServer()) {
      const ok = await pushGuideToServer(overrides);
      if (!ok) toast.error("已保存到本地，同步服务器失败");
    }
  };

  const resetGuide = () => {
    localStorage.removeItem("kiosk_guide_overrides_v1");
    hydrateGuideEditors();
    emitKioskUpdate();
  };

  const deleteKnowledge = async (id: string) => {
    const next = knowledgeList.filter((k) => k.id !== id);
    setKnowledgeList(next);
    saveKnowledgeEntries(next);
    if (shouldSyncAdminToServer()) {
      const ok = await pushKnowledgeToServer(next);
      if (!ok) toast.error("已保存到本地，同步服务器失败");
    }
  };

  const addKnowledge = async () => {
    const title = pairTitle.trim();
    if (!title) return;
    const tags = pairTags
      .split(/[,，;；]/)
      .map((t) => t.trim())
      .filter(Boolean);
    const row: KnowledgeEntry = {
      id: crypto.randomUUID(),
      type: pairType,
      title,
      content: pairContent.trim() || "—",
      date: pairDate,
      tags: tags.length ? tags : ["未分类"],
      image: pairImage.trim() || undefined,
      videoUrl: pairVideo.trim() || undefined,
    };
    const next = [row, ...knowledgeList];
    try {
      saveKnowledgeEntries(next);
    } catch {
      window.alert("保存失败：媒体数据可能过大，请压缩图片或缩短视频后再试。");
      return;
    }
    setKnowledgeList(next);
    toast.success("保存成功");
    if (shouldSyncAdminToServer()) {
      const ok = await pushKnowledgeToServer(next);
      if (!ok) toast.error("已保存到本地，同步服务器失败");
    }
    setPairTitle("");
    setPairContent("");
    setPairTags("");
    setPairImage("");
    setPairVideo("");
  };

  const resetKnowledgeDb = async () => {
    localStorage.removeItem("kiosk_knowledge_db_v1");
    const fresh = DEFAULT_KNOWLEDGE_ENTRIES.map((e) => ({ ...e }));
    saveKnowledgeEntries(fresh);
    setKnowledgeList(fresh);
    if (shouldSyncAdminToServer()) {
      const ok = await pushKnowledgeToServer(fresh);
      if (!ok) toast.error("已保存到本地，同步服务器失败");
    }
  };

  const saveVideoSource = () => {
    const next: VideoSourceConfig = {
      protocol: videoSource.protocol,
      url: videoSource.url.trim(),
      note: videoSource.note.trim(),
    };
    saveVideoSourceConfig(next);
    setVideoSource(next);
    toast.success("视频源已保存");
  };

  const resetVideoSource = () => {
    resetVideoSourceConfig();
    setVideoSource(loadVideoSourceConfig());
    toast.success("已恢复默认（未配置）");
  };

  const handleLogin = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (loginUser.trim() === ADMIN_USERNAME && loginPass === ADMIN_PASSWORD) {
      try {
        sessionStorage.setItem(ADMIN_AUTH_KEY, "1");
      } catch {
        // ignore storage failures
      }
      setIsAuthed(true);
      setLoginPass("");
      toast.success("登录成功");
      return;
    }
    toast.error("账号或密码错误");
  };

  const logoutAdmin = () => {
    try {
      sessionStorage.removeItem(ADMIN_AUTH_KEY);
    } catch {
      // ignore storage failures
    }
    setIsAuthed(false);
    setLoginPass("");
    toast.success("已退出登录");
  };

  const sidebarBtn = (id: AdminTab, icon: ReactNode, label: string) => (
    <button
      type="button"
      onClick={() => setActiveTab(id)}
      className={`flex w-full items-center gap-2.5 rounded-lg px-3 py-2.5 text-left text-sm font-medium transition-all sm:gap-3 sm:px-4 sm:py-3 ${
        activeTab === id
          ? "bg-sky-500/20 text-sky-200 ring-1 ring-sky-400/45"
          : "text-blue-200 hover:bg-white/5 hover:text-white"
      }`}
    >
      <span className="shrink-0 opacity-90">{icon}</span>
      <span className="min-w-0 leading-snug">{label}</span>
    </button>
  );

  const labelCls = "mb-1.5 block text-xs font-medium text-blue-200 sm:text-sm";
  const inputCls =
    "w-full rounded-lg border border-white/20 bg-white/5 px-3 py-2 text-sm text-white placeholder-blue-500/80 focus:border-sky-400 focus:outline-none focus:ring-1 focus:ring-sky-400/30 sm:px-4 sm:py-2.5 sm:text-base";
  const textareaCls =
    "min-h-[120px] w-full rounded-lg border border-white/20 bg-white/5 px-3 py-2 font-mono text-xs leading-relaxed text-white placeholder-blue-500/80 focus:border-sky-400 focus:outline-none focus:ring-1 focus:ring-sky-400/30 sm:min-h-[140px] sm:px-4 sm:py-2.5 sm:text-sm";

  if (!isAuthed) {
    return (
      <div
        className={`flex min-h-0 w-full min-w-0 max-w-full flex-1 flex-col ${PAGE_CONTENT_INSET}`}
      >
        <div className="mb-4 shrink-0 sm:mb-6">
          <h1 className="mb-1 flex shrink-0 items-center gap-2 text-xl font-bold text-white sm:text-2xl">
            <Settings className="h-6 w-6 shrink-0 text-sky-400" />
            系统维护
          </h1>
        </div>
        <div className="mx-auto w-full max-w-md rounded-xl border border-white/20 bg-white/10 p-4 backdrop-blur-xl sm:p-6">
          <h2 className="mb-2 flex items-center gap-2 text-lg font-semibold text-white">
            <LockKeyhole className="h-5 w-5 text-sky-300" />
            管理员登录
          </h2>
          <p className="mb-4 text-sm text-blue-200">
            请输入账号与密码后进入系统维护页面。
          </p>
          <form className="space-y-3" onSubmit={handleLogin}>
            <div>
              <label className={labelCls}>账号</label>
              <input
                className={inputCls}
                value={loginUser}
                onChange={(e) => setLoginUser(e.target.value)}
                autoComplete="username"
                placeholder="请输入账号"
              />
            </div>
            <div>
              <label className={labelCls}>密码</label>
              <input
                type="password"
                className={inputCls}
                value={loginPass}
                onChange={(e) => setLoginPass(e.target.value)}
                autoComplete="current-password"
                placeholder="请输入密码"
              />
            </div>
            <button
              type="submit"
              className="flex w-full items-center justify-center gap-2 rounded-lg bg-sky-500/90 px-4 py-2 text-sm font-medium text-blue-950 hover:bg-sky-400"
            >
              <LockKeyhole className="h-4 w-4" />
              登录
            </button>
          </form>
        </div>
      </div>
    );
  }

  return (
    <div
      className={`flex min-h-0 w-full min-w-0 max-w-full flex-1 flex-col ${PAGE_CONTENT_INSET}`}
    >
      <div className="mb-4 flex shrink-0 items-center justify-between gap-3 sm:mb-6">
        <h1 className="mb-1 flex shrink-0 items-center gap-2 text-xl font-bold text-white sm:text-2xl">
          <Settings className="h-6 w-6 shrink-0 text-sky-400" />
          系统维护
        </h1>
        <button
          type="button"
          onClick={logoutAdmin}
          className="inline-flex items-center gap-1.5 rounded-lg border border-white/20 bg-white/10 px-3 py-1.5 text-xs text-white hover:bg-white/15 sm:text-sm"
        >
          <LogOut className="h-4 w-4" />
          退出登录
        </button>
      </div>

      <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border border-white/20 bg-white/10 backdrop-blur-xl md:flex-row">
        <nav
          className="flex shrink-0 flex-col gap-1 border-b border-white/10 p-3 sm:p-4 md:h-full md:w-[13.5rem] md:min-h-0 md:overflow-y-auto md:border-b-0 md:border-r md:py-5"
          aria-label="系统维护分区"
        >
          {sidebarBtn("background", <Image className="h-4 w-4" />, "背景更换")}
          {sidebarBtn("welcome", <Languages className="h-4 w-4" />, "欢迎词")}
          {sidebarBtn("guide", <BookOpen className="h-4 w-4" />, "操作指南")}
          {sidebarBtn("query", <Search className="h-4 w-4" />, "信息查询")}
          {sidebarBtn("knowledge", <Database className="h-4 w-4" />, "天文信息配对")}
          {sidebarBtn("stream", <Link2 className="h-4 w-4" />, "视频源配置")}
        </nav>

        <div className="min-h-0 min-w-0 flex-1 overflow-y-auto overscroll-y-contain p-4 sm:p-6 [-webkit-overflow-scrolling:touch]">
        {activeTab === "background" && (
          <div className="space-y-6">
            <label htmlFor="admin-home-bg-file" className="sr-only">
              选择首页背景图片文件
            </label>
            <input
              id="admin-home-bg-file"
              ref={homeBgFileRef}
              type="file"
              accept="image/*"
              className="sr-only"
              onChange={onHomeBgFileChange}
            />
            <p className="text-sm text-blue-200">
              上传的图片按格子顺序轮播（先添加的先播放）。第一张同时用作全部内页底图。点击缩略图可更换该张；单张建议压缩后上传，避免超出浏览器存储上限。修改后请点「保存背景」。
            </p>
            <div>
              <span className={labelCls}>首页轮播背景</span>
              <div className="mt-2 grid grid-cols-2 gap-3 sm:grid-cols-3 sm:gap-4 lg:grid-cols-4">
                {homeBgUrls.map((url, i) => (
                  <div
                    key={`bg-${i}-${url.length}`}
                    className="relative pt-1 pr-1"
                  >
                    <button
                      type="button"
                      onClick={() => openHomeBgPicker({ kind: "replace", index: i })}
                      className="group relative aspect-video w-full overflow-hidden rounded-2xl border border-white/20 bg-white/5 shadow-sm outline-none ring-sky-400/0 transition hover:border-sky-400/40 focus-visible:ring-2"
                    >
                      <img
                        src={url}
                        alt=""
                        className="h-full w-full object-cover transition duration-300 group-hover:scale-[1.02]"
                      />
                      <span className="pointer-events-none absolute left-2 top-2 rounded-md bg-black/60 px-2 py-0.5 text-xs font-medium text-white backdrop-blur-sm">
                        第 {i + 1} 张
                      </span>
                      <span className="pointer-events-none absolute inset-0 flex items-center justify-center bg-black/0 text-sm font-medium text-white opacity-0 transition group-hover:bg-black/45 group-hover:opacity-100">
                        点击更换
                      </span>
                    </button>
                    <button
                      type="button"
                      onClick={() => removeHomeBgAt(i)}
                      className="absolute -right-0.5 top-0 z-10 flex h-7 w-7 items-center justify-center rounded-full border border-white/20 bg-red-500/90 text-white shadow-md transition hover:bg-red-400"
                      aria-label={`删除第 ${i + 1} 张背景`}
                    >
                      <X className="h-4 w-4" strokeWidth={2.5} />
                    </button>
                  </div>
                ))}
                <button
                  type="button"
                  onClick={() => openHomeBgPicker({ kind: "append" })}
                  className="flex aspect-video w-full cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border-2 border-dashed border-white/30 bg-white/[0.07] text-blue-200/95 transition hover:border-sky-400/55 hover:bg-white/12 hover:text-sky-100"
                >
                  <Image
                    className="h-9 w-9 opacity-85 sm:h-11 sm:w-11"
                    strokeWidth={1.15}
                    aria-hidden
                  />
                  <span className="text-sm font-medium sm:text-base">上传图片</span>
                </button>
              </div>
            </div>
            <div className="flex flex-wrap gap-2">
              <button
                type="button"
                onClick={saveBackgrounds}
                className="flex items-center gap-2 rounded-lg bg-sky-500/90 px-4 py-2 text-sm font-medium text-white hover:bg-sky-400"
              >
                <Save className="h-4 w-4" />
                保存背景
              </button>
              <button
                type="button"
                onClick={resetBackgrounds}
                className="flex items-center gap-2 rounded-lg bg-white/10 px-4 py-2 text-sm text-white hover:bg-white/15"
              >
                <RotateCcw className="h-4 w-4" />
                恢复默认
              </button>
            </div>
          </div>
        )}

        {activeTab === "welcome" && (
          <div className="space-y-4">
            <p className="text-sm text-blue-200">修改首页轮播欢迎语（中 / 英 / 藏）。</p>
            {(["zh-CN", "en", "bo"] as const).map((key) => (
              <div key={key}>
                <label className={labelCls}>
                  {key === "zh-CN" ? "中文" : key === "en" ? "English" : "བོད་ཡིག"}
                </label>
                <textarea
                  className={textareaCls + " min-h-[72px]"}
                  value={welcome[key]}
                  onChange={(e) =>
                    setWelcome((w) => ({ ...w, [key]: e.target.value }))
                  }
                />
              </div>
            ))}
            <div className="flex flex-wrap gap-2">
              <button
                type="button"
                onClick={saveWelcomeClick}
                className="flex items-center gap-2 rounded-lg bg-sky-500/90 px-4 py-2 text-sm font-medium text-white hover:bg-sky-400"
              >
                <Save className="h-4 w-4" />
                保存欢迎词
              </button>
              <button
                type="button"
                onClick={resetWelcome}
                className="flex items-center gap-2 rounded-lg bg-white/10 px-4 py-2 text-sm text-white hover:bg-white/15"
              >
                <RotateCcw className="h-4 w-4" />
                恢复默认
              </button>
            </div>
          </div>
        )}

        {activeTab === "guide" && (
          <div className="space-y-6">
            <p className="text-sm text-blue-200">
              触屏说明 / 软件说明每条一行。保存后访客端「操作指南」页立即生效。
            </p>
            <Tabs
              value={guideEditLang}
              onValueChange={(v) =>
                setGuideEditLang(v as "zh-CN" | "en" | "bo")
              }
              className="gap-4"
            >
              <TabsList className="h-auto w-full max-w-md flex-wrap justify-stretch gap-1 rounded-xl border border-white/15 bg-white/5 p-1">
                <TabsTrigger
                  value="zh-CN"
                  className="flex-1 rounded-lg px-3 py-2 text-sm font-medium text-blue-200 data-[state=active]:border-white/20 data-[state=active]:bg-sky-500/90 data-[state=active]:text-blue-950 data-[state=inactive]:bg-transparent data-[state=inactive]:hover:bg-white/10"
                >
                  中文
                </TabsTrigger>
                <TabsTrigger
                  value="en"
                  className="flex-1 rounded-lg px-3 py-2 text-sm font-medium text-blue-200 data-[state=active]:border-white/20 data-[state=active]:bg-sky-500/90 data-[state=active]:text-blue-950 data-[state=inactive]:bg-transparent data-[state=inactive]:hover:bg-white/10"
                >
                  English
                </TabsTrigger>
                <TabsTrigger
                  value="bo"
                  className="flex-1 rounded-lg px-3 py-2 font-medium text-blue-200 data-[state=active]:border-white/20 data-[state=active]:bg-sky-500/90 data-[state=active]:text-blue-950 data-[state=inactive]:bg-transparent data-[state=inactive]:hover:bg-white/10 sm:px-3"
                >
                  བོད་ཡིག
                </TabsTrigger>
              </TabsList>
              {(
                [
                  ["zh-CN", guideZhTouch, setGuideZhTouch, guideZhSoft, setGuideZhSoft],
                  ["en", guideEnTouch, setGuideEnTouch, guideEnSoft, setGuideEnSoft],
                  ["bo", guideBoTouch, setGuideBoTouch, guideBoSoft, setGuideBoSoft],
                ] as const
              ).map(([lang, touch, setTouch, soft, setSoft]) => (
                <TabsContent
                  key={lang}
                  value={lang}
                  className="mt-0 rounded-xl border border-white/10 bg-white/[0.04] p-4 outline-none data-[state=inactive]:hidden"
                >
                  <div className="space-y-3">
                    <div>
                      <span className={labelCls}>触屏操作（每行一条）</span>
                      <textarea
                        className={`${textareaCls} !min-h-[128px] sm:!min-h-[184px]`}
                        value={touch}
                        onChange={(e) => setTouch(e.target.value)}
                      />
                    </div>
                    <div>
                      <span className={labelCls}>软件说明（每行一条）</span>
                      <textarea
                        className={`${textareaCls} !min-h-[128px] sm:!min-h-[184px]`}
                        value={soft}
                        onChange={(e) => setSoft(e.target.value)}
                      />
                    </div>
                  </div>
                </TabsContent>
              ))}
            </Tabs>
            <div className="flex flex-wrap gap-2">
              <button
                type="button"
                onClick={saveGuideClick}
                className="flex items-center gap-2 rounded-lg bg-sky-500/90 px-4 py-2 text-sm font-medium text-blue-950 hover:bg-sky-400"
              >
                <Save className="h-4 w-4" />
                保存操作指南
              </button>
              <button
                type="button"
                onClick={resetGuide}
                className="flex items-center gap-2 rounded-lg bg-white/10 px-4 py-2 text-sm text-white hover:bg-white/15"
              >
                <RotateCcw className="h-4 w-4" />
                恢复默认文案
              </button>
            </div>
          </div>
        )}

        {activeTab === "query" && (
          <div className="space-y-4">
            <p className="text-sm text-blue-200">
              对当前知识库条目做关键词、类型、标签筛选（与前台「天文知识库」同一数据源）。
            </p>
            <div className="grid gap-3 sm:grid-cols-3">
              <div>
                <label className={labelCls}>关键词</label>
                <input
                  className={inputCls}
                  value={queryKeyword}
                  onChange={(e) => setQueryKeyword(e.target.value)}
                  placeholder="标题或正文"
                />
              </div>
              <div>
                <label className={labelCls}>类型</label>
                <select
                  className={inputCls}
                  value={queryType}
                  onChange={(e) => setQueryType(e.target.value)}
                >
                  {["全部", "文字", "图片", "视频"].map((t) => (
                    <option key={t} value={t} className="bg-slate-900">
                      {t}
                    </option>
                  ))}
                </select>
              </div>
              <div>
                <label className={labelCls}>标签</label>
                <select
                  className={inputCls}
                  value={queryTag}
                  onChange={(e) => setQueryTag(e.target.value)}
                >
                  {queryTags.map((t) => (
                    <option key={t} value={t} className="bg-slate-900">
                      {t}
                    </option>
                  ))}
                </select>
              </div>
            </div>
            <p className="text-sm text-sky-300">
              共 {knowledgeList.length} 条，筛选结果 {queryFiltered.length} 条
              {queryFiltered.length > QUERY_LIST_PREVIEW_MAX
                ? `（本列表仅显示前 ${QUERY_LIST_PREVIEW_MAX} 条，可调整筛选缩小范围）`
                : null}
            </p>
            <div className="space-y-2 pr-1">
              {queryListPreview.map((item) => (
                <div
                  key={item.id}
                  className="flex flex-col gap-2 rounded-lg border border-white/10 bg-white/5 p-3 sm:flex-row sm:items-center sm:justify-between"
                >
                  <div className="min-w-0">
                    <div className="font-medium text-white">{item.title}</div>
                    <div className="mt-1 flex flex-wrap gap-2 text-xs text-blue-300">
                      <span>{item.type}</span>
                      <span>{item.date}</span>
                      {item.tags.map((t) => (
                        <span key={t} className="rounded bg-white/10 px-1.5">
                          {t}
                        </span>
                      ))}
                    </div>
                  </div>
                  <button
                    type="button"
                    onClick={() => deleteKnowledge(item.id)}
                    className="shrink-0 self-end rounded-lg bg-red-500/20 px-3 py-1.5 text-sm text-red-200 hover:bg-red-500/30 sm:self-center"
                  >
                    <Trash2 className="mr-1 inline h-4 w-4" />
                    删除
                  </button>
                </div>
              ))}
            </div>
          </div>
        )}

        {activeTab === "knowledge" && (
          <div className="space-y-6">
            <p className="text-sm text-blue-200">
              向知识库添加文字、图片或视频类条目；保存后可在「天文知识库」前台检索。封面与视频请从本机选择文件上传（与首页背景相同），单文件建议压缩，避免超出浏览器存储上限。
            </p>
            <label htmlFor="admin-pair-cover-file" className="sr-only">
              选择知识库条目封面图
            </label>
            <input
              id="admin-pair-cover-file"
              ref={pairCoverFileRef}
              type="file"
              accept="image/*"
              className="sr-only"
              onChange={onPairCoverFileChange}
            />
            <label htmlFor="admin-pair-video-file" className="sr-only">
              选择知识库条目视频文件
            </label>
            <input
              id="admin-pair-video-file"
              ref={pairVideoFileRef}
              type="file"
              accept="video/*"
              className="sr-only"
              onChange={onPairVideoFileChange}
            />
            <div className="grid gap-3 rounded-xl border border-white/10 bg-white/[0.04] p-4 sm:grid-cols-2">
              <div className="sm:col-span-2">
                <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:gap-4">
                  <div className="min-w-0 flex-1">
                    <label className={labelCls}>标题</label>
                    <input
                      className={inputCls}
                      value={pairTitle}
                      onChange={(e) => setPairTitle(e.target.value)}
                    />
                  </div>
                  <div className="w-full shrink-0 sm:w-[9rem]">
                    <label className={labelCls}>类型</label>
                    <select
                      className={inputCls}
                      value={pairType}
                      onChange={(e) =>
                        setPairType(e.target.value as "文字" | "图片" | "视频")
                      }
                    >
                      <option className="bg-slate-900" value="文字">
                        文字
                      </option>
                      <option className="bg-slate-900" value="图片">
                        图片
                      </option>
                      <option className="bg-slate-900" value="视频">
                        视频
                      </option>
                    </select>
                  </div>
                  <div className="w-full shrink-0 sm:w-[11.5rem]">
                    <label className={labelCls}>日期</label>
                    <input
                      type="date"
                      className={inputCls}
                      value={pairDate}
                      onChange={(e) => setPairDate(e.target.value)}
                    />
                  </div>
                </div>
              </div>
              <div className="sm:col-span-2">
                <label className={labelCls}>正文 / 摘要</label>
                <textarea
                  className={textareaCls + " min-h-[80px]"}
                  value={pairContent}
                  onChange={(e) => setPairContent(e.target.value)}
                />
              </div>
              <div className="sm:col-span-2">
                <label className={labelCls}>标签（逗号分隔）</label>
                <input
                  className={inputCls}
                  value={pairTags}
                  onChange={(e) => setPairTags(e.target.value)}
                  placeholder="例如：星云, 观测"
                />
              </div>
              <div className="sm:col-span-2">
                <span className={labelCls}>封面图（可选）</span>
                <div className="mt-2 w-full max-w-[13rem] sm:max-w-[15rem]">
                  {pairImage ? (
                    <div className="relative pt-1 pr-1">
                      <button
                        type="button"
                        onClick={() => pairCoverFileRef.current?.click()}
                        className="group relative aspect-video w-full overflow-hidden rounded-xl border border-white/20 bg-white/5 shadow-sm outline-none ring-sky-400/0 transition hover:border-sky-400/40 focus-visible:ring-2"
                      >
                        <img
                          src={pairImage}
                          alt=""
                          className="h-full w-full object-cover transition duration-300 group-hover:scale-[1.02]"
                        />
                        <span className="pointer-events-none absolute inset-0 flex items-center justify-center bg-black/0 text-xs font-medium text-white opacity-0 transition group-hover:bg-black/45 group-hover:opacity-100">
                          点击更换
                        </span>
                      </button>
                      <button
                        type="button"
                        onClick={() => setPairImage("")}
                        className="absolute -right-0.5 top-0 z-10 flex h-6 w-6 items-center justify-center rounded-full border border-white/20 bg-red-500/90 text-white shadow-md transition hover:bg-red-400"
                        aria-label="清除封面图"
                      >
                        <X className="h-3.5 w-3.5" strokeWidth={2.5} />
                      </button>
                    </div>
                  ) : (
                    <button
                      type="button"
                      onClick={() => pairCoverFileRef.current?.click()}
                      className="flex aspect-video w-full cursor-pointer flex-col items-center justify-center gap-1.5 rounded-xl border-2 border-dashed border-white/30 bg-white/[0.07] px-2 py-3 text-blue-200/95 transition hover:border-sky-400/55 hover:bg-white/12 hover:text-sky-100"
                    >
                      <Image
                        className="h-6 w-6 opacity-85 sm:h-7 sm:w-7"
                        strokeWidth={1.15}
                        aria-hidden
                      />
                      <span className="text-[11px] font-medium leading-tight sm:text-xs">
                        上传封面图
                      </span>
                    </button>
                  )}
                </div>
              </div>
              <div className="sm:col-span-2">
                <span className={labelCls}>视频文件（可选）</span>
                <div className="mt-2 w-full max-w-[13rem] sm:max-w-[15rem]">
                  {pairVideo ? (
                    <div className="relative pt-1 pr-1">
                      <button
                        type="button"
                        onClick={() => pairVideoFileRef.current?.click()}
                        className="group relative aspect-video w-full overflow-hidden rounded-xl border border-white/20 bg-white/5 shadow-sm outline-none ring-sky-400/0 transition hover:border-sky-400/40 focus-visible:ring-2"
                      >
                        <video
                          src={pairVideo}
                          className="h-full w-full object-cover transition duration-300 group-hover:scale-[1.01]"
                          muted
                          playsInline
                          preload="metadata"
                          aria-hidden
                        />
                        <span className="pointer-events-none absolute inset-0 flex items-center justify-center bg-black/0 text-xs font-medium text-white opacity-0 transition group-hover:bg-black/45 group-hover:opacity-100">
                          点击更换
                        </span>
                      </button>
                      <button
                        type="button"
                        onClick={() => setPairVideo("")}
                        className="absolute -right-0.5 top-0 z-10 flex h-6 w-6 items-center justify-center rounded-full border border-white/20 bg-red-500/90 text-white shadow-md transition hover:bg-red-400"
                        aria-label="清除视频"
                      >
                        <X className="h-3.5 w-3.5" strokeWidth={2.5} />
                      </button>
                    </div>
                  ) : (
                    <button
                      type="button"
                      onClick={() => pairVideoFileRef.current?.click()}
                      className="flex aspect-video w-full cursor-pointer flex-col items-center justify-center gap-1.5 rounded-xl border-2 border-dashed border-white/30 bg-white/[0.07] px-2 py-3 text-blue-200/95 transition hover:border-sky-400/55 hover:bg-white/12 hover:text-sky-100"
                    >
                      <Video
                        className="h-6 w-6 opacity-85 sm:h-7 sm:w-7"
                        strokeWidth={1.15}
                        aria-hidden
                      />
                      <span className="text-[11px] font-medium leading-tight sm:text-xs">
                        上传视频
                      </span>
                    </button>
                  )}
                </div>
              </div>
              <div className="flex flex-wrap gap-2 sm:col-span-2">
                <button
                  type="button"
                  onClick={addKnowledge}
                  className="flex items-center gap-2 rounded-lg bg-sky-500/90 px-4 py-2 text-sm font-medium text-blue-950 hover:bg-sky-400"
                >
                  <Plus className="h-4 w-4" />
                  添加到知识库
                </button>
                <button
                  type="button"
                  onClick={resetKnowledgeDb}
                  className="flex items-center gap-2 rounded-lg bg-white/10 px-4 py-2 text-sm text-white hover:bg-white/15"
                >
                  <RotateCcw className="h-4 w-4" />
                  重置为示例数据
                </button>
              </div>
            </div>
          </div>
        )}

        {activeTab === "stream" && (
          <div className="space-y-4">
            <p className="text-sm text-blue-200">
              配置共享天文台左侧实时视频源地址。HLS 可在浏览器中直接播放；WebRTC / RTSP 作为信号源信息展示，通常需网关转封装后再网页播放。
            </p>
            <div className="grid gap-3 rounded-xl border border-white/10 bg-white/[0.04] p-4 sm:grid-cols-2">
              <div>
                <label className={labelCls}>协议类型</label>
                <select
                  className={inputCls}
                  value={videoSource.protocol}
                  onChange={(e) =>
                    setVideoSource((prev) => ({
                      ...prev,
                      protocol: e.target.value as VideoProtocol,
                    }))
                  }
                >
                  <option className="bg-slate-900" value="HLS">
                    HLS（.m3u8）
                  </option>
                  <option className="bg-slate-900" value="WebRTC">
                    WebRTC
                  </option>
                  <option className="bg-slate-900" value="RTSP">
                    RTSP
                  </option>
                </select>
              </div>
              <div className="sm:col-span-2">
                <label className={labelCls}>视频源地址</label>
                <input
                  className={inputCls}
                  value={videoSource.url}
                  onChange={(e) =>
                    setVideoSource((prev) => ({ ...prev, url: e.target.value }))
                  }
                  placeholder="例如：https://example.com/live/index.m3u8"
                />
              </div>
              <div className="sm:col-span-2">
                <label className={labelCls}>备注（可选）</label>
                <textarea
                  className={textareaCls + " min-h-[80px]"}
                  value={videoSource.note}
                  onChange={(e) =>
                    setVideoSource((prev) => ({ ...prev, note: e.target.value }))
                  }
                  placeholder="例如：需要鉴权 Token；内网地址需经过 Nginx 转发"
                />
              </div>
            </div>
            <div className="flex flex-wrap gap-2">
              <button
                type="button"
                onClick={saveVideoSource}
                className="flex items-center gap-2 rounded-lg bg-sky-500/90 px-4 py-2 text-sm font-medium text-blue-950 hover:bg-sky-400"
              >
                <Save className="h-4 w-4" />
                保存视频源
              </button>
              <button
                type="button"
                onClick={resetVideoSource}
                className="flex items-center gap-2 rounded-lg bg-white/10 px-4 py-2 text-sm text-white hover:bg-white/15"
              >
                <RotateCcw className="h-4 w-4" />
                清空配置
              </button>
            </div>
          </div>
        )}
        </div>
      </div>
    </div>
  );
}