blog/write-server/src/components/Sidebar.tsx

"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";
import { FileText, PenSquare, MessageSquare, Trash2, Rss, Link2, MessageCircle, Image, Menu, X, Bot, LogOut, Users } from "lucide-react";
import ThemeToggle from "./ThemeToggle";

const navItems = [
  { href: "/", label: "文章", icon: FileText, roles: ["admin", "user"] },
  { href: "/edit", label: "撰写", icon: PenSquare, roles: ["admin", "user"] },
  { href: "/comments", label: "评论", icon: MessageSquare, roles: ["admin", "user"] },
  { href: "/feeds", label: "订阅源", icon: Rss, roles: ["admin"] },
  { href: "/links", label: "友链", icon: Link2, roles: ["admin"] },
  { href: "/images", label: "图片", icon: Image, roles: ["admin", "user"] },
  { href: "/wechat", label: "公众号", icon: MessageCircle, roles: ["admin"] },
  { href: "/recycle", label: "回收站", icon: Trash2, roles: ["admin", "user"] },
  { href: "/bot", label: "Bot", icon: Bot, roles: ["admin"] },
];

export default function Sidebar() {
  const pathname = usePathname();
  const [open, setOpen] = useState(false);
  const [isAdmin, setIsAdmin] = useState(false);

  const [userRole, setUserRole] = useState("user");

  useEffect(() => { setOpen(false); }, [pathname]);
  useEffect(() => {
    try {
      const u = JSON.parse(localStorage.getItem("wauth_user") || "{}");
      setIsAdmin(u.role === "admin");
      setUserRole(u.role || "user");
    } catch {}
  }, []);

  useEffect(() => {
    if (!open) return;
    const original = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => { document.body.style.overflow = original; };
  }, [open]);

  const isActive = (href: string) => {
    if (href === "/") return pathname === "/";
    return pathname.startsWith(href);
  };

  return (
    <>
      <header className="md:hidden fixed top-0 inset-x-0 z-40 h-12 bg-surface border-b border-line flex items-center px-3">
        <button type="button" onClick={() => setOpen(true)} className="p-2 -ml-1 rounded-md text-text/80 hover:bg-bg hover:text-accent transition-colors" aria-label="menu">
          <Menu size={18} />
        </button>
        <span className="ml-2 text-[13px] font-bold text-accent tracking-wider">{"\u5199\u4f5c\u540e\u53f0"}</span>
      </header>
      {open && (
        <div className="md:hidden fixed inset-0 z-40 bg-[#223d66]/30 backdrop-blur-sm" onClick={() => setOpen(false)} aria-hidden />
      )}
      <aside className={`bg-surface border-r border-line flex flex-col shrink-0 transition-transform duration-200 ease-out md:w-1/4 md:min-w-[200px] md:max-w-[260px] md:static md:translate-x-0 fixed top-0 left-0 z-50 h-full w-[78%] max-w-[280px] ${open ? "translate-x-0" : "-translate-x-full md:translate-x-0"}`}>
      {/* Logo */}
      <div className="px-5 py-5 border-b border-line flex items-start justify-between gap-2">
        <div>
        <h1 className="text-[15px] font-bold text-accent tracking-wider">
          写作后台
        </h1>
        <p className="text-[11px] text-muted/70 mt-0.5">优世界</p>
        </div>
        <button type="button" onClick={() => setOpen(false)} className="md:hidden p-1.5 -mr-1 rounded-md text-muted hover:text-text hover:bg-bg transition-colors" aria-label="close">
          <X size={16} />
        </button>
      </div>

      {/* Nav */}
      <nav className="flex-1 px-2.5 py-3 space-y-0.5">
        {navItems.filter(item => item.roles.includes(userRole)).map((item) => {
          const active = isActive(item.href);
          return (
            <Link
              key={item.href}
              href={item.href}
              className={`flex items-center gap-2.5 px-3 py-2 rounded-md text-[13px] transition-colors ${
                active
                  ? "bg-accent text-white font-medium"
                  : "text-text/80 hover:bg-bg hover:text-accent"
              }`}
            >
              <item.icon size={15} strokeWidth={active ? 2.5 : 1.8} />
              {item.label}
            </Link>
          );
        })}
        {isAdmin && (
          <Link
            href="/users"
            className={`flex items-center gap-2.5 px-3 py-2 rounded-md text-[13px] transition-colors ${
              isActive("/users")
                ? "bg-accent text-white font-medium"
                : "text-text/80 hover:bg-bg hover:text-accent"
            }`}
          >
            <Users size={15} strokeWidth={isActive("/users") ? 2.5 : 1.8} />
            用户管理
          </Link>
        )}
      </nav>

      {/* Footer */}
      <div className="px-4 py-3 border-t border-line">
        <ThemeToggle />
        <div className="flex items-center justify-between mt-2">
          <p className="text-[11px] text-muted/70">
            {(() => { try { return JSON.parse(localStorage.getItem("wauth_user") || "{}").name || "未登录"; } catch { return "未登录"; } })()}
          </p>
          <button
            type="button"
            onClick={() => {
              localStorage.removeItem("wauth_token");
              localStorage.removeItem("wauth_user");
              if (navigator.serviceWorker?.controller) {
                navigator.serviceWorker.controller.postMessage({ type: "CLEAR_TOKEN" });
              }
              location.href = "/login";
            }}
            className="p-1 rounded hover:bg-bg text-muted hover:text-text transition-colors"
            title="退出登录"
          >
            <LogOut size={13} />
          </button>
        </div>
      </div>
    </aside>
    </>
  );
}