"use client";

import Link from "next/link";
import { useState } from "react";
import {
  type AutoQueueGroup,
  type AutoQueueLeaf,
  type AutoQueueMode,
  type AutoQueueNode,
  AUTO_QUEUE_MODES,
  isGroup,
} from "yt-dlp-transcript-common/jobs/autoQueuePolicy";
import { Button } from "yt-dlp-transcript-common/components/ui/button";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "yt-dlp-transcript-common/components/ui/collapsible";
import {
  type Channel,
  MODE_GLOSS,
  NUM_CLASS,
  SELECT_CLASS,
  formatRecency,
  leafSentence,
} from "./dispatch";

// One rung of the claim ladder: a rule (or a group of them) as a single line
// that carries its ordinal, what it matches, how much of the runner it is
// currently holding, and how much work it owns — and is simultaneously the
// control that edits it.
//
// This replaces a tree editor that sat above a separate "Pending per rule" list
// and a separate "Recent picks" list, all three cross-referenced by a leafLabel()
// id lookup. Putting them on one object deletes that lookup and answers
// "which rule is doing the work" by looking at it.
//
// DEPTH IS THE RAIL, NOT AN INDENT. Each level draws its own hairline on the
// left, and that same hairline carries the claim fill — so nesting and
// occupancy are one mark instead of a margin plus a chip.
//
// READ-ONLY IS A RENDERING MODE, NOT A SECOND COMPONENT. When the lane's tree is
// COMPILED from the channel priorities (settings.channelPriority), editing a
// rung here could not change what the lane dispatches — the compiler wins — so
// every control that would rewrite the tree is disabled and the ones that would
// ADD or REMOVE a node are not drawn at all. What stays is everything that
// reads: the ordinal, the match sentence, the claim rail, the live occupancy
// and the pending drill-down. The switches that are NOT part of the tree
// (enable, worker cap, order, auto-captions) live in PolicyTreeEditor and are
// unaffected.

export type RungData = {
  pendingByLeaf: Record<string, number>;
  pendingHeadByLeaf: Record<string, string[]>;
  ownerByVideo: Record<string, string>;
  recencyByVideo: Record<string, { key: string; estimated: boolean }>;
  activeByNode: Record<string, number>;
  // Denominator for the claim fill: the runner's live capacity.
  capacity: number;
  nextUpLeafId: string | null;
  // Pre-order leaf ids, so a rung knows its own ordinal without re-walking.
  leafIds: string[];
};

export type RungOps = {
  update: (id: string, fn: (n: AutoQueueNode) => AutoQueueNode) => void;
  remove: (id: string) => void;
  addChild: (parentId: string, child: AutoQueueNode) => void;
  move: (parentId: string, index: number, dir: -1 | 1) => void;
  moveToTop: (parentId: string, index: number) => void;
  makeLeaf: (type: "channel" | "platform" | "all") => AutoQueueLeaf;
  makeGroup: () => AutoQueueGroup;
};

