frontend/src/rlm/components/Panel.tsx

import type { PanelNav, DatasetInfo, OverviewData, GepaIterData, RlmIterDetail } from "../types";
import Breadcrumb from "./Breadcrumb";
import OverviewLevel from "./OverviewLevel";
import GepaIterLevel from "./GepaIterLevel";
import RlmDetailLevel from "./RlmDetailLevel";
import DatasetSelector from "./DatasetSelector";

interface PanelProps {
  nav: PanelNav;
  dataset: DatasetInfo | undefined;
  panelLabel?: string;
  datasets?: DatasetInfo[];
  onNavigate: (nav: PanelNav) => void;
  onGoUp: () => void;
  onSwitchDataset?: (id: string) => void;
  fetchOverview: (dsId: string) => Promise<OverviewData>;
  fetchGepaIter: (dsId: string, gepaIter: number) => Promise<GepaIterData>;
  fetchRlmDetail: (
    dsId: string,
    gepaIter: number,
    rlmCallIdx: number,
    rlmIter: number
  ) => Promise<RlmIterDetail>;
}

export default function Panel({
  nav,
  dataset,
  panelLabel,
  datasets,
  onNavigate,
  onGoUp,
  onSwitchDataset,
  fetchOverview,
  fetchGepaIter,
  fetchRlmDetail,
}: PanelProps) {
  return (
    <div className="flex flex-col h-full border border-gray-700 rounded-lg bg-gray-900 overflow-hidden">
      {/* Panel header */}
      <div className="flex items-center gap-2 px-3 py-2 border-b border-gray-700 bg-gray-800">
        {nav.level > 1 && (
          <button
            className="text-gray-400 hover:text-gray-200 text-sm"
            onClick={onGoUp}
            title="Go up"
          >
            &#8592;
          </button>
        )}
        {panelLabel && (
          <span className="text-xs bg-gray-700 text-gray-300 px-1.5 py-0.5 rounded">
            {panelLabel}
          </span>
        )}
        <Breadcrumb nav={nav} dataset={dataset} onNavigate={onNavigate} />
        {panelLabel === "B" && datasets && onSwitchDataset && (
          <div className="ml-auto">
            <DatasetSelector
              datasets={datasets}
              currentId={nav.datasetId}
              onSelect={(id) => onSwitchDataset(id)}
            />
          </div>
        )}
      </div>

      {/* Panel content */}
      <div className="flex-1 overflow-y-auto">
        {nav.level === 1 && (
          <OverviewLevel
            datasetId={nav.datasetId}
            fetchOverview={fetchOverview}
            onDrillDown={onNavigate}
          />
        )}
        {nav.level === 2 && nav.gepaIter !== undefined && (
          <GepaIterLevel
            datasetId={nav.datasetId}
            gepaIter={nav.gepaIter}
            fetchGepaIter={fetchGepaIter}
            onDrillDown={onNavigate}
          />
        )}
        {nav.level === 3 &&
          nav.gepaIter !== undefined &&
          nav.rlmCallIdx !== undefined &&
          nav.rlmIter !== undefined && (
            <RlmDetailLevel
              datasetId={nav.datasetId}
              gepaIter={nav.gepaIter}
              rlmCallIdx={nav.rlmCallIdx}
              rlmIter={nav.rlmIter}
              fetchRlmDetail={fetchRlmDetail}
            />
          )}
      </div>
    </div>
  );
}