import React, { useState } from "react";
import { motion } from "framer-motion";
import LazyImage from "../common/LazyImage";
import ProfileIcon from "../../assets/images/profileicon.png";
import HoroscodeIcon from "../../assets/images/horoscopericon.png";
import FamilyIcon from "../../assets/images/homeicon.png";
import Box from "@mui/material/Box";
import { useNavigate } from "react-router-dom";
import AstroChatUI from "./AstroChatUI";
import MembershipCard from "./MembershipCard";

const ProfileCompletion = () => {
  const [completeness, setCompleteness] = useState(30);
  const navigate = useNavigate();

  const cards = [
    {
      id: 1,
      icon: ProfileIcon,
      title: "Add Photo(s)",
      bgColor: "bg-green-50",
      iconColor: "text-green-600",
      borderColor: "border-green-200",
      url:"/profile-edit"
    },
    {
      id: 2,
      icon: HoroscodeIcon,
      title: "Add Horoscope",
      bgColor: "bg-purple-50",
      iconColor: "text-purple-600",
      borderColor: "border-purple-200",
      url:"/horoscoper-generate"
    },
    {
      id: 3,
      icon: FamilyIcon,
      title: "Family Details",
      bgColor: "bg-red-50",
      iconColor: "text-red-600",
      borderColor: "border-red-200",
      url:"/profile-edit"
    },
  ];

  const container = {
    hidden: { opacity: 0 },
    show: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1,
      },
    },
  };

  const item = {
    hidden: { opacity: 0, y: 20 },
    show: { opacity: 1, y: 0 },
  };

  return (
    <>
      <div className="max-w-[1400px] w-[100%] mx-auto my-10   px-2 sm:p-2 lg:p-2">
        <motion.div
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="max-w-6xl mx-auto"
        >
          {/* Header Section */}
          <div className="bg-green-50 rounded-2xl border border-1 border-gray-200  p-6 sm:p-8 mb-6">
            <motion.h1
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: 0.2, duration: 0.5 }}
              className="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 mb-4"
            >
              Complete Your Profile
            </motion.h1>

            {/* Progress Bar Section */}
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ delay: 0.4, duration: 0.5 }}
              className="space-y-3"
            >
              <div className="flex items-center justify-between">
                <span className="text-sm sm:text-base text-gray-600 font-medium">
                  Profile completeness score
                </span>
                <motion.span
                  initial={{ scale: 0 }}
                  animate={{ scale: 1 }}
                  transition={{ delay: 0.6, type: "spring", stiffness: 200 }}
                  className="text-lg sm:text-xl font-bold text-gray-900"
                >
                  {completeness}%
                </motion.span>
              </div>

              {/* Progress Bar */}
              <div className="relative h-3 bg-gray-200 rounded-full overflow-hidden">
                <motion.div
                  initial={{ width: 0 }}
                  animate={{ width: `${completeness}%` }}
                  transition={{ delay: 0.8, duration: 1, ease: "easeOut" }}
                  className="absolute top-0 left-0 h-full bg-gradient-to-r from-red-500 to-red-600 rounded-full"
                />
              </div>
            </motion.div>
          </div>

          {/* Cards Section */}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2 ">

   {/* Desktop Logo */}
            {/* <Box sx={{ display: { xs: "none", md: "flex" }, mr: 1 }}>
              <LazyImage
                src={Logo}
                className="w-full h-[50px] rounded-lg object-cover"
              />
            </Box> */}

            <AstroChatUI/>
<div className="my-4 rounded-2xl  bg-green-50 border border-1 border-green-200 p-4 ">
          <motion.div
            variants={container}
            initial="hidden"
            animate="show"
            className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6"
          >

            {cards.map((card, index) => (
              
                <div 
                 onClick={() => navigate(card.url)}
                
                className=" border border-1 border-red-50 bg-white rounded-3xl hover:bg-red-50  hover:border-2
                flex flex-col items-center space-x-2 h-32 justify-center transition-colors duration-500
                 cursor-pointer ">
                  {/* Icon Container */}
                  <motion.div
                    initial={{ rotate: -180, opacity: 0 }}
                    animate={{ rotate: 0, opacity: 1 }}
                    transition={{ delay: 0.9 + index * 0.1, duration: 0.5 }}
                    // className={`${card.bgColor} p-0 rounded-xl border ${card.borderColor}`}
                  >
                    <LazyImage
                      src={card.icon}
                      alt={card.title}
                      className="w-ful h-full "
                    />
                  </motion.div>

                  {/* Text */}
                  <motion.h3
                    initial={{ opacity: 0, x: -10 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ delay: 1 + index * 0.1, duration: 0.4 }}
                    className="text-[14px] sm:text-[16px] font-semibold text-gray-900"
                  >
                    {card.title}
                  </motion.h3>
                </div>

               
              
            ))}
          </motion.div>

          <MembershipCard/>

          </div>
</div>
          {/* Additional Info Section */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 1.5, duration: 0.6 }}
            className="mt-8 text-center"
          >
            <p className="text-gray-600 text-sm sm:text-base">
              Complete your profile to increase visibility and get better matches
            </p>
          </motion.div>
        </motion.div>
      </div>
    </>
  );
};

export default ProfileCompletion;