"use client";

/**
 * PostsGrid — client-side body for /u/[handle] (Posts tab).
 *
 * Split out from page.tsx so the page itself can be a server component
 * that exports `generateMetadata` for the public-profile OG card. The
 * /u/[handle]/layout.tsx still owns ProfileHeader + tab strip + the
 * outer max-w-3xl container; this grid just renders the post grid
 * inside that shell. Tapping a thumbnail jumps to
 * /u/[handle]/posts#post-<id> where the Instagram-style scroll feed
 * shows the full passages.
 */

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

export function PostsGrid({
  params,
}: {
  params: Promise<{ handle: string }>;
}) {
  const { handle } = use(params);
  const data = usePublicProfile();
  const [feed, setFeed] = useState<Post[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let cancelled = false;
    setLoading(true);
    profile
      .feed(handle, 30)
      .then((rows) => {
        if (!cancelled) setFeed(rows ?? []);
      })
      .catch(() => {
        // Layout already 404'd if the handle is unknown; if the feed
        // itself fails we just show an empty grid rather than blocking
        // the page with an error toast.
      })
      .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/${data.handle}/posts#post-${p.id}`}
      emptyMessage="No posts yet — quotes shared by this user will appear here."
    />
  );
}