// Observe tab body: live dashboards queried against the region's dataplane
// at view time (like usage-series — the dataplane address comes from the
// region's latest stored resolve artifact, the series values are live).
// The dashboard vocabulary comes from the engine registry; the tab sends
// registry ids + one shared window preset, never PromQL. No polling — the
// same view-time chart precedent as the workload/node trends.

import { useState } from "react";
import { DEFAULT_TREND_WINDOW, type TrendWindowKey } from "@/engine/trend-window";
import { OBSERVE_DASHBOARDS } from "@/engine/observe-dashboards";
import { Section } from "@/components/ui/Section";
import { PillTabs } from "@/components/ui/PillTabs";
import { TrendWindowSelect } from "@/components/regions/TrendWindowSelect";
import { ObserveChartCard } from "@/components/regions/ObserveChartCard";

export function ObserveTab(props: { regionKey: string }) {
  const { regionKey } = props;
  // dashboardId only ever holds registry ids (the pills render the same
  // array), so the lookup cannot miss.
  const [dashboardId, setDashboardId] = useState<string>(OBSERVE_DASHBOARDS[0].id);
  const [windowKey, setWindowKey] = useState<TrendWindowKey>(DEFAULT_TREND_WINDOW);
  const dashboard = OBSERVE_DASHBOARDS.find((d) => d.id === dashboardId)!;

  return (
    <Section
      title="Observe"
      subtitle="live dashboards queried against the region's dataplane at view time"
    >
      <div className="mb-3 flex items-center justify-between gap-2">
        <PillTabs
          items={OBSERVE_DASHBOARDS.map((d) => ({ id: d.id, label: d.title }))}
          value={dashboardId}
          onSelect={setDashboardId}
        />
        <TrendWindowSelect value={windowKey} onChange={setWindowKey} />
      </div>
      <div className="grid gap-4 md:grid-cols-2">
        {dashboard.charts.map((chart) => (
          <ObserveChartCard
            key={`${dashboard.id}/${chart.id}/${windowKey}`}
            regionKey={regionKey}
            dashboardId={dashboard.id}
            chart={chart}
            windowKey={windowKey}
          />
        ))}
      </div>
    </Section>
  );
}