import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { BookOpen, Calendar, Clock, ArrowLeft } from 'lucide-react';
import postsData from '../../data/posts.json';
import { getCategoryCover } from '../../pages/Blog';

export const LatestArticles: React.FC = () => {
  const featuredPosts = postsData.slice(0, 3);
  const [imgErrors, setImgErrors] = useState<Record<number, boolean>>({});

  return (
    <section className="py-20 relative bg-white border-t border-slate-200 select-none">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        
        {/* Section Header */}
        <div className="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-12">
          <div className="space-y-3 max-w-2xl">
            <h2 className="text-2xl sm:text-4xl font-black text-[#272757] tracking-tight font-vazir">
              آخرین تحلیل‌ها و آموزش‌های هوش مصنوعی
            </h2>
            <p className="text-sm sm:text-base text-slate-700 leading-relaxed font-normal">
              از آموزش پرامپت‌نویسی اصولی تا بررسی جدیدترین ترندهای هوش مصنوعی و کاربردهای صنعتی، در بیش از ۱۰۰ مقاله به‌روز.
            </p>
          </div>

          <Link
            to="/blog"
            className="inline-flex items-center gap-2 text-xs sm:text-sm font-bold text-[#272757] hover:text-[#54b4d3] transition-colors group shrink-0"
          >
            <span>مشاهده همه مقالات (بیش از ۱۰۰ مقاله)</span>
            <ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform text-[#54b4d3]" />
          </Link>
        </div>

        {/* Articles Grid */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {featuredPosts.map((post) => {
            const meta = getCategoryCover(post.categories[0] || '');
            const hasImg = post.thumbnail && !imgErrors[post.id];

            return (
              <article 
                key={post.id}
                className="rounded-3xl bg-white border border-slate-200 hover:border-slate-300 shadow-xs hover:shadow-md transition-all flex flex-col justify-between overflow-hidden group"
              >
                <div>
                  {/* Cover */}
                  <div className="relative aspect-[16/10] w-full bg-slate-100 overflow-hidden border-b border-slate-100">
                    {hasImg ? (
                      <>
                        <img 
                          src={post.thumbnail} 
                          alt={post.title} 
                          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                          onError={() => setImgErrors(prev => ({ ...prev, [post.id]: true }))}
                        />
                        <div className="absolute top-3 right-3 z-10">
                          <span className={`text-[10px] font-bold px-2.5 py-1 rounded-lg ${meta.badgeBg} backdrop-blur-md shadow-xs`}>
                            {post.categories[0] || 'هوش مصنوعی'}
                          </span>
                        </div>
                      </>
                    ) : (
                      <div className="w-full h-full bg-slate-100 flex items-center justify-center p-5">
                        <img src="/storage/banner/owl_logo.png" alt="Houshan" className="w-16 h-16 object-contain" />
                      </div>
                    )}
                  </div>

                  {/* Content */}
                  <div className="p-6 space-y-3">
                    <div className="flex items-center gap-4 text-xs text-slate-500 font-medium">
                      <span className="flex items-center gap-1">
                        <Calendar className="w-3.5 h-3.5 text-[#54b4d3]" />
                        {post.date}
                      </span>
                      <span className="flex items-center gap-1">
                        <Clock className="w-3.5 h-3.5 text-[#54b4d3]" />
                        {post.readTime}
                      </span>
                    </div>

                    <h3 className="text-base sm:text-lg font-bold text-slate-900 group-hover:text-[#54b4d3] transition-colors line-clamp-2 leading-snug">
                      <Link to={`/blog/${post.slug}`}>
                        {post.title}
                      </Link>
                    </h3>

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

                {/* Read More Link */}
                <div className="px-6 pb-6 pt-2 border-t border-slate-100">
                  <Link
                    to={`/blog/${post.slug}`}
                    className="inline-flex items-center gap-1.5 text-xs font-bold text-[#272757] hover:text-[#54b4d3] transition-colors"
                  >
                    <span>مطالعه کامل مقاله</span>
                    <ArrowLeft className="w-3.5 h-3.5" />
                  </Link>
                </div>
              </article>
            );
          })}
        </div>

      </div>
    </section>
  );
};