"use client";

import type { AutoQueueGroup } from "yt-dlp-transcript-common/jobs/autoQueuePolicy";
import { LadderRung, type RungData, type RungOps } from "./LadderRung";
import type { Channel } from "./dispatch";

// The policy tree, rendered as the dispatch mechanism it actually is: one rung
// per node, in priority order, each carrying its own live occupancy and backlog.
//
// A plain <div>, never a <section> — see NextUp for why a nested section breaks
// every scoped lookup in the e2e suite.

export function ClaimLadder({
  root,
  channels,
  platforms,
  buckets,
  operations,
  data,
  ops,
  readOnly = false,
}: {
  root: AutoQueueGroup;
  channels: Channel[];
  platforms: string[];
  buckets: string[];
  operations: string[];
  data: RungData;
  ops: RungOps;
  // The tree is COMPILED from the channel priorities, so it is shown rather
  // than edited. See LadderRung.
  readOnly?: boolean;
}) {
  return (
    <div
      className="flex flex-col gap-2 rounded-md border border-border bg-card px-3 py-2"
      data-policy-compiled={readOnly ? "true" : "false"}
    >
      <p className="font-mono text-xs uppercase tracking-[0.14em] text-muted-foreground">
        Policy{readOnly ? " (generated)" : ""}
      </p>
      <LadderRung
        node={root}
        depth={0}
        parentId={null}
        parentMode={null}
        index={0}
        siblingCount={1}
        channels={channels}
        platforms={platforms}
        buckets={buckets}
        operations={operations}
        data={data}
        ops={ops}
        readOnly={readOnly}
      />
    </div>
  );
}