"use client";

/**
 * /u/[handle]/mentions — posts that tag this user.
 *
 * Grid of tagged posts (same renderer as the Posts tab). Because a tagged
 * post can be authored by anyone, each thumbnail links to its own author's
 * scroll feed, anchored to the post.
 */

import { useEffect, useState } from "react";
import { profile, type Post } from "@/lib/social";
import { PostViews } from "@/components/social/post/post-views";
import { usePublicProfile } from "../profile-context";

export default function PublicProfileMentionsPage() {
  const data = usePublicProfile();
  const [feed, setFeed] = useState<Post[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let cancelled = false;
    profile
      .mentionsFeed(data.handle, 30)
      .then((rows) => {
        if (!cancelled) setFeed(rows ?? []);
      })
      .catch(() => {
        /* show empty rather than block the tab */
      })
      .finally(() => !cancelled && setLoading(false));
    return () => {
      cancelled = true;
    };
  }, [data.handle]);

  if (loading) {
    return <p className="text-sm text-muted-foreground">Loading…</p>;
  }

  return (
    <PostViews
      posts={feed}
      hrefFor={(p) => `/u/${p.author_handle ?? data.handle}/posts#post-${p.id}`}
      emptyMessage={`Posts that tag @${data.handle} will appear here.`}
    />
  );
}