/**
 * 工作台共享侧栏与浮动快捷条。管理账户/工作区目录、搜索、折叠、改名和账户面板，
 * 活动board元数据来自Context，画布业务状态由RuntimeHost拥有；这里不持有第二份元素文档。
 * 浮动条在画布路由或侧栏折叠时显示，展开按钮仅在折叠时显示，收起按钮留在展开侧栏中。
 */
"use client";

import { useEffect, useRef, useState } from "react";
import { useParams, useRouter, useSearchParams } from "next/navigation";
import Link from "next/link";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { Check, ChevronsUpDown, FilePlus2, Home, PanelLeftClose, PanelLeftOpen, Plus, Search, Settings } from "lucide-react";
import { IconButton } from "@/components/ui/icon-button";
import { api, errorText, type Profile } from "@/lib/api";
import { boardHref, createBoard, renameBoard, matchesRef, DEFAULT_BOARD_TITLE, loadWorkspaceHome, type Board, type Workspace } from "@/lib/workspace";
import { useActiveBoard } from "@/components/workspace/active-board";
import toolbar from "@/components/ui/toolbar.module.css";
import { EditableTitle } from "@/components/workspace/editable-title";
import { UserAvatar } from "@/components/workspace/user-avatar";
import { useCanvasRuntimeHost } from "@/components/workspace/canvas-runtime-host";
import { AccountPanel } from "@/components/workspace/account-panel";
import { readDemoBoards } from "@/lib/demo-workspace";
import { loadBoardDirectory } from "@/lib/board-directory";
import { BoardDirectory } from "@/components/workspace/board-directory";
import styles from "@/components/workspace/workspace.module.css";

