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" | "mosaic-tall" | "mosaic-wide" | "text-only" | "rail";
  showImage?: boolean;
  className?: string;
  priority?: boolean;
  asPageHeading?: boolean;
}

/**
 * V2 "Magazine" PostCard — image-dominant, large serif titles, no pills,
 * minimal chrome. Variants tuned for asymmetric mosaic homepage.
 */
export function PostCardV2({
  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 — slim text rail used on hero side or section sidebars
  if (variant === "rail") {
    return (
      <article className={`py-4 border-b last:border-b-0 hairline ${className}`}>
        <Link href={href} className="block group">
          {cat && (
            <div
              className="text-[10px] uppercase tracking-[0.2em] mb-1.5 font-medium"
              style={{ color: "var(--accent)" }}
            >
              {cat.label}
            </div>
          )}
          <h3
            className="font-[family-name:var(--font-fraunces)] text-[18px] leading-[1.25] mb-1.5 group-hover:underline underline-offset-4"
            style={{
              color: "var(--ink)",
              fontWeight: 500,
              fontVariationSettings: "'opsz' 36",
            }}
          >
            {post.title}
          </h3>
          <div className="text-[11px]" style={{ color: "var(--ink-3)" }}>
            {relativeTime(post.date)} · {post.readMinutes} phút đọc
          </div>
        </Link>
      </article>
    );
  }

  // FEATURE — full-bleed cinematic hero with overlay title
  if (variant === "feature") {
    return (
      <article className={`group ${className}`}>
        <Link href={href} className="block relative overflow-hidden">
          <div className="aspect-[3/4] sm:aspect-[16/10] lg:aspect-[16/9] relative bg-[var(--bg-2)]">
            {img ? (
              <Image
                src={img.url}
                alt={img.alt}
                fill
                priority={priority}
                sizes="100vw"
                className="object-cover transition-transform duration-[1200ms] group-hover:scale-[1.03]"
              />
            ) : (
              <div
                className="absolute inset-0"
                style={{
                  background:
                    "linear-gradient(135deg, var(--accent-2), var(--accent), var(--gold))",
                }}
              />
            )}
            {/* Cinematic gradient overlay */}
            <div
              className="absolute inset-0 pointer-events-none"
              style={{
                background:
                  "linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.45) 35%, rgba(0,0,0,0.1) 60%, transparent 100%)",
              }}
            />
            {/* Title overlay - bottom left, text-on-image */}
            <div className="absolute inset-x-0 bottom-0 p-6 sm:p-10 lg:p-14">
              <div className="max-w-4xl">
                {cat && (
                  <div className="mb-4 flex items-center gap-3">
                    <span
                      className="px-3 py-1 text-[10px] uppercase tracking-[0.25em] font-semibold backdrop-blur"
                      style={{
                        background: cat.color,
                        color: "white",
                      }}
                    >
                      {cat.label}
                    </span>
                    <span className="text-[11px] uppercase tracking-wider text-white/80">
                      {relativeTime(post.date)}
                    </span>
                  </div>
                )}
                {asPageHeading ? (
                  <h1
                    className="font-[family-name:var(--font-fraunces)] text-white mb-4 leading-[1.05] tracking-tight"
                    style={{
                      fontSize: "clamp(40px, 6vw, 84px)",
                      fontWeight: 500,
                      fontVariationSettings: "'opsz' 144, 'SOFT' 30, 'WONK' 1",
                    }}
                  >
                    {post.title}
                  </h1>
                ) : (
                  <h2
                    className="font-[family-name:var(--font-fraunces)] text-white mb-4 leading-[1.05] tracking-tight"
                    style={{
                      fontSize: "clamp(40px, 6vw, 84px)",
                      fontWeight: 500,
                      fontVariationSettings: "'opsz' 144, 'SOFT' 30, 'WONK' 1",
                    }}
                  >
                    {post.title}
                  </h2>
                )}
                {post.excerpt && (
                  <p
                    className="hidden sm:block max-w-2xl text-white/90 text-[16px] lg:text-[18px] leading-relaxed font-[family-name:var(--font-newsreader)] italic"
                    style={{ fontWeight: 400 }}
                  >
                    {post.excerpt}
                  </p>
                )}
                <div className="mt-6 flex items-center gap-3 text-white/85 text-[13px]">
                  <span className="font-medium">{post.author.name}</span>
                  <span className="text-white/50">·</span>
                  <span className="uppercase tracking-wider text-[11px] text-white/70">
                    {post.readMinutes} phút đọc
                  </span>
                </div>
              </div>
            </div>
          </div>
        </Link>
      </article>
    );
  }

  // MOSAIC-TALL — vertical, image-heavy, takes 1 col in 12-col grid
  if (variant === "mosaic-tall") {
    return (
      <article className={`group ${className}`}>
        <Link href={href}>
          <div className="aspect-[3/4] relative overflow-hidden bg-[var(--bg-2)] mb-5">
            {img ? (
              <Image
                src={img.url}
                alt={img.alt}
                fill
                sizes="(max-width: 768px) 100vw, 33vw"
                className="object-cover transition-transform duration-700 group-hover:scale-[1.04]"
              />
            ) : (
              <div
                className="absolute inset-0"
                style={{
                  background:
                    "linear-gradient(135deg, var(--accent-2), var(--accent))",
                }}
              />
            )}
          </div>
          {cat && (
            <div
              className="text-[10px] uppercase tracking-[0.25em] mb-2 font-semibold"
              style={{ color: "var(--accent)" }}
            >
              {cat.label}
            </div>
          )}
          <h3
            className="font-[family-name:var(--font-fraunces)] mb-2 leading-[1.15] group-hover:text-[var(--accent)] transition-colors"
            style={{
              fontSize: "clamp(22px, 2.4vw, 30px)",
              color: "var(--ink)",
              fontWeight: 500,
              fontVariationSettings: "'opsz' 72",
            }}
          >
            {post.title}
          </h3>
          {post.excerpt && (
            <p
              className="text-[14px] leading-relaxed line-clamp-2 mb-3"
              style={{ color: "var(--ink-2)" }}
            >
              {post.excerpt}
            </p>
          )}
          <div className="text-[11px] uppercase tracking-wider" style={{ color: "var(--ink-3)" }}>
            {relativeTime(post.date)} · {post.readMinutes} phút
          </div>
        </Link>
      </article>
    );
  }

  // MOSAIC-WIDE — horizontal 2-col card with image left + text right
  if (variant === "mosaic-wide") {
    return (
      <article className={`group ${className}`}>
        <Link href={href} className="grid grid-cols-12 gap-5 items-start">
          {showImage && (
            <div className="col-span-5 aspect-[4/5] relative overflow-hidden bg-[var(--bg-2)]">
              {img ? (
                <Image
                  src={img.url}
                  alt={img.alt}
                  fill
                  sizes="(max-width: 768px) 100vw, 25vw"
                  className="object-cover transition-transform duration-700 group-hover:scale-[1.04]"
                />
              ) : (
                <div
                  className="absolute inset-0"
                  style={{
                    background:
                      "linear-gradient(135deg, var(--accent-2), var(--accent))",
                  }}
                />
              )}
            </div>
          )}
          <div className={showImage ? "col-span-7" : "col-span-12"}>
            {cat && (
              <div
                className="text-[10px] uppercase tracking-[0.25em] mb-2 font-semibold"
                style={{ color: "var(--accent)" }}
              >
                {cat.label}
              </div>
            )}
            <h3
              className="font-[family-name:var(--font-fraunces)] mb-2 leading-[1.18] group-hover:text-[var(--accent)] transition-colors"
              style={{
                fontSize: "clamp(18px, 1.8vw, 24px)",
                color: "var(--ink)",
                fontWeight: 500,
                fontVariationSettings: "'opsz' 36",
              }}
            >
              {post.title}
            </h3>
            <div
              className="text-[11px] uppercase tracking-wider"
              style={{ color: "var(--ink-3)" }}
            >
              {relativeTime(post.date)} · {post.readMinutes} phút
            </div>
          </div>
        </Link>
      </article>
    );
  }

  // TEXT-ONLY — large editorial title, no image, asymmetric whitespace use
  if (variant === "text-only") {
    return (
      <article className={`group ${className}`}>
        <Link href={href}>
          {cat && (
            <div
              className="text-[10px] uppercase tracking-[0.25em] mb-3 font-semibold"
              style={{ color: "var(--accent)" }}
            >
              {cat.label}
            </div>
          )}
          <h3
            className="font-[family-name:var(--font-fraunces)] mb-3 leading-[1.1] group-hover:text-[var(--accent)] transition-colors italic"
            style={{
              fontSize: "clamp(28px, 3.5vw, 44px)",
              color: "var(--ink)",
              fontWeight: 500,
              fontStyle: "italic",
              fontVariationSettings: "'opsz' 144, 'SOFT' 50",
            }}
          >
            “{post.title}”
          </h3>
          {post.excerpt && (
            <p
              className="text-[15px] leading-relaxed line-clamp-3 mb-4"
              style={{ color: "var(--ink-2)" }}
            >
              {post.excerpt}
            </p>
          )}
          <div className="text-[11px] uppercase tracking-wider" style={{ color: "var(--ink-3)" }}>
            <span className="font-medium" style={{ color: "var(--ink-2)" }}>
              {post.author.name}
            </span>{" "}
            · {relativeTime(post.date)}
          </div>
        </Link>
      </article>
    );
  }

  // CARD (default) — image-dominant standard card for grids
  return (
    <article className={`group ${className}`}>
      <Link href={href}>
        {showImage && (
          <div className="aspect-[16/11] relative overflow-hidden bg-[var(--bg-2)] 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-700 group-hover:scale-[1.04]"
              />
            ) : (
              <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>
        )}
        {cat && (
          <div
            className="text-[10px] uppercase tracking-[0.25em] mb-2 font-semibold"
            style={{ color: "var(--accent)" }}
          >
            {cat.label}
          </div>
        )}
        <h3
          className="font-[family-name:var(--font-fraunces)] mb-2 line-clamp-3 leading-[1.2] group-hover:text-[var(--accent)] transition-colors"
          style={{
            fontSize: "clamp(18px, 1.6vw, 22px)",
            color: "var(--ink)",
            fontWeight: 500,
            fontVariationSettings: "'opsz' 36",
          }}
        >
          {post.title}
        </h3>
        {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] uppercase tracking-wider" style={{ color: "var(--ink-3)" }}>
          {relativeTime(post.date)} · {post.readMinutes} phút
        </div>
      </Link>
    </article>
  );
}