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 AccountBalanceWalletIcon from "@mui/icons-material/AccountBalanceWallet";
import profilebg from "../../assets/images/profilebg.jpg";
import Image from "../../assets/images/astrology-horoscope-svgrepo-com.svg";
import Image1 from "../../assets/images/scorpio-svgrepo-com.svg";
// 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 MatchingList = () => {
  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\"",
      salary: "5-10 LPA",
      location: "chennai",
      caste: "Brahmin",
      zodiac1: "Aries",
      zodiac2: "Scorpio",
      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\"",
      salary: "8-12 LPA",
      location: "hyderabad",
      caste: "Brahmin",
      zodiac1: "Aries",
      zodiac2: "Scorpio",
      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\"",
      salary: "6-11 LPA",
      location: "Mumbai",
      caste: "Brahmin",
      zodiac1: "Aries",
      zodiac2: "Scorpio",
      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\"",
      salary: "7-11 LPA",
      location: "Bangalore",
      caste: "Brahmin",
      zodiac1: "Aries",
      zodiac2: "Scorpio",
      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\"",
      salary: "9-14 LPA",
      location: "kerala",
      caste: "Brahmin",
      zodiac1: "Aries",
      zodiac2: "Scorpio",
      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\"",
      salary: "5-10 LPA",
      location: "madya pradesh",
      caste: "Brahmin",
      zodiac1: "Aries",
      zodiac2: "Scorpio",
      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);
    const navigate = useNavigate();

    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-2 border-gray-200"
      >
        {/* Profile Image Section */}
        <div className="relative">
          {/* Premium Badge */}
          {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-red-900 rounded-full p-2 shadow-lg"
            >
              <Crown className="w-5 h-5 text-white" />
            </motion.div>
          )}

          {/* Shortlist Button */}
          <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();
              // shortlist logic
            }}
          >
            <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>
          {/* <LazyImage
                              src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=600&h=800&fit=crop&crop=faces,top" 
            alt="Profile"
            className="w-full h-90 object-cover"
                            /> */}

          {/* White Gradient Overlay at bottom of image */}
          <div
            className="absolute bottom-0 left-0 right-0 h-25 pointer-events-none"
            style={{
              background:
                "linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 50%, rgb(255, 255, 255) 100%)",
            }}
          ></div>

          {/* Profile Info Overlay - positioned at bottom */}
          <div className="absolute bottom-1 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>

        {/* Stats and Follow Section */}
        <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">
              <AccountBalanceWalletIcon className="w-4 h-4 text-gray-700" />
              <span className="text-[14px] font-600 text-gray-900">
                {profile.salary}
              </span>
            </div>
            <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 items-center gap-4">
            <div className="flex items-center gap-2">
              <TempleHinduIcon className="w-4 h-4 text-gray-700" />
              <span className="text-[14px] font-600 text-gray-900">
                {profile.caste}
              </span>
            </div>
            <div className="flex items-center gap-2">
              <img src={Image} alt="" className="w-4 h-4 text-gray-700" />
              <span className="text-[14px] font-600 text-gray-900">
                {profile.zodiac1}
              </span>
            </div>
          </div>
          <div className="flex items-center gap-4">
            <div className="flex items-center gap-2">
              <img src={Image1} alt="" className="w-4 h-4 text-gray-700" />
              <span className="text-[14px] font-600 text-gray-900">
               {profile.zodiac2}
              </span>
            </div>
          </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-[#00000] sm:text-[22px] lg:text-[24px] font-semibold mb-3">
              Your Matching List
            </h1>
            <p className="text-gray-900 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"
              onClick={() => navigate("/matches")}
            >
              View All Matches
            </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 MatchingList;
