import Link from "next/link";
import { headers } from "next/headers";
import {
  BarChart3,
  AlertTriangle,
  Repeat,
  Map,
  FileCode,
  ScanLine,
  Image as ImageIcon,
  Bot,
  ShieldCheck,
} from "lucide-react";

const TABS: Array<{
  href: string;
  label: string;
  Icon: typeof BarChart3;
  match: string;
}> = [
  { href: "/admin/super-seo", label: "Tổng quan", Icon: BarChart3, match: "exact" },
  { href: "/admin/super-seo/health", label: "Health", Icon: ScanLine, match: "/admin/super-seo/health" },
  { href: "/admin/super-seo/404-monitor", label: "404 Monitor", Icon: AlertTriangle, match: "/admin/super-seo/404-monitor" },
  { href: "/admin/super-seo/redirects", label: "Redirects", Icon: Repeat, match: "/admin/super-seo/redirects" },
  { href: "/admin/super-seo/sitemap", label: "Sitemap", Icon: Map, match: "/admin/super-seo/sitemap" },
  { href: "/admin/super-seo/robots", label: "Robots", Icon: Bot, match: "/admin/super-seo/robots" },
  { href: "/admin/super-seo/schema", label: "Schema", Icon: FileCode, match: "/admin/super-seo/schema" },
  { href: "/admin/super-seo/validator", label: "Validator", Icon: ShieldCheck, match: "/admin/super-seo/validator" },
  { href: "/admin/super-seo/images", label: "Image SEO", Icon: ImageIcon, match: "/admin/super-seo/images" },
];

export default async function SuperSeoLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const h = await headers();
  const pathname = h.get("x-pathname") ?? h.get("x-invoke-path") ?? "";

  return (
    <div>
      <header className="mb-6 pb-4 border-b border-stroke-subtle">
        <div className="flex items-center gap-2 mb-1">
          <span className="inline-flex items-center justify-center w-7 h-7 rounded-lg bg-gradient-to-br from-brand to-accent-primary text-bg-base font-bold text-xs">
            TG
          </span>
          <h1 className="font-display text-2xl lg:text-3xl font-bold">Super SEO</h1>
          <span className="ml-2 text-[10px] uppercase tracking-wider text-ink-muted bg-bg-overlay px-2 py-0.5 rounded">
            v1
          </span>
        </div>
        <p className="text-sm text-ink-muted">
          Trung tâm SEO toàn site — content analysis, redirects, 404 monitor, sitemap, schema markup.
        </p>
      </header>

      <nav className="mb-6 flex flex-wrap gap-1 border-b border-stroke-subtle/60 -mx-1">
        {TABS.map((tab) => {
          const active =
            tab.match === "exact"
              ? pathname === "/admin/super-seo"
              : pathname.startsWith(tab.match);
          return (
            <Link
              key={tab.href}
              href={tab.href}
              className={`flex items-center gap-1.5 px-3 py-2 -mb-px text-sm font-medium border-b-2 transition ${
                active
                  ? "border-accent-primary text-accent-primary"
                  : "border-transparent text-ink-muted hover:text-ink-primary"
              }`}
            >
              <tab.Icon className="h-4 w-4" />
              {tab.label}
            </Link>
          );
        })}
      </nav>

      {children}
    </div>
  );
}