"use client";

/**
 * T-178 — Notifications tab: delivery health for the org's workspaces.
 *
 * There is no delivery table, so the metrics are DERIVED:
 *   - in-app: the bell volume (`inAppTotal`) + the unread backlog (`inAppUnread`);
 *   - email:  jobs on the shared `email` queue. `emailQueued` is a CLUSTER-wide
 *             count (BullMQ is shared across orgs — a documented limitation);
 *             `emailFailed` / `failedJobs` are org-scoped by correlating each
 *             job's payload `notificationIds` to the org's notification rows
 *             (no-leak: another org's failed emails never appear).
 */
import { useQuery } from "@tanstack/react-query";
import { MailCheck, MailX, Inbox } from "lucide-react";
import { orgAdminApi } from "@/lib/org-admin";
import { Section } from "@/components/settings/settings-shell";

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

function Stat({ icon: Icon, label, value, tone }: { icon: typeof Inbox; label: string; value: number | string; tone?: "bad" }) {
  return (
    <div className="flex items-center gap-3 rounded-lg border border-border p-3">
      <Icon className={`size-4 ${tone === "bad" ? "text-destructive" : "text-muted-foreground"}`} aria-hidden />
      <div>
        <div className="text-xs text-muted-foreground">{label}</div>
        <div className={`text-lg font-semibold ${tone === "bad" ? "text-destructive" : ""}`}>{value}</div>
      </div>
    </div>
  );
}

export function AdminNotificationsTab({ orgId }: { orgId: string }) {
  const health = useQuery({
    queryKey: ["orgs", orgId, "admin", "notifications", "health"],
    queryFn: () => orgAdminApi.notificationsHealth(orgId),
    retry: false,
    refetchInterval: 15_000,
  });

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

  return (
    <div className="space-y-6">
      <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
        <Stat icon={Inbox} label="In-app total" value={n.inAppTotal} />
        <Stat icon={Inbox} label="In-app unread" value={n.inAppUnread} tone={n.inAppUnread > 0 ? "bad" : undefined} />
        <Stat icon={MailCheck} label="Email queued (cluster)" value={n.emailQueued} />
        <Stat icon={MailX} label="Email failed (org)" value={n.emailFailed} tone={n.emailFailed > 0 ? "bad" : undefined} />
      </div>

      <Section
        title="Recent failed email jobs"
        description="Org-scoped: only failed email jobs whose notification belongs to this org are listed (correlated by the job's payload, never by the BullMQ job id)."
      >
        {failed.length === 0 ? (
          <p className="text-sm text-muted-foreground">No failed email jobs for this org.</p>
        ) : (
          <ul className="divide-y divide-border rounded-md border border-border">
            {failed.map((f) => (
              <li key={f.jobId} className="flex flex-wrap items-start gap-x-3 gap-y-1 p-3">
                <div className="min-w-0 flex-1">
                  <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[11px] text-muted-foreground">
                    <span className="font-medium text-foreground">notification {f.notificationId.slice(0, 12)}…</span>
                    <span>{f.attemptsMade} attempts</span>
                    <span>{fmtTime(f.failedAt)}</span>
                    <span className="text-[11px]">job {f.jobId.slice(0, 8)}…</span>
                  </div>
                  {f.failedReason && (
                    <p className="mt-1 break-words rounded bg-destructive/5 px-2 py-1 text-xs text-destructive">{f.failedReason}</p>
                  )}
                </div>
              </li>
            ))}
          </ul>
        )}
      </Section>
    </div>
  );
}