siftlode/frontend/src/components/Scheduler.tsx

import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import {
  Activity,
  AlertTriangle,
  Clock,
  Database,
  Gauge,
  Pause,
  Play,
  RadioTower,
} from "lucide-react";
import { api, type SchedulerJob, type SchedulerStatus } from "../lib/api";
import { useLiveQuery } from "../lib/useLiveQuery";
import { relativeTime } from "../lib/format";
import { notify } from "../lib/notifications";
import Tooltip from "./Tooltip";

const POLL_MS = 4000;

// Seconds until an ISO instant (negative = past).
function secsUntil(iso: string | null): number | null {
  if (!iso) return null;
  return Math.round((new Date(iso).getTime() - Date.now()) / 1000);
}

function fmtCountdown(s: number): string {
  if (s <= 0) return "now";
  if (s < 60) return `${s}s`;
  const m = Math.floor(s / 60);
  if (m < 60) return `${m}m ${s % 60}s`;
  const h = Math.floor(m / 60);
  return `${h}h ${m % 60}m`;
}

function StatusDot({ job }: { job: SchedulerJob }) {
  const color = job.running
    ? "bg-accent animate-pulse"
    : job.status === "ok"
      ? "bg-emerald-500"
      : job.status === "error"
        ? "bg-red-500"
        : job.status === "skipped"
          ? "bg-amber-500"
          : "bg-border";
  return <span className={`inline-block w-2.5 h-2.5 rounded-full shrink-0 ${color}`} />;
}

function JobRow({ job }: { job: SchedulerJob }) {
  const { t } = useTranslation();
  const next = secsUntil(job.next_run);
  return (
    <div className="glass-card rounded-xl p-3 flex items-center gap-3">
      <StatusDot job={job} />
      <div className="min-w-0 flex-1">
        <div className="text-sm font-medium truncate">
          {t(`scheduler.jobs.${job.id}`, job.id)}
          <span className="text-muted font-normal">
            {" "}
            · {t("scheduler.everyMin", { count: job.interval_minutes })}
          </span>
        </div>
        <div className="text-[11px] text-muted truncate">
          {job.running
            ? t("scheduler.runningNow")
            : job.last_finished
              ? t("scheduler.lastRun", { time: relativeTime(job.last_finished) })
              : t("scheduler.neverRun")}
          {job.last_error ? (
            <span className="text-red-400"> · {job.last_error}</span>
          ) : job.last_result ? (
            <span> · {job.last_result}</span>
          ) : null}
        </div>
      </div>
      <div className="shrink-0 text-right text-[11px] text-muted tabular-nums">
        {job.running ? (
          <span className="text-accent">{t("scheduler.active")}</span>
        ) : next != null ? (
          <>
            <div className="uppercase tracking-wide text-[10px]">{t("scheduler.nextRun")}</div>
            <div>{fmtCountdown(next)}</div>
          </>
        ) : (
          "—"
        )}
      </div>
    </div>
  );
}

function Stat({
  icon: Icon,
  label,
  value,
  hint,
  sub,
}: {
  icon: typeof Database;
  label: string;
  value: string | number;
  hint?: string;
  sub?: string;
}) {
  return (
    <div className="glass-card rounded-xl p-3">
      <div className="flex items-center gap-2 text-muted text-xs">
        <Icon className="w-4 h-4 shrink-0" />
        <Tooltip hint={hint ?? ""}>
          <span className={hint ? "underline decoration-dotted decoration-muted/40 underline-offset-4 cursor-help" : ""}>
            {label}
          </span>
        </Tooltip>
      </div>
      <div className="text-xl font-semibold mt-1 tabular-nums">{value}</div>
      {sub && <div className="text-[11px] text-muted">{sub}</div>}
    </div>
  );
}

