"use client";

// THE /channels ROW CONTROL for the channel priority model.
//
// It replaces the sync-inclusion toggle that used to sit in this cell. That
// toggle flipped one boolean on one channel's config.json; this control writes
// the corpus-wide priority document — one base tier per channel, plus optional
// per-operation pins — through `saveChannelPriorityAction`, which is the ONE
// writer of that block and recompiles the four lane trees in the same save.
//
// THE BASE TIER IS THE ROW; THE PINS ARE BEHIND A DISCLOSURE. A channel's tier
// is the answer for every operation unless an operation is pinned, and pins are
// the rare case (they exist because "stop syncing, keep everything else" — the
// retired `excludeFromSync` — has to remain sayable). Putting five selects in
// every row would bury the one number the page is for, so the row shows the
// base tier and a marker counting the pins, and the disclosure is where they
// are set.
//
// `focused` and `heldReason` are DISPLAY facts passed down from the page, not a
// second read: focus is a corpus-wide selector resolved once on the server, and
// a row cannot work out on its own whether it is being held.
//
// OPTIMISTIC, NOT STATEFUL. `useOptimistic` shows the operator's choice for the
// length of the transition and then defers to the server value — so a bulk edit
// or the page's auto-refresh can never leave this select disagreeing with
// settings.json, which a `useState` seeded from props would.

import { useOptimistic, useState, useTransition } from "react";
import {
  PRIORITY_OPERATIONS,
  STORED_CHANNEL_TIERS,
  type PriorityOperation,
  type StoredChannelTier,
} from "yt-dlp-transcript-common/lib/channelPriority";
import {
  applyChannelPriorityPresetAction,
  setChannelOperationTierAction,
  setChannelTierAction,
  type ActionResult,
} from "../actions";
import { RACK_LAYERS } from "./rackLayout";

export type ChannelTierSelectProps = {
  slug: string;
  // The channel's BASE tier (tierOf), not its effective tier for any one
  // operation — the overrides are shown beside it, not folded into it.
  tier: StoredChannelTier;
  // Per-operation pins, normalised (only operations that differ from `tier`).
  overrides?: Partial<Record<PriorityOperation, StoredChannelTier>>;
  // This channel is in the active focus set. Focus is a corpus-wide selector,
  // never a stored tier, so it is passed in rather than read off `tier`.
  focused?: boolean;
  // "Held — focus: <name>" for a non-focus row while a focus holds the lanes.
  heldReason?: string | null;
  // Why the machine paused this channel, or null. Distinct from `heldReason`,
  // which is the focus holding a channel that is otherwise running: this one
  // says the tier ITSELF was set by something other than the operator, and
  // will be set back.
  autoPausedReason?: string | null;
  // THE CHANNEL'S MEDIA HOLD — "held: its media is moving (…)" while a
  // relocation marker stands — or null (common/views/channelRow.ts'
  // `mediaHold`). Distinct from both chips above: the lanes skip this channel
  // whatever its tier and whatever the focus, until the move completes or its
  // marker is cleared (release 16 slice RM).
  mediaHold?: string | null;
  disabled?: boolean;
};

const TIER_LABEL: Record<StoredChannelTier, string> = {
  normal: "Normal",
  low: "Low",
  paused: "Paused",
};

const OPERATION_LABEL: Record<PriorityOperation, string> = {
  sync: "Sync",
  transcription: "Transcription",
  download: "Download",
  digest: "Digest",
  backfill: "Backfill",
};

type View = {
  tier: StoredChannelTier;
  overrides: Partial<Record<PriorityOperation, StoredChannelTier>>;
};

