import type { Metadata } from "next";
import Link from "next/link";
import { redirect } from "next/navigation";
import {
  LayoutDashboard,
  Users,
  Brain,
  Settings,
  Activity,
  Home,
  LogOut,
  FileText,
  Crown,
  BarChart3,
} from "lucide-react";
import { getAdminContext } from "@/lib/admin-guard";

export const metadata: Metadata = {
  title: "Admin · Tử Vi Số",
  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/analytics", label: "Phân tích vận hành", Icon: BarChart3 },
  { href: "/admin/users", label: "Người dùng", Icon: Users },
  { href: "/admin/billing", label: "Nâng cấp / Billing", Icon: Crown },
  { href: "/admin/blog", label: "Blog", Icon: FileText },
  { href: "/admin/ai", label: "AI Provider", Icon: Brain },
  { href: "/admin/site", label: "Site Settings", Icon: Settings },
  { href: "/admin/audit", label: "Audit Log", Icon: Activity },
];

export default async function AdminLayout({ children }: { children: React.ReactNode }) {
  // Layout-level guard: every page under /admin requires ADMIN role.
  const admin = await getAdminContext();
  if (!admin) redirect("/?error=admin_required");

  return (
    <div className="bg-bg-base min-h-screen">
      <div className="mx-auto flex max-w-[1400px] gap-6 px-4 py-6 lg:px-6">
        {/* Sidebar */}
        <aside className="border-stroke-subtle bg-bg-elevated/40 hidden w-60 shrink-0 self-start rounded-xl border p-4 lg:sticky lg:top-6 lg:block">
          <div className="border-stroke-subtle mb-4 border-b pb-4">
            <Link
              href="/"
              className="text-ink-muted hover:text-brand-gold flex items-center gap-2 text-xs"
            >
              <Home className="h-3.5 w-3.5" /> Về trang chính
            </Link>
            <div className="mt-3">
              <div className="text-ink-muted text-[10px] tracking-[0.2em] uppercase">Quản trị</div>
              <div className="font-display text-ink-primary mt-0.5 text-lg font-semibold">
                Admin CP
              </div>
            </div>
          </div>

          <nav className="flex flex-col gap-0.5">
            {NAV.map(({ href, label, Icon }) => (
              <Link
                key={href}
                href={href}
                className="text-ink-secondary hover:bg-bg-overlay/60 hover:text-brand-gold flex items-center gap-2.5 rounded-md px-3 py-2 text-sm transition"
              >
                <Icon className="h-4 w-4" />
                {label}
              </Link>
            ))}
          </nav>

          <div className="border-stroke-subtle mt-4 border-t pt-4">
            <div className="text-ink-muted text-[11px]">Đăng nhập với</div>
            <div className="text-ink-primary mt-0.5 text-sm font-medium">{admin.name}</div>
            <div className="text-ink-muted truncate text-xs">{admin.email}</div>
            <Link
              href="/api/auth/sign-out"
              className="text-ink-muted hover:text-brand-red mt-3 flex items-center gap-1.5 text-xs"
            >
              <LogOut className="h-3 w-3" /> Đăng xuất
            </Link>
          </div>
        </aside>

        {/* Mobile top bar */}
        <div className="border-stroke-subtle bg-bg-elevated/60 sticky top-0 z-10 mb-4 flex items-center justify-between rounded-lg border px-4 py-3 lg:hidden">
          <div>
            <div className="text-ink-muted text-[10px] tracking-[0.2em] uppercase">Admin CP</div>
            <div className="font-display text-ink-primary text-base font-semibold">Tử Vi Số</div>
          </div>
          <Link href="/" className="text-ink-muted hover:text-brand-gold text-xs">
            Trang chính →
          </Link>
        </div>

        <main className="min-w-0 flex-1">
          {/* Mobile-only nav strip */}
          <div className="no-scrollbar mb-4 flex gap-2 overflow-x-auto pb-1 lg:hidden">
            {NAV.map(({ href, label, Icon }) => (
              <Link
                key={href}
                href={href}
                className="border-stroke-subtle text-ink-secondary hover:border-brand-gold/40 hover:text-brand-gold flex shrink-0 items-center gap-2 rounded-full border px-3 py-1.5 text-xs"
              >
                <Icon className="h-3.5 w-3.5" />
                {label}
              </Link>
            ))}
          </div>

          {children}
        </main>
      </div>
    </div>
  );
}