import { GitBranch, Network, PanelTop } from "lucide-react";
import { NavLink, Outlet, useLocation } from "react-router-dom";

const navItems = [
  { to: "/chart", label: "조직도", icon: Network },
  { to: "/picker", label: "조직 선택기", icon: GitBranch },
  { to: "/embed-preview", label: "임베딩 검증", icon: PanelTop },
];

export function OrgFrontLayout() {
  const location = useLocation();
  const isChartRoute =
    location.pathname === "/chart" || location.pathname.startsWith("/chart/");

  return (
    <div
      className={
        isChartRoute
          ? "flex h-screen flex-col overflow-hidden bg-background text-foreground"
          : "min-h-screen bg-background text-foreground"
      }
    >
      <header
        className="sticky top-0 z-30 shrink-0 border-b border-border bg-background/95 backdrop-blur"
        data-testid="orgfront-topbar"
      >
        <div className="mx-auto flex max-w-7xl flex-col gap-3 px-4 py-4 md:flex-row md:items-center md:justify-between">
          <div>
            <p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
              Baron Orgfront
            </p>
            <h1 className="text-xl font-semibold">조직도 서비스</h1>
          </div>
          <nav className="flex flex-wrap gap-2" aria-label="주요 메뉴">
            {navItems.map(({ to, label, icon: Icon }) => (
              <NavLink
                key={to}
                to={to}
                className={({ isActive }) =>
                  [
                    "inline-flex h-10 items-center gap-2 rounded-md border px-3 text-sm font-semibold transition",
                    isActive
                      ? "border-primary bg-primary text-primary-foreground"
                      : "border-border bg-card text-muted-foreground hover:text-foreground",
                  ].join(" ")
                }
              >
                <Icon size={16} />
                {label}
              </NavLink>
            ))}
          </nav>
        </div>
      </header>

      <main
        className={
          isChartRoute
            ? "min-h-0 flex-1 overflow-hidden"
            : "mx-auto max-w-7xl px-4 py-5"
        }
        data-testid="orgfront-main"
      >
        <Outlet />
      </main>
    </div>
  );
}
