"use client";

/**
 * PostScrollCard — Instagram-style post used on the scroll feed.
 *
 * Layout:
 *
 *   ┌───────────────────────────────────────┐
 *   │  ◯ name @handle                  ⋮    │  ← author header (TBD)
 *   ├───────────────────────────────────────┤
 *   │                                       │
 *   │            image carousel             │  ← square, swipeable
 *   │              (or quote)               │     (no-image variant
 *   │                                       │     fills with gradient
 *   │            • ○ ○ ○                    │     panel + serif quote)
 *   ├───────────────────────────────────────┤
 *   │  "Quoted passage shown as caption…"   │  ← truncates with "more"
 *   │  ŚRĪMAD-BHĀGAVATAM — CANTO 4, CH 5    │  ← citation
 *   └───────────────────────────────────────┘
 *
 *   • Multi-image carousel uses native CSS scroll-snap with dot indicators
 *     below; the same primitive CollectionScrollCard uses for posts.
 *   • Long captions clamp to 3 lines until the user expands via "more".
 *   • Owner action cluster (Update background / Delete) sits in the
 *     top-right of the media area, fading in on hover (desktop) and
 *     always visible on touch (mobile).
 */

import { useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { ImageIcon, Trash2 } from "lucide-react";
import { cn } from "@/lib/utils";
import type { Post, PostImage } from "@/lib/social";
import { displaySourceLabel } from "@/lib/source-reference";
import { useMediaQuery } from "@/components/selection-toolbar/shared";
import { postSourceHref, quoteCardBgStyle } from "./post-card-shared";
import { PostActionsFooter } from "./post-actions-footer";
import { UpdateBackgroundModal } from "./update-background-modal";

export function PostScrollCard({
  post,
  onDelete,
  onUpdated,
}: {
  post: Post;
  onDelete?: (id: string) => void;
  onUpdated?: (updated: Post) => void;
}) {
  const images = post.images ?? [];
  const hasImages = images.length > 0;
  const sourceHref = postSourceHref(post);
  const isMobile = useMediaQuery("(max-width: 767px)");
  const [bgModal, setBgModal] = useState(false);
  const [expanded, setExpanded] = useState(false);

  const ownerCluster =
    onUpdated || onDelete ? (
      <div className="absolute top-3 right-3 z-10 flex items-center gap-1.5">
        {onUpdated ? (
          <OwnerButton
            label="Update background"
            onClick={() => setBgModal(true)}
            icon={<ImageIcon className="size-4" />}
          />
        ) : null}
        {onDelete ? (
          <OwnerButton
            label="Remove"
            onClick={() => onDelete(post.id)}
            icon={<Trash2 className="size-4" />}
          />
        ) : null}
      </div>
    ) : null;

  return (
    <article
      id={`post-${post.id}`}
      className="rounded-2xl overflow-hidden bg-card ring-1 ring-foreground/10 scroll-mt-20 sm:scroll-mt-24"
    >
      {/* Author header */}
      <header className="flex items-center gap-3 px-4 py-3">
        <AuthorAvatar
          src={post.author_avatar_url ?? null}
          name={post.author_name ?? "Unknown"}
        />
        <div className="min-w-0">
          <Link
            href={
              post.author_handle ? `/u/${post.author_handle}` : "#"
            }
            className="block text-sm font-semibold text-foreground truncate hover:underline"
          >
            {post.author_name || "Unknown"}
          </Link>
          {post.author_handle ? (
            <span className="block text-xs text-muted-foreground truncate">
              @{post.author_handle}
            </span>
          ) : null}
        </div>
      </header>

      {/* Media — image carousel or gradient-with-quote */}
      <div className="relative">
        {hasImages ? (
          <ImageCarousel images={images} />
        ) : (
          <QuotePanel post={post} />
        )}
        {ownerCluster}
      </div>

      {/* Caption + citation — reference sits directly under the media
          so it's read first, with the action row below it. */}
      <div className="px-4 pt-4 pb-3 space-y-2">
        {hasImages ? (
          // When images carry the visual, the caption sits as text below.
          <Caption
            text={post.caption}
            expanded={expanded}
            onToggle={() => setExpanded((v) => !v)}
          />
        ) : null}
        <Link
          href={sourceHref}
          className="block max-w-full truncate text-[0.7rem] uppercase tracking-[0.2em] font-medium text-muted-foreground hover:text-foreground transition-colors"
        >
          {displaySourceLabel(post.source_url, post.source_title)} →
        </Link>
      </div>

      {/* Action footer — like / comment / reshare on the left, add to
          collection on the right. */}
      <div className="pt-1 pb-2 border-t border-border">
        <PostActionsFooter postID={post.id} />
      </div>

      {onUpdated ? (
        <UpdateBackgroundModal
          open={bgModal}
          onClose={() => setBgModal(false)}
          post={post}
          isMobile={isMobile}
          onUpdated={onUpdated}
        />
      ) : null}
    </article>
  );
}

// ─── Pieces ──────────────────────────────────────────────────────────────

function ImageCarousel({ images }: { images: PostImage[] }) {
  const [active, setActive] = useState(0);

  function onScroll(e: React.UIEvent<HTMLDivElement>) {
    const el = e.currentTarget;
    const w = el.offsetWidth;
    if (w === 0) return;
    setActive(Math.round(el.scrollLeft / w));
  }

  if (images.length === 1) {
    return (
      <div className="relative aspect-square bg-muted">
        <Image
          src={images[0].url}
          alt=""
          fill
          sizes="(max-width: 768px) 100vw, 640px"
          className="object-cover"
          unoptimized
        />
      </div>
    );
  }

  return (
    <div className="relative">
      <div
        onScroll={onScroll}
        className={cn(
          "flex overflow-x-auto snap-x snap-mandatory",
          "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
        )}
      >
        {images.map((img, i) => (
          <div
            key={img.id}
            className="relative w-full shrink-0 snap-start aspect-square bg-muted"
            aria-roledescription="slide"
            aria-label={`${i + 1} of ${images.length}`}
          >
            <Image
              src={img.url}
              alt=""
              fill
              sizes="(max-width: 768px) 100vw, 640px"
              className="object-cover"
              unoptimized
            />
          </div>
        ))}
      </div>
      <div className="absolute inset-x-0 bottom-3 flex items-center justify-center gap-1.5 pointer-events-none">
        {images.map((_, i) => (
          <span
            key={i}
            aria-hidden
            className={cn(
              "size-1.5 rounded-full transition-all",
              i === active ? "bg-white" : "bg-white/50",
            )}
          />
        ))}
      </div>
    </div>
  );
}

function QuotePanel({ post }: { post: Post }) {
  // No-image post: the entire square is a flat palette-aware surface
  // (pure white on light themes, palette-specific dark on dark themes)
  // with the quote in serif inside. Text uses --foreground so it inverts
  // automatically with the theme.
  return (
    <div
      className="relative aspect-square overflow-hidden select-none"
      style={quoteCardBgStyle()}
    >
      <div className="absolute inset-0 flex flex-col justify-center items-center p-8 sm:p-10 text-center text-foreground">
        <p className="font-[family-name:var(--font-title)] text-xl sm:text-2xl leading-relaxed max-w-md line-clamp-[8] break-words">
          “{post.caption}”
        </p>
      </div>
    </div>
  );
}

function Caption({
  text,
  expanded,
  onToggle,
}: {
  text: string;
  expanded: boolean;
  onToggle: () => void;
}) {
  // Show 3 lines collapsed. The "more" toggle appears only when the text
  // is long enough to warrant it (a cheap char-length check beats a
  // measure-and-compare pass for our purposes — captions over ~180 chars
  // will always overflow 3 lines at the rendered font size).
  const longEnough = text.length > 180;
  return (
    <div className="text-sm text-foreground leading-relaxed">
      <p
        className={cn(
          "font-[family-name:var(--font-title)] break-words",
          !expanded && longEnough && "line-clamp-3",
        )}
      >
        “{text}”
      </p>
      {longEnough ? (
        <button
          type="button"
          onClick={onToggle}
          className="mt-1 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors"
        >
          {expanded ? "Show less" : "More"}
        </button>
      ) : null}
    </div>
  );
}

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"
        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">
      {initial}
    </div>
  );
}

function OwnerButton({
  label,
  onClick,
  icon,
}: {
  label: string;
  onClick: () => void;
  icon: React.ReactNode;
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      aria-label={label}
      title={label}
      className={cn(
        "size-9 rounded-full inline-flex items-center justify-center",
        "bg-black/40 text-white hover:bg-black/60 transition-colors backdrop-blur-sm",
      )}
    >
      {icon}
    </button>
  );
}