"use client";

import Link from "next/link";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { Button } from "yt-dlp-transcript-common/components/ui/button";
import type { PublishLaneStatus, PublishPlan } from "yt-dlp-transcript-common/views/publishStatus";
import { PauseLaneButton } from "../../components/lanes/pauseControl";
import {
  drainPublishLaneAction,
  startPublishLaneAction,
  stopPublishLaneAction,
  type LaneControlResult,
} from "../../sites/lib/publishActions";
import { Chip } from "../../sites/components/PublishPanel";
import { useHydrated } from "./useOperationsStatus";

// The publish lane's console (release 18): the runner and its three controls
// (Start / Drain / Stop — the runner, as on every lane), the hold (the LANE's
// gate: a hold stops dispatching between stages and never kills one), what the
// runner last did and when it looks next, and the plan a pass would run now.
//
// The page is server-rendered from readPublishStatus; this refreshes it every
// few seconds while it is open, and after every control.

const REFRESH_MS = 5_000;

function at(ms: number | null): string {
  return ms === null ? "—" : new Date(ms).toLocaleString();
}

export function PublishLaneView({
  lane,
  plan,
}: {
  lane: PublishLaneStatus;
  plan: Pick<PublishPlan, "steps" | "skipped">;
}) {
  const router = useRouter();
  const hydrated = useHydrated();
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const running = lane.live.running;

  useEffect(() => {
    const t = setInterval(() => router.refresh(), REFRESH_MS);
    return () => clearInterval(t);
  }, [router]);

  async function control(action: () => Promise<LaneControlResult>) {
    setBusy(true);
    setError(null);
    try {
      const r = await action();
      if (!r.ok) setError(r.error ?? "The control failed.");
    } finally {
      setBusy(false);
      router.refresh();
    }
  }

  return (
    <div className="flex flex-col gap-4" data-hydrated={hydrated ? "true" : undefined}>
      <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
        <h2 className="font-display text-lg font-semibold tracking-tight">Publish lane</h2>
        <span
          className={`rounded-full border px-3 py-1 text-sm ${
            running ? "border-success/30 bg-success-soft text-success" : "border-border bg-card text-muted-foreground"
          }`}
        >
          {running ? "Runner running" : "Runner stopped"}
        </span>
        <Chip name="lane" chip={lane.chip} />
        <span className="ml-auto flex flex-wrap gap-2">
          <Button
            type="button"
            size="sm"
            aria-label="Start publish lane"
            onClick={() => control(startPublishLaneAction)}
            disabled={busy || running}
          >
            Start
          </Button>
          <Button
            type="button"
            size="sm"
            variant="outline"
            aria-label="Drain publish lane"
            title="Finish the stage in flight, start no next one, then stop"
            onClick={() => control(drainPublishLaneAction)}
            disabled={busy || !running}
            className="border-warning/30 text-warning hover:bg-warning-soft hover:text-warning"
          >
            Drain
          </Button>
          <Button
            type="button"
            size="sm"
            variant="outline"
            aria-label="Stop publish lane"
            title="Stop the runner now; a stage in flight finishes as its own job (Cancel it on /jobs)"
            onClick={() => control(stopPublishLaneAction)}
            disabled={busy || !running}
          >
            Stop
          </Button>
          <PauseLaneButton lane="publish" held={lane.held} onChange={() => router.refresh()} />
        </span>
      </div>
      {error && (
        <p role="alert" className="text-sm text-destructive">
          {error}
        </p>
      )}

      <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-sm" data-testid="publish-lane-facts">
        <dt className="text-muted-foreground">Lane</dt>
        <dd>
          {lane.enabled ? "on" : "off"}
          {lane.held ? " · held" : ""}
          {lane.quietNow ? " · quiet hours" : ""}
          {lane.blockedReason ? ` — ${lane.blockedReason}` : ""}
        </dd>
        <dt className="text-muted-foreground">A pass now</dt>
        <dd>
          {lane.due ? "due" : "not due"} — {lane.reason}
        </dd>
        <dt className="text-muted-foreground">Last check</dt>
        <dd>{at(lane.live.lastCheckAt)}</dd>
        <dt className="text-muted-foreground">Next check</dt>
        <dd>{at(lane.live.nextCheckAt)}</dd>
        <dt className="text-muted-foreground">Last pass</dt>
        <dd>
          {at(lane.live.lastPassAt)}
          {lane.live.lastPassSummary ? ` — ${lane.live.lastPassSummary}` : ""}
        </dd>
        <dt className="text-muted-foreground">Last decision</dt>
        <dd>{lane.live.lastDecision ?? "—"}</dd>
        {lane.live.jobId && (
          <>
            <dt className="text-muted-foreground">Runner</dt>
            <dd>
              <Link href={`/jobs/${lane.live.jobId}`} className="underline underline-offset-2">
                job log
              </Link>
            </dd>
          </>
        )}
      </dl>

      <div className="text-sm" data-testid="publish-lane-plan">
        <h3 className="font-semibold">What a pass would run now</h3>
        {plan.steps.length === 0 ? (
          <p className="text-muted-foreground">Nothing: every target its policies cover is current.</p>
        ) : (
          <ol className="ml-5 list-decimal">
            {plan.steps.map((s) => (
              <li key={`${s.kind}:${s.target}:${s.preview ?? ""}`}>
                <code>
                  {s.kind} {s.target}
                  {s.preview ? ` --preview ${s.preview}` : ""}
                </code>{" "}
                <span className="text-muted-foreground">— {s.reason}</span>
              </li>
            ))}
          </ol>
        )}
        {plan.skipped.length > 0 && (
          <ul className="mt-1 ml-5 list-disc text-xs text-muted-foreground">
            {plan.skipped.map((s) => (
              <li key={`${s.kind}:${s.target}`}>
                <code>
                  {s.kind} {s.target}
                </code>
                : {s.reason}
              </li>
            ))}
          </ul>
        )}
        <p className="mt-2 text-xs text-muted-foreground">
          The same plan is <strong>Publish now</strong> on{" "}
          <Link href="/sites" className="underline">
            /sites
          </Link>
          ; a site&rsquo;s policy is set on its own page.
        </p>
      </div>
    </div>
  );
}