"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";

const TABS = [
  { href: "/admin/scrape/all", label: "📊 Все скраперы (сводно)" },
  { href: "/admin/scrape", label: "Скрапер DOM.РФ" },
  { href: "/admin/scrape/geo", label: "🗺 NSPD geo (rosreestr2coord)" },
  { href: "/admin/scrape/cadastre", label: "🏗 Cadastre bulk harvest" },
  { href: "/admin/scrape/objective", label: "ETL Objective" },
  { href: "/admin/mapping-review", label: "Ревью маппингов" },
  { href: "/admin/leads", label: "Лиды PRINZIP" },
];

export default function AdminLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const pathname = usePathname();
  return (
    <div style={{ background: "#f6f7f9", minHeight: "100vh" }}>
      <div
        style={{ maxWidth: 1280, margin: "0 auto", padding: "20px 24px 40px" }}
      >
        <header style={{ marginBottom: 16 }}>
          <Link
            href="/"
            style={{ fontSize: 13, color: "#5b6066", textDecoration: "none" }}
          >
            ← GenDesign
          </Link>
          <h1 style={{ margin: "4px 0 12px", fontSize: 22 }}>Админка</h1>
          <nav
            style={{
              display: "flex",
              gap: 8,
              borderBottom: "1px solid #e6e8ec",
            }}
          >
            {TABS.map((t) => {
              // Активна вкладка с самым длинным совпадающим префиксом —
              // иначе /admin/scrape тоже подсветится при заходе на
              // /admin/scrape/nspd.
              const matchesPrefix =
                pathname === t.href || pathname?.startsWith(t.href + "/");
              const longerMatch = TABS.some(
                (other) =>
                  other.href !== t.href &&
                  other.href.length > t.href.length &&
                  (pathname === other.href ||
                    pathname?.startsWith(other.href + "/")),
              );
              const active = matchesPrefix && !longerMatch;
              return (
                <Link
                  key={t.href}
                  href={t.href}
                  style={{
                    padding: "10px 14px",
                    borderBottom: active
                      ? "2px solid #1d4ed8"
                      : "2px solid transparent",
                    color: active ? "#1d4ed8" : "#374151",
                    fontWeight: active ? 600 : 500,
                    textDecoration: "none",
                    fontSize: 14,
                  }}
                >
                  {t.label}
                </Link>
              );
            })}
          </nav>
        </header>
        {children}
      </div>
    </div>
  );
}
