import Link from "next/link";
import Image from "next/image";
import type { Post } from "@/lib/wp-types";
import { categoryAccent, relativeTime } from "@/lib/utils";

interface Props {
  post: Post;
  variant?: "card" | "feature" | "list" | "rail" | "rail-categorized";
  showImage?: boolean;
  className?: string;
  priority?: boolean;
  asPageHeading?: boolean;
}

/**
 * B v2 PostCard — Fraunces serif titles, outlined pill with category dot,
 * card hover offset shadow, no rounded corners on images.
 */
export function PostCard({
  post,
  variant = "card",
  showImage = true,
  className = "",
  priority = false,
  asPageHeading = false,
}: Props) {
  const primaryCat = post.categories[0];
  const cat = primaryCat ? categoryAccent(primaryCat.slug) : null;
  const href = `/${post.slug}`;
  const img = post.featured;

  // RAIL — sidebar list with timestamp + category eyebrow + small Vietnamese title
  if (variant === "rail") {
    return (
      <article className={`post-row py-3 border-b hairline cursor-pointer flex gap-3 ${className}`}>
        <time
          className="font-[family-name:var(--font-jetbrains-mono)] font-mono text-[10px] uppercase w-10 shrink-0 pt-1"
          style={{ color: "var(--ink-3)" }}
          dateTime={post.date}
        >
          {new Date(post.date).toLocaleTimeString("vi-VN", { hour: "2-digit", minute: "2-digit" })}
        </time>
        <div className="flex-1 min-w-0">
          {cat && (
            <div
              className="text-[10px] font-mono uppercase tracking-wider mb-0.5"
              style={{ color: "var(--accent)" }}
            >
              {cat.label}
            </div>
          )}
          <Link
            href={href}
            className="block text-[14px] leading-snug hover:text-[var(--accent)] transition-colors"
          >
            {post.title}
          </Link>
        </div>
      </article>
    );
  }

  // FEATURE — hero with image fullbleed + light paper scrim + ink-colored title on top
  if (variant === "feature") {
    return (
      <article className={`group cursor-pointer ${className}`}>
        <Link href={href} className="block relative overflow-hidden">
          <div className="aspect-[4/5] sm:aspect-[16/10] lg:aspect-[16/11] relative bg-[var(--bg-2)]">
            {img ? (
              <Image
                src={img.url}
                alt={img.alt}
                fill
                priority={priority}
                sizes="(max-width: 1024px) 100vw, 66vw"
                className="object-cover transition-transform duration-700 group-hover:scale-[1.02]"
              />
            ) : (
              <div
                className="absolute inset-0"
                style={{
                  background:
                    "linear-gradient(135deg, var(--accent-2), var(--accent), var(--gold))",
                }}
              />
            )}

            {/* Light paper-tinted scrim — bottom area only, so title in ink color stays readable */}
            <div className="absolute inset-x-0 bottom-0 p-4 sm:p-6 lg:p-8 pointer-events-none">
              <div
                className="rounded-sm p-5 sm:p-6 lg:p-7 pointer-events-auto"
                style={{
                  background: "color-mix(in oklch, var(--paper) 88%, transparent)",
                  backdropFilter: "blur(14px)",
                  WebkitBackdropFilter: "blur(14px)",
                  border: "1px solid color-mix(in oklch, var(--line) 50%, transparent)",
                }}
              >
                <div className="flex flex-wrap items-center gap-2 mb-4">
                  {cat && (
                    <span className="pill">
                      <span className="pill-dot" style={{ background: cat.color }} />
                      {cat.label}
                    </span>
                  )}
                  {post.categories[1] && (
                    <span className="pill">
                      <span className="pill-dot" style={{ background: "var(--ink-3)" }} />
                      {post.categories[1].name}
                    </span>
                  )}
                  <span
                    className="text-[11px] font-[family-name:var(--font-jetbrains-mono)] font-mono uppercase tracking-wider"
                    style={{ color: "var(--ink-3)" }}
                  >
                    {relativeTime(post.date)}
                  </span>
                </div>

                {asPageHeading ? (
                  <h1 className="display-xl mb-3 group-hover:text-[var(--accent)] transition-colors max-w-3xl">
                    {post.title}
                  </h1>
                ) : (
                  <h2 className="display-xl mb-3 group-hover:text-[var(--accent)] transition-colors max-w-3xl">
                    {post.title}
                  </h2>
                )}

                {post.excerpt && (
                  <p
                    className="hidden sm:block text-[14px] lg:text-[15px] leading-relaxed mb-4 max-w-2xl line-clamp-2"
                    style={{ color: "var(--ink-2)" }}
                  >
                    {post.excerpt}
                  </p>
                )}

                <div
                  className="flex items-center gap-3 text-[13px]"
                  style={{ color: "var(--ink-2)" }}
                >
                  <div
                    className="w-7 h-7 rounded-full flex items-center justify-center text-[10px] font-bold"
                    style={{ background: "var(--accent)", color: "white" }}
                  >
                    {post.author.name.slice(0, 2).toUpperCase()}
                  </div>
                  <span className="font-medium">{post.author.name}</span>
                  <span style={{ color: "var(--ink-3)" }}>·</span>
                  <span
                    className="font-[family-name:var(--font-jetbrains-mono)] font-mono uppercase text-[11px]"
                    style={{ color: "var(--ink-3)" }}
                  >
                    {post.readMinutes} PHÚT ĐỌC
                  </span>
                </div>
              </div>
            </div>
          </div>
        </Link>
      </article>
    );
  }

  // CARD — image + serif title + meta (3-up grid)
  return (
    <article className={`cursor-pointer group ${className}`}>
      <Link href={href}>
        {showImage && (
          <div className="aspect-[16/10] bg-[var(--bg-2)] relative overflow-hidden mb-4">
            {img ? (
              <Image
                src={img.url}
                alt={img.alt}
                fill
                priority={priority}
                sizes="(max-width: 768px) 100vw, (max-width: 1280px) 50vw, 33vw"
                className="object-cover transition-transform duration-500 group-hover:scale-[1.03]"
              />
            ) : (
              <div
                className="w-full h-full"
                style={{
                  background:
                    "linear-gradient(135deg, color-mix(in oklch, var(--accent) 30%, var(--bg-2)), var(--bg-2))",
                }}
              />
            )}
          </div>
        )}
      </Link>
      {cat && (
        <span className="pill mb-2.5">
          <span className="pill-dot" style={{ background: cat.color }} />
          {cat.label}
        </span>
      )}
      <Link href={href}>
        <h3 className="display-md mb-2 line-clamp-3 group-hover:text-[var(--accent)] transition-colors">
          {post.title}
        </h3>
      </Link>
      {post.excerpt && (
        <p
          className="text-[13px] leading-relaxed mb-3 line-clamp-2"
          style={{ color: "var(--ink-2)" }}
        >
          {post.excerpt}
        </p>
      )}
      <div
        className="text-[10px] font-[family-name:var(--font-jetbrains-mono)] font-mono uppercase tracking-wider"
        style={{ color: "var(--ink-3)" }}
      >
        {relativeTime(post.date).toUpperCase()} · {post.readMinutes} PHÚT
      </div>
    </article>
  );
}