import React, { useState } from 'react';
import { Star, Clock, BookOpen, ChevronDown, ChevronUp, CheckCircle, Shield } from 'lucide-react';
import { Course, Language } from '../types';
import { translations } from '../data';

interface CourseCardProps {
  key?: string;
  course: Course;
  lang: Language;
  currency: 'NGN' | 'USD';
  isEnrolled: boolean;
  onEnroll: (course: Course) => void;
  onViewPortal: () => void;
}

export default function CourseCard({
  course,
  lang,
  currency,
  isEnrolled,
  onEnroll,
  onViewPortal
}: CourseCardProps) {
  const t = translations[lang];
  const [showSyllabus, setShowSyllabus] = useState(false);

  const amount = currency === 'NGN' ? course.price : course.priceUSD;
  const currencySymbol = currency === 'NGN' ? '₦' : '$';

  return (
    <div 
      className="bg-white rounded-2xl shadow-md hover:shadow-xl transition-all border border-gray-150 overflow-hidden flex flex-col h-full group"
      dir={lang === 'ar' ? 'rtl' : 'ltr'}
    >
      {/* Course Image & Hover Effects */}
      <div className="relative overflow-hidden aspect-video">
        <img
          src={course.image}
          alt={lang === 'en' ? course.title : course.titleAr}
          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
          referrerPolicy="no-referrer"
        />
        <div className="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-transparent opacity-60 pointer-events-none" />
        
        {/* Category tag */}
        <span className="absolute top-3 left-3 bg-teal-850/95 backdrop-blur-md text-white text-[10px] font-bold px-3 py-1 rounded-full uppercase tracking-wider">
          {lang === 'en' ? course.category : course.categoryAr}
        </span>
      </div>

      {/* Main Card Content */}
      <div className="p-5 flex-1 flex flex-col justify-between space-y-4">
        <div className="space-y-2">
          {/* Instructor name */}
          <p className="text-xs text-amber-600 font-semibold font-sans">
            {t.instructor}: <span className="text-gray-700">{lang === 'en' ? course.instructor : course.instructorAr}</span>
          </p>
          
          {/* Title */}
          <h3 className="font-bold text-gray-850 text-base md:text-lg leading-snug group-hover:text-teal-700 transition-colors line-clamp-2 font-sans">
            {lang === 'en' ? course.title : course.titleAr}
          </h3>

          {/* Description */}
          <p className="text-xs text-gray-500 leading-relaxed line-clamp-2">
            {lang === 'en' ? course.description : course.descriptionAr}
          </p>
        </div>

        {/* Udemy-style Star Rating */}
        <div className="flex items-center gap-1.5 flex-wrap">
          <span className="text-sm font-extrabold text-amber-600 font-mono">
            {course.rating.toFixed(1)}
          </span>
          <div className="flex items-center text-amber-400">
            {Array.from({ length: 5 }).map((_, i) => (
              <Star 
                key={i} 
                size={13} 
                fill={i < Math.floor(course.rating) ? "currentColor" : "none"} 
                className="shrink-0"
              />
            ))}
          </div>
          <span className="text-xs text-gray-400 font-mono">
            ({course.reviewsCount} {t.reviews})
          </span>
        </div>

        {/* Duration Details */}
        <div className="flex items-center gap-4 text-xs text-gray-500 font-semibold border-t border-gray-100 pt-3">
          <div className="flex items-center gap-1">
            <Clock size={14} className="text-teal-600" />
            <span>{lang === 'en' ? course.duration : course.durationAr}</span>
          </div>
          <div className="flex items-center gap-1">
            <BookOpen size={14} className="text-teal-600" />
            <span>{course.modules.length} {lang === 'en' ? 'Modules' : 'فصول مقررة'}</span>
          </div>
        </div>

        {/* Collapsible Course Syllabus Details (Coursera benchmark) */}
        <div className="border-t border-gray-100 pt-3">
          <button
            type="button"
            onClick={() => setShowSyllabus(!showSyllabus)}
            className="flex items-center justify-between w-full text-xs font-bold text-gray-600 hover:text-teal-700 py-1"
          >
            <span>{t.courseDetails}</span>
            {showSyllabus ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
          </button>
          
          {showSyllabus && (
            <ul className="mt-2 space-y-1 text-[11px] text-gray-500 bg-gray-50 p-2.5 rounded-lg border border-gray-100">
              {(lang === 'en' ? course.modules : course.modulesAr).map((mod, index) => (
                <li key={index} className="flex items-start gap-1.5">
                  <span className="text-teal-600 font-bold shrink-0">✓</span>
                  <span className="line-clamp-1">{mod}</span>
                </li>
              ))}
            </ul>
          )}
        </div>

        {/* Action Bottom Row - Price & Call to Action */}
        <div className="flex items-center justify-between gap-4 border-t border-gray-100 pt-4 mt-auto">
          <div>
            <span className="text-[10px] text-gray-400 block uppercase font-bold tracking-wider font-mono">
              {lang === 'en' ? 'Admission Tuition' : 'الرسوم الدراسية'}
            </span>
            <span className="text-base font-extrabold text-teal-800 font-mono">
              {currencySymbol}{amount.toLocaleString()}
            </span>
          </div>

          {isEnrolled ? (
            <button
              onClick={onViewPortal}
              className="bg-emerald-550 hover:bg-emerald-600 text-emerald-800 border-2 border-emerald-300 text-xs font-extrabold py-2 px-3.5 rounded-xl flex items-center gap-1 shadow-sm transition-all animate-fade-in"
            >
              <CheckCircle size={14} className="text-emerald-600" />
              <span>{lang === 'en' ? 'Enrolled (Open)' : 'مسجل (افتح البوابة)'}</span>
            </button>
          ) : (
            <button
              onClick={() => onEnroll(course)}
              className="bg-teal-700 hover:bg-teal-800 text-white font-bold text-xs py-2.5 px-4 rounded-xl shadow-md hover:shadow-lg transition-all active:scale-[0.98] flex items-center gap-1.5 cursor-pointer"
            >
              <Shield size={14} className="text-amber-400" />
              <span>{t.enrollNow}</span>
            </button>
          )}
        </div>
      </div>
    </div>
  );
}
