"use client";

import { useState } from "react";

import type { CatalogEntry } from "@/lib/api/topology";

import { TopologyCompare } from "./TopologyCompare";
import { TopologyExplorer } from "./TopologyExplorer";
import { TopologyRun } from "./TopologyRun";

const TABS = ["build", "run", "compare"] as const;
type Tab = (typeof TABS)[number];

/** Tabbed topology workbench: Build (catalog + visualizer), Run (one topology
 *  as a durable job with live progress), and Compare (a task across topologies
 *  → leaderboard + Pareto). */
export function TopologyWorkbench({ catalog }: { catalog: CatalogEntry[] }) {
  const [tab, setTab] = useState<Tab>("build");
  return (
    <div className="flex flex-col gap-6">
      <div role="tablist" className="flex gap-1 border-b border-border">
        {TABS.map((t) => (
          <button
            key={t}
            type="button"
            role="tab"
            aria-selected={tab === t}
            onClick={() => setTab(t)}
            className={`-mb-px border-b-2 px-3 py-2 text-sm capitalize transition-colors ${
              tab === t
                ? "border-coral text-foreground"
                : "border-transparent text-muted-foreground hover:text-foreground"
            }`}
          >
            {t}
          </button>
        ))}
      </div>
      {tab === "build" ? (
        <TopologyExplorer catalog={catalog} />
      ) : tab === "run" ? (
        <TopologyRun catalog={catalog} />
      ) : (
        <TopologyCompare catalog={catalog} />
      )}
    </div>
  );
}