import { Bell, LayoutDashboard, LifeBuoy, Settings2 } from "lucide-react";
import { useState } from "react";
import { NavLink, Outlet } from "react-router-dom";

import { useAuth } from "@/auth/AuthProvider";
import { AdminNotificationsDrawer } from "@/components/AdminNotificationsDrawer";
import { Button } from "@/components/ui/button";
import { adminTheme } from "@/theme";
import { adminThemeVars } from "@/theme-vars";

const navItems = [
  { to: "/", label: "대시보드", icon: LayoutDashboard },
  { to: "/queue", label: "거래 관리", icon: Settings2 },
  { to: "/support", label: "고객지원", icon: LifeBuoy },
];

export function AdminShell() {
  const [notificationsOpen, setNotificationsOpen] = useState(false);
  const { logout, user } = useAuth();

  return (
    <div className="min-h-screen bg-[var(--admin-shell-bg)] text-[#283042]" style={adminThemeVars(adminTheme)}>
      <div className="grid min-h-screen grid-cols-[var(--admin-rail-width)_1fr]">
        <aside className="bg-[var(--admin-rail-bg)] px-6 py-8 text-white">
          <div className="pb-8 text-[22px] font-black tracking-[0.18em]">ADMIN</div>
          <nav className="space-y-2">
            {navItems.map((item) => {
              const Icon = item.icon;
              return (
                <NavLink
                  key={item.to}
                  to={item.to}
                  end={item.to === "/"}
                  className={({ isActive }) =>
                    `flex items-center gap-3 rounded-xl px-4 py-3 text-sm font-semibold ${isActive ? "bg-white/14 text-white" : "text-white/70"}`
                  }
                >
                  <Icon className="h-4 w-4" />
                  {item.label}
                </NavLink>
              );
            })}
          </nav>
        </aside>

        <div className="min-w-0">
          <header className="flex h-[var(--admin-topbar-height)] items-center justify-between border-b border-[var(--admin-border)] bg-white px-8">
            <div>
              <p className="text-sm text-[var(--admin-muted)]">운영 콘솔</p>
              <p className="mt-1 text-lg font-bold">제품 우선 관리자 화면</p>
            </div>
            <div className="flex items-center gap-3">
              <button
                aria-label="알림 열기"
                className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-[var(--admin-border)] bg-white"
                onClick={() => setNotificationsOpen(true)}
              >
                <Bell className="h-4 w-4 text-[#5d6879]" />
              </button>
              <div className="rounded-full bg-[#f7f8fb] px-4 py-2 text-sm font-semibold">{user?.name ?? user?.email}</div>
              <Button variant="outline" onClick={logout}>
                로그아웃
              </Button>
            </div>
          </header>

          <main className="p-8">
            <Outlet />
          </main>
        </div>
      </div>

      <AdminNotificationsDrawer open={notificationsOpen} onClose={() => setNotificationsOpen(false)} />
    </div>
  );
}
