import { type Locale, useTranslations } from "next-intl";
import Image from "next/image";
import { BLOG_AUTHORS } from "@/config/blog/authors";
import { categorySlug } from "@/config/blog/categories";
import { Link } from "@/i18n/navigation";
import { cn } from "@/lib/utils";
import type { PostMeta } from "@/lib/blog/schema";

type Variant = "compact" | "standard" | "featured";

const IMAGE_SIZES: Record<Variant, string> = {
  compact: "270px",
  standard: "(min-width:1024px) 33vw, 100vw",
  featured: "(min-width:1024px) 60vw, 100vw",
};

export default function JrPostCard({
  post,
  locale,
  variant = "standard",
  showExcerpt,
  priority = false,
}: {
  post: PostMeta;
  locale: Locale;
  variant?: Variant;
  showExcerpt?: boolean;
  priority?: boolean;
}) {
  const t = useTranslations("BlogPage");
  const cat = categorySlug(post.category, locale);
  const author = BLOG_AUTHORS[post.author as keyof typeof BLOG_AUTHORS];
  const date = new Intl.DateTimeFormat(locale, { month: "short", year: "numeric" }).format(
    new Date(post.date),
  );
  const withExcerpt = showExcerpt ?? variant !== "compact";
  const imageHeight =
    variant === "featured" ? "h-[380px]" : variant === "compact" ? "h-[130px]" : "h-[170px]";

  return (
    <article className="group h-full">
      <Link
        href={{ pathname: "/[category]/[slug]", params: { category: cat, slug: post.slug } }}
        className="flex h-full flex-col overflow-hidden border border-hairline bg-white transition-[transform,box-shadow] duration-300 motion-safe:hover:-translate-y-1 motion-safe:hover:shadow-[0_18px_40px_-22px_rgba(26,28,27,.35)]"
      >
        <div className={cn("relative w-full overflow-hidden bg-surface-container", imageHeight)}>
          <Image
            src={post.cover}
            alt={post.coverAlt}
            fill
            priority={priority}
            sizes={IMAGE_SIZES[variant]}
            className="object-cover transition-transform duration-[800ms] motion-safe:group-hover:scale-[1.04]"
          />
        </div>

        {variant === "compact" ? (
          <div className="flex flex-1 flex-col p-4">
            <span className="text-[9.5px] font-semibold uppercase tracking-[0.16em] text-gold-text">
              {t(`categories.${post.category}`)}
            </span>
            <h3 className="mt-2 font-display text-[17px] leading-snug text-foreground">
              {post.title}
            </h3>
          </div>
        ) : (
          <div className="flex flex-1 flex-col p-6">
            <div className="mb-3 flex items-center gap-3">
              <span className="border border-gold-bright/40 px-2 py-1 text-[9.5px] font-semibold uppercase tracking-[0.14em] text-gold-text">
                {t(`categories.${post.category}`)}
              </span>
              <time
                dateTime={post.date}
                className="text-[10px] uppercase tracking-[0.08em] text-brushed-steel"
              >
                {date}
              </time>
            </div>
            <h3
              className={cn(
                "font-display leading-snug text-foreground",
                variant === "featured" ? "text-[29px]" : "text-[19px]",
              )}
            >
              {post.title}
            </h3>
            {withExcerpt ? (
              <p
                className={cn(
                  "mt-3 text-on-surface-variant",
                  variant === "featured"
                    ? "text-[14.5px] leading-[1.7]"
                    : "text-[13.5px] leading-[1.6]",
                )}
              >
                {post.description}
              </p>
            ) : null}
            <div className="mt-auto flex items-center gap-2.5 pt-6">
              <Image
                src={author.avatar}
                alt=""
                width={variant === "featured" ? 32 : 26}
                height={variant === "featured" ? 32 : 26}
                className={cn(
                  "rounded-full object-cover",
                  variant === "featured" ? "size-8" : "size-[26px]",
                )}
              />
              <span className="text-[12px] text-on-surface-variant">
                {t("byAuthor", { author: author.name })}
              </span>
            </div>
          </div>
        )}
      </Link>
    </article>
  );
}