import { redirect } from "next/navigation";
import Link from "next/link";
import { isAuthed } from "@/lib/auth";
import LogoutButton from "./logout-button";

const NAV = [
  { href: "/dashboard", label: "Tổng quan", icon: "▲" },
  { href: "/agents", label: "Agents", icon: "◆" },
  { href: "/hosts", label: "Hosts", icon: "▣" },
  { href: "/settings", label: "Cấu hình", icon: "▾" },
];

export default async function AdminLayout({ children }: { children: React.ReactNode }) {
  if (!(await isAuthed())) redirect("/login");
  return (
    <div className="min-h-screen flex">
      <aside className="w-60 shrink-0 border-r border-border/60 bg-panel/40 backdrop-blur-xl p-5 flex flex-col sticky top-0 h-screen">
        <div className="mb-8">
          <div className="flex items-center gap-2.5">
            <div className="w-8 h-8 rounded-lg bg-accent-grad flex items-center justify-center text-white font-bold text-sm shadow-glow">
              A
            </div>
            <div>
              <div className="text-[15px] font-semibold tracking-tight">Agent-Manager</div>
              <div className="text-[10px] text-muted mt-0.5 uppercase tracking-wider">Control Plane</div>
            </div>
          </div>
        </div>
        <nav className="flex flex-col gap-0.5">
          {NAV.map((n) => (
            <Link key={n.href} href={n.href} className="nav-item flex items-center gap-2.5">
              <span className="text-muted/60 text-xs w-3">{n.icon}</span>
              <span>{n.label}</span>
            </Link>
          ))}
        </nav>
        <div className="mt-auto pt-4 border-t border-border/60">
          <LogoutButton />
        </div>
      </aside>
      <main className="flex-1 p-8 overflow-x-hidden">{children}</main>
    </div>
  );
}