import React from 'react';
import { useSelector } from 'react-redux';
import { Edit2,Info  } from 'lucide-react';
import {
  Card,
  CardContent,
  CardHeader,
  Typography,
  Box,
  Divider,
  IconButton,
  Button,
  Grid,
} from '@mui/material';

const PreviewScreen = ({ onEdit, onSubmit }) => {
  const formData = useSelector((state) => state.registerform);

  const sections = [
    {
      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,
    },
  ];

  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'>

        {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]) => {
                  // if (value && key !== 'profiles') {


                    // 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 isImage =
      typeof value === "string" &&
      (value.startsWith("http") || value.startsWith("data:image"));
                    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" ? (
    <Box display="flex" gap={0} flexWrap="wrap">
      {value && value.length > 0 ? (
        value.map((imgObj, index) => (
          <img
            key={index}
            src={URL.createObjectURL(imgObj.file)}
            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>
  ) : (
    // Text OR No Data
    <>
      {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>


                    );
                  
                  
                })}
              </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;