export default function ChannelTierSelect({
  slug,
  tier,
  overrides = {},
  focused = false,
  heldReason = null,
  autoPausedReason = null,
  mediaHold = null,
  disabled = false,
}: ChannelTierSelectProps): React.ReactNode {
  const [pending, startTransition] = useTransition();
  const [view, setView] = useOptimistic<View>({ tier, overrides });
  // A FAILED WRITE MUST SAY SO. The writer returns `{error}` before it
  // revalidates, so on a failure the optimistic value silently snaps back to
  // the server's — which reads as "the click did nothing" rather than as an
  // error. Same shape as SyncAllChannelsButton's: role="alert", a labelled
  // span, text-destructive.
  const [error, setError] = useState<string | null>(null);
  const pins = PRIORITY_OPERATIONS.filter((op) => view.overrides[op]);
  const busy = disabled || pending;

  function run(next: View, action: () => Promise<ActionResult>) {
    startTransition(async () => {
      setView(next);
      try {
        const result = await action();
        setError(result?.error ?? null);
      } catch (e) {
        setError((e as Error).message);
      }
    });
  }

  return (
    // ONE LINE, not a four-deep stack. The tier cell used to be a select, a
    // chip row, an orange held sentence and a disclosure stacked vertically in
    // every one of 67 rows — which is what made the rows 90px tall and made the
    // most-repeated element on the page (the held note, identical on 61 rows)
    // the one carrying the least information.
    <div className="relative flex flex-wrap items-center gap-1.5 min-w-52">
      <select
        aria-label={`tier for ${slug}`}
        value={view.tier}
        disabled={busy}
        onChange={(e) => {
          const next = e.target.value as StoredChannelTier;
          run({ ...view, tier: next }, () =>
            setChannelTierAction([slug], next),
          );
        }}
        className="h-7 rounded-md border border-border bg-card px-2 text-xs disabled:opacity-50"
      >
        {STORED_CHANNEL_TIERS.map((t) => (
          <option key={t} value={t}>
            {TIER_LABEL[t]}
          </option>
        ))}
      </select>
      {focused && (
        <span
          className="rounded-full border border-primary/40 bg-primary/10 px-1.5 text-[10px] uppercase tracking-wide text-primary"
          data-testid={`focused-${slug}`}
        >
          Focused
        </span>
      )}
      {pins.length > 0 && (
        <span
          className="rounded-full border border-border px-1.5 text-[10px] text-muted-foreground"
          title={pins
            .map((op) => `${OPERATION_LABEL[op]}: ${TIER_LABEL[view.overrides[op]!]}`)
            .join(" · ")}
        >
          {pins.length} pinned
        </span>
      )}
      {/* THE HELD CHIP. A corpus-wide focus holds every channel outside it, so
          the SENTENCE is the same on 61 rows and belongs above the table, where
          the focus line states it once. What is per-row is the FACT, and a chip
          says it in a tenth of the width. The full reason is still carried on
          the element — as screen-reader text and on `title` — so nothing is
          lost to the reader who needs it, and the element's text still contains
          the sentence the suite pins. */}
      {heldReason && (
        <span
          role="note"
          aria-label={`held reason for ${slug}`}
          title={heldReason}
          className="rounded-full border border-warning/30 bg-warning-soft px-1.5 text-[10px] uppercase tracking-wide text-warning"
        >
          held
          <span className="sr-only"> — {heldReason}</span>
        </span>
      )}
      {/* WHY IT IS PAUSED, when it was not the operator who paused it. Without
          this the rack shows a Paused channel and no way to tell a deliberate
          pause from a drive that fell off a USB cable — which is exactly the
          "automatic disable AND FLAG" the operator asked for. */}
      {autoPausedReason && (
        <span
          role="note"
          aria-label={`auto-paused reason for ${slug}`}
          title={autoPausedReason}
          className="rounded-full border border-destructive/30 bg-destructive/5 px-1.5 text-[10px] uppercase tracking-wide text-destructive"
        >
          storage
          <span className="sr-only"> — {autoPausedReason}</span>
        </span>
      )}
      {/* THE MEDIA HOLD. The chip says the fact in the rack's width; the
          sentence ("held: its media is moving …") is on `title` and in the
          screen-reader text, as for the two chips above. */}
      {mediaHold && (
        <span
          role="note"
          aria-label={`media hold for ${slug}`}
          title={mediaHold}
          className="rounded-full border border-warning/30 bg-warning-soft px-1.5 text-[10px] uppercase tracking-wide text-warning"
        >
          media held
          <span className="sr-only"> — {mediaHold}</span>
        </span>
      )}
      {error && (
        <span
          role="alert"
          aria-label={`priority error for ${slug}`}
          className="basis-full text-[11px] text-destructive"
        >
          {error}
        </span>
      )}

      {/* OPENING THIS MUST NOT MOVE THE RACK. In a 40px row an inline panel
          would push every row below it down by 150px, so the panel is absolute
          and overlays them instead.
          ...WHICH MEANS THE SCROLL REGION CLIPS IT. Opened on a row near the
          rack's bottom (or, below md, its right edge) the panel hung off the
          region with its selects out of reach, and nothing said it was there.
          Opening scrolls the region — and the document, below md — just far
          enough to show the whole panel; `nearest` leaves an already-visible
          one exactly where it is. Below md the selection deck pins to the
          bottom of the SCREEN, outside the (isolated) rack, and paints over
          it — so the panel keeps a 12rem scroll margin there, about the
          deck's height, and "nearest" stops it above the deck instead of
          under it. */}
      <details
        className="text-[11px]"
        onToggle={(e) => {
          const details = e.currentTarget;
          if (!details.open) return;
          requestAnimationFrame(() =>
            details.lastElementChild?.scrollIntoView({
              block: "nearest",
              inline: "nearest",
            }),
          );
        }}
      >
        <summary
          aria-label={`advanced priority for ${slug}`}
          className="cursor-pointer text-muted-foreground hover:text-foreground"
        >
          Advanced
        </summary>
        <div className={`absolute ${RACK_LAYERS.popover} max-md:scroll-mb-48 mt-1 flex w-64 flex-col gap-1 rounded-md border border-border bg-popover p-2 shadow-md`}>
          {PRIORITY_OPERATIONS.map((op) => (
            <label key={op} className="flex items-center justify-between gap-2">
              <span className="text-muted-foreground">
                {OPERATION_LABEL[op]}
              </span>
              <select
                aria-label={`${op} override for ${slug}`}
                value={view.overrides[op] ?? ""}
                disabled={busy}
                onChange={(e) => {
                  const raw = e.target.value;
                  const next = raw === "" ? null : (raw as StoredChannelTier);
                  const overridesNext = { ...view.overrides };
                  if (next === null) delete overridesNext[op];
                  else overridesNext[op] = next;
                  run({ ...view, overrides: overridesNext }, () =>
                    setChannelOperationTierAction([slug], op, next),
                  );
                }}
                className="rounded border border-border bg-card px-1 py-0.5 disabled:opacity-50"
              >
                {/* Blank IS inherit, and the label names what it inherits — the
                    effective tier for this operation when nothing is pinned. */}
                <option value="">Inherit ({TIER_LABEL[view.tier]})</option>
                {STORED_CHANNEL_TIERS.map((t) => (
                  <option key={t} value={t}>
                    {TIER_LABEL[t]}
                  </option>
                ))}
              </select>
            </label>
          ))}
          <div className="flex flex-wrap gap-1 pt-1">
            {/* The preset that retires `excludeFromSync`'s inverse: keep the
                playlist and metadata current, dispatch nothing. */}
            <button
              type="button"
              aria-label={`sync only for ${slug}`}
              disabled={busy}
              onClick={() =>
                run(
                  { tier: "paused", overrides: { sync: "normal" } },
                  () => applyChannelPriorityPresetAction([slug], "sync-only"),
                )
              }
              className="rounded border border-border px-1.5 py-0.5 hover:bg-muted disabled:opacity-50"
            >
              Sync only
            </button>
            <button
              type="button"
              aria-label={`clear priority for ${slug}`}
              disabled={busy}
              onClick={() =>
                run({ tier: "normal", overrides: {} }, () =>
                  applyChannelPriorityPresetAction([slug], "clear"),
                )
              }
              className="rounded border border-border px-1.5 py-0.5 hover:bg-muted disabled:opacity-50"
            >
              Clear
            </button>
          </div>
        </div>
      </details>
    </div>
  );
}