import React, { useMemo } from 'react';
import { motion } from 'framer-motion';

const ExperienceChart = ({ applicants = [] }) => {

    const avgExperience = useMemo(() => {

        console.log("📊 Applications received:", applicants);

        if (!applicants || applicants.length === 0) {
            return "0.0";
        }

        let totalExp = 0;

        applicants.forEach((app, index) => {

            const rawExp = app?.experience;

            console.log(`🔍 Applicant [${index}] experience:`, rawExp);

            

            const exp = parseFloat(rawExp);

            if (!isNaN(exp)) {
                totalExp += exp;
            }

        });

        console.log("📈 Total Experience:", totalExp);
        console.log("👥 Total Candidates:", applicants.length);

        const avg = applicants.length > 0 ? totalExp / applicants.length : 0;

        return avg.toFixed(1);

    }, [applicants]);

    return (
        <div style={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            height: '100%'
        }}>
            <div style={{
                position: 'relative',
                width: '160px',
                height: '160px',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center'
            }}>

                <svg
                    viewBox="0 0 36 36"
                    style={{
                        width: '100%',
                        height: '100%',
                        transform: 'rotate(-90deg)'
                    }}
                >

                    <path
                        d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                        fill="none"
                        stroke="rgba(255,255,255,0.1)"
                        strokeWidth="3"
                    />

                    <motion.path
                        d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                        fill="none"
                        stroke="#EF4444"
                        strokeWidth="3"
                        strokeLinecap="round"
                        initial={{ pathLength: 0 }}
                        animate={{
                            pathLength: Math.min(parseFloat(avgExperience) / 10, 1)
                        }}
                        transition={{ duration: 1.5, ease: "easeOut" }}
                    />

                </svg>

                <div style={{
                    position: 'absolute',
                    textAlign: 'center',
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'center'
                }}>

                    <motion.span
                        initial={{ opacity: 0, scale: 0.5 }}
                        animate={{ opacity: 1, scale: 1 }}
                        transition={{ delay: 0.2 }}
                        style={{
                            fontSize: '2.5rem',
                            fontWeight: 'bold',
                            color: 'white',
                            lineHeight: '1'
                        }}
                    >
                        {avgExperience}
                    </motion.span>

                    <span style={{
                        fontSize: '0.875rem',
                        color: '#9ca3af',
                        marginTop: '0.25rem'
                    }}>
                        Avg. Years
                    </span>

                </div>

            </div>

            <p style={{
                textAlign: 'center',
                fontSize: '0.85rem',
                color: '#6b7280',
                marginTop: '1rem'
            }}>
                Based on application data
            </p>

        </div>
    );
};

export default ExperienceChart;