"use client";

import { useCallback, useEffect, useRef, useState } from "react";
import type { SchedulerStatusPayload } from "yt-dlp-transcript-common/views/schedulerStatus";
import { usePolledPayload } from "../../../lib/usePolledPayload";
import { BulkCadenceBar } from "./BulkCadenceBar";
import { ChannelCadenceEditor } from "./ChannelCadenceEditor";

// THE SYNC OPERATION'S CONSOLE — the schedule, because a cadence-triggered
// operation has no backlog to sweep and no runner to start. It is built as a
// server slot in operations/[id]/page.tsx off `op.trigger === "cadence"`, and
// OperationDetail renders it where a runner or a sweep lane would otherwise be.
//
// TWO POLLS ON THIS PAGE, deliberately not merged: this one is 5s over
// /api/view/schedulerStatus (the schedule, whose facts move on the order of
// minutes) and the rail above is 3s over the auto-queue payload (lane state,
// which moves per dispatch). One combined endpoint would make the cheaper
// reader pay the more expensive reader's cadence, and buildSchedulerStatusPayload
// lists channel configs while the auto-queue payload does not.
export function SyncConsole({
  initial,
}: {
  initial: SchedulerStatusPayload;
}) {
  const [busy, setBusy] = useState(false);
  const [message, setMessage] = useState<string | null>(null);
  // Slugs ticked for a bulk cadence edit. Kept as a Set of slugs (not indices)
  // so the 5s poll reordering or dropping a row can't retarget a selection.
  const [selected, setSelected] = useState<ReadonlySet<string>>(new Set());
  // Seeded by SSR; the first poll waits one interval, as before.
  const { data: polled, refetch: refresh } =
    usePolledPayload<SchedulerStatusPayload>(
      "/api/view/schedulerStatus",
      true,
      5000,
      initial,
      { immediate: false },
    );
  // Never null: the hook starts from `initial` and never clears it.
  const data = polled ?? initial;
  // Guards the Run-now button's own state (busy/message) after unmount; the
  // payload's guard is the hook's.
  const mounted = useRef(true);
  useEffect(() => {
    mounted.current = true;
    return () => {
      mounted.current = false;
    };
  }, []);

  const runNow = useCallback(async () => {
    setBusy(true);
    setMessage(null);
    try {
      const res = await fetch("/api/scheduler/tick", { method: "POST" });
      const body = (await res.json()) as {
        queued?: string[];
        skipped?: unknown[];
        reason?: string;
        keptChecksQueued?: string[];
        savedVideoBackupQueued?: boolean;
      };
      if (!res.ok) {
        setMessage(`Tick failed (${res.status}).`);
      } else {
        const q = body.queued?.length ?? 0;
        const s = body.skipped?.length ?? 0;
        // THE STORAGE CHORES, named separately from the syncs. They ride this
        // heartbeat because it is the one timer the editor has, and a tick that
        // reported "queued 0" while it had just started a keep-latest deletion
        // pass would be describing the wrong operation. Read from the POST
        // body, which has carried both fields all along — nothing on the tick
        // changed to say this.
        const k = body.keptChecksQueued?.length ?? 0;
        const backup = body.savedVideoBackupQueued === true;
        const chores =
          k > 0 || backup
            ? ` · storage chores: ${k} keep-latest check${k === 1 ? "" : "s"}${
                backup ? ", saved-video backup" : ""
              }`
            : "";
        setMessage(
          body.reason
            ? `Tick: ${body.reason} (queued ${q}, skipped ${s})${chores}.`
            : `Tick queued ${q}, skipped ${s}${chores}.`,
        );
      }
      await refresh();
    } catch (err) {
      setMessage(`Tick failed: ${(err as Error).message}`);
    } finally {
      if (mounted.current) setBusy(false);
    }
  }, [refresh]);

  const { scheduler, channels, runs, now, heartbeatSeconds } = data;
  const eligible = channels.filter((c) => c.autoSyncEligible);
  // A slug can vanish between polls (channel deleted elsewhere), so the bar
  // always acts on the intersection with what's on screen.
  const selectedSlugs = channels
    .map((c) => c.slug)
    .filter((s) => selected.has(s));
  const allSelected =
    channels.length > 0 && selectedSlugs.length === channels.length;

  function toggleOne(slug: string) {
    setSelected((prev) => {
      const next = new Set(prev);
      if (!next.delete(slug)) next.add(slug);
      return next;
    });
  }

  function toggleAll(checked: boolean) {
    setSelected(checked ? new Set(channels.map((c) => c.slug)) : new Set());
  }

  return (
    <div className="flex flex-col gap-5">
      <p className="text-sm text-muted-foreground">
        Per-channel auto-sync cadence, driven by a heartbeat
        (<code>pnpm sync:tick</code> or the internal timer). Set each
        channel&apos;s interval inline below — pick a preset or type an exact
        minute count. A channel auto-syncs on the next heartbeat once
        it&apos;s been longer than its interval since the last sync.
      </p>
      <div className="flex flex-wrap items-center gap-3">
        <span
          className={`text-sm rounded-full px-3 py-1 border ${
            scheduler.enabled
              ? "border-success/30 bg-success-soft text-success"
              : "border-border bg-muted text-muted-foreground"
          }`}
        >
          {scheduler.enabled ? "Scheduler enabled" : "Scheduler disabled"}
        </span>
        <span className="text-sm text-muted-foreground">
          {eligible.length} channel{eligible.length === 1 ? "" : "s"} auto-syncing
          · default {formatInterval(scheduler.defaultIntervalMinutes)} · full
          sweep {formatInterval(scheduler.fullSweepIntervalMinutes)} · max{" "}
          {scheduler.maxConcurrentSyncs} concurrent ·{" "}
          {heartbeatSeconds > 0
            ? `internal heartbeat every ${formatSeconds(heartbeatSeconds)}`
            : "external heartbeat (cron)"}
        </span>
        <button
          type="button"
          onClick={runNow}
          disabled={busy}
          className="ml-auto px-3 py-1.5 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:opacity-90 disabled:opacity-50"
        >
          {busy ? "Running…" : "Run scheduler now"}
        </button>
      </div>
      {message && (
        <p role="status" className="text-sm text-muted-foreground">
          {message}
        </p>
      )}

      <div className="overflow-x-auto rounded border border-border">
        <table className="w-full text-sm">
          <thead className="bg-card text-left text-muted-foreground">
            <tr>
              <th className="px-2 py-2 font-medium">
                <input
                  type="checkbox"
                  aria-label="select all channels"
                  checked={allSelected}
                  onChange={(e) => toggleAll(e.target.checked)}
                />
              </th>
              <th className="px-3 py-2 font-medium">Channel</th>
              <th className="px-3 py-2 font-medium">Cadence</th>
              <th className="px-3 py-2 font-medium">Last synced</th>
              <th className="px-3 py-2 font-medium">Next due</th>
              <th className="px-3 py-2 font-medium">Status</th>
            </tr>
          </thead>
          <tbody>
            {channels.length === 0 && (
              <tr>
                <td colSpan={6} className="px-3 py-4 text-muted-foreground">
                  No channels.
                </td>
              </tr>
            )}
            {channels.map((c) => (
              <tr
                key={c.slug}
                className="border-t border-border"
              >
                <td className="px-2 py-2">
                  <input
                    type="checkbox"
                    aria-label={`select ${c.slug}`}
                    checked={selected.has(c.slug)}
                    onChange={() => toggleOne(c.slug)}
                  />
                </td>
                <td className="px-3 py-2">
                  <a href={`/channels/${c.slug}`} className="hover:underline">
                    {c.name ?? c.slug}
                  </a>
                </td>
                <td className="px-3 py-2">
                  <ChannelCadenceEditor
                    slug={c.slug}
                    configuredInterval={c.configuredIntervalMinutes}
                    configuredFullSweep={c.configuredFullSweepMinutes}
                    defaultIntervalMinutes={scheduler.defaultIntervalMinutes}
                    defaultFullSweepMinutes={scheduler.fullSweepIntervalMinutes}
                  />
                </td>
                <td className="px-3 py-2 text-muted-foreground">
                  {c.lastSyncedAt ? formatAgo(c.lastSyncedAt, now) : "never"}
                </td>
                <td className="px-3 py-2 text-muted-foreground">
                  <span>{nextDueLabel(c, now)}</span>
                  <span className="block text-xs">
                    {nextSweepLabel(c, now)}
                  </span>
                </td>
                <td className="px-3 py-2">{statusBadge(c)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {selectedSlugs.length > 0 && (
        <BulkCadenceBar
          slugs={selectedSlugs}
          onClear={() => setSelected(new Set())}
          onApplied={refresh}
        />
      )}

      <section className="flex flex-col gap-2">
        <h2 className="text-sm font-semibold">Recent ticks</h2>
        {/* NOT SYNC, and the console has to say so: a tick that reports a
            deletion pass or a backup is not a tick that noticed new videos.
            They ride this heartbeat because it is the one timer the editor
            has. */}
        <p className="text-xs text-muted-foreground">
          Two Storage chores ride this heartbeat and are not sync: the
          keep-latest deletion check (its interval is in the settings below) and
          the saved-video backup (Saved videos).
        </p>
        {runs.length === 0 ? (
          <p className="text-sm text-muted-foreground">No ticks recorded yet.</p>
        ) : (
          <ul className="flex flex-col gap-1 text-sm">
            {runs.slice(0, 15).map((r, i) => (
              <li
                key={`${r.at}-${i}`}
                className="flex flex-wrap gap-x-3 gap-y-0.5 text-muted-foreground"
              >
                <span className="tabular-nums text-muted-foreground">
                  {formatClock(r.at)}
                </span>
                <span>
                  queued {r.queued.length}
                  {r.queued.length > 0 && (
                    <span className="text-muted-foreground"> ({r.queued.join(", ")})</span>
                  )}
                </span>
                {r.skipped.length > 0 && (
                  <span className="text-muted-foreground">
                    skipped {r.skipped.length}
                  </span>
                )}
              </li>
            ))}
          </ul>
        )}
      </section>
    </div>
  );
}

type ChannelRow = SchedulerStatusPayload["channels"][number];

function statusBadge(c: ChannelRow) {
  if (c.intervalMinutes === 0 || !c.autoSyncEligible) {
    return <span className="text-muted-foreground">—</span>;
  }
  if (c.nextEligibleAt != null && c.nextEligibleAt > Date.now()) {
    return (
      <span className="text-warning">
        backoff ({c.consecutiveFailures} fail
        {c.consecutiveFailures === 1 ? "" : "s"})
      </span>
    );
  }
  if (c.lastOutcome === "failed") {
    return <span className="text-destructive">last failed</span>;
  }
  if (c.overdue) {
    return <span className="text-info">due</span>;
  }
  return <span className="text-success">ok</span>;
}

function nextDueLabel(c: ChannelRow, now: number): string {
  if (c.intervalMinutes === 0) return "—";
  if (c.overdue) return "due now";
  if (c.nextDueAt == null) return "—";
  return `in ${formatDuration(c.nextDueAt - now)}`;
}

// The full-sweep half of "Next due". A never-swept channel with sweeps on is due
// immediately — that first sweep is what seeds the stored playlist and the
// missing-video flags — which is why nextFullSweepAt is null there rather than a
// timestamp.
function nextSweepLabel(c: ChannelRow, now: number): string {
  if (c.fullSweepIntervalMinutes <= 0) return "sweep off";
  if (c.nextFullSweepAt == null) return "sweep due";
  if (now >= c.nextFullSweepAt) return "sweep due";
  return `sweep in ${formatDuration(c.nextFullSweepAt - now)}`;
}

function formatInterval(minutes: number): string {
  if (minutes <= 0) return "off";
  if (minutes % 1440 === 0) {
    const d = minutes / 1440;
    return d === 1 ? "daily" : `every ${d}d`;
  }
  if (minutes % 60 === 0) {
    const h = minutes / 60;
    return h === 1 ? "hourly" : `every ${h}h`;
  }
  return `every ${minutes}m`;
}

function formatSeconds(sec: number): string {
  if (sec < 60) return `${sec}s`;
  if (sec % 3600 === 0) return `${sec / 3600}h`;
  if (sec % 60 === 0) return `${sec / 60}m`;
  return `${sec}s`;
}

function formatDuration(ms: number): string {
  const sec = Math.max(0, Math.round(ms / 1000));
  if (sec < 60) return `${sec}s`;
  const min = Math.round(sec / 60);
  if (min < 60) return `${min}m`;
  const hr = Math.round(min / 60);
  if (hr < 48) return `${hr}h`;
  return `${Math.round(hr / 24)}d`;
}

function formatAgo(iso: string, now: number): string {
  const t = Date.parse(iso);
  if (Number.isNaN(t)) return iso;
  return `${formatDuration(now - t)} ago`;
}

function formatClock(ms: number): string {
  if (!ms) return "—";
  return new Date(ms).toLocaleTimeString([], {
    hour: "2-digit",
    minute: "2-digit",
  });
}