"use client";

import Link from "next/link";
import type { AutoQueueKindStatus } from "yt-dlp-transcript-common/views/autoQueueStatus";
import {
  type Channel,
  ORDER_LABEL,
  formatRecency,
  leafOrder,
  leafSentence,
} from "./dispatch";

// What the runner would dispatch next, and WHY that one.
//
// Nothing here needed new machinery: the pick comes from the same
// buildChannelWork → buildPendingByLeaf → selectNextWork chain the runner uses,
// the rule path is WorkPick.path, and "why not the rule above it" is just the
// higher-priority leaves whose pending count is zero. The page simply never
// asked.
//
// A plain <div>, never a <section>: a nested section inside a kind section makes
// locator("section", { has }) match two ancestors and every scoped lookup in the
// suite fails on strict mode.

export function NextUp({
  status,
  channels,
}: {
  status: AutoQueueKindStatus;
  channels: Channel[];
}) {
  const next = status.nextUp;
  const order = status.policy.order ?? "listed";

  if (!next) {
    return (
      <Panel>
        <p className="text-sm text-muted-foreground">
          Nothing to dispatch — every rule is empty or capped.
        </p>
      </Panel>
    );
  }

  const leaves = leafOrder(status.policy.root);
  const at = leaves.findIndex((l) => l.id === next.leafId);
  const leaf = at >= 0 ? leaves[at] : null;
  const recency = formatRecency(next.recency ?? undefined);
  const skipped = next.skippedLeafIds
    .map((id) => leaves.findIndex((l) => l.id === id))
    .filter((i) => i >= 0);

  return (
    <Panel>
      <p className="flex flex-wrap items-baseline gap-x-2 gap-y-1">
        {next.channelSlug ? (
          <Link
            href={`/channels/${next.channelSlug}/videos/${next.videoId}`}
            className="font-mono text-sm text-foreground underline underline-offset-2 hover:text-brand"
          >
            {next.channelSlug}/{next.videoId}
          </Link>
        ) : (
          <span className="font-mono text-sm text-foreground">
            {next.videoId}
          </span>
        )}
        {recency && (
          <span className="tabular-nums text-sm text-muted-foreground">
            {recency}
          </span>
        )}
        {at >= 0 && (
          <span className="text-sm text-muted-foreground">
            <span aria-hidden="true">← </span>
            rule {at + 1}
            {leaf ? ` · ${leafSentence(leaf, channels)}` : ""}
          </span>
        )}
      </p>
      <p className="text-xs text-muted-foreground">
        {skipped.length > 0
          ? `${skipped
              .map((i) => `rule ${i + 1}`)
              .join(", ")} ${skipped.length === 1 ? "has" : "have"} no pending work`
          : "highest-priority rule with work"}
        {order !== "listed" ? ` · ${ORDER_LABEL[order].toLowerCase()}` : ""}
      </p>
    </Panel>
  );
}

function Panel({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex flex-col gap-1 rounded-md border border-border bg-card px-3 py-2">
      <p className="font-mono text-xs uppercase tracking-[0.14em] text-muted-foreground">
        Next up
      </p>
      {children}
    </div>
  );
}