/** 路径/查询参数优先定位空间，目录解析真实ID，UI状态与账户/目录异步生命周期分别维护。 */
export default function DashboardSidebar() {
  const router = useRouter();
  const runtimeHost = useCanvasRuntimeHost();
  const { board: activeBoard, setBoard: setActiveBoard } = useActiveBoard();
  const reduceMotion = useReducedMotion();
  const params = useParams<{ workspace?: string; board?: string }>();
  const searchParams = useSearchParams();
  const demo = searchParams.get("demo") === "1";
  const [profile, setProfile] = useState<Profile | null>(null);
  const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
  const [selectedWorkspace, setSelectedWorkspace] = useState("");
  const [directoryRevision, setDirectoryRevision] = useState(0);
  const [boards, setBoards] = useState<Board[]>([]);
  const [status, setStatus] = useState<"loading" | "ready" | "error">("loading");
  const [error, setError] = useState("");
  const [collapsed, setCollapsed] = useState(false);
  const [accountAnchor, setAccountAnchor] = useState<"sidebar" | "floating">("sidebar");
  const [query, setQuery] = useState("");
  const [creating, setCreating] = useState(false);
  const [panel, setPanel] = useState<"settings" | "workspace" | null>(null);
  const expandButton = useRef<HTMLButtonElement>(null);
  const collapseButton = useRef<HTMLButtonElement>(null);
  const hasToggled = useRef(false);
  // 同步ref防重复点击创建，listVersion隔离迟到目录列表；二者都不是runtime账户authEpoch。
  const createLock = useRef(false);
  const listVersion = useRef(0);
  const accountPopup = useRef<HTMLDivElement>(null);
  // 路径workspace优先于查询和本地选择；slug由目录解析，活动board可补充该路由引用的真实ID。
  const workspaceRef = params.workspace || searchParams.get("workspace") || selectedWorkspace;
  const currentWorkspace = workspaces.find((item) => matchesRef(item, workspaceRef));
  const workspace = currentWorkspace?.id || (activeBoard?.workspace_ref === workspaceRef ? activeBoard.workspace_id : workspaceRef);

  /** demo用本地资料，真实模式并行加载profile/空间；active+signal阻止卸载后的资料结果写入。 */
  useEffect(() => {
    if (demo) {
      setProfile({ id: "demo", username: "creator", display_name: "创作者", email: null });
      setWorkspaces([{ id: "demo", name: "个人空间", role: "admin" }]);
      setSelectedWorkspace("demo");
      setStatus("ready");
      return;
    }
    let active = true;
    const controller = new AbortController();
    setStatus("loading");
    loadWorkspaceHome(api, controller.signal)
      .then(({ profile, workspaces }) => {
        if (!active) return;
        setProfile(profile);
        setWorkspaces(workspaces);
        setSelectedWorkspace(workspaces[0]?.id || "");
        setStatus("ready");
      })
      .catch((e) => {
        if (!active) return;
        setStatus("error");
        setError(errorText(e));
        if (e.message === "invalid_session") router.replace("/login");
      });
    return () => { active = false; controller.abort(); };
  }, [demo, router]);

  /** 每次目录加载先留本空间项，再取完整分页；仅最新listVersion可采用列表，换空间时中断旧请求。 */
  useEffect(() => {
    if (!workspace || status !== "ready") return;
    const version = ++listVersion.current;
    let active = true;
    setBoards((list) => list.filter((board) => board.workspace_id === workspace));
    if (demo) {
      setBoards(readDemoBoards(workspace));
      return;
    }
    const controller = new AbortController();
    loadBoardDirectory(api, workspace, controller.signal)
      .then((items) => { if (active && version === listVersion.current) setBoards(items); })
      .catch((e) => { if (active) setError(errorText(e)); });
    return () => { active = false; controller.abort(); };
  }, [workspace, demo, status, directoryRevision]);

  /** 同工作区目录变化事件合并100ms后重读，清理时撤销计时和监听，不跨空间误刷新。 */
  useEffect(() => {
    let timer: ReturnType<typeof setTimeout>;
    /** 忽略其它workspace事件；多次事件只触发一次revision递增和后续完整目录读取。 */
    const refresh = (event: Event) => { if ((event as CustomEvent).detail?.workspace !== workspace) return; clearTimeout(timer); timer = setTimeout(() => setDirectoryRevision((value) => value + 1), 100); };
    window.addEventListener("endoleap:board-directory-changed", refresh);
    return () => { clearTimeout(timer); window.removeEventListener("endoleap:board-directory-changed", refresh); };
  }, [workspace]);

  /** 就绪且未重复创建才执行，真实模式必要时先建个人空间，demo只写本地目录。
   * 成功递增listVersion防旧列表盖掉新项，再清搜索并导航；创建锁仅保护此UI操作，不替代账户身份护栏。 */
  async function newPage() {
    if (createLock.current || status !== "ready") return;
    createLock.current = true;
    setCreating(true);
    setError("");
    try {
      const board = demo
        ? { id: crypto.randomUUID(), workspace_id: workspace, title: DEFAULT_BOARD_TITLE, kind: "board" as const, version: 1 }
        : await createBoard(api, DEFAULT_BOARD_TITLE, workspace, (created) => {
            setWorkspaces((list) => [...list, created]);
            setSelectedWorkspace(created.id);
          });
      listVersion.current += 1;
      setBoards((list) => [board, ...list]);
      if (demo) localStorage.setItem("endoleap_demo_boards_" + workspace, JSON.stringify([board, ...readDemoBoards(workspace)]));
      setQuery("");
      router.push(boardHref(currentWorkspace?.slug || board.workspace_id, board.slug || board.id, demo));
    } catch (e) { setError(errorText(e)); }
    finally { createLock.current = false; setCreating(false); }
  }

  /** 用户实际切换折叠后，下一帧聚焦新出现的展开/收起按钮；初始渲染不抢焦点。 */
  useEffect(() => {
    if (!hasToggled.current) return;
    const frame = requestAnimationFrame(() => {
      (collapsed ? expandButton : collapseButton).current?.focus();
    });
    return () => cancelAnimationFrame(frame);
  }, [collapsed]);

  /** 先关闭账户popover再切布局，避免旧锚点残留弹层；焦点转移交给effect。 */
  function toggleSidebar(value: boolean) {
    accountPopup.current?.hidePopover();
    hasToggled.current = true;
    setCollapsed(value);
  }

  /** 关闭popover后打开设置/新空间对话框，避免两层交互同时争焦点。 */
  function openPanel(mode: "settings" | "workspace") {
    accountPopup.current?.hidePopover();
    setPanel(mode);
  }

  /** 真实退出先retireIdentity并完成本地关闭/保存，再请求服务登出；失败留在当前界面报告，不跳过保存。 */
  async function logout() {
    try {
      if (!demo) { await runtimeHost.retireIdentity(); await api("auth/logout", { method: "POST" }); }
      router.push("/login");
    } catch (e) { setError(errorText(e)); }
  }

  // 已解析活动board标题优先，退回目录标题或加载文案；不从另一工作区的活动记录借名。
  const currentTitle = activeBoard && matchesRef(activeBoard, params.board) && activeBoard.workspace_id === workspace
    ? activeBoard.title
    : boards.find((board) => matchesRef(board, params.board))?.title || (params.board ? "正在读取图谱…" : "工作空间");
  const name = profile?.display_name || profile?.username || "账户";
  // 计数用标题直接匹配；树中保留的搜索祖先由BoardDirectory独立派生，因此数目不等于所有可见行数。
  const filtered = boards.filter((b) => b.title.toLocaleLowerCase().includes(query.trim().toLocaleLowerCase()));
  // UI能力只作提示/禁用，真实创建权限仍由服务端判定，未知空间不能当成已有编辑权限。
  const canCreate = status === "ready" && (!workspace || Boolean(currentWorkspace && currentWorkspace.role !== "viewer"));

  /** 成功后同时更新本地目录与匹配的活动board元数据；错误转换成文案交EditableTitle保留草稿显示。 */
  async function renameTitle(title: string) {
    const id = activeBoard?.id || params.board;
    if (!id || !workspace) return;
    try {
      if (demo) {
        const list = readDemoBoards(workspace);
        localStorage.setItem("endoleap_demo_boards_" + workspace, JSON.stringify(list.map((board) => board.id === id ? { ...board, title } : board)));
      } else await renameBoard(api, workspace, id, title);
      setBoards((list) => list.map((board) => board.id === id ? { ...board, title } : board));
      setActiveBoard((board) => board?.id === id && board.workspace_id === workspace ? { ...board, title } : board);
    } catch (error) { throw new Error(errorText(error)); }
  }

  // 创建入口复用同一busy/权限状态，降低重复点击，但不在render中发请求。
  const createButton = <IconButton icon={FilePlus2} label={creating ? "正在创建图谱" : "新建页面"} disabled={!canCreate || creating} onClick={newPage} aria-busy={creating} />;

  // 尊重减少动态效果偏好；折叠侧栏同时inert/aria-hidden，避免不可见内容仍接受键盘交互。
  const transition = { duration: reduceMotion ? 0 : 0.24, ease: [0.22, 1, 0.36, 1] as const };
  const roleLabel = currentWorkspace?.role === "admin" ? "管理员" : currentWorkspace?.role === "editor" ? "编辑者" : currentWorkspace?.role === "viewer" ? "查看者" : "工作空间";

  // 展示分为浮动条、侧栏目录、共享账户popover和账户面板；路由/空间作为key让标题及目录局部状态重置。
  return (
    <>
      <AnimatePresence initial={false}>
        {(collapsed || Boolean(params.board)) && (
          <motion.div key="sidebar-controls" className={`${toolbar.surface} ${toolbar.relaxed} ${styles.floating}`} data-sidebar-collapsed={collapsed} aria-label={params.board ? "画布快捷操作" : "侧边栏快捷操作"}
            initial={{ opacity: 0, y: reduceMotion ? 0 : -6 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: reduceMotion ? 0 : -6 }}
            transition={{ duration: reduceMotion ? 0 : 0.14 }}>
            {collapsed && <IconButton ref={expandButton} icon={PanelLeftOpen} label="展开侧边栏" aria-expanded={false} aria-controls="workspace-sidebar" onClick={() => toggleSidebar(false)} />}
            <Link href="/" className={styles.logoLink} aria-label="啡跃 Endoleap 主页" title="返回主页">
              <img src="/brand/png/logo-light/endoleap-32.png"
                srcSet="/brand/png/logo-light/endoleap-32.png 1x, /brand/png/logo-light/endoleap-64.png 2x, /brand/png/logo-light/endoleap-128.png 4x"
                width={20} height={20} alt="" />
            </Link>
            <span className={toolbar.divider} aria-hidden="true" />
            <EditableTitle key={workspace + ":" + (params.board || "home")} title={currentTitle}
              editable={Boolean(params.board && activeBoard && matchesRef(activeBoard, params.board) && activeBoard.workspace_id === workspace && canCreate)}
              onSave={renameTitle} className={styles.floatingTitle} />
            <span className={toolbar.divider} aria-hidden="true" />
            <button type="button" className={styles.floatingAvatarButton} popoverTarget="workspace-account" aria-label="账户和工作空间" onClick={() => setAccountAnchor("floating")}>
              <UserAvatar name={name} url={profile?.avatar_url} />
            </button>
            {error && <p className={styles.floatingError} role="alert">{error}</p>}
          </motion.div>
        )}
      </AnimatePresence>
      <motion.div className={styles.sidebarSlot} initial={false}
        animate={{ width: collapsed ? 0 : "var(--sidebar-width)" }} transition={transition}>
        <motion.aside id="workspace-sidebar" className={styles.sidebar} aria-label="工作空间侧边栏"
          aria-hidden={collapsed} inert={collapsed} initial={false}
          animate={{ x: collapsed && !reduceMotion ? "-100%" : 0, opacity: collapsed ? 0 : 1 }} transition={transition}>
          <div className={styles.topRow}>
            <IconButton ref={collapseButton} icon={PanelLeftClose} label="收起侧边栏" aria-expanded={!collapsed} aria-controls="workspace-sidebar" onClick={() => toggleSidebar(true)} />
            {createButton}
          </div>
          <label className={styles.search}>
            <Search size={16} strokeWidth={1.6} aria-hidden="true" />
            <input aria-label="搜索页面" placeholder="搜索页面…" value={query} onChange={(e) => setQuery(e.target.value)} />
          </label>
          <nav className={styles.navigation} aria-label="页面导航">
            <Link className={styles.home} href={`/dashboard?workspace=${encodeURIComponent(workspace)}${demo ? "&demo=1" : ""}`}>
              <Home size={16} strokeWidth={1.6} /> 首页
            </Link>
            <div className={styles.sectionLabel}>{currentWorkspace?.name || "工作空间"}<span>{filtered.length}</span></div>
            {status === "loading" && <p className={styles.hint} role="status">正在读取工作空间…</p>}
            {status === "ready" && !workspace && <p className={styles.hint}>新建页面时会自动建立个人空间。</p>}
            <BoardDirectory key={workspace} boards={boards} workspace={currentWorkspace?.slug || workspace} active={params.board} query={query} demo={demo} />
          </nav>
          {error && <p className={styles.error} role="alert">{error}</p>}
          <div className={styles.accountArea}>
            <button type="button" className={styles.accountButton} popoverTarget="workspace-account" aria-label="账户和工作空间" onClick={() => setAccountAnchor("sidebar")}>
              <UserAvatar name={name} url={profile?.avatar_url} />
              <span className={styles.accountText}><strong>{name}</strong><small>{currentWorkspace?.name || (demo ? "本地演示" : "个人账户")}</small></span>
              <ChevronsUpDown size={14} strokeWidth={1.6} />
            </button>
          </div>
        </motion.aside>
      </motion.div>
      <div ref={accountPopup} id="workspace-account" popover="auto" className={styles.accountPopup} data-floating={accountAnchor === "floating"} data-sidebar-collapsed={collapsed} aria-label="账户和工作空间菜单">
        <div className={styles.accountHeading}>
          <span className={styles.workspaceAvatar} aria-hidden="true">{(currentWorkspace?.name || "啡跃").slice(0, 1)}</span>
          <div><strong>{currentWorkspace?.name || "你的工作空间"}</strong><small>{roleLabel}{demo ? " · 本地演示" : ""}</small></div>
        </div>
        <div className={styles.menuGroup}>
          <button type="button" className={styles.menuItem} disabled={!profile} onClick={() => openPanel("settings")}>
            <Settings size={16} strokeWidth={1.6} /><span>账户设置</span>
          </button>
        </div>
        <div className={styles.separator} />
        <div className={styles.popupIdentity}>
          <UserAvatar name={name} url={profile?.avatar_url} />
          <div><strong>{name}</strong><small>{profile?.email || profile?.username || "正在读取账户…"}</small></div>
        </div>
        <div className={styles.workspaceList}>
          {workspaces.map((w) => (
            <button type="button" key={w.id} className={styles.menuItem} aria-current={w.id === workspace ? "true" : undefined} onClick={() => {
              accountPopup.current?.hidePopover();
              setQuery("");
              setSelectedWorkspace(w.id);
              router.push(`/dashboard?workspace=${encodeURIComponent(w.id)}${demo ? "&demo=1" : ""}`);
            }}>
              <span className={styles.workspaceMini} aria-hidden="true">{w.name.slice(0, 1)}</span>
              <span>{w.name}</span>{w.id === workspace && <Check size={15} strokeWidth={1.8} />}
            </button>
          ))}
        </div>
        <button type="button" className={`${styles.menuItem} ${styles.newWorkspace}`} disabled={status !== "ready"} onClick={() => openPanel("workspace")}>
          <Plus size={16} strokeWidth={1.6} /><span>新建工作空间</span>
        </button>
        <div className={styles.separator} />
        <button type="button" className={`${styles.menuItem} ${styles.logout}`} onClick={logout}>退出登录</button>
      </div>
      {panel && profile && (
        <AccountPanel mode={panel} profile={profile} demo={demo} onClose={() => setPanel(null)} onProfile={setProfile}
          onWorkspace={(created) => {
            if (demo) localStorage.setItem("endoleap_demo_boards_" + created.id, "[]");
            setWorkspaces((list) => [...list, created]);
            setSelectedWorkspace(created.id);
            setQuery("");
            router.push(`/dashboard?workspace=${encodeURIComponent(created.id)}${demo ? "&demo=1" : ""}`);
          }} />
      )}
    </>
  );
}