spsays-training/components/social/post/post-card.tsx

"use client";

/**
 * PostCard — renders one post in the public feed and the /u/me feed.
 *
 *   • Author header — avatar + display name + @handle on the left,
 *     three-dot overflow menu on the right. Menu contents vary by
 *     viewer (see PostCardMenu): author sees Delete; signed-in
 *     non-author sees Block + Report; anonymous sees Report.
 *   • Caption in serif (locked, can't be edited)
 *   • Image grid (max 5; collapses to one column on the cheap)
 *   • "Source" link back to the page the quote came from
 *   • Optional onDelete callback — passed through to PostCardMenu so
 *     Delete actually does something on owner views (parent confirms +
 *     calls the API; same pattern as before the menu refactor).
 *
 * The source link always lands the user on the original passage with `?hl=`
 * highlighting. If the stored source_url already carries `?hl=` we use it
 * verbatim; otherwise we synthesise one from the post's caption so older
 * posts (or imported data) still scroll to + highlight the text on click.
 */

import { useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { ExternalLink, Repeat2 } from "lucide-react";
import type { Post } from "@/lib/social";
import { displaySourceLabel } from "@/lib/source-reference";
import { appendHighlight, hasHighlight } from "@/lib/text-highlight";
import { UserAvatar } from "@/components/ui/user-avatar";
import { timeAgo } from "@/lib/time";
import { PostActionsFooter } from "./post-actions-footer";
import { PostCardMenu } from "./post-card-menu";
import { PostImageLightbox } from "./post-image-lightbox";

export function PostCard({
  post,
  onDelete,
}: {
  post: Post;
  onDelete?: (id: string) => void;
}) {
  // Which attached photo the full-screen viewer is showing (null = closed).
  // Owned here rather than inside the lightbox so the thumbnails can open it
  // at their own index.
  const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);

  const sourceHref =
    hasHighlight(post.source_url) || !post.caption
      ? post.source_url
      : appendHighlight(post.source_url, post.caption);

  const authorName = post.author_name || "Unknown";
  const authorHandle = post.author_handle ?? null;

  return (
    <article className="rounded-xl bg-card ring-1 ring-foreground/10 p-5 select-none">
      {/* Reshare attribution — only on rows that are themselves
          reshares. The link goes to the original author's profile;
          their handle is rendered inline so the source is obvious.
          The post body below shows the resharer as the author (this
          IS their post — likes, comments, and background all belong
          to them, independent from the original). */}
      {post.reshared_from_post_id && post.original_author_handle ? (
        <Link
          href={`/u/${post.original_author_handle}`}
          className="inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground mb-3 transition-colors"
        >
          <Repeat2 className="size-3.5" />
          <span>
            Reshared from{" "}
            <span className="font-medium">@{post.original_author_handle}</span>
          </span>
        </Link>
      ) : null}
      {/* Author header — identity on the left, overflow menu on the
          right. The menu trigger only renders when there are items to
          show (delete for owners, block/report for everyone else), so
          a view with nothing to expose simply hides the dot. */}
      <header className="flex items-center gap-3 mb-4">
        {authorHandle ? (
          <Link
            href={`/u/${authorHandle}`}
            aria-label={`View ${authorName}'s profile`}
            className="shrink-0"
          >
            <UserAvatar
              src={post.author_avatar_url}
              name={authorName}
              className="size-9"
            />
          </Link>
        ) : (
          <UserAvatar
            src={post.author_avatar_url}
            name={authorName}
            className="size-9"
          />
        )}
        <div className="min-w-0 flex-1">
          {authorHandle ? (
            <Link
              href={`/u/${authorHandle}`}
              className="block text-sm font-semibold text-foreground truncate hover:underline"
            >
              {authorName}
            </Link>
          ) : (
            <p className="text-sm font-semibold text-foreground truncate">
              {authorName}
            </p>
          )}
          <p className="text-xs text-muted-foreground truncate">
            {authorHandle ? <>@{authorHandle} · </> : null}
            {timeAgo(post.created_at)}
          </p>
        </div>
        <PostCardMenu post={post} onDelete={onDelete} />
      </header>

      <p className="font-(family-name:--font-title) text-lg text-foreground leading-relaxed">
        “{post.caption}”
      </p>

      {post.images && post.images.length > 0 ? (
        <div
          className={`mt-4 grid gap-2 ${
            post.images.length === 1
              ? "grid-cols-1"
              : post.images.length === 2
                ? "grid-cols-2"
                : "grid-cols-3"
          }`}
        >
          {post.images.map((img, i) => (
            // Each thumbnail opens the full-screen viewer at its own index.
            // A <button> rather than a click-handled <div> so it's keyboard
            // reachable and announced — the grid is the only way in.
            <button
              key={img.id}
              type="button"
              onClick={() => setLightboxIndex(i)}
              aria-label={
                post.images.length > 1
                  ? `View photo ${i + 1} of ${post.images.length}`
                  : "View photo"
              }
              className="relative aspect-square rounded-lg overflow-hidden bg-muted ring-1 ring-foreground/10 cursor-zoom-in transition hover:ring-foreground/30 outline-none focus-visible:ring-2 focus-visible:ring-ring"
            >
              <Image
                src={img.url}
                alt=""
                fill
                sizes="(max-width: 640px) 30vw, 200px"
                className="object-cover"
                unoptimized
              />
            </button>
          ))}
        </div>
      ) : null}

      <PostImageLightbox
        images={post.images ?? []}
        index={lightboxIndex}
        caption={post.caption}
        onIndexChange={setLightboxIndex}
        onClose={() => setLightboxIndex(null)}
      />

      <div className="mt-4 flex items-center justify-between text-xs text-muted-foreground">
        <Link
          href={sourceHref}
          className="inline-flex items-center gap-1 hover:text-foreground transition-colors"
        >
          <ExternalLink className="size-3" />
          {displaySourceLabel(post.source_url, post.source_title)}
        </Link>
        <span>{new Date(post.created_at).toLocaleDateString()}</span>
      </div>

      {/* Action footer — like / comment / reshare on the left, add to
          collection on the right. */}
      <div className="mt-3 pt-2 border-t border-border">
        <PostActionsFooter post={post} />
      </div>
    </article>
  );
}