"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { BUILD_STUDIO_CONFIG_ROUTE_COPY } from "./build-studio-route-copy";

const TABS = [
  { label: "Overview", href: "/platform/ai" },
  { label: "Operations Map", href: "/platform/ai/operations-map" },
  { label: "Capacity Continuity", href: "/platform/ai/capacity-continuity" },
  { label: "Assignments", href: "/platform/ai/assignments" },
  { label: "Prompts", href: "/platform/ai/prompts" },
  { label: "Skills", href: "/platform/ai/skills" },
  { label: "Capability Needs", href: "/platform/ai/capability-needs" },
  { label: "Providers & Routing", href: "/platform/ai/providers" },
  { label: BUILD_STUDIO_CONFIG_ROUTE_COPY.navLabel, href: "/platform/ai/build-studio" },
];

export function AiTabNav() {
  const pathname = usePathname();
  const active = (href: string) =>
    href === "/platform/ai"
      ? pathname === "/platform/ai"
      : pathname.startsWith(href);

  return (
    <div className="flex gap-1 mb-6 border-b border-[var(--dpf-border)]">
      {TABS.map((t) => (
        <Link
          key={t.href}
          href={t.href}
          className={[
            "px-3 py-1.5 text-xs font-medium rounded-t transition-colors",
            active(t.href)
              ? "text-[var(--dpf-text)] border-b-2 border-[var(--dpf-accent)]"
              : "text-[var(--dpf-muted)] hover:text-[var(--dpf-text)]",
          ].join(" ")}
        >
          {t.label}
        </Link>
      ))}
    </div>
  );
}