export function LadderRung(props: {
  node: AutoQueueNode;
  depth: number;
  parentId: string | null;
  parentMode: AutoQueueMode | null;
  index: number;
  siblingCount: number;
  channels: Channel[];
  platforms: string[];
  // What THIS LANE projects, and both lists can legitimately be empty. A lane
  // with no buckets (digest, backfill) draws no bucket select; a lane with no
  // operations, or exactly one, draws no operation select — with one there is
  // nothing to choose, and naming it claims exactly what a bucket-less leaf
  // already claims.
  buckets: string[];
  operations: string[];
  data: RungData;
  ops: RungOps;
  // The tree is generated, so it is shown rather than edited. See above.
  readOnly?: boolean;
}) {
  const {
    node,
    depth,
    parentId,
    parentMode,
    index,
    siblingCount,
    data,
    ops,
    readOnly = false,
  } = props;
  const group = isGroup(node);
  const active = data.activeByNode[node.id] ?? 0;
  const isNext = !group && data.nextUpLeafId === node.id;

  return (
    // The node id is on the DOM, which is the only way to check by eye (or from
    // a test) that a compiled leaf is the leaf the runner has: `prio-focus-<slug>`
    // is a generated id, and an id that does not carry that prefix is
    // hand-authored. Nothing renders it as text.
    <div className="flex gap-2" data-node-id={node.id}>
      <ClaimRail active={active} capacity={data.capacity} />
      <div className="flex min-w-0 flex-1 flex-col gap-2 pb-1">
        <div className="flex flex-wrap items-center gap-2">
          {group ? (
            <GroupControls
              node={node as AutoQueueGroup}
              update={ops.update}
              readOnly={readOnly}
            />
          ) : (
            <LeafControls {...props} leaf={node as AutoQueueLeaf} />
          )}

          {parentMode === "weighted-fair" && (
            <label className="flex items-center gap-1 text-xs text-muted-foreground">
              weight
              <input
                type="number"
                min={1}
                disabled={readOnly}
                value={node.weight ?? 1}
                onChange={(e) =>
                  ops.update(node.id, (n) => ({
                    ...n,
                    weight: Math.max(1, Number.parseInt(e.target.value, 10) || 1),
                  }))
                }
                className={`${NUM_CLASS} w-16`}
              />
            </label>
          )}

          <label className="flex items-center gap-1 text-xs text-muted-foreground">
            max
            <input
              type="number"
              min={1}
              placeholder="∞"
              disabled={readOnly}
              value={node.maxWorkers ?? ""}
              onChange={(e) =>
                ops.update(node.id, (n) => ({
                  ...n,
                  maxWorkers:
                    e.target.value.trim() === ""
                      ? null
                      : Math.max(1, Number.parseInt(e.target.value, 10) || 1),
                }))
              }
              className={`${NUM_CLASS} w-16`}
            />
          </label>

          {active > 0 && (
            <span className="tabular-nums text-xs text-info">
              {active} working
            </span>
          )}

          {!group && (
            <PendingDrilldown
              leafId={node.id}
              ordinal={data.leafIds.indexOf(node.id) + 1}
              data={data}
            />
          )}

          {isNext && (
            <span className="rounded-full border border-info/30 bg-info-soft px-2 py-0.5 text-xs text-info">
              next up
            </span>
          )}

          <span className="ml-auto flex items-center gap-1">
            {!readOnly && parentId && siblingCount > 1 && (
              <>
                <Button
                  type="button"
                  size="xs"
                  variant="outline"
                  disabled={index === 0}
                  aria-label="Move to top"
                  title="Move to top"
                  onClick={() => ops.moveToTop(parentId, index)}
                >
                  <span aria-hidden="true">⤒</span>
                </Button>
                {/* Named. These two were addressed by a bare glyph, so a screen
                    reader announced the button as "up arrow, button". */}
                <Button
                  type="button"
                  size="xs"
                  variant="outline"
                  disabled={index === 0}
                  aria-label="Move up"
                  title="Move up"
                  onClick={() => ops.move(parentId, index, -1)}
                >
                  <span aria-hidden="true">↑</span>
                </Button>
                <Button
                  type="button"
                  size="xs"
                  variant="outline"
                  disabled={index === siblingCount - 1}
                  aria-label="Move down"
                  title="Move down"
                  onClick={() => ops.move(parentId, index, 1)}
                >
                  <span aria-hidden="true">↓</span>
                </Button>
              </>
            )}
            {!readOnly && parentId && (
              <Button
                type="button"
                size="xs"
                variant="outline"
                className="text-destructive hover:text-destructive"
                onClick={() => ops.remove(node.id)}
              >
                Remove
              </Button>
            )}
          </span>
        </div>

        {group && (
          <>
            <div className="flex flex-col gap-2">
              {(node as AutoQueueGroup).children.map((child, i) => (
                <LadderRung
                  key={child.id}
                  {...props}
                  node={child}
                  depth={depth + 1}
                  parentId={node.id}
                  parentMode={(node as AutoQueueGroup).mode}
                  index={i}
                  siblingCount={(node as AutoQueueGroup).children.length}
                />
              ))}
              {(node as AutoQueueGroup).children.length === 0 && (
                <p className="text-xs text-muted-foreground">
                  Empty group — add a rule or nested group below.
                </p>
              )}
            </div>
            {!readOnly && (
            <div className="flex flex-wrap gap-2">
              <AddButton onClick={() => ops.addChild(node.id, ops.makeLeaf("channel"))}>
                + Channel rule
              </AddButton>
              <AddButton onClick={() => ops.addChild(node.id, ops.makeLeaf("platform"))}>
                + Platform rule
              </AddButton>
              <AddButton onClick={() => ops.addChild(node.id, ops.makeLeaf("all"))}>
                + Catch-all rule
              </AddButton>
              <AddButton onClick={() => ops.addChild(node.id, ops.makeGroup())}>
                + Group
              </AddButton>
            </div>
            )}
          </>
        )}
      </div>
    </div>
  );
}

