"use client";

import {
  bandDenominator,
  SEGMENTS,
  segmentValue,
  type OperationBand,
} from "yt-dlp-transcript-common/views/pipeline/band";

// THE INSTRUMENT. One component, three scales, one vocabulary.
//
// The comparison rail built for /operations answers "what can this pipeline do
// right now" for the whole corpus. Shrunk, the same instrument answers it per
// channel; shrunk again, per station on a channel page. Nothing new is invented
// here — the reason the three surfaces read as one system is that they are
// literally the same five fills, from the same model, in the same order.
//
// EXACTLY ONE SATURATED COLOUR, EVERYWHERE: `reachable`. Every other fill is
// texture on neutral. That makes "where the colour is" mean "where work can
// happen now" at table scale, at rail scale and at station scale — and a second
// accent would break that reading in all three places at once.
//
// FILL PATTERN FIRST, HUE SECOND. Not a stylistic whim: report-to-video's claim
// rail established here BY MEASUREMENT that no four-colour palette clears
// all-pairs colour-blindness. Pattern (solid / hatched / dotted / hollow)
// survives CVD, greyscale, and a dim laptop at 2am, which is when these
// consoles are actually read.
//
// EVERY FILL IS A TOKEN from common/styles/tokens.css. No new colour ships with
// this instrument, and that is load-bearing rather than frugal.

// The three scales. Height and minimum width only — the fills, the order and
// the meanings are identical, which is the entire point.
//
// `strip` DOES NOT ANIMATE, and that is a deliberate subtraction rather than an
// oversight. The rail eases a segment to its new width because it draws one band
// per lane and a change there is news; /channels draws 408 of them, and 408
// bands easing on a poll is a light show, not an instrument.
const SIZES = {
  rail: { bar: "h-2.5 min-w-32 flex-1", animate: true },
  strip: { bar: "h-1.5 w-full", animate: false },
  station: { bar: "h-1 w-full", animate: false },
} as const;

export type BandSize = keyof typeof SIZES;

export function StateBand({
  band,
  size,
  className = "",
}: {
  band: OperationBand;
  size: BandSize;
  className?: string;
}) {
  const denominator = bandDenominator(band);
  const spec = SIZES[size];

  if (denominator === null) {
    // Unknown denominator: an outline and nothing else. Drawing the work counts
    // against their own sum would claim the band is fully accounted for, which
    // is a different (and worse) statement than "we cannot say".
    return (
      <span
        aria-hidden="true"
        className={`block rounded-sm border border-dashed border-border ${spec.bar} ${className}`}
      />
    );
  }

  return (
    <span
      aria-hidden="true"
      className={`flex overflow-hidden rounded-sm bg-muted ${spec.bar} ${className}`}
    >
      {SEGMENTS.map((seg) => {
        const pct = (segmentValue(band, seg.key) / denominator) * 100;
        if (pct <= 0) return null;
        return (
          <span
            key={seg.key}
            // The rail's one piece of motion: a segment eases to its new width
            // when the number actually changes. Never on poll (the width is the
            // same, so no transition fires) and never at all under
            // prefers-reduced-motion, which every animation here pairs with.
            className={`h-full ${
              spec.animate
                ? "transition-[width] duration-500 motion-reduce:transition-none"
                : ""
            } ${seg.className}`}
            style={{ width: `${Math.min(100, pct)}%` }}
          />
        );
      })}
    </span>
  );
}

// The legend is the only place the pattern vocabulary is named, and it is named
// in WORDS as well as swatches — a pattern nobody can read the meaning of is
// just noise, and this is the one non-obvious visual convention these pages
// share.
export function BandLegend({ className = "" }: { className?: string }) {
  return (
    <ul
      className={`flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground ${className}`}
    >
      {SEGMENTS.map((seg) => (
        <li key={seg.key} className="flex items-center gap-1.5">
          <span
            aria-hidden="true"
            className={`h-2.5 w-4 shrink-0 rounded-sm ${seg.className}`}
          />
          {seg.label}
        </li>
      ))}
    </ul>
  );
}