export default function Scheduler() {
  const { t } = useTranslation();
  const qc = useQueryClient();
  const q = useLiveQuery<SchedulerStatus>(["scheduler"], api.schedulerStatus, {
    intervalMs: POLL_MS,
  });
  const data = q.data;

  // Tick once a second so the per-job countdowns move between polls.
  const [, setTick] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setTick((n) => n + 1), 1000);
    return () => clearInterval(id);
  }, []);

  const pauseResume = useMutation({
    mutationFn: (paused: boolean) => (paused ? api.resumeSync() : api.pauseSync()),
    onSuccess: () => qc.invalidateQueries({ queryKey: ["scheduler"] }),
    onError: () => notify({ level: "error", message: t("scheduler.toggleFailed") }),
  });

  if (q.isLoading && !data)
    return <div className="p-8 text-muted">{t("scheduler.loading")}</div>;
  if (!data)
    return <div className="p-8 text-muted">{t("common.somethingWrong")}</div>;

  const quotaPct = data.quota.daily_budget
    ? Math.min(100, Math.round((data.quota.used_today / data.quota.daily_budget) * 100))
    : 0;

  return (
    <div className="p-4 max-w-4xl w-full mx-auto space-y-4">
      {/* Status strip */}
      <div className="glass rounded-2xl p-4 flex flex-wrap items-center gap-3">
        <Activity className="w-5 h-5 text-accent shrink-0" />
        <div className="min-w-0">
          <div className="font-semibold">{t("scheduler.title")}</div>
          <div className="text-xs text-muted flex items-center gap-2 flex-wrap">
            <span className="inline-flex items-center gap-1">
              <span
                className={`w-2 h-2 rounded-full ${
                  data.paused ? "bg-amber-500" : data.running_here ? "bg-emerald-500" : "bg-border"
                }`}
              />
              {data.paused
                ? t("scheduler.paused")
                : data.running_here
                  ? t("scheduler.running")
                  : t("scheduler.notHere")}
            </span>
            {q.isFetching && <span className="text-accent">· {t("scheduler.updating")}</span>}
          </div>
        </div>
        <div className="flex-1" />
        <Tooltip hint={t("scheduler.pauseHint")}>
          <button
            onClick={() => pauseResume.mutate(data.paused)}
            disabled={pauseResume.isPending}
            className="glass-card glass-hover flex items-center gap-2 px-3 py-2 rounded-xl text-sm disabled:opacity-50 transition"
          >
            {data.paused ? <Play className="w-4 h-4" /> : <Pause className="w-4 h-4" />}
            {data.paused ? t("scheduler.resume") : t("scheduler.pause")}
          </button>
        </Tooltip>
      </div>

      {!data.running_here && (
        <div className="flex items-center gap-2 text-sm bg-amber-500/15 border border-amber-500/30 rounded-xl px-3 py-2">
          <AlertTriangle className="w-4 h-4 text-amber-500 shrink-0" />
          <span className="text-muted">{t("scheduler.notHereNote")}</span>
        </div>
      )}

      {/* Jobs */}
      <div>
        <div className="text-xs uppercase tracking-wide text-muted mb-2">{t("scheduler.jobsTitle")}</div>
        <div className="space-y-1.5">
          {data.jobs.map((job) => (
            <JobRow key={job.id} job={job} />
          ))}
        </div>
      </div>

      {/* Queue */}
      <div>
        <div className="text-xs uppercase tracking-wide text-muted mb-2">{t("scheduler.queueTitle")}</div>
        <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
          <Stat
            icon={Database}
            label={t("scheduler.queue.recentPending")}
            hint={t("scheduler.queue.recentPendingHint")}
            value={data.queue.channels_recent_pending.toLocaleString()}
          />
          <Stat
            icon={Database}
            label={t("scheduler.queue.deepPending")}
            hint={t("scheduler.queue.deepPendingHint")}
            value={data.queue.channels_deep_pending.toLocaleString()}
          />
          <Stat
            icon={Clock}
            label={t("scheduler.queue.enrichPending")}
            hint={t("scheduler.queue.enrichPendingHint")}
            value={data.queue.videos_pending_enrich.toLocaleString()}
          />
          <Stat
            icon={Clock}
            label={t("scheduler.queue.shortsPending")}
            hint={t("scheduler.queue.shortsPendingHint")}
            value={data.queue.videos_pending_shorts.toLocaleString()}
          />
          <Stat
            icon={RadioTower}
            label={t("scheduler.queue.liveRefresh")}
            hint={t("scheduler.queue.liveRefreshHint")}
            value={data.queue.videos_live_refresh.toLocaleString()}
          />
        </div>
      </div>

      {/* Quota */}
      <div>
        <div className="text-xs uppercase tracking-wide text-muted mb-2">{t("scheduler.quotaTitle")}</div>
        <div className="glass-card rounded-xl p-4">
          <div className="flex items-center gap-2 text-sm">
            <Gauge className="w-4 h-4 text-muted shrink-0" />
            <span>
              {t("scheduler.quotaUsed", {
                used: data.quota.used_today.toLocaleString(),
                budget: data.quota.daily_budget.toLocaleString(),
              })}
            </span>
            <span className="flex-1" />
            <span className="text-muted text-xs">
              {t("scheduler.quotaRemaining", {
                count: data.quota.remaining_today,
                formatted: data.quota.remaining_today.toLocaleString(),
              })}
            </span>
          </div>
          <div className="mt-2 h-2 rounded-full bg-border overflow-hidden">
            <div
              className={`h-full rounded-full ${quotaPct > 90 ? "bg-red-500" : "bg-accent"}`}
              style={{ width: `${quotaPct}%` }}
            />
          </div>
          <div className="text-[11px] text-muted mt-1.5">{t("scheduler.quotaNote")}</div>
        </div>
      </div>
    </div>
  );
}