function AddButton({
  onClick,
  children,
}: {
  onClick: () => void;
  children: React.ReactNode;
}) {
  return (
    <Button type="button" size="xs" variant="outline" onClick={onClick}>
      {children}
    </Button>
  );
}

// The signature mark. A hairline that says depth by existing at all, and says
// occupancy by how much of it is lit — so a rung holding two of the runner's
// three slots reads without a number, and the number beside it is confirmation
// rather than the only channel.
function ClaimRail({ active, capacity }: { active: number; capacity: number }) {
  const pct =
    capacity > 0 ? Math.min(100, Math.round((active / capacity) * 100)) : 0;
  return (
    <div
      aria-hidden="true"
      className="relative w-0.5 shrink-0 self-stretch rounded-full bg-border"
    >
      {pct > 0 && (
        <span
          className="absolute inset-x-0 bottom-0 rounded-full bg-info"
          style={{ height: `${pct}%` }}
        />
      )}
    </div>
  );
}

// The count, and behind it the actual videos in the exact order they would be
// handed out. buildPendingByLeaf already returned these arrays and
// computeLeafPendingCounts threw everything but .length away — which is also why
// there was previously no way to check an ordering change by eye.
function PendingDrilldown({
  leafId,
  ordinal,
  data,
}: {
  leafId: string;
  ordinal: number;
  data: RungData;
}) {
  const [open, setOpen] = useState(false);
  const count = data.pendingByLeaf[leafId] ?? 0;
  const head = data.pendingHeadByLeaf[leafId] ?? [];

  if (count === 0) {
    return <span className="tabular-nums text-xs text-muted-foreground">0</span>;
  }

  return (
    <Collapsible open={open} onOpenChange={setOpen} className="contents">
      <CollapsibleTrigger asChild>
        <button
          type="button"
          aria-label={`Show pending videos for rule ${ordinal}`}
          className="rounded px-1 tabular-nums text-xs text-foreground underline underline-offset-2 hover:text-brand"
        >
          {count.toLocaleString()}
          <span aria-hidden="true"> {open ? "⌃" : "⌄"}</span>
        </button>
      </CollapsibleTrigger>
      <CollapsibleContent className="w-full">
        <ul className="mt-1 flex flex-col gap-0.5 border-l border-border pl-3">
          {head.map((id) => {
            const slug = data.ownerByVideo[id];
            const recency = formatRecency(data.recencyByVideo[id]);
            return (
              <li
                key={id}
                className="flex flex-wrap items-baseline gap-x-2 text-xs"
              >
                {slug ? (
                  <Link
                    href={`/channels/${slug}/videos/${id}`}
                    className="font-mono text-muted-foreground underline underline-offset-2 hover:text-brand"
                  >
                    {slug}/{id}
                  </Link>
                ) : (
                  <span className="font-mono text-muted-foreground">{id}</span>
                )}
                {recency && (
                  <span className="tabular-nums text-muted-foreground">
                    {recency}
                  </span>
                )}
              </li>
            );
          })}
          {count > head.length && (
            <li className="text-xs text-muted-foreground">
              …and {(count - head.length).toLocaleString()} more
            </li>
          )}
        </ul>
      </CollapsibleContent>
    </Collapsible>
  );
}

function GroupControls({
  node,
  update,
  readOnly,
}: {
  node: AutoQueueGroup;
  update: RungOps["update"];
  readOnly: boolean;
}) {
  return (
    <>
      <span className="font-mono text-xs uppercase tracking-[0.14em] text-muted-foreground">
        Group
      </span>
      {/* Named: this select had no label at all. */}
      <select
        aria-label="group mode"
        disabled={readOnly}
        value={node.mode}
        onChange={(e) =>
          update(node.id, (n) => ({ ...n, mode: e.target.value as AutoQueueMode }))
        }
        className={SELECT_CLASS}
      >
        {AUTO_QUEUE_MODES.map((m) => (
          <option key={m} value={m}>
            {m}
          </option>
        ))}
      </select>
      <span className="text-xs text-muted-foreground">
        {MODE_GLOSS[node.mode]}
      </span>
    </>
  );
}

