import React, { useState } from 'react';
import { 
  GraduationCap, 
  Search, 
  Clock, 
  Users, 
  BookOpen, 
  Star, 
  CheckCircle2, 
  ArrowLeft, 
  Sparkles, 
  X,
  PhoneCall,
  ShieldCheck
} from 'lucide-react';
import coursesData from '../data/courses.json';
import { Course } from '../types';

export const Academy: React.FC = () => {
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('all');
  const [activeCourseModal, setActiveCourseModal] = useState<Course | null>(null);

  const categories = [
    'all',
    'استراتژی سازمانی',
    'مهندسی پرامپت',
    'چت‌بات و LLM',
    'دیجیتال مارکتینگ',
    'اتوماسیون RPA',
    'گرافیک و عکاسی',
    'تحلیل داده'
  ];

  const filteredCourses = coursesData.filter((c) => {
    const matchesCat = selectedCategory === 'all' || c.category === selectedCategory;
    const matchesSearch = c.title.toLowerCase().includes(searchQuery.toLowerCase()) || 
                          c.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
                          c.audience.toLowerCase().includes(searchQuery.toLowerCase());
    return matchesCat && matchesSearch;
  });

  return (
    <div className="pt-28 pb-20 bg-slate-950 min-h-screen">
      {/* Background Glow */}
      <div className="absolute top-20 right-1/3 w-[600px] h-[350px] bg-indigo-600/10 rounded-full blur-3xl pointer-events-none" />

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        
        {/* Page Header */}
        <div className="text-center max-w-3xl mx-auto space-y-4 mb-16">
          <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">
            <GraduationCap className="w-3.5 h-3.5" />
            <span>آکادمی و دوره‌های آموزشی هوشان</span>
          </div>
          <h1 className="text-3xl sm:text-5xl font-black text-white tracking-tight">
            آموزش‌های تخصصی هوش مصنوعی برای افراد و سازمان‌ها
          </h1>
          <p className="text-sm text-slate-300 leading-relaxed font-light">
            ۱۸ دوره جامع، کاربردی و پروژه محور از مبانی و مهندسی پرامپت تا استراتژی تحول دیجیتال و پیاده‌سازی اتوماسیون‌های سازمانی.
          </p>
        </div>

        {/* Search & Category Filter */}
        <div className="flex flex-col md:flex-row items-center justify-between gap-4 mb-10">
          <div className="flex items-center gap-2 overflow-x-auto w-full md:w-auto pb-2">
            {categories.map((cat) => (
              <button
                key={cat}
                onClick={() => setSelectedCategory(cat)}
                className={`px-3.5 py-2 rounded-xl text-xs font-semibold transition-all shrink-0 cursor-pointer ${
                  selectedCategory === cat
                    ? 'bg-indigo-600 text-white shadow-md shadow-indigo-600/25'
                    : 'bg-slate-900 text-slate-400 hover:text-slate-200 border border-slate-800'
                }`}
              >
                {cat === 'all' ? 'همه دوره‌ها (۱۸ دوره)' : cat}
              </button>
            ))}
          </div>

          <div className="w-full md:w-72 relative">
            <input
              type="text"
              placeholder="جستجو در دوره‌ها و سرفصل‌ها..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="w-full pl-4 pr-10 py-2.5 rounded-xl bg-slate-900 border border-slate-800 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500"
            />
            <Search className="w-4 h-4 text-slate-500 absolute right-3.5 top-3" />
          </div>
        </div>

        {/* Courses Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {filteredCourses.map((course) => (
            <div 
              key={course.id}
              className="p-6 rounded-3xl bg-slate-900/50 border border-slate-800/80 hover:border-indigo-500/40 glass-panel-hover flex flex-col justify-between space-y-4 group"
            >
              <div className="space-y-3">
                <div className="flex items-center justify-between">
                  <span className="text-[10px] font-semibold px-2.5 py-0.5 rounded-full bg-indigo-500/10 text-indigo-300 border border-indigo-500/20">
                    {course.category}
                  </span>
                  <div className="flex items-center gap-1 text-amber-400 text-xs font-semibold font-mono">
                    <Star className="w-3.5 h-3.5 fill-amber-400" />
                    <span>{course.rating}</span>
                  </div>
                </div>

                <h3 className="text-base font-bold text-white group-hover:text-indigo-300 transition-colors leading-snug">
                  {course.title}
                </h3>

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

                {/* Course Metadata */}
                <div className="grid grid-cols-2 gap-2 pt-3 border-t border-slate-800/80 text-[11px] text-slate-300">
                  <div className="flex items-center gap-1.5">
                    <Clock className="w-3.5 h-3.5 text-cyan-400 shrink-0" />
                    <span>مدت: {course.hours}</span>
                  </div>
                  <div className="flex items-center gap-1.5">
                    <Users className="w-3.5 h-3.5 text-indigo-400 shrink-0" />
                    <span>سطح: {course.level}</span>
                  </div>
                </div>

                <div className="text-[11px] text-slate-400 bg-slate-950/60 p-2.5 rounded-xl border border-slate-800/60">
                  <span className="text-slate-500 font-semibold block mb-0.5">مخاطبان هدف:</span>
                  <span>{course.audience}</span>
                </div>
              </div>

              {/* Action Button */}
              <div className="pt-2">
                <button
                  onClick={() => setActiveCourseModal(course)}
                  className="w-full py-2.5 rounded-xl bg-slate-800 hover:bg-indigo-600 text-slate-200 hover:text-white text-xs font-bold transition-all flex items-center justify-center gap-2 cursor-pointer shadow-sm"
                >
                  <BookOpen className="w-3.5 h-3.5" />
                  <span>مشاهده جزئیات و ثبت‌نام</span>
                </button>
              </div>
            </div>
          ))}
        </div>

        {/* Modal for Course Details */}
        {activeCourseModal && (
          <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-md animate-in fade-in">
            <div 
              className="relative w-full max-w-2xl bg-slate-900 border border-slate-800 rounded-3xl p-6 sm:p-8 shadow-2xl overflow-y-auto max-h-[90vh] space-y-6"
              onClick={(e) => e.stopPropagation()}
            >
              <button
                onClick={() => setActiveCourseModal(null)}
                className="absolute top-5 left-5 p-2 rounded-xl text-slate-400 hover:text-white bg-slate-800/60 hover:bg-slate-800 transition-colors cursor-pointer"
              >
                <X className="w-5 h-5" />
              </button>

              <div className="space-y-2">
                <span className="text-[10px] font-semibold px-2.5 py-1 rounded-full bg-indigo-500/20 text-indigo-300">
                  {activeCourseModal.category}
                </span>
                <h2 className="text-xl sm:text-2xl font-black text-white">
                  {activeCourseModal.title}
                </h2>
              </div>

              <div className="grid grid-cols-3 gap-3 p-4 rounded-2xl bg-slate-950 border border-slate-800 text-center text-xs">
                <div>
                  <span className="text-slate-500 block text-[11px]">طول دوره:</span>
                  <span className="font-bold text-white">{activeCourseModal.hours}</span>
                </div>
                <div>
                  <span className="text-slate-500 block text-[11px]">سطح آموزش:</span>
                  <span className="font-bold text-cyan-400">{activeCourseModal.level}</span>
                </div>
                <div>
                  <span className="text-slate-500 block text-[11px]">مخاطبان:</span>
                  <span className="font-bold text-indigo-300 truncate block">{activeCourseModal.audience}</span>
                </div>
              </div>

              <div className="space-y-3 text-xs sm:text-sm text-slate-300 leading-relaxed">
                <h4 className="font-bold text-white text-sm">توضیحات و اهداف دوره:</h4>
                <p>{activeCourseModal.description}</p>
              </div>

              <div className="space-y-3">
                <h4 className="font-bold text-white text-sm">مزایای شرکت در این دوره:</h4>
                <div className="space-y-2 text-xs text-slate-300">
                  <div className="flex items-center gap-2">
                    <CheckCircle2 className="w-4 h-4 text-emerald-400 shrink-0" />
                    <span>ارائه گواهی معتبر پایان دوره از هوشان و شهرک علمی و تحقیقاتی اصفهان</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <CheckCircle2 className="w-4 h-4 text-emerald-400 shrink-0" />
                    <span>دسترسی به پروژه‌ها، تمرین‌های عملی و پرامپت‌های اختصاصی</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <CheckCircle2 className="w-4 h-4 text-emerald-400 shrink-0" />
                    <span>امکان برگزاری به صورت حضوری سازمانی یا آنلاین تعاملی</span>
                  </div>
                </div>
              </div>

              <div className="pt-4 border-t border-slate-800 flex flex-col sm:flex-row items-center justify-between gap-4">
                <div className="text-center sm:text-right">
                  <span className="text-[11px] text-slate-400 block">شهریه و برگزاری:</span>
                  <span className="text-sm font-bold text-emerald-400">ثبت‌نام انفرادی یا پکیج سازمانی</span>
                </div>

                <a
                  href="/contact"
                  className="w-full sm:w-auto px-6 py-3 rounded-2xl bg-gradient-to-r from-indigo-600 to-cyan-600 text-white text-xs font-bold shadow-lg shadow-indigo-600/25 flex items-center justify-center gap-2"
                >
                  <PhoneCall className="w-4 h-4" />
                  <span>ثبت‌نام و هماهنگی دوره</span>
                </a>
              </div>
            </div>
          </div>
        )}

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