"use client";

import { useEffect, useState } from "react";

// THE SUBTITLE DEFERRAL, IN ONE LINE (release 17, slice RL). A video whose
// YouTube subtitles answered HTTP 429 while its media came down: how many
// times, when last, and until when the batch subtitle fetch (Download missing
// subs) leaves it alone — 6 h after a strike, 7 days from the third. A
// download from this page still fetches them. Draws nothing when there is no
// deferral, which is every video but a handful.
export function SubtitleDeferralLine({
  slug,
  videoId,
}: {
  slug: string;
  videoId: string;
}) {
  const [d, setD] = useState<{ count: number; lastAt: number; until: number } | null>(null);
  useEffect(() => {
    let live = true;
    // A plain GET, not a server action: Next queues a page's server actions,
    // and this one would run ahead of the operator's first click.
    fetch(
      `/api/channels/${encodeURIComponent(slug)}/videos/${encodeURIComponent(videoId)}/subtitle-deferral`,
      { cache: "no-store" },
    )
      .then((r) => (r.ok ? r.json() : null))
      .then((r: { count: number; lastAt: number; until: number } | null) => {
        if (live) setD(r);
      })
      .catch(() => {});
    return () => {
      live = false;
    };
  }, [slug, videoId]);
  if (!d) return null;
  const day = (ms: number) => new Date(ms).toISOString().slice(0, 16).replace("T", " ") + " UTC";
  const held = d.count >= 3;
  const active = d.until > Date.now();
  return (
    <p
      role="note"
      aria-label="subtitle deferral"
      className="rounded-md border border-warning/30 bg-warning-soft px-3 py-2 text-sm text-warning"
    >
      The subtitles for this video were rate-limited (HTTP 429){" "}
      {d.count}× — last {day(d.lastAt)}.{" "}
      {active
        ? held
          ? `Left alone by Download missing subs until ${day(d.until)}.`
          : `Download missing subs retries them after ${day(d.until)}.`
        : "Download missing subs will retry them."}{" "}
      A download from this page still fetches them.
    </p>
  );
}