import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Autoplay } from "swiper/modules";
import { ChevronLeft, ChevronRight, Edit2 } from "lucide-react";

import { useSelector, useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
import "swiper/css";
import "swiper/css/navigation";
import LazyImage from "../components/common/LazyImage";
import weddingpromo1 from "../assets/images/weddingpromo1.jpg";
import weddingpromo2 from "../assets/images/weddingpromo2.jpg";

import weddingpromo3 from "../assets/images/weddingpromo3.jpg";

import weddingpromo4 from "../assets/images/weddingpromo4.jpg";
import ProfileCompletion from "../components/profiledashboard/ProfileCompletion";
import { preloadDummyProfile } from "../redux/registrationFormSlice";
import { useEffect } from "react";
import {
  Box,
  Button,
  Card,
  CardContent,
  CardHeader,
  Divider,
  IconButton,
  Typography,
} from "@mui/material";
import { Info } from "@mui/icons-material";

const images = [
  weddingpromo1, // bride in saree
  weddingpromo2, // traditional jewellery
  weddingpromo3, // flower details
  weddingpromo4, // couple hands
  weddingpromo1, // bride close-up
  weddingpromo3, // groom + bride portrait
  weddingpromo2, // wedding decor
  weddingpromo4, // bride in temple
  weddingpromo1, // traditional ceremony
  weddingpromo3, // couple full shot
];

const ProfilePreviewPage = () => {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const {
    personalDetails,
    educationalDetails,
    familyDetails,
    lifestyleDetails,
    partnerPreferences,
  } = useSelector((state) => state.registerform);

  // For dummy data on first visit
  useEffect(() => {
    dispatch(preloadDummyProfile());
  }, [dispatch]);

  const handleEditSection = (stepNum) => {
    navigate("/profile-edit", { state: { step: stepNum } });
  };

  const renderField = (label, value, stepNum = 1) => (
    <Box
      py={0.7}
      borderBottom="1px solid #e0e0e0"
      sx={{
        display: "grid",
        gridTemplateColumns: {
          xs: "1fr",
          sm: "1fr 1fr",
        },
        gap: "10px",
        alignItems: "center",
      }}
    >
      <Typography color="text.secondary" sx={{ fontWeight: 500 }}>
        {label}:
      </Typography>
      {value ? (
        <Typography
          sx={{
            fontWeight: 600,
            wordBreak: "break-word",
            textAlign: "left",
          }}
        >
          {value}
        </Typography>
      ) : (
        <Box
          display="flex"
          alignItems="center"
          gap={1}
          sx={{ color: "#888", fontStyle: "italic" }}
        >
          <Info size={16} />
          <Typography>No data available</Typography>
        </Box>
      )}
    </Box>
  );

  const renderPersonalSection = () => (
    <Card variant="outlined" sx={{ borderRadius: 2, background: "#fff5ed" }}>
      <CardHeader
        title={
          <Typography variant="h6" fontWeight="bold">
            Personal Details
          </Typography>
        }
        action={
          <IconButton
            aria-label="edit"
            color="primary"
            onClick={() => handleEditSection(1)}
            size="large"
          >
            <Edit2 size={20} />
          </IconButton>
        }
        sx={{ padding: "15px 15px", background: "#ffff" }}
      />
      <Divider />

      <CardContent sx={{ pt: 1 }}>
        {renderField("Name", personalDetails.name, 1)}
        {renderField("Mobile Number", personalDetails.mobileNumber, 1)}
        {renderField("Gender", personalDetails.gender, 1)}
        {renderField("Date of Birth", personalDetails.dob, 1)}
        {renderField("Height", personalDetails.height, 1)}
        {renderField("Weight", personalDetails.weight, 1)}
        {renderField("Marital Status", personalDetails.maritalStatus, 1)}
        {renderField("Religion", personalDetails.religion, 1)}
        {renderField("Caste", personalDetails.caste, 1)}
        {renderField("Email", personalDetails.email, 1)}
        {renderField("State", personalDetails.state, 1)}
        {renderField("City", personalDetails.city, 1)}
        {renderField("Pincode", personalDetails.pincode, 1)}

        {/* Profile Images */}
        <Box
          py={0.7}
          borderBottom="1px solid #e0e0e0"
          sx={{
            display: "grid",
            gridTemplateColumns: { xs: "1fr", sm: "1fr 1fr" },
            gap: "10px",
            alignItems: "center",
          }}
        >
          <Typography color="text.secondary" sx={{ fontWeight: 500 }}>
            Profile Photos:
          </Typography>
          {personalDetails.profiles && personalDetails.profiles.length > 0 ? (
            <Box display="flex" flexWrap="wrap" gap={1}>
              {personalDetails.profiles.slice(0, 4).map((profile, index) => (
                <Box
                  key={index}
                  width={60}
                  height={60}
                  borderRadius={1}
                  overflow="hidden"
                  sx={{ border: "1px solid #ddd", position: "relative" }}
                >
                  {profile.preview || profile.url ? (
                    <img
                      src={profile.preview || profile.url}
                      alt={`Profile ${index + 1}`}
                      style={{
                        width: "100%",
                        height: "100%",
                        objectFit: "cover",
                      }}
                    />
                  ) : (
                    <Box
                      display="flex"
                      alignItems="center"
                      justifyContent="center"
                      height="100%"
                      bgcolor="#f5f5f5"
                    >
                      <ImageIcon size={24} />
                    </Box>
                  )}
                </Box>
              ))}
              {personalDetails.profiles.length > 4 && (
                <Typography variant="caption" color="text.secondary">
                  +{personalDetails.profiles.length - 4} more
                </Typography>
              )}
            </Box>
          ) : (
            <Box
              display="flex"
              alignItems="center"
              gap={1}
              sx={{ color: "#888", fontStyle: "italic" }}
            >
              <Info size={16} />
              <Typography>No photos uploaded</Typography>
            </Box>
          )}
        </Box>
      </CardContent>
    </Card>
  );

  const renderEducationalSection = () => (
    <Card variant="outlined" sx={{ borderRadius: 2, background: "#fff5ed" }}>
      <CardHeader
        title={
          <Typography variant="h6" fontWeight="bold">
            Education Details
          </Typography>
        }
        action={
          <IconButton
            aria-label="edit"
            color="primary"
            onClick={() => handleEditSection(2)}
            size="large"
          >
            <Edit2 size={20} />
          </IconButton>
        }
        sx={{ padding: "15px 15px", background: "#f5fbff" }}
      />
      <Divider />

      <CardContent sx={{ pt: 1 }}>
        {renderField("Qualification", educationalDetails.qualification, 2)}
        {renderField("Field of Study", educationalDetails.fieldOfStudy, 2)}
        {renderField("College Name", educationalDetails.collegeName, 2)}
        {renderField("Occupation", educationalDetails.occupation, 2)}
        {renderField("Organization", educationalDetails.organization, 2)}
        {renderField("Employee Type", educationalDetails.employeeType, 2)}
        {renderField("Income", educationalDetails.income, 2)}
        {renderField("Work Location", educationalDetails.workLocation, 2)}
      </CardContent>
    </Card>
  );

  const renderFamilySection = () => (
    <Card variant="outlined" sx={{ borderRadius: 2, background: "#fff5ed" }}>
      <CardHeader
        title={
          <Typography variant="h6" fontWeight="bold">
            Family Details
          </Typography>
        }
        action={
          <IconButton
            aria-label="edit"
            color="primary"
            onClick={() => handleEditSection(2)}
            size="large"
          >
            <Edit2 size={20} />
          </IconButton>
        }
        sx={{ padding: "15px 15px", background: "#f5fbff" }}
      />
      <Divider />

      <CardContent sx={{ pt: 1 }}>
        {renderField("Father Name", familyDetails.fatherName)}
        {renderField("Father Occupation", familyDetails.fatherOccupation)}
        {renderField("Mother Name", familyDetails.motherName)}
        {renderField("Mother Occupation", familyDetails.motherOccupation)}
        {renderField("Brother Count", familyDetails.brotherCount)}
        {renderField("Sister Count", familyDetails.sisterCount)}
        {renderField("Family Status", familyDetails.familyStatus)}
        {renderField("Native Place", familyDetails.nativePlace)}
      </CardContent>
    </Card>
  );

   const renderLifestyleSection = () => (
    <Card variant="outlined" sx={{ borderRadius: 2, background: "#fff5ed" }}>
      <CardHeader
        title={
          <Typography variant="h6" fontWeight="bold">
            Lifestyle Details
          </Typography>
        }
        action={
          <IconButton
            aria-label="edit"
            color="primary"
            onClick={() => handleEditSection(2)}
            size="large"
          >
            <Edit2 size={20} />
          </IconButton>
        }
        sx={{ padding: "15px 15px", background: "#f5fbff" }}
      />
      <Divider />

      <CardContent sx={{ pt: 1 }}>
        {renderField(
          "Diet",
          Array.isArray(lifestyleDetails.diets)
            ? lifestyleDetails.diets.join(", ")
            : lifestyleDetails.diets
        )}
        {renderField(
          "Hobbies",
          Array.isArray(lifestyleDetails.hobbies)
            ? lifestyleDetails.hobbies.join(", ")
            : lifestyleDetails.hobbies
        )}
        {renderField("Date of Birth", lifestyleDetails.dob)}
        {renderField("Time of Birth", lifestyleDetails.tob)}
        {renderField("Place of Birth", lifestyleDetails.placeOfBirth)}
      </CardContent>
    </Card>
  );


   const renderPreferenceSection = () => (
    <Card variant="outlined" sx={{ borderRadius: 2, background: "#fff5ed" }}>
      <CardHeader
        title={
          <Typography variant="h6" fontWeight="bold">
            Lifestyle Details
          </Typography>
        }
        action={
          <IconButton
            aria-label="edit"
            color="primary"
            onClick={() => handleEditSection(2)}
            size="large"
          >
            <Edit2 size={20} />
          </IconButton>
        }
        sx={{ padding: "15px 15px", background: "#f5fbff" }}
      />
      <Divider />

      <CardContent sx={{ pt: 1 }}>
        {renderField("Age Range", partnerPreferences.ageRange)}
        {renderField(
          "Caste",
          Array.isArray(partnerPreferences.castes)
            ? partnerPreferences.castes.join(", ")
            : partnerPreferences.castes
        )}
        {renderField(
          "Sub Caste",
          Array.isArray(partnerPreferences.subCastes)
            ? partnerPreferences.subCastes.join(", ")
            : partnerPreferences.subCastes
        )}
        {renderField(
          "Occupation",
          Array.isArray(partnerPreferences.occupations)
            ? partnerPreferences.occupations.join(", ")
            : partnerPreferences.occupations
        )}
        {renderField(
          "Qualification",
          Array.isArray(partnerPreferences.educations)
            ? partnerPreferences.educations.join(", ")
            : partnerPreferences.educations
        )}
        {renderField(
          "Lifestyle & Hobbies",
          Array.isArray(partnerPreferences.hobbies)
            ? partnerPreferences.hobbies.join(", ")
            : partnerPreferences.hobbies
        )}
        {renderField("Annual Income", partnerPreferences.annualIncome)}
        {renderField(
          "State",
          Array.isArray(partnerPreferences.states)
            ? partnerPreferences.states.join(", ")
            : partnerPreferences.states
        )}
        {renderField(
          "City",
          Array.isArray(partnerPreferences.districts)
            ? partnerPreferences.districts.join(", ")
            : partnerPreferences.districts
        )}
       
      </CardContent>
    </Card>
  );

  return (
    <>
      <div className="custom-swiper-hero flex items-center justify-center p-4">
        <div className="w-full max-w-7xl relative">
          {/* Left Arrow */}
          <button className="swiper-button-prev-custom absolute left-0 top-1/2 -translate-y-1/2 z-10 w-12 h-12 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-all">
            <ChevronLeft className="w-6 h-6 text-white" />
          </button>

          {/* Right Arrow */}
          <button className="swiper-button-next-custom absolute right-0 top-1/2 -translate-y-1/2 z-10 w-12 h-12 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center hover:bg-white/30 transition-all">
            <ChevronRight className="w-6 h-6 text-white" />
          </button>

          <Swiper
            modules={[Navigation, Autoplay]}
            navigation={{
              prevEl: ".swiper-button-prev-custom",
              nextEl: ".swiper-button-next-custom",
            }}
            grabCursor={true}
            centeredSlides={true}
            slidesPerView="auto"
            spaceBetween={10}
            autoplay={{
              delay: 3000,
              disableOnInteraction: false,
            }}
            loop={true}
            className="mySwiper"
          >
            {images.map((img, idx) => (
              <SwiperSlide key={idx}>
                <div className="relative overflow-hidden rounded-3xl w-[100%] ">
                  <img
                    src={img}
                    alt={`Slide ${idx + 1}`}
                    className="w-full h-full object-cover"
                  />

                  {/* <LazyImage
                                        src={img}
                      alt={`Slide ${idx + 1}`}
                      className="w-full h-full object-cover"
                                      /> */}
                  {/* <div className="absolute bottom-6 left-1/2 -translate-x-1/2 bg-black/50 backdrop-blur-sm px-6 py-2 rounded-full">
                      <span className="text-white font-semibold text-lg">Slide {idx + 1}</span>
                    </div> */}
                </div>
              </SwiperSlide>
            ))}
          </Swiper>
        </div>

        <style>{`
        .custom-swiper-hero .swiper {
          width: 100%;
          overflow: visible;
        }
    
        .custom-swiper-hero .swiper-slide {
          width: 320px;
          height: 320px;
          transition: all 0.4s ease;
          opacity: 1;
          transform: scale(0.85);
        }
    
        .custom-swiper-hero .swiper-slide-active {
          width: 630px !important;
          height: 320px !important;
          opacity: 1;
          transform: scale(1);
          z-index: 2;
        }
    
        @media only screen and (max-width: 768px) {
          .custom-swiper-hero .swiper-slide {
            width: 300px;
            height: 150px;
          }
    
          .custom-swiper-hero .swiper-slide-active {
            width: 300px !important;
            height: 150px !important;
          }
        }
    
        .custom-swiper-hero .swiper-slide > div {
          width: 100%;
          height: 100%;
        }
    
        .custom-swiper-hero .swiper-button-prev-custom,
        .custom-swiper-hero .swiper-button-next-custom {
          cursor: pointer;
        }
    
        @media (max-width: 1024px) {
          .custom-swiper-hero .swiper-slide {
            width: 240px;
            height: 340px;
          }
    
          .custom-swiper-hero .swiper-slide-active {
            width: 380px !important;
            height: 480px !important;
          }
        }
    
        @media (max-width: 768px) {
          .custom-swiper-hero .swiper-slide {
            width: 180px;
            height: 280px;
          }
    
          .custom-swiper-hero .swiper-slide-active {
            width: 300px !important;
            height: 280px !important;
          }
    
          .custom-swiper-hero .swiper-button-prev-custom,
          .custom-swiper-hero .swiper-button-next-custom {
            width: 40px;
            height: 40px;
          }
        }
    
        @media (max-width: 480px) {
          .custom-swiper-hero .swiper-slide {
            width: 140px;
            height: 220px;
          }
    
          .custom-swiper-hero .swiper-slide-active {
            width: 300px !important;
            height: 220px !important;
          }
    
          .custom-swiper-hero .swiper-button-prev-custom,
          .custom-swiper-hero .swiper-button-next-custom {
            width: 36px;
            height: 36px;
          }
        }
      `}</style>
      </div>
      <ProfileCompletion />

     

      {/* personal details start */}
      <Box p={3} sx={{ maxWidth: "1400px", width: "100%" }} mx="auto">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 my-5">
          {renderPersonalSection()}
          {renderEducationalSection()}
          {renderFamilySection()}
          {renderLifestyleSection()}
          {renderPreferenceSection()}
        </div>
      </Box>

      {/* personal details end */}
    </>
  );
};

export default ProfilePreviewPage;
