'use client';

import React from 'react';
import { motion } from 'framer-motion';
import { useLanguage } from '@/contexts/LanguageContext';
import { MessageCircle, ArrowRight, ArrowLeft, Users } from 'lucide-react';
import Link from 'next/link';

const TeamPage = () => {
    const { t, language } = useLanguage();

    const teamMembers = [
        {
            nameAr: 'نسيم عبد السلام القدسي',
            nameEn: 'Naseem Abdul Salam Al-Qudsi',
            roleAr: 'مدير تقني',
            roleEn: 'Technical Lead',
            whatsapp: '+967775574672',
            image: '',
            placeholderColor: 'bg-indigo-500/10 dark:bg-indigo-500/20',
            color: 'from-indigo-500/20 to-secondary/20'
        },
        {
            nameAr: 'عماد عادل الكوكباني',
            nameEn: 'Emad Adel Al-Kowkabani',
            roleAr: 'مطوير الواجهة الأمامية',
            roleEn: 'Frontend Developer',
            whatsapp: '+967775574672',
            image: '/images/team/emad.jpg',
            color: 'from-blue-500/20 to-secondary/20'
        },
        {
            nameAr: 'رياض محمد الروحاني',
            nameEn: 'Riyadh Mohammad Al-Rawhani',
            roleAr: 'مطور واجهة خلفية',
            roleEn: 'Backend Developer',
            whatsapp: '+967775574672',
            image: '/images/team/riyadh.jpg',
            color: 'from-purple-500/20 to-secondary/20'
        },
        {
            nameAr: 'حمزه منصور الحرازي',
            nameEn: 'Hamza Mansour Al-Harazi',
            roleAr: 'مصمم تجربة مستخدم',
            roleEn: 'UI/UX Designer',
            whatsapp: '+967775574672',
            image: '/images/team/hamza.jpg',
            color: 'from-emerald-500/20 to-secondary/20'
        },
        {
            nameAr: 'البراء نشوان نعمان',
            nameEn: 'Al-Bara\' Nashwan Numan',
            roleAr: 'مهندس برمجيات',
            roleEn: 'Software Engineer',
            whatsapp: '+967775574672',
            image: '/images/team/bara.jpg',
            color: 'from-orange-500/20 to-secondary/20'
        },
        {
            nameAr: 'اسامه محمد الرجوي',
            nameEn: 'Osama Mohammad Al-Rujawi',
            roleAr: 'محلل بيانات',
            roleEn: 'Data Analyst',
            whatsapp: '+967775574672',
            image: '/images/team/osama.jpg',
            color: 'from-pink-500/20 to-secondary/20'
        },
        {
            nameAr: 'عزيز حاميم طارش',
            nameEn: 'Aziz Hamim Taresh',
            roleAr: 'مهندس جودة',
            roleEn: 'QA Engineer',
            whatsapp: '+967775574672',
            image: '/images/team/aziz.jpg',
            color: 'from-cyan-500/20 to-secondary/20'
        }
    ];

    const containerVariants = {
        hidden: { opacity: 0 },
        visible: {
            opacity: 1,
            transition: {
                staggerChildren: 0.1
            }
        }
    };

    const cardVariants = {
        hidden: { opacity: 0, y: 30, scale: 0.9 },
        visible: {
            opacity: 1,
            y: 0,
            scale: 1,
            transition: {
                duration: 0.5,
                ease: 'easeOut'
            }
        }
    };

    return (
        <div className="min-h-screen bg-background pt-28 pb-20 px-4 transition-colors duration-500">
            <div className="fixed inset-0 overflow-hidden pointer-events-none">
                <div className="absolute top-0 right-0 w-[500px] h-[500px] bg-secondary/5 rounded-full blur-[120px]" />
                <div className="absolute bottom-0 left-0 w-[500px] h-[500px] bg-secondary/5 rounded-full blur-[120px]" />
            </div>

            <div className="container mx-auto max-w-7xl relative z-10">
                <div className="flex flex-col md:flex-row items-center justify-between mb-16 gap-6">
                    <motion.div
                        initial={{ opacity: 0, x: language === 'ar' ? 30 : -30 }}
                        animate={{ opacity: 1, x: 0 }}
                        className="text-center md:text-start"
                    >
                        <Link
                            href="/"
                            className="inline-flex items-center gap-2 text-secondary hover:text-foreground transition-colors mb-4 group"
                        >
                            {language === 'ar' ? <ArrowRight className="w-4 h-4" /> : <ArrowLeft className="w-4 h-4" />}
                            <span className="text-sm font-medium">{t('العودة للرئيسية', 'Back to Home')}</span>
                        </Link>
                        <h1 className="text-4xl md:text-6xl font-display font-bold text-foreground mb-4">
                            {t('فريق العمل', 'Our Team')}
                        </h1>
                        <p className="text-muted-foreground text-lg max-w-xl">
                            {t(
                                'الخبراء المبدعون وراء منصة جامعة الجيل الجديد، يعملون بشغف لتطوير مستقبل التعليم.',
                                'The creative experts behind the Al-Jeel Al-Jadeed University platform, working with passion to develop the future of education.'
                            )}
                        </p>
                    </motion.div>

                    <motion.div
                        initial={{ opacity: 0, scale: 0.5 }}
                        animate={{ opacity: 1, scale: 1 }}
                        className="p-6 bg-secondary/10 rounded-2xl border border-secondary/20 backdrop-blur-xl"
                    >
                        <Users className="w-12 h-12 text-secondary" />
                    </motion.div>
                </div>

                <motion.div
                    variants={containerVariants}
                    initial="hidden"
                    animate="visible"
                    className="space-y-12"
                >
                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                        {teamMembers.slice(0, 4).map((member, index) => (
                            <TeamCard key={index} member={member} t={t} language={language} variants={cardVariants} />
                        ))}
                    </div>

                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 max-w-5xl mx-auto">
                        {teamMembers.slice(4, 7).map((member, index) => (
                            <TeamCard key={index} member={member} t={t} language={language} variants={cardVariants} />
                        ))}
                    </div>
                </motion.div>
            </div>
        </div>
    );
};

