import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { GraduationCap, BookOpen, Clock, Users, ArrowLeft, CheckCircle } from 'lucide-react';
import coursesData from '../../data/courses.json';

export const CoursesSection: React.FC = () => {
  const [filter, setFilter] = useState<'all' | 'individual' | 'enterprise'>('all');

  const filteredCourses = coursesData.filter(c => {
    if (filter === 'individual') return c.level.includes('مقدماتی') || c.level.includes('عمومی');
    if (filter === 'enterprise') return c.level.includes('پیشرفته') || c.level.includes('تخصصی');
    return true;
  });

  return (
    <section className="py-20 relative bg-slate-950/40">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        {/* Header */}
        <div className="donya-section-header">
          <h2 className="donya-section-title">
            <GraduationCap className="w-7 h-7 text-indigo-400" />
            <span>آموزش هوش مصنوعی</span>
          </h2>
          <div className="donya-divider">
            <span className="donya-divider-line"></span>
            <span className="donya-divider-icon"></span>
            <span className="donya-divider-line"></span>
          </div>
          <p className="text-slate-400 text-sm sm:text-base max-w-2xl mx-auto mt-3">
            از مبانی تا تکنیک‌های پیشرفته پرامپت‌نویسی و پیاده‌سازی هوش مصنوعی در کسب‌وکارها با آکادمی هوشان
          </p>

          {/* Individual vs Enterprise Toggle Buttons */}
          <div className="flex items-center justify-center gap-3 mt-6">
            <button
              onClick={() => setFilter('all')}
              className={`px-5 py-2 rounded-xl text-xs sm:text-sm font-bold transition-all ${
                filter === 'all' ? 'bg-indigo-600 text-white shadow-lg' : 'bg-slate-900/80 text-slate-400 hover:text-white border border-white/5'
              }`}
            >
              همه‌ی دوره‌ها
            </button>
            <button
              onClick={() => setFilter('individual')}
              className={`px-5 py-2 rounded-xl text-xs sm:text-sm font-bold transition-all ${
                filter === 'individual' ? 'bg-indigo-600 text-white shadow-lg' : 'bg-slate-900/80 text-slate-400 hover:text-white border border-white/5'
              }`}
            >
              آموزش فردی
            </button>
            <button
              onClick={() => setFilter('enterprise')}
              className={`px-5 py-2 rounded-xl text-xs sm:text-sm font-bold transition-all ${
                filter === 'enterprise' ? 'bg-indigo-600 text-white shadow-lg' : 'bg-slate-900/80 text-slate-400 hover:text-white border border-white/5'
              }`}
            >
              آموزش سازمانی
            </button>
          </div>
        </div>

        {/* Courses Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
          {filteredCourses.slice(0, 3).map((course) => (
            <div
              key={course.id}
              className="glass-panel rounded-2xl overflow-hidden flex flex-col justify-between hover:border-indigo-500/40 transition-all duration-300 hover:-translate-y-1 shadow-xl group"
            >
              <div className="p-6">
                <div className="flex items-center justify-between mb-4">
                  <span className="px-3 py-1 rounded-lg text-xs font-bold bg-indigo-500/20 text-indigo-300 border border-indigo-500/30">
                    {course.category}
                  </span>
                  <span className="text-xs text-slate-400 flex items-center gap-1">
                    <Clock className="w-3.5 h-3.5 text-slate-500" />
                    {course.hours}
                  </span>
                </div>

                <h3 className="text-lg font-bold text-white mb-3 group-hover:text-indigo-300 transition-colors">
                  {course.title}
                </h3>
                <p className="text-xs sm:text-sm text-slate-400 leading-relaxed mb-4">
                  {course.excerpt || course.description.slice(0, 150) + '...'}
                </p>

                <div className="flex items-center gap-2 text-xs text-slate-300 mb-2">
                  <Users className="w-3.5 h-3.5 text-cyan-400" />
                  <span>مخاطبان: {course.audience}</span>
                </div>
              </div>

              <div className="p-4 bg-slate-900/60 border-t border-white/5 flex items-center justify-between">
                <div>
                  <span className="text-xs text-slate-400 block">شهریه دوره:</span>
                  <span className="text-sm font-extrabold text-white">{course.price}</span>
                </div>
                <Link
                  to="/academy"
                  className="btn-donya-primary px-4 py-2 rounded-lg text-xs font-bold flex items-center gap-1"
                >
                  <span>مشاهده دوره</span>
                  <ArrowLeft className="w-3.5 h-3.5" />
                </Link>
              </div>
            </div>
          ))}
        </div>

        <div className="text-center">
          <Link
            to="/academy"
            className="btn-donya-outline inline-flex items-center gap-2 px-6 py-3 rounded-xl text-sm font-bold"
          >
            <BookOpen className="w-4 h-4 text-indigo-400" />
            <span>مشاهده همه دوره‌های آموزشی</span>
          </Link>
        </div>

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