import type { ChannelFlow } from "yt-dlp-transcript-common/views/pipeline/channelFlow";
import { GapFoot, GapHead, GapRail } from "./FlowGap";
import { StationFoot, StationHead, StationRail } from "./FlowStation";

// THE CHANNEL LINE.
//
// A transit diagram, not a row of cards. Stations are stages; the gap between
// two stations carries the shortfall. The one structural trick is the LAYOUT
// CONTRACT: every cell emits exactly three children —
//
//   row 1  the station numeral (gaps contribute nothing)
//   row 2  the rail: a dot for a station, a track for a gap
//   row 3  the coverage note / the shortfall + its sidings
//
// — and the parent is a 3-row column-flow grid on md+. That is what keeps every
// dot on one horizontal rule no matter how tall the labels above them run, with
// no absolute positioning and no measured heights.
//
// On a narrow screen the same DOM stacks vertically in reading order, which is
// the natural form for a transit diagram in a column: label, count, dot,
// coverage, then the track and the shortfall leading into the next station.

export function ChannelLine({
  flow,
  slug,
}: {
  flow: ChannelFlow;
  slug: string;
}) {
  const cells: (
    | { kind: "station"; index: number }
    | { kind: "gap"; index: number }
  )[] = [];
  flow.stations.forEach((_, i) => {
    cells.push({ kind: "station", index: i });
    if (i < flow.gaps.length) cells.push({ kind: "gap", index: i });
  });

  // Stations size to their content; gaps take the slack, so the line stretches
  // to the card and the negative space is genuinely negative space.
  const gridTemplateColumns = cells
    .map((c) => (c.kind === "station" ? "max-content" : "minmax(3rem,1fr)"))
    .join(" ");

  return (
    <section
      aria-label="channel line"
      className="rounded-xl border border-border bg-card px-4 py-5 md:px-6 md:py-6 overflow-x-auto"
    >
      <div
        className="flex flex-col gap-1 md:grid md:grid-flow-col md:gap-x-1 md:gap-y-2 md:items-start min-w-fit"
        style={{
          gridTemplateColumns,
          gridTemplateRows: "auto auto auto",
        }}
      >
        {cells.map((cell) => {
          if (cell.kind === "station") {
            const station = flow.stations[cell.index];
            return [
              <StationHead key={`${station.id}-h`} station={station} slug={slug} />,
              <StationRail key={`${station.id}-r`} station={station} />,
              <StationFoot key={`${station.id}-f`} station={station} />,
            ];
          }
          const gap = flow.gaps[cell.index];
          return [
            <GapHead key={`${gap.to}-h`} />,
            <GapRail key={`${gap.to}-r`} gap={gap} />,
            <GapFoot
              key={`${gap.to}-f`}
              gap={gap}
              slug={slug}
              // Exactly one gap is promoted. Two emphasised things are no
              // emphasis at all.
              promoted={flow.bottleneck === gap.from && gap.reachable > 0}
            />,
          ];
        })}
      </div>
    </section>
  );
}