'use client'
import { db } from '@/utils/firebase';
import { collection, getDocs } from 'firebase/firestore';
import { useLocale } from 'next-intl';
import Image from 'next/image';
import React, { useEffect, useState } from 'react'
import { getImageFallback, isFirebaseUrl } from '@/utils/imageFallback';

const placeholderImage = '/images/team_member.png';

const TeamCard = () => {
    const locale = useLocale();
    const [team, setTeam] = useState([]);
    const [imageErrors, setImageErrors] = useState({});

    const fetchTeam = async () => {
        const teamCollection = collection(db, "TeamMember");
        const teamSnapshot = await getDocs(teamCollection);
        const clientList = teamSnapshot.docs.map(doc => ({
            ...doc.data()
        }))
            ?.filter(item => item.status == true)
            ?.sort((a, b) => {
                // Sort by team: "core" first, then "sme"
                if (a.team === "core" && b.team === "sme") return -1;
                if (a.team === "sme" && b.team === "core") return 1;
                // If team is the same, sort by position
                return a.position - b.position;
            });
        setTeam(clientList);
    };

    useEffect(() => {
        fetchTeam();
    }, []);

    const handleImageError = (index, originalUrl) => {
        if (isFirebaseUrl(originalUrl)) {
            // Use fallback from public folder
            const fallback = getImageFallback(originalUrl, 'team', index);
            setImageErrors(prev => {
                const newErrors = { ...prev };
                newErrors[index] = fallback;
                return newErrors;
            });
        } else {
            setImageErrors(prev => ({ ...prev, [index]: true }));
        }
    }

    return (
        <>
            {
                team?.map((item, index) => {
                    const originalImageSrc = item?.profile_photo || placeholderImage;
                    
                    // Prioritize Firebase first, use fallback only if error occurred
                    let imageSrc = typeof imageErrors[index] === 'string' 
                        ? imageErrors[index]  // Use fallback if already set from error
                        : originalImageSrc;   // Otherwise use original (Firebase or placeholder)
                    
                    const hasError = imageErrors[index] === true;
                    
                    return (
                        <div key={index} className="transform transition-transform duration-300 hover:translate-y-[-10px] col-span-6 sm:col-span-4 md:col-span-3 xl:col-span-2">
                            {hasError ? (
                                <div className="w-full h-[500px] bg-gray-200 flex items-center justify-center">
                                    <span className="text-gray-500">Image unavailable</span>
                                </div>
                            ) : (
                                <Image
                                    className='w-full'
                                    src={imageSrc} 
                                    alt={"user-image"}
                                    width={500}
                                    height={500}
                                    loading="lazy"
                                    quality={80}
                                    placeholder="blur"
                                    blurDataURL="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDAiIGhlaWdodD0iMzAwIj48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgZmlsbD0iI2VlZWVlZSIvPjwvc3ZnPg=="
                                    onError={() => handleImageError(index, originalImageSrc)}
                                    unoptimized={isFirebaseUrl(originalImageSrc)}
                                />
                            )}

                        <h6 className='mt-3 sub-heading'>
                            {
                                locale == 'en' ?
                                    item?.name_l?.en
                                    :
                                    item?.name_l?.ar
                            }
                        </h6>
                        <small className='text-[#9D87AE] font-semibold sub-text'>
                            {
                                locale == 'en' ?
                                    item?.job_title_l?.en
                                    :
                                    item?.job_title_l?.ar
                            }
                        </small>
                    </div>
                    );
                })
            }
        </>
    )
}

export default TeamCard