"use client";

/**
 * /u/me/mentions — posts that tag the signed-in user.
 *
 * Grid of tagged posts (same renderer as the Posts tab). Tagged posts can be
 * by anyone, so each thumbnail links to its author's scroll feed.
 */

import { useEffect, useState } from "react";
import { useAuth } from "@/components/auth/auth-provider";
import { profile, type Post } from "@/lib/social";
import { PostViews } from "@/components/social/post/post-views";

export default function MentionsPage() {
  const { user } = useAuth();
  const handle = user?.handle ?? null;
  const [feed, setFeed] = useState<Post[]>([]);
  const [loading, setLoading] = useState(true);

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

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

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