import type { Metadata } from "next";
import Link from "next/link";
import {
  LayoutDashboard,
  FileText,
  FilePlus,
  Tag,
  Image as ImageIcon,
  Settings,
  Activity,
  Sparkles,
  Search,
  Key,
  Hash,
  Users,
  Mail,
  Home,
  Palette,
  LogOut,
} from "lucide-react";
import { requireAdmin } from "@/lib/admin-guard";

export const metadata: Metadata = {
  title: "Admin · Finzone",
  robots: { index: false, follow: false },
};

const NAV: Array<{ href: string; label: string; Icon: typeof LayoutDashboard }> = [
  { href: "/admin", label: "Tổng quan", Icon: LayoutDashboard },
  { href: "/admin/articles", label: "Bài viết", Icon: FileText },
  { href: "/admin/pages", label: "Trang tĩnh", Icon: FilePlus },
  { href: "/admin/categories", label: "Chuyên mục", Icon: Tag },
  { href: "/admin/tags", label: "Tags", Icon: Hash },
  { href: "/admin/media", label: "Media", Icon: ImageIcon },
  { href: "/admin/super-seo", label: "TG Super SEO", Icon: Search },
  { href: "/admin/ai", label: "AI Writer", Icon: Sparkles },
  { href: "/admin/newsletter", label: "Newsletter", Icon: Mail },
  { href: "/admin/users", label: "Users", Icon: Users },
  { href: "/admin/api-tokens", label: "API Tokens", Icon: Key },
  { href: "/admin/audit", label: "Audit Log", Icon: Activity },
  { href: "/admin/theme", label: "Theme", Icon: Palette },
  { href: "/admin/settings", label: "Cài đặt", Icon: Settings },
];

export default async function AdminLayout({ children }: { children: React.ReactNode }) {
  const user = await requireAdmin();

  return (
    <div className="min-h-screen bg-bg-base text-ink-primary">
      <div className="lg:flex">
        {/* Sidebar */}
        <aside className="lg:w-64 lg:fixed lg:inset-y-0 border-r border-stroke-subtle bg-bg-elevated/40">
          <div className="flex h-14 items-center px-5 border-b border-stroke-subtle">
            <Link href="/admin" className="font-display font-bold text-lg">
              Finzone <span className="text-brand">Admin</span>
            </Link>
          </div>
          <nav className="px-3 py-4 space-y-0.5">
            {NAV.map((item) => (
              <Link
                key={item.href}
                href={item.href}
                className="flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium text-ink-secondary hover:text-ink-primary hover:bg-bg-overlay transition"
              >
                <item.Icon className="h-4 w-4 text-ink-muted shrink-0" />
                {item.label}
              </Link>
            ))}
          </nav>
          <div className="px-3 py-4 mt-auto border-t border-stroke-subtle space-y-0.5">
            <Link
              href="/"
              className="flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-ink-secondary hover:bg-bg-overlay transition"
            >
              <Home className="h-4 w-4 text-ink-muted" />
              Về trang chủ
            </Link>
            <form action="/api/auth/sign-out" method="post">
              <button
                type="submit"
                className="w-full flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-rose-300 hover:bg-rose-500/10 transition"
              >
                <LogOut className="h-4 w-4" />
                Đăng xuất ({user.name})
              </button>
            </form>
          </div>
        </aside>

        {/* Main */}
        <div className="lg:pl-64 flex-1">
          <div className="px-4 lg:px-8 py-6 lg:py-8 max-w-6xl mx-auto">{children}</div>
        </div>
      </div>
    </div>
  );
}