import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { BookOpen, Calendar, Clock, ArrowLeft, Wand2, Cpu, TrendingUp, HelpCircle, Bot } 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-slate-950">
      <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">
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 text-xs font-semibold">
              <BookOpen className="w-3.5 h-3.5" />
              <span>رسانه و مقالات تخصصی هوشان</span>
            </div>
            <h2 className="text-2xl sm:text-4xl font-black text-white tracking-tight">
              آخرین تحلیل‌ها و آموزش‌های هوش مصنوعی
            </h2>
            <p className="text-sm text-slate-400 leading-relaxed">
              از آموزش پرامپت‌نویسی اصولی تا بررسی جدیدترین ترندهای هوش مصنوعی و کاربردهای صنعتی، در بیش از ۱۰۰ مقاله به‌روز.
            </p>
          </div>

          <Link
            to="/blog"
            className="inline-flex items-center gap-2 text-xs sm:text-sm font-bold text-indigo-400 hover:text-indigo-300 transition-colors group shrink-0"
          >
            <span>مشاهده همه مقالات ({postsData.length} مقاله)</span>
            <ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" />
          </Link>
        </div>

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

            return (
              <article 
                key={post.id}
                className="rounded-3xl bg-slate-900/50 border border-slate-800/80 hover:border-indigo-500/40 glass-panel-hover flex flex-col justify-between overflow-hidden group"
              >
                <div>
                  {/* Cover */}
                  <div className="relative h-48 w-full bg-slate-950 overflow-hidden border-b border-slate-800/80">
                    {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 inset-0 bg-gradient-to-t from-slate-950 via-slate-950/20 to-transparent pointer-events-none" />
                        <div className="absolute top-3 right-3 z-10">
                          <span className="text-[10px] font-bold px-2.5 py-1 rounded-full bg-indigo-600/90 text-white backdrop-blur-md">
                            {post.categories[0] || 'هوش مصنوعی'}
                          </span>
                        </div>
                      </>
                    ) : (
                      <div className={`w-full h-full bg-gradient-to-br ${theme.gradient} flex flex-col justify-between p-5`}>
                        <div className="flex items-center justify-between z-10">
                          <span className={`text-[10px] font-bold px-2.5 py-1 rounded-full ${theme.badgeColor} backdrop-blur-md`}>
                            {post.categories[0] || 'هوش مصنوعی'}
                          </span>
                          <div className="w-8 h-8 rounded-xl bg-slate-950/60 border border-slate-800 flex items-center justify-center text-slate-300">
                            <Icon className="w-4 h-4" />
                          </div>
                        </div>
                        <div className="z-10 text-right">
                          <span className="text-[10px] font-bold text-slate-400 font-mono block">#HOUSHAN_AI</span>
                          <h4 className="text-xs font-bold text-white line-clamp-1 mt-0.5">{post.title}</h4>
                        </div>
                      </div>
                    )}
                  </div>

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

                    <h3 className="text-base font-bold text-white group-hover:text-indigo-300 transition-colors line-clamp-2">
                      <Link to={`/blog/${post.slug}`}>
                        {post.title}
                      </Link>
                    </h3>

                    <p className="text-xs text-slate-400 leading-relaxed line-clamp-3">
                      {post.excerpt}
                    </p>
                  </div>
                </div>

                {/* Read More Link */}
                <div className="px-6 pb-6 pt-2">
                  <Link
                    to={`/blog/${post.slug}`}
                    className="inline-flex items-center gap-2 text-xs font-bold text-indigo-400 hover:text-indigo-300 transition-colors"
                  >
                    <span>مطالعه کامل مقاله</span>
                    <ArrowLeft className="w-3.5 h-3.5" />
                  </Link>
                </div>
              </article>
            );
          })}
        </div>

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