import Link from "next/link";
import { Progress } from "yt-dlp-transcript-common/components/ui/progress";
import type {
  FlowStation as Station,
  StationOperation,
} from "yt-dlp-transcript-common/views/pipeline/channelFlow";
// THE SPLIT MATTERS HERE. This is a SERVER component, and StateBand.tsx is
// `"use client"` — a plain function exported from a client module cannot be
// CALLED from the server ("attempted to call bandSentence() from the server"),
// only rendered as a component. So the readings come from band.ts, which
// carries no directive, and only the component itself comes from StateBand.
import {
  bandHeadline,
  bandSentence,
} from "yt-dlp-transcript-common/views/pipeline/band";
import { StateBand } from "../../../../components/pipelines/StateBand";
import { formatCount, formatCoverage, STATION_DOT } from "yt-dlp-transcript-common/views/pipeline/tone";

// One station on the line, emitted as THREE siblings so the parent grid can put
// every dot on the same horizontal rule regardless of how tall the labels above
// them are. See ChannelLine for the row contract.

export function StationHead({
  station,
  slug,
}: {
  station: Station;
  slug: string;
}) {
  return (
    <Link
      href={`/channels/${slug}?stage=${station.stage}`}
      aria-label={`${station.label} station`}
      data-station={station.id}
      className="group flex flex-col gap-0.5 rounded-md px-1 -mx-1 hover:bg-muted focus-visible:outline-2 focus-visible:outline-ring"
    >
      {/* The house eyebrow, tightened one step. */}
      <span className="font-mono text-[10px] uppercase tracking-[0.18em] text-muted-foreground">
        {station.label}
      </span>
      {/* The only large numeral the page is allowed. ~3:1 against the 10px
          eyebrow is what makes the line scannable from across the room. */}
      <span
        aria-label={`${station.label} through`}
        className="font-mono text-3xl font-semibold tabular-nums leading-none group-hover:underline"
      >
        {formatCount(station.through)}
      </span>
    </Link>
  );
}

export function StationRail({ station }: { station: Station }) {
  return (
    <div className="flex items-center h-3 md:justify-start">
      <span
        aria-hidden="true"
        className={`inline-block w-2.5 h-2.5 rounded-full flex-shrink-0 ${STATION_DOT[station.tone]}`}
      />
      {station.running && <span className="sr-only">running</span>}
    </div>
  );
}

export function StationFoot({ station }: { station: Station }) {
  return (
    <div className="flex flex-col gap-1 min-w-[5rem] max-w-[8rem]">
      <p
        aria-label={`${station.label} coverage`}
        className="text-[11px] text-muted-foreground tabular-nums"
      >
        {station.denominator == null && station.coverage == null
          ? // Not "0%". A third of the snapshots on disk predate the denominator
            // this would divide by, and inventing one is how a fully digested
            // channel comes to read as empty.
            "—"
          : `${formatCoverage(station.coverage)} of ${formatCount(station.denominator)}`}
      </p>
      {station.operations.length > 0 ? (
        // ONE BAND PER OPERATION, never one bar for the station.
        //
        // The station used to draw a single meter over a number that summed
        // three unrelated pipelines. Its members are three different
        // populations with two different cost bases, and the only honest picture is
        // three bands — the same instrument, at the smallest of its three
        // scales, so a reader coming from /channels or /operations already
        // knows what the fills mean.
        station.operations.map((op) => (
          <StationPipeline
            key={op.id}
            operation={op}
            // Named only when the station holds more than one. Under Digest the
            // name would just repeat the eyebrow a line above; under Speakers
            // it is the whole point, because three operations were hiding
            // behind one word and this is where they are finally listed.
            named={station.operations.length > 1}
          />
        ))
      ) : station.coverage != null ? (
        // The one station that is not a registry operation — playlist — keeps
        // the plain meter.
        //
        // aria-hidden, and no label: the <p> above states the same ratio in
        // words, so the bar is decorative. Naming it "<station> coverage meter"
        // both announces the number twice AND makes getByLabel("<station>
        // coverage") ambiguous, since that matching is by substring.
        <Progress
          value={station.coverage * 100}
          aria-hidden="true"
          className="h-1 max-w-[7rem]"
        />
      ) : null}
    </div>
  );
}

// One pipeline under a station: its name, its band, and the one population that
// dominates what is left.
//
// The name is only drawn when the station holds MORE THAN ONE — under Digest it
// would just repeat the station eyebrow a line above. Under Speakers it is the
// whole point: three operations were hiding behind one word, and this is where
// they are finally listed.
function StationPipeline({
  operation,
  named,
}: {
  operation: StationOperation;
  named: boolean;
}) {
  const sentence = bandSentence(operation.band);
  return (
    <div
      className="flex flex-col gap-0.5"
      // The exact figures, and the cost basis one of them is counted against. Never summed
      // and never rounded — the band is the shape, this is the arithmetic.
      title={`${operation.label} — ${sentence}. ${operation.costBasis}.`}
    >
      <span className="sr-only">
        {operation.label}: {sentence}. {operation.costBasis}.
      </span>
      <span
        aria-hidden="true"
        className="flex items-baseline gap-1 text-[10px] leading-none text-muted-foreground"
      >
        {named && (
          <span className="font-mono uppercase tracking-[0.1em]">
            {operation.shortLabel}
          </span>
        )}
        <span className="tabular-nums">{bandHeadline(operation.band)}</span>
      </span>
      <StateBand band={operation.band} size="station" className="max-w-[7rem]" />
    </div>
  );
}