import Link from "next/link";
import Image from "next/image";
import { PostCardProps } from "@/lib/blog.types";
import { UI } from "@/lib/config";
import BlogPlaceholder from "./BlogPlaceholder";

export default function PostCard({ post, lang, index = 0 }: PostCardProps) {
  const t = UI[lang].t;
  const dir = UI[lang].dir;
  const isAr = lang === "ar";

  // Check if post is featured
  const isFeatured = post.featured === true;

  // Format date nicely
  const formattedDate = new Date(post.date).toLocaleDateString(
    isAr ? "ar-SA" : "en-US",
    {
      year: "numeric",
      month: "short",
      day: "numeric",
    },
  );

  // Process excerpt to ensure it's clean text
  const cleanExcerpt = post.excerpt
    .replace(/[#*_`]/g, "") // Remove markdown symbols
    .replace(/\n+/g, " ") // Replace newlines with spaces
    .replace(/\s+/g, " ") // Normalize spaces
    .trim()
    .slice(0, 120); // Limit to 120 characters

  return (
    <article
      className="group flex flex-col h-full bg-white hover:bg-[#FAFAFA] transition-colors duration-300 overflow-hidden"
      dir={dir}
    >
      <Link
        href={`/${lang}/blog/${post.slug}`}
        className="flex flex-col h-full"
      >
        {/* Cover Image */}
        <div className="relative h-52 overflow-hidden">
          {post.coverImage ? (
            <Image
              src={post.coverImage}
              alt={post.title}
              fill
              className="object-cover transition-transform duration-500 group-hover:scale-105"
              sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
              priority={index < 3}
              unoptimized={post.coverImage.endsWith(".svg")}
            />
          ) : (
            <BlogPlaceholder
              title={post.title}
              tag={post.tags?.[0]}
              size="md"
            />
          )}

          {/* Featured Badge - Editorial style */}
          {isFeatured && (
            <div
              className={`absolute top-4 z-10 ${isAr ? "left-4" : "right-4"}`}
            >
              <span className="inline-flex items-center gap-1.5 px-3 py-1 bg-[#10B981] text-white text-xs font-bold uppercase tracking-wider">
                <span className="w-1.5 h-1.5 bg-white" />
                {isAr ? "مميز" : "Featured"}
              </span>
            </div>
          )}

          {/* Tag overlay at bottom */}
          {post.tags && post.tags.length > 0 && (
            <div className="absolute bottom-4 left-4">
              <span className="text-white/90 font-mono text-xs bg-black/60 backdrop-blur-sm px-2 py-1 uppercase tracking-wider drop-shadow-md">
                {post.tags[0]}
              </span>
            </div>
          )}
        </div>

        {/* Content */}
        <div className="flex flex-col flex-grow p-6">
          {/* Title */}
          <h3 className="text-lg font-bold text-[#1E293B] group-hover:text-[#10B981] transition-colors duration-300 line-clamp-2 leading-tight mb-3">
            {post.title}
          </h3>

          {/* Excerpt */}
          <p className="text-sm text-[#64748B] leading-relaxed line-clamp-2 flex-grow mb-4">
            {cleanExcerpt}...
          </p>

          {/* Author and Date Section */}
          <div className="flex items-center justify-between pt-4 border-t border-slate-100">
            <div className="flex items-center gap-3">
              {/* Author Avatar - Square */}
              <div className="w-8 h-8 bg-[#10B981] text-white flex items-center justify-center text-sm font-bold">
                {post.author?.charAt(0).toUpperCase() || "M"}
              </div>
              <div className="text-xs">
                <p className="font-semibold text-[#1E293B]">
                  {post.author || (isAr ? "فريق موعدي" : "Mawidi Team")}
                </p>
                <p className="text-[#64748B]">{formattedDate}</p>
              </div>
            </div>

            {/* Reading Time */}
            {post.readingTime && (
              <span className="text-xs font-mono text-[#64748B]">
                {post.readingTime}
              </span>
            )}
          </div>

          {/* Hover underline - signature Mawidi animation */}
          <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] mt-4 transition-all duration-300" />
        </div>
      </Link>
    </article>
  );
}