import { NavLink, Outlet, useNavigate } from "react-router-dom";

const navItems = [
  { path: "/admin/stamps", label: "图章管理" },
  { path: "/admin/rules", label: "兑换规则" },
  { path: "/admin/redemptions", label: "兑换记录" },
];

export default function AdminLayout() {
  const navigate = useNavigate();

  const handleLogout = () => {
    sessionStorage.removeItem("admin_key");
    navigate("/admin");
  };

  return (
    <div className="min-h-screen bg-gray-50 flex">
      {/* Sidebar */}
      <aside className="w-56 bg-white border-r border-gray-200 flex flex-col shrink-0">
        <div className="px-5 py-4 border-b border-gray-200">
          <h1 className="text-base font-semibold text-gray-800">图章管理后台</h1>
        </div>
        <nav className="flex-1 py-3">
          {navItems.map((item) => (
            <NavLink
              key={item.path}
              to={item.path}
              className={({ isActive }) =>
                `block px-5 py-2.5 text-sm transition-colors ${
                  isActive
                    ? "text-blue-600 bg-blue-50 font-medium border-r-2 border-blue-600"
                    : "text-gray-600 hover:bg-gray-50"
                }`
              }
            >
              {item.label}
            </NavLink>
          ))}
        </nav>
        <div className="px-5 py-3 border-t border-gray-200">
          <button onClick={handleLogout} className="text-sm text-gray-500 hover:text-gray-700">
            退出管理
          </button>
        </div>
      </aside>

      {/* Main content */}
      <main className="flex-1 p-6 overflow-auto">
        <Outlet />
      </main>
    </div>
  );
}
