"use client";

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

// Settings | Charts | Search aliases | Tags | Reports | Publish.
//
// A CLIENT component on purpose. Next 16 layouts are cached during navigation
// and DO NOT RERENDER — they cannot read the pathname and would not re-evaluate
// an active-tab check on a client-side move between two tabs.
// useSelectedLayoutSegment is the supported way to ask "which child segment is
// rendered"; it is null on the index page, which is the Settings tab.

export function SiteTabs({ siteId }: { siteId: string }) {
  const segment = useSelectedLayoutSegment();
  return (
    <nav aria-label="site sections" className="flex items-center gap-1">
      <Tab href={`/sites/${siteId}`} active={segment === null} label="Settings" />
      <Tab
        href={`/sites/${siteId}/charts`}
        active={segment === "charts"}
        label="Charts"
      />
      <Tab
        href={`/sites/${siteId}/aliases`}
        active={segment === "aliases"}
        label="Search aliases"
      />
      <Tab
        href={`/sites/${siteId}/tags`}
        active={segment === "tags"}
        label="Tags"
      />
      <Tab
        href={`/sites/${siteId}/reports`}
        active={segment === "reports"}
        label="Reports"
      />
      <Tab
        href={`/sites/${siteId}/publish`}
        active={segment === "publish"}
        label="Publish"
      />
    </nav>
  );
}

function Tab({
  href,
  active,
  label,
}: {
  href: string;
  active: boolean;
  label: string;
}) {
  return (
    <Link
      href={href}
      aria-current={active ? "page" : undefined}
      aria-label={`${label} tab`}
      className={`rounded-md px-3 py-1 text-sm ${
        active
          ? "bg-muted text-foreground font-medium"
          : "text-muted-foreground hover:bg-muted hover:text-foreground"
      }`}
    >
      {label}
    </Link>
  );
}