"use client";

import Link from "next/link";
import { useState } from "react";
import {
  syncAllChannelsAction,
  type SyncAllResult,
} from "../actions";

type Status =
  | { kind: "idle" }
  | { kind: "running"; fullSweep: boolean }
  | { kind: "done"; result: SyncAllResult }
  | { kind: "error"; message: string };

export function SyncAllChannelsButton() {
  const [status, setStatus] = useState<Status>({ kind: "idle" });

  async function handleClick(fullSweep: boolean) {
    setStatus({ kind: "running", fullSweep });
    try {
      const result = await syncAllChannelsAction({ fullSweep });
      setStatus({ kind: "done", result });
    } catch (e) {
      setStatus({ kind: "error", message: (e as Error).message });
    }
  }

  const running = status.kind === "running";
  const sweeping = status.kind === "running" && status.fullSweep;
  return (
    // OUTLINES, not fills. These sweep the whole pool and are reached for
    // rarely; the page's one primary is "New channel". The result span is a
    // flex item of this row and wraps to its own line when the header is
    // narrow — same element, same label, just no longer forcing the cluster
    // wider than the header.
    <div className="flex flex-wrap items-center justify-end gap-2">
      <button
        type="button"
        onClick={() => handleClick(false)}
        disabled={running}
        aria-label="sync every channel"
        title="Sweeps the WHOLE channel pool, not just the channels shown here. Use a group's Sync for the visible scope."
        className="h-8 rounded-md border border-border bg-transparent px-3 text-xs font-medium hover:bg-accent disabled:opacity-50"
      >
        {running && !sweeping ? "Syncing…" : "Sync every channel"}
      </button>
      {/* Forces the deep pass on every channel instead of waiting out each
          one's cadence — the button to reach for right after upgrading, when
          nothing has swept yet and no playlist carries deletion flags. */}
      <button
        type="button"
        onClick={() => handleClick(true)}
        disabled={running}
        title="Re-read every channel's whole listing — the WHOLE pool, not just the channels shown here: refresh each video list and flag videos that have gone missing upstream."
        aria-label="full sweep every channel"
        className="h-8 rounded-md border border-border bg-transparent px-3 text-xs font-medium hover:bg-accent disabled:opacity-50"
      >
        {sweeping ? "Sweeping…" : "Full sweep every channel"}
      </button>
      {status.kind === "done" && (
        <span
          aria-label="sync all result"
          className="text-xs text-muted-foreground"
          title={
            status.result.skipped.length === 0
              ? undefined
              : status.result.skipped
                  .map((s) => `${s.slug}: ${s.reason}`)
                  .join("\n")
          }
        >
          Queued {status.result.queued.length} · skipped{" "}
          {status.result.skipped.length} ·{" "}
          <Link
            href="/jobs"
            className="underline hover:text-foreground"
          >
            view jobs
          </Link>
        </span>
      )}
      {status.kind === "error" && (
        <span
          role="alert"
          aria-label="sync all error"
          className="text-xs text-destructive"
        >
          {status.message}
        </span>
      )}
    </div>
  );
}