"use client";

/**
 * T-177 — Search health tab: index vs source-of-truth document counts (drift),
 * indexing lag, the last reconcile stamp, and the T-156 full-reindex trigger.
 *
 * `sourceCount` is the Postgres `searchDocument` mirror (what the worker's
 * reconcile compares against); `docCount` is the OpenSearch whole-doc count
 * (chunks excluded, org-scoped). Drift = docCount − sourceCount. When
 * OpenSearch is down the API returns `healthy:false` (200, never 500) with a
 * stable `error` code — this tab surfaces that instead of a spinner loop.
 */
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Loader2, RefreshCw } from "lucide-react";
import { orgAdminApi } from "@/lib/org-admin";
import { isApiError } from "@/lib/api";
import { toast } from "@/stores/ui-store";
import { Section } from "@/components/settings/settings-shell";

function fmtDuration(ms: number | null): string {
  if (ms === null) return "—";
  if (ms < 1000) return `${ms} ms`;
  const s = Math.floor(ms / 1000);
  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);
  if (h < 24) return `${h} h ${m % 60} m`;
  return `${Math.floor(h / 24)} d ${h % 24} h`;
}

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

export function AdminSearchHealthTab({ orgId }: { orgId: string }) {
  const qc = useQueryClient();
  const health = useQuery({
    queryKey: ["orgs", orgId, "admin", "search", "health"],
    queryFn: () => orgAdminApi.searchHealth(orgId),
    retry: false,
    refetchInterval: 15_000,
  });

  const reindex = useMutation({
    mutationFn: () => orgAdminApi.searchReindex(orgId),
    onSuccess: (res) => {
      toast("success", "Reindex enqueued — the worker will rebuild the index");
      void res;
      qc.invalidateQueries({ queryKey: ["orgs", orgId, "admin", "search", "health"] });
    },
    onError: (e) => toast("error", "Could not enqueue the reindex", isApiError(e) ? e.message : undefined)
  });

  if (health.isLoading) {
    return <p className="text-sm text-muted-foreground" role="status">Loading search health…</p>;
  }
  if (health.isError) {
    return <p className="text-sm text-destructive" role="alert">Could not load the search health.</p>;
  }
  const h = health.data!;

  return (
    <div className="space-y-6">
      {!h.healthy ? (
        <div data-testid="search-health-down" className="rounded-lg border border-destructive/40 bg-destructive/5 p-4" role="alert">
          <div className="text-sm font-medium text-destructive">Search index unavailable</div>
          <p className="mt-1 text-xs text-muted-foreground">
            OpenSearch did not answer ({h.error ?? "unknown error"}). The counts below are from the Postgres source of
            truth only.
          </p>
        </div>
      ) : (
        <div
          data-testid="search-health-ok"
          className="flex items-center gap-2 rounded-lg border border-border p-4 text-sm"
          role="status"
        >
          <span className="size-2 rounded-full bg-emerald-500" aria-hidden />
          Index reachable.
          {h.drift !== null && h.drift !== 0 && (
            <span className="text-xs text-muted-foreground">
              Drift {h.drift > 0 ? "+" : ""}
              {h.drift} docs vs the source of truth — consider a reindex.
            </span>
          )}
        </div>
      )}

      <Section title="Counts" description="Source of truth: the Postgres searchDocument mirror (what reconcile compares against).">
        <dl className="grid grid-cols-2 gap-x-6 gap-y-3 text-sm sm:grid-cols-4">
          <div>
            <dt className="text-xs text-muted-foreground">Workspaces</dt>
            <dd className="text-lg font-semibold">{h.workspaces}</dd>
          </div>
          <div>
            <dt className="text-xs text-muted-foreground">Source docs</dt>
            <dd className="text-lg font-semibold">{h.sourceCount}</dd>
          </div>
          <div>
            <dt className="text-xs text-muted-foreground">Index docs</dt>
            <dd className="text-lg font-semibold">{h.docCount ?? "—"}</dd>
          </div>
          <div>
            <dt className="text-xs text-muted-foreground">Drift</dt>
            <dd className="text-lg font-semibold">{h.drift === null ? "—" : h.drift === 0 ? "0" : `${h.drift > 0 ? "+" : ""}${h.drift}`}</dd>
          </div>
        </dl>
      </Section>

      <Section title="Freshness" description="Lag = now − the newest indexedAt stamp in the mirror.">
        <dl className="grid grid-cols-1 gap-x-6 gap-y-3 text-sm sm:grid-cols-3">
          <div>
            <dt className="text-xs text-muted-foreground">Indexing lag</dt>
            <dd className="text-lg font-semibold">{fmtDuration(h.lagMs)}</dd>
          </div>
          <div>
            <dt className="text-xs text-muted-foreground">Last indexed</dt>
            <dd className="text-sm font-medium">{fmtTime(h.lastIndexedAt)}</dd>
          </div>
          <div>
            <dt className="text-xs text-muted-foreground">Last reconcile</dt>
            <dd className="text-sm font-medium">{fmtTime(h.lastReconcileAt)}</dd>
          </div>
        </dl>
      </Section>

      <Section
        title="Reindex"
        description="Enqueue a full, org-scoped rebuild of the content index (T-156, async — the worker does the work)."
      >
        <button
          type="button"
          onClick={() => reindex.mutate()}
          disabled={reindex.isPending}
          data-testid="search-health-reindex"
          className="inline-flex items-center gap-2 rounded-md border border-input px-3 py-1.5 text-sm font-medium hover:bg-muted disabled:opacity-50"
        >
          {reindex.isPending ? (
            <Loader2 className="size-4 animate-spin" aria-hidden />
          ) : (
            <RefreshCw className="size-4" aria-hidden />
          )}
          {reindex.isPending ? "Enqueuing…" : "Reindex now"}
        </button>
      </Section>
    </div>
  );
}