const { useState, useEffect } = window.React || React;
const motion = (window.Motion && window.Motion.motion) || (window.FramerMotion && window.FramerMotion.motion) || { div: "div", button: "button" };
const { Button, Skeleton } = window.ReactApp.Components;
const { getProgramDetails } = window.ReactApp.API;

window.ReactApp.ProgramDetails = ({ programId, onBack }) => {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [activeTab, setActiveTab] = useState('overview');

    useEffect(() => {
        loadData();
    }, [programId]);

    useEffect(() => {
        if (window.lucide && data) {
            setTimeout(() => window.lucide.createIcons(), 100);
        }
    }, [data, activeTab]);

    const loadData = async () => {
        setLoading(true);
        const details = await getProgramDetails(programId);
        setData(details);
        setLoading(false);
    };

    if (loading) {
        return (
            <div className="w-full min-h-screen bg-slate-50 rounded-3xl overflow-hidden p-8">
                <Skeleton className="h-64 w-full rounded-2xl mb-8" />
                <div className="flex gap-4 mb-8">
                    <Skeleton className="h-12 w-32 rounded-full" />
                    <Skeleton className="h-12 w-32 rounded-full" />
                </div>
                <Skeleton className="h-96 w-full rounded-2xl" />
            </div>
        );
    }

    if (!data) return <div className="text-center p-12">لم يتم العثور على البرنامج</div>;

    const tabs = [
        { id: 'overview', label: 'نظرة عامة', icon: 'info' },
        ...(data.sections?.length ? [{ id: 'details', label: 'التفاصيل الأكاديمية', icon: 'file-text' }] : []),
        ...(data.courses?.length ? [{ id: 'plan', label: 'الخطة الدراسية', icon: 'book' }] : []),
        ...(data.faculty?.length ? [{ id: 'faculty', label: 'هيئة التدريس', icon: 'users' }] : []),
    ];

    return (
        <motion.div 
            initial={{ opacity: 0, scale: 0.98 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0.98 }}
            className="w-full bg-slate-50 min-h-screen pb-20"
        >
            {/* Hero Section */}
            <div className="relative h-[60vh] min-h-[400px] w-full bg-slate-900 overflow-hidden hero-over-image">
                <img 
                    src={data.bannerImage || data.image || "https://images.unsplash.com/photo-1541339907198-e08756dedf3f?auto=format&fit=crop&w=1920&q=80"} 
                    alt={data.nameAr}
                    className="absolute inset-0 w-full h-full object-cover opacity-40"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-slate-900 via-slate-900/60 to-transparent"></div>
                
                <div className="absolute top-6 right-6 z-20">
                    <Button variant="secondary" onClick={onBack} className="bg-white/10 text-white border-white/20 hover:bg-white/20 backdrop-blur-md">
                        <i data-lucide="arrow-right"></i> العودة للبرامج
                    </Button>
                </div>

                <div className="absolute bottom-0 left-0 right-0 p-8 md:p-16 z-20 max-w-7xl mx-auto">
                    <div className="flex gap-3 mb-4">
                        <span className="bg-blue-600 text-white px-4 py-1.5 rounded-full text-sm font-bold shadow-lg">
                            {data.degreeType}
                        </span>
                        <span className="bg-white/20 backdrop-blur-md border border-white/30 text-white px-4 py-1.5 rounded-full text-sm font-bold">
                            {data.faculty}
                        </span>
                    </div>
                    <h1 className="text-4xl md:text-6xl font-bold text-white mb-4 font-cairo leading-tight">
                        {data.nameAr}
                    </h1>
                    <h2 className="text-xl md:text-2xl text-slate-300 font-poppins mb-8">
                        {data.nameEn}
                    </h2>
                    
                    <div className="flex flex-wrap gap-6 text-white/90">
                        <div className="flex items-center gap-2">
                            <i data-lucide="clock" className="text-amber-400"></i>
                            <span className="font-semibold">{data.duration}</span>
                        </div>
                        <div className="flex items-center gap-2">
                            <i data-lucide="book-open" className="text-emerald-400"></i>
                            <span className="font-semibold">{data.creditHours} ساعة معتمدة</span>
                        </div>
                        <div className="flex items-center gap-2">
                            <i data-lucide="sun" className="text-blue-400"></i>
                            <span className="font-semibold">{data.timing}</span>
                        </div>
                    </div>
                </div>
            </div>

            <div className="max-w-7xl mx-auto px-4 md:px-8 -mt-8 relative z-30">
                {/* Tabs */}
                <div className="bg-white rounded-2xl shadow-xl p-2 flex overflow-x-auto hide-scrollbar border border-slate-100">
                    {tabs.map(tab => (
                        <button
                            key={tab.id}
                            onClick={() => setActiveTab(tab.id)}
                            className={`flex items-center gap-2 px-6 py-4 rounded-xl font-bold whitespace-nowrap transition-all flex-1 justify-center ${
                                activeTab === tab.id 
                                ? 'bg-blue-50 text-blue-700 shadow-sm' 
                                : 'text-slate-500 hover:bg-slate-50 hover:text-slate-700'
                            }`}
                        >
                            <i data-lucide={tab.icon}></i>
                            {tab.label}
                        </button>
                    ))}
                </div>

                <div className="mt-8">
                    {/* Overview Tab */}
                    {activeTab === 'overview' && (
                        <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="grid grid-cols-1 md:grid-cols-3 gap-8">
                            <div className="md:col-span-2 space-y-8">
                                <div className="bg-white rounded-3xl p-8 shadow-sm border border-slate-100">
                                    <h3 className="text-2xl font-bold text-slate-800 mb-6 flex items-center gap-3">
                                        <div className="p-3 bg-blue-100 text-blue-600 rounded-xl"><i data-lucide="info"></i></div>
                                        نبذة عن البرنامج
                                    </h3>
                                    <div className="prose prose-lg prose-slate rtl text-justify leading-loose" dangerouslySetInnerHTML={{ __html: data.overview || data.shortDescription }}></div>
                                </div>
                                
                                {data.media?.filter(m => m.type === 'video').length > 0 && (
                                    <div className="bg-white rounded-3xl p-8 shadow-sm border border-slate-100">
                                        <h3 className="text-2xl font-bold text-slate-800 mb-6 flex items-center gap-3">
                                            <div className="p-3 bg-red-100 text-red-600 rounded-xl"><i data-lucide="play"></i></div>
                                            فيديو تعريفي
                                        </h3>
                                        <div className="aspect-video rounded-2xl overflow-hidden shadow-inner bg-slate-100">
                                            <iframe src={data.media.find(m => m.type === 'video').url} className="w-full h-full" allowFullScreen></iframe>
                                        </div>
                                    </div>
                                )}
                            </div>
                            
                            <div className="space-y-6">
                                <div className="bg-gradient-to-br from-blue-600 to-blue-800 rounded-3xl p-8 text-white shadow-xl text-on-dark-surface program-cta-dark">
                                    <h3 className="text-xl font-bold mb-4 !text-white">هل أنت مستعد للبدء؟</h3>
                                    <p className="program-cta-lead mb-6 text-sm leading-relaxed !text-blue-100">انضم إلى نخبة الباحثين والأكاديميين في هذا البرنامج المتميز وارتقِ بمستقبلك المهني.</p>
                                    <Button variant="gold" className="w-full py-4 text-lg">
                                        سجل الآن <i data-lucide="external-link"></i>
                                    </Button>
                                    <a href="https://wa.me/967780193869" target="_blank" className="flex items-center justify-center gap-2 mt-4 text-white hover:text-green-300 transition-colors">
                                        <i data-lucide="message-circle"></i> استفسر عبر واتساب
                                    </a>
                                </div>

                                {data.media?.filter(m => m.type === 'brochure' || m.type === 'pdf').map((doc, idx) => (
                                    <a key={idx} href={doc.url} target="_blank" className="flex items-center gap-4 bg-white p-4 rounded-2xl shadow-sm border border-slate-100 hover:shadow-md transition-shadow group">
                                        <div className="w-12 h-12 bg-red-100 text-red-600 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform">
                                            <i data-lucide="file-pdf"></i>
                                        </div>
                                        <div>
                                            <h4 className="font-bold text-slate-800">{doc.title}</h4>
                                            <p className="text-xs text-slate-500">انقر للتحميل والمشاهدة</p>
                                        </div>
                                    </a>
                                ))}
                            </div>
                        </motion.div>
                    )}

                    {/* Dynamic Sections Tab */}
                    {activeTab === 'details' && (
                        <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="space-y-8">
                            {data.sections.filter(s => s.isVisible !== false).map((section, idx) => (
                                <div key={section.id} className="bg-white rounded-3xl p-8 shadow-sm border border-slate-100 relative overflow-hidden">
                                    <div className="absolute top-0 right-0 w-2 h-full bg-gradient-to-b from-blue-500 to-indigo-500"></div>
                                    <h3 className="text-2xl font-bold text-slate-800 mb-6 flex items-center gap-3">
                                        {section.icon && <div className="p-3 bg-slate-100 text-blue-600 rounded-xl"><i data-lucide={section.icon}></i></div>}
                                        {section.title}
                                    </h3>
                                    <div className="prose prose-lg prose-slate rtl text-justify leading-loose" dangerouslySetInnerHTML={{ __html: section.content }}></div>
                                </div>
                            ))}
                        </motion.div>
                    )}

                    {/* Study Plan Tab */}
                    {activeTab === 'plan' && (
                        <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}>
                            <div className="bg-white rounded-3xl p-8 shadow-sm border border-slate-100">
                                <h3 className="text-2xl font-bold text-slate-800 mb-8 flex items-center gap-3">
                                    <div className="p-3 bg-emerald-100 text-emerald-600 rounded-xl"><i data-lucide="book"></i></div>
                                    المساقات والخطة الدراسية
                                </h3>
                                
                                {['مقررات إجبارية', 'مقررات اختيارية', 'مقررات استدراكية'].map(group => {
                                    const isElective = group === 'مقررات اختيارية';
                                    const isRemedial = group === 'مقررات استدراكية';
                                    const semCourses = data.courses.filter(c => {
                                        if (typeof window.feCourseGroupKey === 'function') {
                                            var k = window.feCourseGroupKey(c);
                                            if (group === 'مقررات اختيارية') return k === 'elective';
                                            if (group === 'مقررات استدراكية') return k === 'remedial';
                                            return k === 'core';
                                        }
                                        if (isElective) return c.semester === 'مقررات اختيارية' || c.courseType === 'Elective';
                                        if (isRemedial) return c.semester === 'مقررات استدراكية' || c.courseType === 'Remedial';
                                        return !(c.semester === 'مقررات اختيارية' || c.courseType === 'Elective' || c.semester === 'مقررات استدراكية' || c.courseType === 'Remedial');
                                    });
                                    if (!semCourses.length) return null;
                                    const badgeCls = isRemedial ? 'text-violet-800 bg-violet-50 border-violet-500' : (isElective ? 'text-amber-800 bg-amber-50 border-amber-500' : 'text-slate-700 bg-slate-100 border-blue-500');
                                    return (
                                        <div key={group} className="mb-8 last:mb-0">
                                            <h4 className={`text-lg font-bold px-6 py-3 rounded-xl mb-4 border-r-4 inline-block ${badgeCls}`}>{group}</h4>
                                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                                {semCourses.map(course => (
                                                    <div key={course.id} className="flex gap-4 p-5 rounded-2xl border border-slate-100 hover:border-blue-200 hover:shadow-md transition-all bg-white group cursor-default">
                                                        <div className="w-12 h-12 bg-blue-50 text-blue-600 rounded-xl flex items-center justify-center shrink-0">
                                                            <i data-lucide={course.courseType === 'Core' ? 'bookmark' : 'layers'}></i>
                                                        </div>
                                                        <div>
                                                            <h5 className="font-bold text-slate-800 mb-1">{course.titleAr}</h5>
                                                            <h6 className="text-xs text-slate-400 font-poppins mb-2">{course.titleEn}</h6>
                                                            <div className="flex gap-3 text-xs">
                                                                <span className="bg-emerald-50 text-emerald-700 px-2 py-1 rounded-md font-bold">{course.creditHours} ساعة</span>
                                                                <span className={`${course.courseType === 'Core' ? 'bg-blue-50 text-blue-700 border border-blue-100' : (course.courseType === 'Remedial' ? 'bg-violet-50 text-violet-700 border border-violet-100' : 'bg-amber-50 text-amber-700 border border-amber-100')} px-2 py-1 rounded-md`}>{course.courseType === 'Core' ? 'إجباري' : (course.courseType === 'Elective' ? 'اختياري' : (course.courseType === 'Remedial' ? 'استدراكي' : course.courseType))}</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                ))}
                                            </div>
                                        </div>
                                    );
                                })}
                            </div>
                        </motion.div>
                    )}

                    {/* Faculty Tab */}
                    {activeTab === 'faculty' && (
                        <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                            {data.faculty.map(member => (
                                <div key={member.id} className="bg-white rounded-3xl p-6 shadow-sm border border-slate-100 flex flex-col items-center text-center group hover:shadow-xl transition-shadow">
                                    <div className="w-24 h-24 rounded-full overflow-hidden mb-4 border-4 border-blue-50 shadow-inner group-hover:border-blue-100 transition-colors">
                                        <img src={member.image || "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"} alt={member.name} className="w-full h-full object-cover" />
                                    </div>
                                    <h4 className="text-xl font-bold text-slate-800 mb-1">{member.name}</h4>
                                    <p className="text-blue-600 font-semibold text-sm mb-3">{member.position}</p>
                                    <p className="text-slate-500 text-sm mb-4 line-clamp-3">{member.bio}</p>
                                    <div className="mt-auto w-full pt-4 border-t border-slate-100">
                                        <p className="text-slate-400 text-xs font-poppins">{member.specialty}</p>
                                    </div>
                                </div>
                            ))}
                        </motion.div>
                    )}
                </div>
            </div>
        </motion.div>
    );
};