import type { Metadata } from "next";
import { buildAutoQueueStatusPayload } from "./status";
import { buildSyncRow } from "./syncRow";
import { OperationsBoard } from "./components/OperationsBoard";

export const dynamic = "force-dynamic";

export const metadata: Metadata = { title: "Operations" };

// THE BOARD. Every operation this install runs, and the dispatcher above them.
//
// One page per operation is the whole redesign (plans/editor-operations-ia.md).
// Before it this route was one page with a lane <select>: the rail said what
// every pipeline was doing, and then a dropdown decided which one you could act
// on. A dropdown is not an address — you could not link to the download lane,
// the browser Back button did not return to it, and the two panes it switched
// between had to stay mounted to keep their edits alive. The rail's rows are
// links now, and each destination is a page.
export default async function OperationsPage() {
  const [initial, sync] = await Promise.all([
    buildAutoQueueStatusPayload(),
    buildSyncRow(),
  ]);

  return (
    <div className="flex flex-col gap-4">
      <h1 className="font-display text-2xl font-semibold tracking-tight">
        Operations
      </h1>
      <OperationsBoard initial={initial} sync={sync} />
    </div>
  );
}