"use client";

import { useState } from "react";
import Link from "next/link";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "yt-dlp-transcript-common/components/ui/collapsible";

// The five-line paragraph that used to sit under the page title, folded away.
// It is reference material — true, worth having, and read once — so it was
// costing every subsequent visit the height of the answer to "what is it doing
// right now", which is the question people actually arrive with.
//
// `compiled` says whether the rules below are GENERATED from the channel
// priorities rather than hand-authored here. It changes what the last paragraph
// claims, because with a priority model set "read top to bottom" is still true
// and "edit them here" is not: the compiler wins at dispatch, so a rule typed
// into this tree could not change what the lane does.

export function HowPriorityWorks({ compiled = false }: { compiled?: boolean }) {
  const [open, setOpen] = useState(false);
  return (
    <Collapsible open={open} onOpenChange={setOpen}>
      <CollapsibleTrigger className="text-sm text-muted-foreground underline underline-offset-2 hover:text-foreground">
        How priority works {open ? "⌃" : "⌄"}
      </CollapsibleTrigger>
      <CollapsibleContent>
        <div className="mt-2 flex flex-col gap-2 border-l-2 border-border pl-3 text-sm text-muted-foreground">
          <p>
            Rules are read top to bottom: the highest one with available work
            claims the next freed worker slot, and when its work runs out the
            runner falls through to the next rule automatically. Wrap rules in a
            group set to <em>round-robin</em> or <em>weighted-fair</em> to
            alternate between them instead.
          </p>
          <p>
            <strong className="text-foreground">Order</strong> sorts videos{" "}
            <em>inside</em> each rule, across every channel and bucket that rule
            claims. Rule order still wins — for a pure newest-first archive, use
            one catch-all rule.
          </p>
          {/* THE TREE IS GENERATED, and this is where that is said in prose —
              the read-only ladder says it as a state, this says it as a rule.
              Drawn in both cases because "where do the rules come from" has an
              answer either way, and the two answers are different. */}
          <p>
            {compiled ? (
              <>
                <strong className="text-foreground">
                  These rules are generated
                </strong>{" "}
                from the channel priorities — one tier per channel plus one
                focus — set on{" "}
                <Link href="/channels" className="underline">
                  the channels page
                </Link>
                . All four lanes are compiled from that one document, so a
                focus group sits at the top of every one of them and the tree
                below is read-only here.
              </>
            ) : (
              <>
                No channel priorities are set, so these rules are hand-authored
                here. Setting a tier or a focus on{" "}
                <Link href="/channels" className="underline">
                  the channels page
                </Link>{" "}
                generates all four lanes&rsquo; rules instead, and this tree
                becomes read-only.
              </>
            )}
          </p>
          <p>
            A video is claimed by exactly one rule (the first that matches), so
            overlapping rules never double-process it. This is independent of the{" "}
            <Link href="/operations/sync" className="underline">
              sync schedule
            </Link>
            , which only decides when to re-fetch each channel, and manual
            batches keep working alongside it.
          </p>
        </div>
      </CollapsibleContent>
    </Collapsible>
  );
}