"use client";

import React, { useState } from "react";
import Link from "next/link";
import { CalendarDays, Eye, Clock } from "lucide-react";
import type { BlogPost } from "@/services/joomlaService";

interface BlogCardProps {
  post: BlogPost;
  variant?: "featured" | "recent";
}

function calculateReadTime(title: string, excerpt: string): string {
  const totalLength = (title || "").length + (excerpt || "").length;
  const minutes = Math.max(3, Math.min(25, Math.ceil(totalLength / 18)));
  return `${minutes} minutes`;
}

export function BlogCard({ post, variant = "recent" }: BlogCardProps) {
  const isFeatured = variant === "featured";
  const [imgSrc, setImgSrc] = useState(post.imageUrl);
  const date = new Date(post.createdAt || Date.now()).toLocaleDateString("en-GB", {
    day: "2-digit",
    month: "2-digit",
    year: "numeric",
  });

  const viewsCount = post.hits ? post.hits.toLocaleString() : "1,250";
  const readTime = calculateReadTime(post.title, post.excerpt);

  return (
    <Link
      href={`/blog/${post.alias}`}
      className="group block rounded-xl bg-white border border-slate-200 shadow-sm hover:shadow-md hover:border-[#5C7A36]/40 transition-all overflow-hidden relative"
    >
      <div className="relative bg-[#fff7f0] aspect-[16/9] overflow-hidden">
        {imgSrc ? (
          // Plain `<img>`, not `next/image`: the CMS host sits behind
          // Cloudflare bot protection that blocks `next/image`'s
          // server-side optimization fetch (403, confirmed on beta) — this
          // loads directly in the visitor's own browser instead, which
          // Cloudflare doesn't challenge.
          // eslint-disable-next-line @next/next/no-img-element
          <img
            src={imgSrc}
            alt={post.title}
            className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
            onError={() => setImgSrc("/images/blog.jpg")}
          />
        ) : (
          <div className="w-full h-full flex items-center justify-center bg-green-50 text-[#5C7A36] font-bold text-lg">
            Global Assignment Help
          </div>
        )}
        {isFeatured && (
          <span className="absolute top-3 left-3 rounded-md bg-black/90 text-white font-bold text-xs px-3 py-1 shadow">
            Latest Blog
          </span>
        )}
      </div>

      <div className="p-4 sm:p-5 space-y-2">
        <h2
          className={
            isFeatured
              ? "text-lg sm:text-xl font-bold text-slate-900 leading-snug group-hover:text-[#5C7A36] transition-colors line-clamp-2"
              : "text-base font-bold text-slate-900 leading-snug group-hover:text-[#5C7A36] transition-colors line-clamp-2"
          }
        >
          {post.title}
        </h2>

        <p className="text-xs sm:text-sm text-slate-600 leading-relaxed line-clamp-2">
          {post.excerpt}
        </p>

        <div className="pt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-slate-500 border-t border-slate-100 font-medium">
          <span className="flex items-center gap-1">
            <CalendarDays className="w-3.5 h-3.5 text-slate-400 shrink-0" />
            {date}
          </span>
          <span className="flex items-center gap-1">
            <Eye className="w-3.5 h-3.5 text-slate-400 shrink-0" />
            {viewsCount}
          </span>
          <span className="flex items-center gap-1">
            <Clock className="w-3.5 h-3.5 text-slate-400 shrink-0" />
            {readTime}
          </span>
        </div>
      </div>
    </Link>
  );
}