"use client";

/**
 * /activity — the USER activity feed (T-158, spec §14 "User activity feed").
 *
 * Top-level (outside the [workspace] segment) — it spans ALL of the caller's
 * workspaces (GET /users/me/activity = the caller's own actions + rows of
 * their workspaces; other workspaces never leak). Reuses the (app) layout
 * (auth gate + workspace shell) the way /spaces does. Rows deep-link to the
 * owning workspace's resource (each row carries its own `workspaceId`).
 */
import { useCallback } from "react";
import { Activity } from "lucide-react";
import { meApi } from "@/lib/api";
import { ActivityFeed } from "@/components/activity/activity-feed";
import type { ActivityRow } from "@/lib/types";

export default function MyActivityPage() {
  const fetchPage = useCallback(
    (cursor?: string) => meApi.myActivity({ cursor, limit: 30 }),
    []
  );

  // A resource is linkable when it sits on a page (a task/record/block/
  // whiteboard row carries `pageId`) or IS a page/database. Everything else
  // (users, automations, files…) has no single browser route here.
  const hrefFor = useCallback((row: ActivityRow): string | null => {
    const ws = row.workspaceId;
    if (!ws) return null;
    if (row.pageId) return `/w/${ws}/page/${row.pageId}`;
    if (row.resourceType === "database") return `/w/${ws}/databases/${row.resourceId}`;
    return null;
  }, []);

  return (
    <div className="mx-auto max-w-2xl px-6 py-8">
      <div className="mb-5 flex items-center gap-2">
        <Activity className="size-5 text-muted-foreground" aria-hidden />
        <h1 className="text-xl font-semibold">My activity</h1>
      </div>
      <p className="mb-4 text-sm text-muted-foreground">
        What you did, across your workspaces.
      </p>
      <ActivityFeed
        fetchPage={fetchPage}
        hrefFor={hrefFor}
        emptyMessage="No activity yet — edit a page or comment to see it here."
      />
    </div>
  );
}