import React from "react";
import { useSelector } from 'react-redux';
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import { Edit2,Info  } from 'lucide-react';
import {
  Card,
  CardContent,
  CardHeader,
  Typography,
  Box,
  Divider,
  IconButton,
  Button,
  Grid,
} from '@mui/material';
import { usePreviewDetails } from "../hooks/usePreview";

const PreviewScreen = ({ onEdit, onSubmit }) => {
  const formData = useSelector((state) => state.registerform);
  const { data: previewData, isLoading, isError } = usePreviewDetails();

  const sections = previewData?.personal_details
    ? [
        {
          title: "Personal Details",
          step: 1,
          data: previewData.personal_details,
        },
        {
          title: "Educational & Professional Details",
          step: 2,
          data: previewData.educational_details,
        },
        {
          title: "Family Details",
          step: 3,
          data: previewData.family_details,
        },
        {
          title: "Lifestyle & Habits",
          step: 4,
          data: previewData.lifestyle_details,
        },
        {
          title: "Partner Preferences",
          step: 5,
          data: previewData.partner_preferences,
        },
      ]
    : [
        {
          title: 'Personal Details',
          step: 1,
          data: formData.personalDetails,
        },
        {
          title: 'Educational & Professional Details',
          step: 2,
          data: formData.educationalDetails,
        },
        {
          title: 'Family Details',
          step: 3,
          data: formData.familyDetails,
        },
        {
          title: 'Lifestyle & Habits',
          step: 4,
          data: formData.lifestyleDetails,
        },
        {
          title: 'Partner Preferences',
          step: 5,
          data: formData.partnerPreferences,
        },
      ];

  const renderValue = (key, value) => {
    if (key === "profiles" || key === "profile" || key === "profile_images" || key === "images") {
      const list = Array.isArray(value) ? value : (value ? [value] : []);
      return (
        <Box display="flex" gap={1} flexWrap="wrap">
          {list.length > 0 ? (
            list.map((imgObj, index) => {
              const src =
                typeof imgObj === "string"
                  ? imgObj
                  : imgObj?.preview ||
                    imgObj?.url ||
                    (imgObj?.file ? URL.createObjectURL(imgObj.file) : null);
              if (!src) return null;
              return (
                <img
                  key={index}
                  src={src}
                  alt="Profile"
                  style={{
                    width: "90px",
                    height: "90px",
                    objectFit: "cover",
                    borderRadius: "50%",
                    border: "1px solid #ccc",
                    // marginLeft: "-20px",
                  }}
                />
              );
            })
          ) : (
            <Box display="flex" alignItems="center" gap={1} sx={{ color: "#888" }}>
              <Info size={16} />
              <Typography>No photos uploaded</Typography>
            </Box>
          )}
        </Box>
      );
    }

    if (Array.isArray(value)) {
      if (value.length === 0) return "-";
      if (typeof value[0] === "object") {
        return value.map((item, idx) => (
          <div key={idx}>{JSON.stringify(item)}</div>
        ));
      }
      return value.join(", ");
    }

    if (value && typeof value === "object") {
      return "-";
    }

    return value || "-";
  };

  return (
    <Box p={3} sx={{maxWidth:"1400px", width:"100%"}} mx="auto" >
    
<div className='grid grid-cols-1 md:grid-cols-2 gap-4 my-10'>

        {isLoading && (
          <Box
            py={4}
            display="flex"
            justifyContent="center"
            sx={{ color: "#666" }}
          >
            Loading preview...
          </Box>
        )}

        {isError && (
          <Box
            py={4}
            display="flex"
            justifyContent="center"
            sx={{ color: "#d32f2f" }}
          >
            Failed to load preview.
          </Box>
        )}

        {!isLoading &&
          sections.map((section) => (
         
            <Card  key={section.title} variant="outlined" sx={{ borderRadius: 2, background:"#fff5ed" }}>
              <CardHeader
                title={
                  <Typography variant="h6" fontWeight="bold">
                    {section.title}
                  </Typography>
                }
                action={
                  <IconButton
                    aria-label="edit"
                    color="primary"
                    onClick={() => onEdit(section.step)}
                    size="large"
                  >
                    <Edit2 size={20} />
                  </IconButton>
                }
                sx={{padding:"15px 15px", background:"#f5fbff" }}
              />
              <Divider />
              <CardContent sx={{ pt: 1, }}>
                {Object.entries(section.data || {}).map(([key, value]) => {
                    // Handle brothers and sisters arrays specifically
                    if ((key === 'brothers' || key === 'sisters') && Array.isArray(value) && value.length > 0) {
                      return (
                        <Box key={key} sx={{ py: 2, borderBottom: "1px solid #e0e0e0" }}>
                          <Typography color="text.secondary" sx={{ fontWeight: 600, mb: 1 }}>
                            {key === 'brothers' ? 'Brothers Details' : 'Sisters Details'}
                          </Typography>
                          <style>
                            {`
                              .custom-swiper-${key} .swiper-button-next,
                              .custom-swiper-${key} .swiper-button-prev {
                                color: #d32f2f;
                                width: 25px;
                                height: 25px;
                                background: rgba(255, 255, 255, 0.9);
                                border-radius: 50%;
                                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                              }
                              .custom-swiper-${key} .swiper-button-next::after,
                              .custom-swiper-${key} .swiper-button-prev::after {
                                font-size: 12px;
                                font-weight: bold;
                              }
                              .custom-swiper-${key} .swiper-pagination-bullet-active {
                                background-color: #d32f2f;
                              }
                            `}
                          </style>
                          <Swiper
                            className={`custom-swiper-${key}`}
                            modules={[Navigation, Pagination]}
                            spaceBetween={15}
                            slidesPerView={1}
                            navigation
                            pagination={{ clickable: true }}
                            style={{ padding: "4px 4px 30px 4px" }}
                          >
                            {value.map((sibling, idx) => (
                              <SwiperSlide key={idx}>
                                <Card variant="outlined" sx={{ bgcolor: '#fff', height: '100%' }}>
                                  <CardContent sx={{ p: 2, '&:last-child': { pb: 2 } }}>
                                    {Object.entries(sibling).map(([sKey, sVal]) => (
                                      <Box key={sKey} display="grid" gridTemplateColumns="45% 55%" gap={1} mb={0.8} alignItems="start">
                                        <Typography variant="caption" color="text.secondary" sx={{ fontWeight: 500 }}>
                                          {sKey
                                            .replace(/([A-Z])/g, ' $1')
                                            .replace(/_/g, ' ')
                                            .replace(/\b\w/g, (l) => l.toUpperCase())
                                            .trim()}
                                        </Typography>
                                        <Typography variant="body2" fontWeight={600} sx={{ wordBreak: 'break-word' }}>
                                          {sVal || '-'}
                                        </Typography>
                                      </Box>
                                    ))}
                                  </CardContent>
                                </Card>
                              </SwiperSlide>
                            ))}
                          </Swiper>
                        </Box>
                      );
                    }
                    // Convert camelCase or camel_Snake_case to readable words
                    const formattedKey = key
                      .replace(/([A-Z])/g, ' $1')
                      .replace(/_/g, ' ')
                      .replace(/\b\w/g, (l) => l.toUpperCase())
                      .trim();
                    const content = renderValue(key, value);
                    return (
                    
                      <Box
  key={key}
  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 }}>
    {formattedKey}:
  </Typography>

  {/* Special Case: Profiles Image Preview */}
  {key === "profiles" || key === "profile" || key === "profile_images" || key === "images" ? (
    content
  ) : value ? (
    <Typography
      sx={{
        fontWeight: 600,
        wordBreak: "break-word",
        textAlign: "left",
      }}
    >
      {content}
    </Typography>
  ) : (
    <Box
      display="flex"
      alignItems="center"
      gap={1}
      sx={{ color: "#888", fontStyle: "italic" }}
    >
      <Info size={16} />
      <Typography>No data available</Typography>
    </Box>
  )}
</Box>


                    );
                  
                  
                })}
              </CardContent>
            </Card>
         
        ))}

</div>

        <Grid item xs={12} sx={{display:"flex", justifyContent:"center"}}>
          <Button
            variant="contained"
            color="success"
            
            size="large"
            onClick={onSubmit}
            sx={{ borderRadius: 2 }}
          >
            Submit full Completed Data
          </Button>
        </Grid>
      
    </Box>
  );
};

export default PreviewScreen;