import { NavLink, Outlet, useNavigate } from "react-router-dom";
import { ToastProvider } from "./Toast";

const navItems = [
  { path: "/admin/dashboard", label: "数据看板", eyebrow: "01", tag: "Dashboard" },
  { path: "/admin/stamps", label: "图章管理", eyebrow: "02", tag: "Stamps" },
  { path: "/admin/articles", label: "文章管理", eyebrow: "03", tag: "Articles" },
  { path: "/admin/music", label: "音乐管理", eyebrow: "04", tag: "Music" },
  { path: "/admin/rules", label: "兑换规则", eyebrow: "05", tag: "Rules" },
  { path: "/admin/users", label: "用户管理", eyebrow: "06", tag: "Users" },
  { path: "/admin/redemptions", label: "兑换记录", eyebrow: "07", tag: "Log" },
];

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

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

  return (
    <ToastProvider>
      <div className="min-h-screen flex bg-[var(--bg-cream)] grain-overlay">
        {/* ═══════════ Sidebar ═══════════ */}
        <aside className="w-64 shrink-0 relative flex flex-col text-[var(--text-inverted)]">
          <div className="absolute inset-0 bg-[var(--bg-dark-deep)]" />
          <div
            className="absolute inset-0 pointer-events-none"
            style={{
              backgroundImage: `
                radial-gradient(ellipse 80% 40% at 50% 0%, rgba(212, 165, 116, 0.08) 0%, transparent 70%),
                radial-gradient(circle at 20% 90%, rgba(199, 91, 57, 0.06) 0%, transparent 60%)
              `,
            }}
          />
          <div
            className="absolute inset-0 opacity-[0.025] pointer-events-none"
            style={{
              backgroundImage: `
                linear-gradient(rgba(212, 165, 116, 0.6) 1px, transparent 1px),
                linear-gradient(90deg, rgba(212, 165, 116, 0.6) 1px, transparent 1px)
              `,
              backgroundSize: "40px 40px",
            }}
          />

          {/* Brand */}
          <div className="relative px-7 pt-8 pb-7">
            <div className="flex items-center gap-2.5 mb-3">
              <span className="block w-5 h-px bg-[var(--gold)]/60" />
              <span
                className="text-[var(--gold)] text-[10px] tracking-[0.4em] uppercase"
                style={{ fontFamily: "'Playfair Display', serif", fontWeight: 500 }}
              >
                Atelier
              </span>
            </div>
            <h1
              className="text-[var(--text-inverted)] text-[22px] leading-tight"
              style={{ fontFamily: "'Playfair Display', serif", fontWeight: 700, letterSpacing: "-0.01em" }}
            >
              CityWalk
              <br />
              <span className="text-[var(--gold)]">图章后台</span>
            </h1>
            <div className="mt-4 h-px bg-gradient-to-r from-[var(--gold)]/40 via-[var(--gold)]/10 to-transparent" />
          </div>

          {/* Nav */}
          <nav className="relative flex-1 px-4">
            {navItems.map((item) => (
              <NavLink
                key={item.path}
                to={item.path}
                className={({ isActive }) =>
                  `group relative block px-3 py-3 my-0.5 rounded-lg transition-all duration-300 ${
                    isActive
                      ? "bg-[rgba(212,165,116,0.08)]"
                      : "hover:bg-white/[0.04]"
                  }`
                }
              >
                {({ isActive }) => (
                  <>
                    <span
                      className={`absolute left-0 top-1/2 -translate-y-1/2 w-[3px] rounded-r transition-all duration-300 ${
                        isActive ? "h-5 bg-[var(--gold)]" : "h-0 bg-transparent"
                      }`}
                    />
                    <div className="flex items-baseline gap-3">
                      <span
                        className={`text-[10px] tracking-[0.3em] uppercase shrink-0 transition-colors ${
                          isActive ? "text-[var(--gold)]" : "text-[var(--text-inverted)]/30"
                        }`}
                        style={{ fontFamily: "'Playfair Display', serif" }}
                      >
                        {item.eyebrow}
                      </span>
                      <span
                        className={`text-[14px] transition-colors ${
                          isActive
                            ? "text-[var(--text-inverted)] font-medium"
                            : "text-[var(--text-inverted)]/60 group-hover:text-[var(--text-inverted)]/90"
                        }`}
                      >
                        {item.label}
                      </span>
                    </div>
                    <div
                      className={`ml-[38px] mt-0.5 text-[9px] tracking-[0.32em] uppercase transition-colors ${
                        isActive ? "text-[var(--gold)]/60" : "text-[var(--text-inverted)]/15"
                      }`}
                      style={{ fontFamily: "'Playfair Display', serif" }}
                    >
                      {item.tag}
                    </div>
                  </>
                )}
              </NavLink>
            ))}
          </nav>

          {/* Footer */}
          <div className="relative px-7 py-5 border-t border-white/5">
            <button
              onClick={handleLogout}
              className="group flex items-center gap-2.5 text-[var(--text-inverted)]/45 hover:text-[var(--gold)] text-sm transition-colors"
            >
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9" />
              </svg>
              <span>退出管理</span>
            </button>
            <p className="mt-3 text-[9px] tracking-[0.3em] uppercase text-[var(--text-inverted)]/20">
              v1.0 · Curated by Stamp
            </p>
          </div>
        </aside>

        {/* ═══════════ Main ═══════════ */}
        <main className="flex-1 overflow-auto paper-texture">
          <div className="min-h-full px-10 py-10">
            <Outlet />
          </div>
        </main>
      </div>
    </ToastProvider>
  );
}
