import { useState } from "react";
import { Outlet, NavLink, useNavigate } from "react-router-dom";
import { Menu, X, LayoutDashboard, Boxes, Archive, FileText, Settings } from "lucide-react";
import { useAdminAuth } from "../AdminAuthContext";
import orionLogo from "@/assets/orion-logo.svg";

export default function AdminDashboardLayout({ children }: { children?: React.ReactNode }) {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const { user, logout } = useAdminAuth();
  const navigate = useNavigate();

  const handleLogout = async () => {
    await logout();
    navigate("/auth/login", { replace: true });
  };

  const closeSidebar = () => setSidebarOpen(false);

  return (
    <div className="admin-layout">
      {sidebarOpen && (
        <button
          type="button"
          className="admin-sidebar-backdrop"
          onClick={closeSidebar}
          aria-label="Close menu"
        />
      )}
      <aside className={`admin-sidebar ${sidebarOpen ? "is-open" : ""}`}>
        <div style={{ padding: "10px 16px", borderBottom: "1px solid rgba(255,255,255,0.08)", display: "flex", justifyContent: "center", background: "white" }}>
          <img src={orionLogo} alt="Orion" style={{ height: "51px" }} />
        </div>
        <nav style={{ paddingTop: 16 }}>
          <NavLink to="/dashboard" className={({ isActive }) => (isActive ? "active" : "")} end onClick={closeSidebar}>
            <LayoutDashboard size={20} strokeWidth={2} />
            Dashboard
          </NavLink>
          <NavLink to="/dashboard/components" className={({ isActive }) => (isActive ? "active" : "")} onClick={closeSidebar}>
            <Boxes size={20} strokeWidth={2} />
            Components
          </NavLink>
          <NavLink to="/dashboard/components/archived" className={({ isActive }) => (isActive ? "active" : "")} onClick={closeSidebar}>
            <Archive size={20} strokeWidth={2} />
            Archived
          </NavLink>
          <NavLink to="/dashboard/pages" className={({ isActive }) => (isActive ? "active" : "")} onClick={closeSidebar}>
            <FileText size={20} strokeWidth={2} />
            Pages
          </NavLink>
          <NavLink to="/dashboard/site-settings" className={({ isActive }) => (isActive ? "active" : "")} onClick={closeSidebar}>
            <Settings size={20} strokeWidth={2} />
            Site Settings
          </NavLink>
        </nav>
      </aside>
      <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
        <header className="admin-header">
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <button
              type="button"
              className="admin-menu-toggle"
              onClick={() => setSidebarOpen((open) => !open)}
              aria-label={sidebarOpen ? "Close menu" : "Open menu"}
            >
              {sidebarOpen ? <X size={22} /> : <Menu size={22} />}
            </button>
            <span style={{ fontWeight: 600 }}>Secure Access</span>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
            <span style={{ color: "#64748b", fontSize: 14 }}>{user?.email}</span>
            <button
              type="button"
              onClick={handleLogout}
              style={{ padding: "8px 16px", background: "#f1f5f9", border: "none", borderRadius: 8, cursor: "pointer", fontWeight: 500 }}
            >
              Logout
            </button>
          </div>
        </header>
        <main className="admin-main">
          {children ?? <Outlet />}
        </main>
      </div>
    </div>
  );
}