// Top-level Observe: live dashboards for one region, queried against its
// dataplane at view time — the live sibling of /insight's stored-run
// inspection. The region switcher hops between regions without leaving the
// observe surface; the dashboard/window vocabulary lives in ObserveTab.

"use client";

import { useParams, useRouter } from "next/navigation";
import { useRegionKeys } from "@/lib/use-region-keys";
import { ObserveTab } from "@/components/regions/ObserveTab";
import { RegionSwitcher } from "@/components/regions/RegionSwitcher";

export default function ObserveRegionPage() {
  const params = useParams<{ regionKey: string | string[] }>();
  const regionKey = Array.isArray(params?.regionKey) ? params.regionKey[0] : params?.regionKey;
  const router = useRouter();
  const regionKeys = useRegionKeys();

  return (
    <div className="animate-fade-in space-y-4">
      <div className="flex items-center gap-2">
        <h1 className="font-mono text-lg font-semibold tracking-tight">{regionKey}</h1>
        <RegionSwitcher
          regionKeys={regionKeys}
          value={regionKey ?? ""}
          onSelect={(rk) => router.push(`/observe/${rk}`)}
        />
      </div>
      {regionKey ? <ObserveTab regionKey={regionKey} /> : null}
    </div>
  );
}