"use client";

/**
 * Public profile — Posts tab (default).
 *
 * The /u/[handle] layout owns the ProfileHeader + tab strip + container;
 * this page only renders the post grid. 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 default function PublicProfilePostsPage(props: {
  params: Promise<{ handle: string }>;
}) {
  const { handle } = use(props.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."
    />
  );
}