"use client";

/**
 * PostCard — renders one post in the public feed and the /u/me feed.
 *
 *   • 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 shown only when the owner is viewing
 *
 * 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 { Trash2, ExternalLink } 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";

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);

  return (
    <article className="rounded-xl bg-card ring-1 ring-foreground/10 p-5">
      <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>
        <div className="flex items-center gap-3">
          <span>{new Date(post.created_at).toLocaleDateString()}</span>
          {onDelete ? (
            <button
              type="button"
              onClick={() => onDelete(post.id)}
              className="inline-flex items-center gap-1 text-muted-foreground hover:text-destructive transition-colors"
              aria-label="Delete post"
            >
              <Trash2 className="size-3.5" />
            </button>
          ) : null}
        </div>
      </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 postID={post.id} />
      </div>
    </article>
  );
}