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

window.ReactApp.PublicProgramsGrid = () => {
    const [programs, setPrograms] = useState([]);
    const [loading, setLoading] = useState(true);
    const [selectedProgramId, setSelectedProgramId] = useState(null);

    useEffect(() => {
        loadPrograms();
        window.ReactApp.resetPublicProgramsSelection = () => {
            setSelectedProgramId(null);
        };
        return () => {
            delete window.ReactApp.resetPublicProgramsSelection;
        };
    }, []);

    useEffect(() => {
        if (window.lucide) {
            window.lucide.createIcons();
        }
    });

    const loadPrograms = async () => {
        setLoading(true);
        const data = await getPrograms();
        setPrograms(data.filter(p => p.isActive !== false));
        setLoading(false);
    };

    if (selectedProgramId) {
        return <window.ReactApp.ProgramDetails 
            programId={selectedProgramId} 
            onBack={() => setSelectedProgramId(null)} 
        />;
    }

    return (
        <div className="w-full">
            {loading ? (
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    {[1, 2, 3].map(i => (
                        <div key={i} className="h-96 rounded-2xl bg-white p-4 shadow-sm border border-slate-100">
                            <Skeleton className="h-48 w-full mb-4" />
                            <Skeleton className="h-6 w-3/4 mb-2" />
                            <Skeleton className="h-4 w-1/2 mb-4" />
                            <Skeleton className="h-10 w-full rounded-full" />
                        </div>
                    ))}
                </div>
            ) : (
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    {programs.map((program, idx) => (
                        <motion.div 
                            key={program.id}
                            initial={{ opacity: 0, y: 20 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ delay: idx * 0.1 }}
                        >
                            <PremiumCard className="flex flex-col h-full group" onClick={() => setSelectedProgramId(program.id)}>
                                <div className="relative h-56 w-full overflow-hidden">
                                    <div className="absolute inset-0 bg-gradient-to-t from-slate-900 to-transparent opacity-60 z-10"></div>
                                    <img 
                                        src={program.bannerImage || program.image || "https://images.unsplash.com/photo-1541339907198-e08756dedf3f?auto=format&fit=crop&w=800&q=80"} 
                                        alt={program.nameAr}
                                        className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                                    />
                                    <div className="absolute bottom-4 right-4 z-20 flex gap-2">
                                        <span className="bg-blue-600 text-white px-3 py-1 rounded-full text-xs font-bold shadow-md">
                                            {program.degreeType}
                                        </span>
                                        <span className="bg-white/20 backdrop-blur-md text-white px-3 py-1 rounded-full text-xs font-bold border border-white/30">
                                            {program.faculty}
                                        </span>
                                    </div>
                                    <div className="absolute top-4 right-4 z-20 bg-white p-2 rounded-xl shadow-lg">
                                        <i data-lucide={program.icon || "book"} className="w-6 h-6 text-blue-600"></i>
                                    </div>
                                </div>
                                
                                <div className="p-6 flex flex-col flex-grow">
                                    <h3 className="text-xl font-bold text-slate-800 mb-2 font-cairo leading-tight">{program.nameAr}</h3>
                                    <h4 className="text-sm font-semibold text-slate-500 mb-4 font-poppins">{program.nameEn}</h4>
                                    <p className="text-slate-600 text-sm mb-6 line-clamp-2 leading-relaxed flex-grow">
                                        {program.shortDescription}
                                    </p>
                                    
                                    <div className="grid grid-cols-2 gap-3 mb-6">
                                        <div className="flex items-center gap-2 text-xs text-slate-600 bg-slate-50 p-2 rounded-lg">
                                            <i data-lucide="clock" className="w-4 h-4 text-amber-500"></i>
                                            <span>{program.duration}</span>
                                        </div>
                                        <div className="flex items-center gap-2 text-xs text-slate-600 bg-slate-50 p-2 rounded-lg">
                                            <i data-lucide="book-open" className="w-4 h-4 text-emerald-500"></i>
                                            <span>{program.creditHours} ساعة</span>
                                        </div>
                                    </div>
                                    
                                    <Button variant="secondary" className="w-full mt-auto group-hover:bg-blue-600 group-hover:text-white group-hover:border-blue-600">
                                        <span>عرض التفاصيل</span>
                                        <i data-lucide="arrow-left" className="w-4 h-4 transform group-hover:-translate-x-1 transition-transform"></i>
                                    </Button>
                                </div>
                            </PremiumCard>
                        </motion.div>
                    ))}
                </div>
            )}
        </div>
    );
};