import Link from "next/link";
import type { FlowGap as Gap } from "yt-dlp-transcript-common/views/pipeline/channelFlow";
import { SidingList } from "./SidingList";

// THE GAP IS THE WORK.
//
// The shortfall between two stations lives in the negative space between them,
// because that is literally what it is: `videos − downloaded`-shaped. Only the
// LARGEST reachable gap is promoted typographically; the rest recede. The eye
// lands on the bottleneck without the widths having to lie about proportion —
// a 1,675 gap and a 72 gap are drawn the same size, and the type says which is
// which.

export function GapHead() {
  // Row 1 is the station numerals; a gap contributes nothing to it.
  return <div aria-hidden="true" className="hidden md:block" />;
}

export function GapRail({ gap }: { gap: Gap }) {
  const dashed = gap.reachable > 0;
  return (
    <div className="flex items-center h-3 pl-[4px] md:pl-0 md:px-2">
      <span
        aria-hidden="true"
        className={
          // Vertical on mobile (the natural form for a transit diagram in a
          // narrow column), horizontal on md+.
          `w-px h-4 md:w-full md:h-0 md:border-t-2 ${
            dashed
              ? "bg-warning/50 md:bg-transparent md:border-dashed md:border-warning/50"
              : "bg-border-strong md:bg-transparent md:border-solid md:border-border-strong"
          }`
        }
      />
    </div>
  );
}

export function GapFoot({
  gap,
  slug,
  promoted,
}: {
  gap: Gap;
  slug: string;
  promoted: boolean;
}) {
  return (
    <div
      aria-label={`${gap.label} gap`}
      data-gap={gap.to}
      data-bottleneck={promoted ? "true" : undefined}
      className="min-w-0 md:px-2"
    >
      {gap.reachable > 0 ? (
        <Link
          href={`/channels/${slug}?stage=${gap.stage}`}
          aria-label={`${gap.label} shortfall`}
          className={
            promoted
              ? "inline-flex items-baseline gap-1 text-sm font-medium text-warning hover:underline tabular-nums"
              : "inline-flex items-baseline gap-1 text-xs text-muted-foreground hover:text-foreground hover:underline tabular-nums"
          }
        >
          <span aria-hidden="true">▼</span>
          <span>{gap.reachable.toLocaleString()}</span>
          <span className="font-normal">{gap.label}</span>
        </Link>
      ) : (
        <span
          aria-label={`${gap.label} shortfall`}
          className="text-xs text-muted-foreground"
        >
          {/* An explicit zero is the right answer here: this IS a work list the
              lane can enumerate, and it is empty. The "—" rule is for coverage,
              where the snapshot cannot say. */}
          0 {gap.label}
        </span>
      )}
      <SidingList slug={slug} sidings={gap.sidings} />
    </div>
  );
}