"use client";

import type { ChannelGroupSectionView } from "yt-dlp-transcript-common/views/channelGroupSections";
import { ChannelGroupLine } from "./ChannelGroupLine";
import { RACK_LAYERS } from "./rackLayout";

// A group's section header: one full-colspan row above its channels' rows, so
// the columns stay locked across every group (comparing transcript counts
// across groups is the point, which is what rules out cards).
//
// scope="rowgroup", NOT colgroup. `rowgroup` maps to role `rowheader`;
// `colgroup` maps to `columnheader` and would drop group names into the same
// role bucket channels-sort.spec.ts iterates over the real column headers.
//
// The accessible name is set explicitly to the group's name so
// getByRole("rowheader", { name }) addresses the group and not the whole line of
// station buttons and counts nested inside it.
export function ChannelGroupHeaderRow({
  section,
  siteId,
  colSpan,
}: {
  section: ChannelGroupSectionView;
  siteId: string;
  // The table's full width, owned by ChannelsTable: it is the one that knows
  // how many pipeline columns the settings switched on.
  colSpan: number;
}) {
  const { group, channels } = section;
  const name = group.name || group.id;
  return (
    // THE SECTION RULE IS THE CELL'S SHADOW, NOT THE ROW'S BORDER. Tailwind's
    // preflight collapses table borders, and a collapsed border belongs to the
    // table grid, not to the sticky cell — so pinned under the thead, the th
    // moved and its 2px top rule stayed behind as a gap the rows showed
    // through. An inset shadow is painted by the th and travels with it.
    <tr>
      <th
        colSpan={colSpan}
        scope="rowgroup"
        id={`group-${group.id}`}
        aria-label={name}
        data-group={group.id}
        className={
          // The section name stays on screen while its rows scroll past, pinned
          // just under the column header — whose height is measured into
          // `--thead-h` by ChannelsRack rather than guessed. Opaque, and above
          // the sticky identity cells it passes over, but below the thead
          // (RACK_LAYERS — a tie with the identity cells is what let the Slug
          // band paint over the station buttons).
          "px-2 py-1.5 text-left font-normal align-top bg-muted " +
          "shadow-[inset_0_2px_0_var(--color-border)] " +
          `md:sticky md:top-[var(--thead-h,2.25rem)] ${RACK_LAYERS.groupHeader}`
        }
      >
        {/* THE CONTENT PINS LEFT. The th spans every column, so its name and
            five stations used to scroll off to the left with the table — the
            group's controls out of reach exactly when the operator had
            scrolled across to read a column. Capped at the region's visible
            width (`--rack-w`, measured by ChannelsRack; 100% before the first
            measure) less the th's padding, so the count on the right stays
            in view too. */}
        <div className="sticky left-2 max-w-[calc(var(--rack-w,100%)-1rem)]">
          <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
            <span
              data-testid="group-name"
              className="text-xs font-semibold uppercase tracking-wider"
            >
              {name}
            </span>
            {/* Rendered because it is true and currently invisible: a visitor to
              the public site does not get this group preselected. */}
            {!group.selectedByDefault && (
              <span className="text-[10px] uppercase tracking-wide text-muted-foreground border border-border rounded px-1">
                off by default
              </span>
            )}
            {/* The authored description. Written by SiteForm, parsed by
              parseChannelGroup, and until now rendered nowhere in the editor. */}
            {group.description && (
              <span className="text-xs text-muted-foreground">
                {group.description}
              </span>
            )}
            <span className="ml-auto text-xs text-muted-foreground whitespace-nowrap">
              {channels.length === 1
                ? "1 channel"
                : `${channels.length} channels`}
            </span>
          </div>
          <ChannelGroupLine section={section} siteId={siteId} />
        </div>
      </th>
    </tr>
  );
}