"use client";

/**
 * T-176 — Jobs tab: per-queue BullMQ state + the recent failed jobs (DLQ view)
 * with an audited re-run action.
 *
 * BullMQ is CLUSTER-wide (every org shares the seven worker queues), so the
 * counts are reported `scope: "cluster"` — the org-admin gate is the access
 * control, and the label keeps the UI honest (it never pretends the numbers
 * are org-scoped).
 */
import { useState } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { ListChecks, RefreshCw } from "lucide-react";
import {
  orgAdminApi,
  type AdminQueueName,
  type OrgFailedJob
} from "@/lib/org-admin";
import { isApiError } from "@/lib/api";
import { toast } from "@/stores/ui-store";
import { Section, inputCls } from "@/components/settings/settings-shell";

const QUEUES: AdminQueueName[] = [
  "files",
  "search-index",
  "webhooks",
  "automations",
  "email",
  "ai",
  "maintenance"
];

function fmtTime(iso: string | null): string {
  if (!iso) return "—";
  return new Date(iso).toLocaleString();
}

export function AdminJobsTab({ orgId }: { orgId: string }) {
  const qc = useQueryClient();
  const [queue, setQueue] = useState<AdminQueueName | "">("");

  const overview = useQuery({
    queryKey: ["orgs", orgId, "admin", "jobs"],
    queryFn: () => orgAdminApi.jobsOverview(orgId),
    retry: false,
  });

  const failed = useQuery({
    queryKey: ["orgs", orgId, "admin", "jobs", "failed", queue],
    queryFn: () => orgAdminApi.jobsFailed(orgId, { queue: queue || undefined, limit: 20 }),
    retry: false,
  });

  const requeue = useMutation({
    mutationFn: (v: { queue: AdminQueueName; jobId: string }) => orgAdminApi.jobsRequeue(orgId, v),
    onSuccess: () => {
      toast("success", "Job requeued");
      qc.invalidateQueries({ queryKey: ["orgs", orgId, "admin", "jobs"] });
      qc.invalidateQueries({ queryKey: ["orgs", orgId, "admin", "jobs", "failed"] });
    },
    onError: (e) =>
      toast("error", "Could not requeue the job", isApiError(e) ? e.message : undefined)
  });

  if (overview.isLoading) {
    return <p className="text-sm text-muted-foreground" role="status">Loading jobs…</p>;
  }
  if (overview.isError) {
    return <p className="text-sm text-destructive" role="alert">Could not load the job state.</p>;
  }
  const counts = overview.data!.queues;
  const jobs = failed.data?.jobs ?? [];

  return (
    <div className="space-y-6">
      <Section
        title="Queue state"
        description="Counts are cluster-wide — every org shares the seven worker queues. The org-admin role is the access boundary."
      >
        <div className="grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-7">
          {counts.map((c) => (
            <div key={c.name} data-testid={`jobs-queue-${c.name}`} className="rounded-md border border-border p-2.5">
              <div className="truncate text-xs font-medium" title={c.name}>
                {c.name}
              </div>
              <div className="mt-1.5 flex flex-wrap gap-x-2.5 gap-y-0.5 text-[11px] text-muted-foreground">
                <span title="waiting + delayed">
                  <span className="font-medium text-foreground">{c.waiting}</span> wait
                </span>
                <span title="active">
                  <span className="font-medium text-foreground">{c.active}</span> active
                </span>
                <span title="failed">
                  <span className={c.failed > 0 ? "font-medium text-destructive" : "font-medium text-foreground"}>
                    {c.failed}
                  </span>{" "}
                  fail
                </span>
              </div>
            </div>
          ))}
        </div>
      </Section>

      <Section
        title="Failed jobs"
        description="Recent failed jobs (the DLQ view). Requeue resets the attempt counter and returns the job to waiting."
      >
        <div className="mb-3 flex items-center gap-2">
          <ListChecks className="size-4 text-muted-foreground" aria-hidden />
          <select
            value={queue}
            onChange={(e) => setQueue(e.target.value as AdminQueueName | "")}
            className={inputCls}
            aria-label="Filter failed jobs by queue"
          >
            <option value="">All queues</option>
            {QUEUES.map((q) => (
              <option key={q} value={q}>
                {q}
              </option>
            ))}
          </select>
        </div>

        {failed.isLoading ? (
          <p className="text-sm text-muted-foreground" role="status">
            Loading failed jobs…
          </p>
        ) : failed.isError ? (
          <p className="text-sm text-destructive" role="alert">
            Could not load failed jobs.
          </p>
        ) : jobs.length === 0 ? (
          <p className="text-sm text-muted-foreground">No failed jobs{queue ? ` on ${queue}` : ""}.</p>
        ) : (
          <ul className="divide-y divide-border rounded-md border border-border">
            {jobs.map((j) => (
              <JobRow key={`${j.queue}-${j.jobId}`} job={j} onRequeue={() => requeue.mutate({ queue: j.queue, jobId: j.jobId! })} busy={requeue.isPending} />
            ))}
          </ul>
        )}
      </Section>
    </div>
  );
}

function JobRow({ job, onRequeue, busy }: { job: OrgFailedJob; onRequeue: () => void; busy: boolean }) {
  return (
    <li className="flex items-start gap-3 p-3">
      <div className="min-w-0 flex-1">
        <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5">
          <span className="text-sm font-medium">{job.name}</span>
          <span className="rounded bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground">{job.queue}</span>
          <span className="text-[11px] text-muted-foreground">{job.attemptsMade} attempts</span>
          <span className="text-[11px] text-muted-foreground">{fmtTime(job.failedAt)}</span>
        </div>
        {job.failedReason && (
          <p className="mt-1 break-words rounded bg-destructive/5 px-2 py-1 text-xs text-destructive">{job.failedReason}</p>
        )}
        {job.payload && (
          <pre className="mt-1 max-h-24 overflow-auto break-all rounded bg-muted/50 px-2 py-1 text-[11px] text-muted-foreground">
            {job.payload}
          </pre>
        )}
      </div>
      <button
        type="button"
        onClick={onRequeue}
        disabled={busy || !job.jobId}
        data-testid={`jobs-requeue-${job.jobId}`}
        className="inline-flex shrink-0 items-center gap-1.5 rounded-md border border-input px-2.5 py-1.5 text-xs font-medium hover:bg-muted disabled:opacity-50"
      >
        <RefreshCw className="size-3.5" aria-hidden /> Requeue
      </button>
    </li>
  );
}