"use client";

import { useState } from "react";
import { Button } from "yt-dlp-transcript-common/components/ui/button";
import type { AutoQueueKind } from "yt-dlp-transcript-common/jobs/autoQueueState";
import { snoozeAutoQueueAction } from "../actions";
import { snoozePresets } from "./dispatch";

// Idle a runner for a while without stopping it.
//
// The distinction matters operationally: stopping loses the in-flight work and
// needs someone to remember to start it again, whereas a snooze leaves the loop
// up, re-reading settings every iteration, so it resumes by itself. And because
// the deadline is persisted in settings.json rather than held in runner memory,
// it survives a server restart — which a "pause" flag in the process would not.

export function SnoozeControl({
  kind,
  title,
  snoozeUntil,
  now,
  onChanged,
}: {
  kind: AutoQueueKind;
  title: string;
  snoozeUntil: number | null;
  now: number | null;
  onChanged: () => Promise<void>;
}) {
  const [busy, setBusy] = useState(false);
  const snoozed = snoozeUntil !== null && (now === null || snoozeUntil > now);

  const set = async (until: number | null) => {
    setBusy(true);
    try {
      await snoozeAutoQueueAction(kind, until);
      await onChanged();
    } finally {
      setBusy(false);
    }
  };

  if (snoozed) {
    return (
      <div className="flex flex-wrap items-center gap-3 rounded-md border border-warning/30 bg-warning-soft px-3 py-2 text-sm">
        <span className="text-warning">
          Snoozed until{" "}
          <span className="tabular-nums">
            {new Date(snoozeUntil).toLocaleString([], {
              hour: "2-digit",
              minute: "2-digit",
              month: "short",
              day: "numeric",
            })}
          </span>
          {" — the runner stays up and resumes by itself."}
        </span>
        <Button
          type="button"
          size="xs"
          variant="outline"
          aria-label={`Wake ${title} now`}
          disabled={busy}
          onClick={() => set(null)}
        >
          Wake now
        </Button>
      </div>
    );
  }

  return (
    <div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
      <span className="font-mono text-xs uppercase tracking-[0.14em]">
        Snooze
      </span>
      {snoozePresets(now ?? Date.now()).map((p) => (
        <Button
          key={p.label}
          type="button"
          size="xs"
          variant="outline"
          aria-label={`Snooze ${title} for ${p.label}`}
          disabled={busy || now === null}
          onClick={() => set(p.until)}
        >
          {p.label}
        </Button>
      ))}
    </div>
  );
}