spsays-training/components/social/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 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 { PostActionsFooter } from "./post-actions-footer";
import { PostCardMenu } from "./post-card-menu";

export function PostCard({
  post,
  onDelete,
}: {
  post: Post;
  onDelete?: (id: string) => void;
}) {
  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">
        <AuthorAvatar src={post.author_avatar_url ?? null} name={authorName} />
        <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>
          )}
          {authorHandle ? (
            <p className="text-xs text-muted-foreground truncate">
              @{authorHandle}
            </p>
          ) : null}
        </div>
        <PostCardMenu post={post} onDelete={onDelete} />
      </header>

      <p className="font-[family-name:var(--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) => (
            <div
              key={img.id}
              className="relative aspect-square rounded-lg overflow-hidden bg-muted ring-1 ring-foreground/10"
            >
              <Image
                src={img.url}
                alt=""
                fill
                sizes="(max-width: 640px) 30vw, 200px"
                className="object-cover"
                unoptimized
              />
            </div>
          ))}
        </div>
      ) : 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>
  );
}

function AuthorAvatar({
  src,
  name,
}: {
  src: string | null;
  name: string;
}) {
  if (src) {
    return (
      <Image
        src={src}
        alt={name}
        width={36}
        height={36}
        className="size-9 rounded-full object-cover ring-1 ring-foreground/10 shrink-0"
        unoptimized
      />
    );
  }
  const initial = name.charAt(0).toUpperCase() || "?";
  return (
    <div className="size-9 rounded-full bg-primary/15 text-primary flex items-center justify-center text-sm font-semibold ring-1 ring-foreground/10 shrink-0">
      {initial}
    </div>
  );
}