"use client";

/**
 * T-158 — the shared ACTIVITY feed (spec §14: "User activity feed and space
 * activity feed"). The API (done 2026-10-11) serves two permission-scoped,
 * newest-first, keyset-paginated projections over `audit_logs` (A-007):
 *
 *   - user:   GET /users/me/activity
 *   - space:  GET /workspaces/:id/activity
 *
 * Both return `{ data: ActivityRow[], nextCursor }` with `actorName`
 * resolved server-side. This component is the ONE reader for both (same row
 * shape, same ordering); the parent supplies the fetch + where a resource
 * deep-links (a user row carries its own `workspaceId`; a space row is
 * already scoped to the current workspace).
 */
import { useCallback, useEffect, useRef, useState } from "react";
import {
  Activity as ActivityIcon,
  ArrowUpRight,
  Bot,
  Database,
  FileText,
  Loader2,
  ListTodo,
  MessageSquare,
  Puzzle,
  Square,
  User,
  Users,
  Workflow
} from "lucide-react";
import { cn, formatRelativeTime } from "@/lib/utils";
import type { ActivityRow } from "@/lib/types";

export type { ActivityRow };

export interface ActivityFeedProps {
  /** Fetch one page (cursor-paginated; first call passes no cursor). */
  fetchPage: (cursor?: string) => Promise<{ data: ActivityRow[]; nextCursor: string | null }>;
  /** Where a linkable resource navigates (null = no deep link). */
  hrefFor: (row: ActivityRow) => string | null;
  emptyMessage?: string;
}

const RESOURCE_ICON: Record<string, React.ComponentType<{ className?: string }>> = {
  page: FileText,
  whiteboard: Square,
  database: Database,
  record: Square,
  block: Square,
  task: ListTodo,
  comment: MessageSquare,
  file: FileText,
  template: FileText,
  automation: Workflow,
  user: User,
  workspace: Users,
  team: Users,
  form: Puzzle
};

/** `page.version_restored` → "restored a page version" (the feed renders
 *  the audit `action` as a verb phrase, not the machine name). */
function summarize(action: string, resourceType: string): string {
  const [domain = "action", verb] = action.split(".", 2);
  const v = (verb ?? domain).replace(/_/g, " ");
  const noun =
    resourceType === "record"
      ? "a record"
      : resourceType === "block"
        ? "a block"
        : domain === "comment"
          ? "a comment"
          : resourceType.startsWith("ai")
            ? "an AI feature"
            : `a ${resourceType}`;
  return `${v} ${noun}`;
}

export function ActivityFeed({ fetchPage, hrefFor, emptyMessage }: ActivityFeedProps) {
  const [rows, setRows] = useState<ActivityRow[]>([]);
  const [nextCursor, setNextCursor] = useState<string | null>(null);
  const [status, setStatus] = useState<"loading" | "ready" | "error">("loading");
  const [loadingMore, setLoadingMore] = useState(false);
  // Guards against an out-of-order fetchPage settling after a newer one.
  const reqRef = useRef(0);

  useEffect(() => {
    let cancelled = false;
    const my = ++reqRef.current;
    setStatus("loading");
    fetchPage()
      .then((res) => {
        if (cancelled || my !== reqRef.current) return;
        setRows(res.data);
        setNextCursor(res.nextCursor);
        setStatus("ready");
      })
      .catch(() => {
        if (!cancelled && my === reqRef.current) setStatus("error");
      });
    return () => {
      cancelled = true;
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const loadMore = useCallback(async () => {
    if (!nextCursor || loadingMore) return;
    setLoadingMore(true);
    const my = reqRef.current;
    try {
      const res = await fetchPage(nextCursor);
      if (my === reqRef.current) {
        setRows((r) => [...r, ...res.data]);
        setNextCursor(res.nextCursor);
      }
    } finally {
      if (my === reqRef.current) setLoadingMore(false);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [nextCursor, loadingMore]);

  if (status === "loading") {
    return (
      <p className="flex items-center gap-2 py-8 text-sm text-muted-foreground" role="status">
        <Loader2 className="size-4 animate-spin" aria-hidden /> Loading activity…
      </p>
    );
  }

  if (status === "error") {
    return (
      <p className="py-8 text-sm text-muted-foreground" role="alert">
        Activity is temporarily unavailable.
      </p>
    );
  }

  if (rows.length === 0) {
    return (
      <p className="py-8 text-center text-sm text-muted-foreground">
        {emptyMessage ?? "No activity yet."}
      </p>
    );
  }

  return (
    <div>
      <ol data-testid="activity-feed" className="divide-y divide-border" aria-label="Activity">
        {rows.map((row) => {
          const Icon = RESOURCE_ICON[row.resourceType] ?? ActivityIcon;
          const link = hrefFor(row);
          return (
            <li key={row.id}>
              <a
                data-testid="activity-item"
                href={link ?? undefined}
                aria-disabled={!link}
                tabIndex={link ? undefined : -1}
                onClick={(e) => {
                  if (!link) e.preventDefault();
                }}
                className={cn(
                  "flex items-center gap-3 px-1 py-2.5",
                  link ? "hover:bg-accent/50" : "cursor-default"
                )}
              >
                {row.actorType === "SYSTEM" ? (
                  <span className="flex size-7 shrink-0 items-center justify-center" aria-hidden>
                    <Bot className="size-4 text-muted-foreground" />
                  </span>
                ) : (
                  <span
                    className="flex size-7 shrink-0 items-center justify-center rounded-full bg-muted text-[11px] font-medium uppercase text-muted-foreground"
                    aria-hidden
                  >
                    {(row.actorName ?? "?").slice(0, 2)}
                  </span>
                )}
                <div className="min-w-0 flex-1 text-sm">
                  <span className="text-foreground" data-testid="activity-actor">
                    {row.actorType === "SYSTEM" ? "System" : row.actorName ?? "Someone"}
                  </span>{" "}
                  <span>{summarize(row.action, row.resourceType)}</span>{" "}
                  <span className="text-muted-foreground">{formatRelativeTime(row.createdAt)}</span>
                </div>
                <ArrowUpRight
                  className={cn("size-4 shrink-0", link ? "text-muted-foreground" : "text-muted-foreground/30")}
                  aria-hidden
                />
              </a>
            </li>
          );
        })}
      </ol>
      {nextCursor ? (
        <button
          type="button"
          data-testid="activity-load-more"
          onClick={() => void loadMore()}
          disabled={loadingMore}
          className="mt-1 flex w-full items-center justify-center gap-2 py-2 text-xs text-muted-foreground hover:text-foreground disabled:opacity-50"
        >
          {loadingMore ? <Loader2 className="size-3.5 animate-spin" aria-hidden /> : null}
          Load more
        </button>
      ) : null}
    </div>
  );
}