import Link from "next/link";

type ObserveView = "observe" | "agents";

export function observeHref(view: ObserveView, regionIds: string[]): string {
  if (regionIds.length === 0) return view === "observe" ? "/observe" : "/agents";
  const regions = encodeURIComponent(regionIds.join(","));
  return view === "observe"
    ? `/observe?regions=${regions}&component=acs`
    : `/agents?regions=${regions}`;
}

export function ObserveViewSwitcher({
  activeView,
  regionIds,
}: {
  activeView: ObserveView;
  regionIds: string[];
}) {
  const items: Array<{ view: ObserveView; label: string }> = [
    { view: "observe", label: "Observe" },
    { view: "agents", label: "Agents" },
  ];

  return (
    <nav
      aria-label="Observe views"
      className="inline-flex items-center gap-1 rounded-md border border-surface-2 bg-surface-0 p-1"
    >
      {items.map((item) => {
        const active = item.view === activeView;
        return (
          <Link
            key={item.view}
            href={observeHref(item.view, regionIds)}
            aria-current={active ? "page" : undefined}
            className={`inline-flex h-8 min-w-20 items-center justify-center rounded px-3 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 ${
              active
                ? "bg-accent-muted text-accent"
                : "text-text-secondary hover:bg-surface-1 hover:text-text-primary"
            }`}
          >
            {item.label}
          </Link>
        );
      })}
    </nav>
  );
}