import { useRef, useState } from 'react';
import { motion } from 'framer-motion';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Pagination, Autoplay, EffectCoverflow } from 'swiper/modules';
import { Crown, Bookmark, User, Briefcase, MapPin, X, Send, ChevronLeft, ChevronRight } from 'lucide-react';
import CakeIcon from "@mui/icons-material/Cake";
import HeightIcon from "@mui/icons-material/Height";
import GroupsIcon from "@mui/icons-material/Groups";
import TempleHinduIcon from "@mui/icons-material/TempleHindu";
import SchoolIcon from "@mui/icons-material/School";
import LocationOnIcon from "@mui/icons-material/LocationOn";
import AccessibilityNewIcon from "@mui/icons-material/AccessibilityNew";
import  profilebg  from "../../assets/images/profilebg.jpg";
// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/effect-coverflow';
import { useNavigate } from 'react-router-dom';

const NewJoinedProfile = () => {

    
   const swiperRef = useRef(null);
   const navigate = useNavigate();

  // Sample profile data
  const profiles = [
    {
      id: 1,
      name: 'Selva Kumar . R',
      userId: 'TK52586A',
      lastSeen: '14 Nov 25',
      age: 23,
      height: '5\'2"',
      religion: 'Hindu / Agamudayar / Thuluva Vellal',
      education: 'BCA, Data Analyst',
      location: 'Vellore, Tamil Nadu',
      image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=500&fit=crop',
      isPremium: true
    },
    {
      id: 2,
      name: 'Priya Sharma',
      userId: 'TK52587B',
      lastSeen: '15 Nov 25',
      age: 25,
      height: '5\'4"',
      religion: 'Hindu / Brahmin / Iyer',
      education: 'MBA, Marketing Manager',
      location: 'Chennai, Tamil Nadu',
      image: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=500&fit=crop',
      isPremium: true
    },
    {
      id: 3,
      name: 'Rahul Venkat',
      userId: 'TK52588C',
      lastSeen: '16 Nov 25',
      age: 28,
      height: '5\'10"',
      religion: 'Hindu / Mudaliar / Arcot',
      education: 'B.Tech, Software Engineer',
      location: 'Bangalore, Karnataka',
      image: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=500&fit=crop',
      isPremium: false
    },
    {
      id: 4,
      name: 'Aishwarya Reddy',
      userId: 'TK52589D',
      lastSeen: '17 Nov 25',
      age: 26,
      height: '5\'5"',
      religion: 'Hindu / Reddy / Telangana',
      education: 'CA, Chartered Accountant',
      location: 'Hyderabad, Telangana',
      image: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&h=500&fit=crop',
      isPremium: true
    },
    {
      id: 5,
      name: 'Karthik Mohan',
      userId: 'TK52590E',
      lastSeen: '18 Nov 25',
      age: 27,
      height: '5\'8"',
      religion: 'Hindu / Nadar / Tamil',
      education: 'M.Tech, Civil Engineer',
      location: 'Madurai, Tamil Nadu',
      image: 'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=400&h=500&fit=crop',
      isPremium: false
    },
    {
      id: 6,
      name: 'Divya Lakshmi',
      userId: 'TK52591F',
      lastSeen: '19 Nov 25',
      age: 24,
      height: '5\'3"',
      religion: 'Hindu / Pillai / Tamil',
      education: 'B.Com, HR Executive',
      location: 'Coimbatore, Tamil Nadu',
      image: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=400&h=500&fit=crop',
      isPremium: true
    }
  ];

  // Profile Card Component


const ProfileCard = ({ profile }) => {
    const [isLiked, setIsLiked] = useState(false);

    return (
      <motion.div
        initial={{ opacity: 0, scale: 0.9 }}
        whileInView={{ opacity: 1, scale: 1 }}
        viewport={{ once: true }}
        transition={{ duration: 0.5 }}
        onClick={() => navigate(`/profile-details/${profile.id}`)}
        className="w-full max-w-sm rounded-[10px] shadow-xl overflow-hidden border-1 border-green-200"
      >
        <div className="relative">
          {profile.isPremium && (
            <motion.div
              initial={{ scale: 0 }}
              animate={{ scale: 1 }}
              transition={{ delay: 0.2, type: 'spring' }}
              className="absolute top-4 left-4 z-10 bg-orange-500 rounded-full p-2 shadow-lg"
            >
              <Crown className="w-5 h-5 text-white" />
            </motion.div>
          )}

          <motion.button
            whileHover={{ scale: 1 }}
            whileTap={{ scale: 0.9 }}
            className="absolute top-4 right-4 z-10 bg-white rounded-full px-4 py-2 shadow-lg flex items-center space-x-2 hover:bg-gray-50 transition-colors"
            onClick={(e) => {
              e.stopPropagation();
            }}
          >
            <Bookmark className="w-4 h-4" />
            <span className="text-[12px] font-medium">Shortlist</span>
          </motion.button>

          <div
            className="bg-gray-200 overflow-hidden w-full max-w-sm h-[300px]"
            style={{ height: "300px" }}
          >
            <img
              src={profile.image}
              alt={profile.name}
              className="w-full h-full object-cover"
            />
          </div>

          <div
            className="absolute bottom-0 left-0 right-0 h-35 pointer-events-none"
            style={{
              background:
                "linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 40%, rgb(255, 255, 255) 100%)",
            }}
          ></div>

          <div className="absolute bottom-0 left-0 right-0 p-6 pb-1 text-gray-900">
            <h1 className="text-[18px] text-green-900 font-bold mb-2">
              {profile.name}
            </h1>
            <p className="text-[14px] text-gray-700 leading-relaxed">
              Matrimony ID: {profile.userId}
            </p>
          </div>
        </div>

        <div
          className="px-4 pt-[-2px] pb-4 flex flex-col gap-2"
          style={{ background: "rgb(255, 255, 255)" }}
        >
          <div className="flex items-center gap-4">
            <div className="flex items-center gap-2">
              <CakeIcon className="w-4 h-4 text-gray-700" />
              <span className="text-[14px] font-600 text-gray-900">
                Age : {profile.age}
              </span>
            </div>

            <div className="flex items-center gap-2">
              <AccessibilityNewIcon className="w-4 h-4 text-gray-700" />
              <span className="text-[14px] font-600 text-gray-900">
                Height: {profile.height}
              </span>
            </div>
          </div>

          <div className="flex items-center gap-4">
            <div className="flex items-center gap-2">
              <GroupsIcon className="w-4 h-4 text-gray-700" />
              <span className="text-[14px] font-600 text-gray-900">
                {profile.religion}
              </span>
            </div>
          </div>

          <div className="flex items-center gap-4">
            <div className="flex items-center gap-2">
              <SchoolIcon className="w-4 h-4 text-gray-700" />
              <span className="text-[14px] font-600 text-gray-900">
                {profile.education}
              </span>
            </div>
          </div>

          <div className="flex items-center gap-4">
            <div className="flex items-center gap-2">
              <LocationOnIcon className="w-4 h-4 text-gray-700" />
              <span className="text-[14px] font-600 text-gray-900">
                {profile.location}
              </span>
            </div>
          </div>

          <div className="flex gap-3 my-2 justify-between w-full px-[0px]">
            <button
              onClick={(e) => {
                e.stopPropagation();
              }}
              className="gap-2 px-3 w-[fit-content] bg-[#A70710] hover:bg-red-600 text-white 
            font-semibold text-base py-2 rounded-[20px] shadow-md 
            hover:shadow-lg transition-all duration-300 flex items-center justify-center transform hover:scale-95"
            >
              <svg
                className="w-4 h-4"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
              >
                <path
                  d="M18 6L6 18M6 6l12 12"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
              Decline
            </button>

            <button
              className="w-[fit-content] bg-[#034E08] hover:bg-green-700 text-white font-semibold text-base 
              rounded-[20px] px-3 gap-2 py-1 shadow-lg hover:shadow-xl transition-all duration-300
              transform hover:scale-105 flex items-center justify-center"
              onClick={(e) => {
                e.stopPropagation();
                setIsLiked(!isLiked);
              }}
            >
              {isLiked ? (
                <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
                  <path
                    d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
                    fill="#EF4444"
                  />
                </svg>
              ) : (
                <svg
                  className="w-4 h-4"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                >
                  <path
                    d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
              )}
              Interest
            </button>
          </div>
        </div>
      </motion.div>

    );
  };
  return (
    <>
    
    
    <div
  className="py-10 bg-cover bg-center  bg-no-repeat"
//  style={{ backgroundImage: `url(${profilebg})` }}

>
      <div className="w-[100%] max-w-[1400px] mx-auto">
        {/* Header */}
        <motion.div
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          className="text-center mb-12"
        >
          <h1 className="text-[20px] text-[#034E08] sm:text-[22px] lg:text-[24px] font-bold  mb-3">
           New Joined
          </h1>
          <p className="text-gray-600 text-[12px]">Find your perfect match today</p>
        </motion.div>

        {/* Swiper Container */}
        <div className="relative">
          <Swiper
            ref={swiperRef}
            modules={[Navigation, Pagination, Autoplay, EffectCoverflow]}
            spaceBetween={30}
            slidesPerView={1}
            autoplay={{
              delay: 5000,
              disableOnInteraction: false,
              pauseOnMouseEnter: true
            }}
            pagination={{
              clickable: true,
              dynamicBullets: true
            }}
            loop={true}
            speed={800}
            breakpoints={{
              640: {
                slidesPerView: 2,
                spaceBetween: 10
              },
              1024: {
                slidesPerView: 3,
                spaceBetween: 15
              },
              1280: {
                slidesPerView: 4,
                spaceBetween: 10
              }
            }}
            className="pb-16"
          >
            {profiles.map((profile) => (
              <SwiperSlide key={profile.id}>
                <ProfileCard profile={profile} />
              </SwiperSlide>
            ))}
          </Swiper>

          {/* Custom Navigation Buttons */}
          <motion.button
            whileHover={{ scale: 1.1, x: -5 }}
            whileTap={{ scale: 0.9 }}
            onClick={() => swiperRef.current?.swiper.slidePrev()}
            className="hidden sm:flex absolute left-0 top-1/2 -translate-y-1/2 z-10 
           bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-all
            w-12 h-12 rounded-full shadow-xl hover:shadow-2xl items-center justify-center "
          >
            <ChevronLeft className="w-6 h-6 text-gray-700" />
          </motion.button>

          <motion.button
            whileHover={{ scale: 1.1, x: 5 }}
            whileTap={{ scale: 0.9 }}
            onClick={() => swiperRef.current?.swiper.slideNext()}
            className="hidden sm:flex absolute right-0 top-1/2 -translate-y-1/2 z-10 
           bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-all
            w-12 h-12  rounded-full shadow-xl hover:shadow-2xl items-center justify-center transition-all"
          >
            <ChevronRight className="w-6 h-6 text-gray-700" />
          </motion.button>
        </div>

        {/* View All Button */}
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.5 }}
          className="text-center mt-12"
        >
          <motion.button
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            className="px-6 py-3 bg-[#034E08] text-white rounded-full font-semibold text-lg shadow-lg hover:shadow-xl transition-shadow"
          >
            View All 
          </motion.button>
        </motion.div>
      </div>

      {/* Custom Swiper Styles */}
      <style jsx global>{`
        .swiper-pagination-bullet {
          width: 10px;
          height: 10px;
          background: #A70710;
          opacity: 0.5;
         
        }
        
        .swiper-pagination-bullet-active {
          opacity: 1;
          width: 30px;
          border-radius: 5px;
        }

        .swiper-slide {
          height: auto;
          display: flex;
        }
         
      `}</style>
    </div>
    
    </>
  )
}

export default NewJoinedProfile