function LeafControls(props: {
  leaf: AutoQueueLeaf;
  channels: Channel[];
  platforms: string[];
  buckets: string[];
  operations: string[];
  data: RungData;
  ops: RungOps;
  readOnly?: boolean;
}) {
  const {
    leaf,
    channels,
    platforms,
    buckets,
    operations,
    data,
    ops,
    readOnly = false,
  } = props;
  const type = leaf.match.type;
  const ordinal = data.leafIds.indexOf(leaf.id) + 1;
  return (
    <>
      {/* Legitimate numbering: this ordinal IS the priority the engine reads,
          not decoration on an unordered list. */}
      <span className="w-5 shrink-0 font-display text-sm font-semibold tabular-nums text-muted-foreground">
        {ordinal > 0 ? ordinal : "—"}
      </span>
      {/* Named: the match-type select had no label. */}
      <select
        aria-label="rule match type"
        disabled={readOnly}
        value={type}
        onChange={(e) =>
          ops.update(leaf.id, (n) => ({
            ...n,
            match: { type: e.target.value as AutoQueueLeaf["match"]["type"] },
          }))
        }
        className={SELECT_CLASS}
      >
        <option value="channel">channel</option>
        <option value="platform">platform</option>
        <option value="all">all</option>
      </select>

      {type === "channel" && (
        <select
          aria-label="channel rule value"
          disabled={readOnly}
          value={leaf.match.value ?? ""}
          onChange={(e) =>
            ops.update(leaf.id, (n) => ({
              ...n,
              match: { ...(n as AutoQueueLeaf).match, value: e.target.value },
            }))
          }
          className={SELECT_CLASS}
        >
          <option value="">— pick channel —</option>
          {channels.map((c) => (
            <option key={c.slug} value={c.slug}>
              {c.name ?? c.slug}
            </option>
          ))}
        </select>
      )}

      {type === "platform" && (
        <select
          aria-label="platform rule value"
          disabled={readOnly}
          value={leaf.match.value ?? ""}
          onChange={(e) =>
            ops.update(leaf.id, (n) => ({
              ...n,
              match: { ...(n as AutoQueueLeaf).match, value: e.target.value },
            }))
          }
          className={SELECT_CLASS}
        >
          <option value="">— pick platform —</option>
          {platforms.map((p) => (
            <option key={p} value={p}>
              {p}
            </option>
          ))}
        </select>
      )}

      {/* THE OPERATION SELECT, for a lane that carries more than one.
          `operation` and `bucket` are two id spaces and a leaf may name at most
          one (sanitizeMatch enforces it, operation winning), so setting either
          one clears the other here rather than letting the sanitizer decide
          silently on save.

          Native <select>, like every other control on this ladder: Radix
          portals its options and unmounts them while closed, which would take
          the page-wide option counts the e2e suite asserts to zero. */}
      {operations.length > 1 && (
        <label className="flex items-center gap-1 text-xs text-muted-foreground">
          operation
          <select
            value={leaf.match.operation ?? ""}
            aria-label="rule operation"
            disabled={readOnly}
            onChange={(e) =>
              ops.update(leaf.id, (n) => {
                const match = { ...(n as AutoQueueLeaf).match };
                if (e.target.value) {
                  match.operation = e.target.value;
                  delete match.bucket;
                } else {
                  delete match.operation;
                }
                return { ...n, match };
              })
            }
            className={SELECT_CLASS}
          >
            <option value="">all operations (default)</option>
            {operations.map((o) => (
              <option key={o} value={o}>
                {o}
              </option>
            ))}
          </select>
        </label>
      )}

      {buckets.length > 0 && (
        <label className="flex items-center gap-1 text-xs text-muted-foreground">
          bucket
          {/* The option TEXT stays the raw bucket name: it is how an operator
              names a bucket to the runner, and one spec asserts exactly one
              option named `downloadedAutoSubsOnly` exists page-wide. The
              plain-language gloss goes in the sentence below instead. */}
          <select
            value={leaf.match.bucket ?? ""}
            aria-label="rule bucket"
            disabled={readOnly}
            onChange={(e) =>
              ops.update(leaf.id, (n) => {
                const match = { ...(n as AutoQueueLeaf).match };
                if (e.target.value) {
                  match.bucket = e.target.value;
                  // The other half of the operation select's rule: at most one of
                  // the two id spaces, decided here rather than by the sanitizer.
                  delete match.operation;
                } else delete match.bucket;
                return { ...n, match };
              })
            }
            className={SELECT_CLASS}
          >
            <option value="">all buckets (default)</option>
            {buckets.map((b) => (
              <option key={b} value={b}>
                {b}
              </option>
            ))}
          </select>
        </label>
      )}

      <span className="text-xs text-muted-foreground">
        {leafSentence(leaf, channels)}
      </span>
    </>
  );
}