import { FolderGit2, GitBranch, LayoutDashboard, LogOut, Puzzle, Server, Settings, Users } from "lucide-react";
import { NavLink, Outlet, useNavigate } from "react-router-dom";
import { clearAuthToken, signOut, useSession } from "../lib/auth-client";
import { Header } from "./Header";

export function CmsLayout() {
  const { data: session } = useSession();
  const isAdmin = (session?.user as any)?.role === "admin";

  const navItems = [
    { to: "/projects", label: "Projects", icon: FolderGit2 },
    { to: "/agents", label: "Agents", icon: Users },
    { to: "/skills", label: "Skills", icon: Puzzle },
    { to: "/machines", label: "Machines", icon: Server },
    { to: "/repositories", label: "Repositories", icon: GitBranch },
    { to: "/settings", label: "Settings", icon: Settings },
  ];

  if (isAdmin) {
    navItems.push({ to: "/admin", label: "Admin Panel", icon: LayoutDashboard });
  }

  const navigate = useNavigate();

  async function handleSignOut() {
    await signOut();
    clearAuthToken();
    navigate("/auth");
  }

  return (
    <div className="h-screen bg-surface-primary flex flex-col overflow-hidden">
      <Header />

      <div className="flex flex-1 overflow-hidden">
        {/* Left Sidebar */}
        <aside className="w-64 flex-shrink-0 bg-surface-secondary border-r border-border flex flex-col">
          <nav className="flex-1 px-3 py-4 space-y-1">
            {navItems.map(({ to, label, icon: Icon }) => (
              <NavLink
                key={to}
                to={to}
                className={({ isActive }) =>
                  `flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors ${
                    isActive ? "text-accent bg-accent/10" : "text-content-secondary hover:text-content-primary hover:bg-surface-tertiary"
                  }`
                }
              >
                <Icon size={18} />
                {label}
              </NavLink>
            ))}
          </nav>

          <div className="p-3 border-t border-border">
            <button
              onClick={handleSignOut}
              className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-error hover:bg-error/10 transition-colors text-left"
            >
              <LogOut size={18} />
              Sign Out
            </button>
          </div>
        </aside>

        {/* Main Content Area */}
        <main className="flex-1 overflow-y-auto bg-surface-primary flex flex-col relative">
          <Outlet />
        </main>
      </div>
    </div>
  );
}