const TeamCard = ({ member, t, language, variants }: any) => {
    return (
        <motion.div
            variants={variants}
            whileHover={{ y: -10 }}
            className="group relative"
        >
            <div className={`absolute inset-0 bg-gradient-to-br ${member.color} opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-3xl blur-xl`} />

            <div className="relative bg-card border border-border shadow-xl shadow-black/5 p-1 rounded-[2rem] overflow-hidden group-hover:border-secondary transition-all duration-500">
                <div className="bg-background rounded-[1.8rem] p-6 text-center h-full flex flex-col items-center">
                    <div className="relative mb-6">
                        <div className="absolute inset-0 bg-secondary blur-2xl opacity-0 group-hover:opacity-10 transition-opacity" />
                        <div className="w-32 h-32 rounded-full border-2 border-secondary/30 p-1 group-hover:border-secondary transition-colors duration-500 relative">
                            {member.image ? (
                                <img
                                    src={member.image}
                                    alt={member.nameEn}
                                    className="w-full h-full rounded-full bg-muted"
                                />
                            ) : (
                                <div
                                    className={`w-full h-full rounded-full ${member.placeholderColor || 'bg-muted'}`}
                                />
                            )}
                        </div>
                    </div>

                    <h3 className="text-xl font-bold text-foreground mb-8 group-hover:text-secondary transition-colors font-display">
                        {t(member.nameAr, member.nameEn)}
                    </h3>

                    <div className="mt-auto w-full">
                        <motion.a
                            href={`https://wa.me/${member.whatsapp.replace('+', '')}`}
                            target="_blank"
                            rel="noopener noreferrer"
                            whileHover={{ scale: 1.02 }}
                            whileTap={{ scale: 0.98 }}
                            className="flex items-center justify-center gap-2 w-full py-3 bg-secondary text-primary-foreground hover:bg-black hover:text-white dark:hover:bg-white dark:hover:text-black rounded-xl transition-all duration-300 shadow-lg shadow-secondary/20 font-bold text-sm"
                        >
                            <MessageCircle className="w-4 h-4" />
                            {t('تواصل وتساب', 'WhatsApp')}
                        </motion.a>
                    </div>
                </div>
            </div>
        </motion.div>
    );
};

export default TeamPage;
