import { useEffect, useRef, useState } from "react";
import { Crown, Bookmark, IdCard, Sparkles, MoonStar, Receipt } from "lucide-react";
import Box from "@mui/material/Box";
import Tab from "@mui/material/Tab";
import TabContext from "@mui/lab/TabContext";
import TabList from "@mui/lab/TabList";
import TabPanel from "@mui/lab/TabPanel";
import { useNavigate } from "react-router-dom";
import ChatBubbleOutlineIcon from '@mui/icons-material/ChatBubbleOutline';
import MessageIcon from '@mui/icons-material/Message';
import PhoneIcon from '@mui/icons-material/Phone';
import { Button, Fab } from "@mui/material";
import VisibilityIcon from '@mui/icons-material/Visibility';
import GridViewIcon from '@mui/icons-material/GridView';

import BookmarkAddOutlinedIcon from "@mui/icons-material/BookmarkAddOutlined";
import ShareOutlinedIcon from "@mui/icons-material/ShareOutlined";
import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
import BlockIcon from "@mui/icons-material/Block";
import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
import { Modal,  } from "@mui/material";
import {
  Dialog,
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle
} from "@mui/material";

import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
import ReportModal from "../components/common/ReportModal";
import ShareModal from "../components/common/ShareModal";
import toast from "react-hot-toast";

import bride1 from "../assets/images/bride1.jpg";
import bride2 from "../assets/images/bride2.jpg";
import bride3 from "../assets/images/bride3.jpg";
import bride4 from "../assets/images/bride4.jpg";

import groom1 from "../assets/images/groom1.jpg";
import groom2 from "../assets/images/groom2.jpg";
import groom3 from "../assets/images/groom3.jpg";
import groom4 from "../assets/images/groom4.jpg";
import frame from "../assets/images/frame1.jpg"
import "../styles/addon.css"

// Icons as inline SVG components
const CakeIcon = () => (
  <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
    <path d="M12 6c1.11 0 2-.9 2-2 0-.38-.1-.73-.29-1.03L12 0l-1.71 2.97c-.19.3-.29.65-.29 1.03 0 1.1.9 2 2 2zm4.6 9.99l-1.07-1.07-1.08 1.07c-1.3 1.3-3.58 1.31-4.89 0l-1.07-1.07-1.09 1.07C6.75 16.64 5.88 17 4.96 17c-.73 0-1.4-.23-1.96-.61V21c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-4.61c-.56.38-1.23.61-1.96.61-.92 0-1.79-.36-2.44-1.01zM18 9h-5V7h-2v2H6c-1.66 0-3 1.34-3 3v1.54c0 1.08.88 1.96 1.96 1.96.52 0 1.02-.2 1.38-.57l2.14-2.13 2.13 2.13c.74.74 2.03.74 2.77 0l2.14-2.13 2.13 2.13c.37.37.86.57 1.38.57 1.08 0 1.96-.88 1.96-1.96V12C21 10.34 19.66 9 18 9z" />
  </svg>
);

const AccessibilityIcon = () => (
  <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
    <path d="M12 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm9 7h-6v13h-2v-6h-2v6H9V9H3V7h18v2z" />
  </svg>
);

const GroupsIcon = () => (
  <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
    <path d="M12 12.75c1.63 0 3.07.39 4.24.9 1.08.48 1.76 1.56 1.76 2.73V18H6v-1.61c0-1.18.68-2.26 1.76-2.73 1.17-.52 2.61-.91 4.24-.91zM4 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm1.13 1.1c-.37-.06-.74-.1-1.13-.1-.99 0-1.93.21-2.78.58C.48 14.9 0 15.62 0 16.43V18h4.5v-1.61c0-.83.23-1.61.63-2.29zM20 13c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm4 3.43c0-.81-.48-1.53-1.22-1.85-.85-.37-1.79-.58-2.78-.58-.39 0-.76.04-1.13.1.4.68.63 1.46.63 2.29V18H24v-1.57zM12 6c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3z" />
  </svg>
);

const SchoolIcon = () => (
  <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
    <path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z" />
  </svg>
);

const LocationIcon = () => (
  <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
    <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" />
  </svg>
);

// Profile Card Component
function ProfileCard({ profile,activeTab ,handleDelete}) {
  const [isLiked, setIsLiked] = useState(false);
const navigate = useNavigate();
const [openMenu, setOpenMenu] = useState(false);
const menuRef = useRef(null);
const [openReport, setOpenReport] = useState(false);
const [openShare, setOpenShare] = useState(false);
 const [openBlockConfirm, setOpenBlockConfirm] = useState(false);
const baseUrl = window.location.origin;  

const profileUrl = `${baseUrl}/profile-details/${profile.id}`;


useEffect(() => {
  function handleClickOutside(event) {
    if (menuRef.current && !menuRef.current.contains(event.target)) {
      setOpenMenu(false);
    }
  }

  document.addEventListener("mousedown", handleClickOutside);
  return () => {
    document.removeEventListener("mousedown", handleClickOutside);
  };
}, []);


// NEW: Handle block confirmation
  const handleBlockConfirm = () => {
    setOpenBlockConfirm(false);
    setOpenMenu(false);
    toast.success("Profile blocked successfully!", { duration: 2000 });
    // Add your block API call here
  };

const renderMenu = () => {
  if (activeTab === "1") {
    return (
      <>
        <button className="flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-gray-100 rounded-lg transition">
          <BookmarkAddOutlinedIcon className="w-4 h-4" />
          Shortlisted
        </button>

        <button  onClick={() => setOpenShare(true)} className="flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-gray-100 rounded-lg transition">
          <ShareOutlinedIcon className="w-4 h-4" />
          Share
        </button>

        <button  onClick={() => setOpenReport(true)} className="flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-gray-100 rounded-lg transition">
          <ErrorOutlineIcon className="w-4 h-4" />
          Report
        </button>

        <button onClick={() => {
              setOpenMenu(false);
              setOpenBlockConfirm(true);
            }}  className="flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-gray-100 rounded-lg transition">
          <BlockIcon className="w-4 h-4" />
          Block Profile
        </button>
      </>
    );
  }

  if (activeTab === "2") {
    return (
      <>
        <button  onClick={() => setOpenShare(true)} className="flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-gray-100 rounded-lg transition">
          <ShareOutlinedIcon className="w-4 h-4" />
          Share Profile
        </button>

        <button 
         onClick={() => handleDelete(profile.id)}
        className="flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-gray-100 rounded-lg transition">
          <DeleteOutlineIcon className="w-4 h-4" />
          Delete
        </button>
      </>
    );
  }

  if (activeTab === "3") {
    return (
      <>
        <button className="flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-gray-100 rounded-lg transition">
          <BookmarkAddOutlinedIcon className="w-4 h-4" />
          Shortlisted
        </button>

        <button  onClick={() => setOpenShare(true)} className="flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-gray-100 rounded-lg transition">
          <ShareOutlinedIcon className="w-4 h-4" />
          Share
        </button>

        <button  onClick={() => setOpenReport(true)}  className="flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-gray-100 rounded-lg transition">
          <ErrorOutlineIcon className="w-4 h-4" />
          Report
        </button>

        <button onClick={() => {
              setOpenMenu(false);
              setOpenBlockConfirm(true);
            }} className="flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-gray-100 rounded-lg transition">
          <BlockIcon className="w-4 h-4" />
          Block Profile
        </button>
      </>
    );
  }

  return null;
};


  return (

    <>
    <ReportModal open={openReport} onClose={() => setOpenReport(false)} />
<ShareModal
  open={openShare}
  onClose={() => setOpenShare(false)}
  url={profileUrl}
/>


{/* NEW: Block Confirmation Dialog */}
      <Dialog
        open={openBlockConfirm}
        onClose={() => setOpenBlockConfirm(false)}
        maxWidth="xs"
        fullWidth
      >
        <DialogTitle sx={{ fontWeight: 600, color: '#A70710' }}>
          <BlockIcon sx={{ fontSize: 24, mr: 1, verticalAlign: 'middle' }} />
          Block Profile
        </DialogTitle>
        <DialogContent>
          <DialogContentText sx={{ color: 'grey.700', lineHeight: 1.6 }}>
            Are you sure you want to block {profile.name}? This action cannot be undone and they will no longer be able to contact you.
          </DialogContentText>
        </DialogContent>
        <DialogActions sx={{ p: 2, pt: 0 }}>
          <Button 
            onClick={() => setOpenBlockConfirm(false)}
            sx={{ 
              textTransform: 'none', 
              borderRadius: '20px',
              color: 'grey.600'
            }}
          >
            Cancel
          </Button>
          <Button 
            onClick={handleBlockConfirm}
            variant="contained"
            sx={{ 
              backgroundColor: '#A70710',
              textTransform: 'none',
              borderRadius: '20px',
              fontWeight: 600,
              '&:hover': {
                backgroundColor: '#8e060d'
              }
            }}
            startIcon={<BlockIcon />}
          >
            Block
          </Button>
        </DialogActions>
      </Dialog>


    
     <div 
     onClick={() => navigate(`/profile-details/${profile.id}`)}
    className="w-full rounded-[10px] shadow-xl overflow-hidden border border-green-200">
      {/* Profile Image Section */}
      <div className="relative">
        {/* Premium Badge */}
        {profile.isPremium && (
          <div className="absolute top-4 left-4 z-10 bg-[#DF1D46] rounded-full p-2 shadow-lg">
            <Crown className="w-5 h-5 text-white" />
          </div>
        )}

      {/* Shortlist / Options Button */}


      {activeTab !== "4" && (
<div className="absolute top-4 right-4 z-20" ref={menuRef}>
  <button
    onClick={(e) => {
      e.stopPropagation();
      setOpenMenu(!openMenu);
    }}
    className="bg-white rounded-full w-8 h-8 flex items-center justify-center shadow-lg hover:bg-gray-50 transition"
  >
    <GridViewIcon className="w-4 h-4" />
  </button>

  {/* Dropdown Menu */}
  {openMenu && (
    <div
      onClick={(e) => e.stopPropagation()}
      className="absolute right-0 mt-1 w-40 bg-white rounded-xl shadow-[0_4px_20px_rgba(0,0,0,0.1)] border p-0 space-y-1"
    >

{renderMenu()}


     
    </div>
  )}
</div>
      )}



<div 
classname="profile-img-box overflow-hidden w-full max-w-sm h-[300px]"
 style={{height:"300px",
  backgroundImage:`url(${frame})`,
  backgroundRepeat:"no-repeat",
  backgroundPosition:"center",
  backgroundSize:"cover",
  



 }}>

        <img
          src={profile.image}
          alt="Profile"
          className="w-full h-full object-cover"
        />
</div>
        {/* White Gradient Overlay */}
        <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.6) 40%, rgb(255, 255, 255) 100%)",
          }}
        ></div>

        {/* Profile Info Overlay */}
        <div className="absolute bottom-0 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">
             ID: {profile.matrimonyId}
          </p>
        </div>
      </div>

      {/* Profile Details */}
      <div className="px-4 pt-2 pb-4 flex flex-col gap-2 bg-white">
{(activeTab === "1" || activeTab === "2" || activeTab === "3") && (
  <>
  <div className="flex items-center gap-2">
          <VisibilityIcon sx={{color:"#787777ff", fontSize:"18px"}}  />
          <span className="text-[14px]  text-gray-900">
            {profile.lastseen}
          </span>
        </div>
  
  </>
)}

        <div className="flex items-center gap-4">
          <div className="flex items-center gap-2">
            <CakeIcon sx={{color:"#787777ff", fontSize:"18px"}} />
            <span className="text-[14px]  text-gray-900">
             {profile.age} yr
            </span>
          </div>
          <div className="flex items-center gap-2">
            <AccessibilityIcon sx={{color:"#787777ff", fontSize:"18px"}} />
            <span className="text-[14px]  text-gray-900">
             {profile.height} cm
            </span>
          </div>

           <div className="flex items-center gap-2">
                      <Receipt   className="w-4 h-4 text-gray-700 font-semibold" />
                      <span className="text-[14px] font-400 text-gray-900">
                        5 - 10 LPA
                      </span>
                    </div>
        </div>

         <div className="flex items-center gap-4">
                  <div className="flex items-center gap-2">
                    <MoonStar  className="w-4 h-4 text-gray-700 font-semibold" />
                    <span className="text-[14px] font-400 text-gray-900">
                       Aries
                    </span>
                  </div>
        
                  <div className="flex items-center gap-2">
                    <Sparkles  className="w-4 h-4 text-gray-700 font-semibold" />
                    <span className="text-[14px] font-400 text-gray-900">
                     Scorpio
                    </span>
                  </div>
        
                  <div className="flex items-center gap-2">
                    <IdCard    className="w-4 h-4 text-gray-700 font-bold" />
                    <span className="text-[14px] font-400 text-gray-900">
                     Bramin
                    </span>
                  </div>
                </div>

        
        <div className="flex items-center gap-2">
          <LocationIcon  className="text-red-900" />
          <span className="text-[14px]  text-gray-900">
            {profile.location}
          </span>
        </div>

  

 {/* Action Buttons */}

 {(activeTab === "1" || activeTab === "2") && (
           <div className="flex gap-3 my-2 justify-between w-full px-[0px]">
          <button
           onClick={(e) => {
    e.stopPropagation();
    // your decline logic
  }}
          className="gap-1  px-2 w-[fit-content]   bg-red-50 border-1 border-red-200   
            font-600 text-[12px] py-2  rounded-[20px] shadow-md 
            hover:shadow-lg transition-all duration-300
             flex items-center justify-center transform hover:scale-95">
            <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M18 6L6 18M6 6l12 12" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
            Reject 
          </button>
          
          <button 
            className="w-[fit-content]  bg-green-50  border-1 border-green-200 font-600 text-[12px]
              rounded-[20px] px-3 gap-2 py-1 shadow-lg hover:shadow-xl transition-all duration-300
              transform hover:scale-105 flex items-center justify-center"
            onClick={(e) =>{

                e.stopPropagation();
                setIsLiked(!isLiked);
            } }
          >
            {isLiked ? (
              <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" fill="#EF4444"/>
              </svg>
            ) : (
              <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            )}

            Accept
          </button>
        </div>

          )}

{activeTab === "3" && (

  <>
  
   <div className="flex gap-3 my-2 justify-between w-full px-[0px]">
   <div className="flex gap-2">

<Fab size="medium" color="primary" aria-label="add">
  <MessageIcon   />
</Fab>

<Fab size="medium" color="secondary" aria-label="add">
  <PhoneIcon   />
</Fab>

   </div>

   <Button variant="contained" color="#f5fbff"  onClick={(e) =>{ e.stopPropagation();
navigate(`/profile-details/${profile.id}`)}
   }  sx={{fontSize:"12px",color:"#000000", background:"#f5fbff",fontWeight:"500", borderRadius:"5px", padding:"5px 8px"}}>

View Details
   </Button>

   </div>
  
  
  </>
)}


  {activeTab === "4" && ( <>
  
  <div className="flex items-center gap-1 flex-wrap">
          <div className="flex items-center gap-2">
            <VisibilityIcon />
            <span className="text-[14px]  text-gray-900">
            Received Interest 14 Nov 2025
            </span>
          </div>
          <div className="flex items-center gap-2">
            <VisibilityIcon />
            <span className="text-[14px]  text-gray-900">
              Rejected 15 Nov 2025
            </span>
          </div>
        </div>
  </>)}

      </div>
    </div>
    
<style>
{`
  .profile-img-box {
    background-image: url("../assets/images/frame1.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    padding: 20px;
  }
`}
</style>


    </>
   
  );
}

// Main Component
export default function InterestSendPage() {
  const [value, setValue] = useState("2");

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

   const [intreasteactiveTab, setIntreasteactiveTab] = useState("receivedintreaste");

  // Sample data for different categories
  const profilesData = {
    received: [
      {
        id: 1,
        name: "Priya Sharma",
        matrimonyId: "PS2847593",
        age: 24,
        height: "5.4",
        lastseen: "Last seen 4 Nov 2025",
        education: "MBA / Marketing Manager",
        location: "Mumbai",
        image:
          bride1,
        isPremium: true,
      },
      {
        id: 2,
        name: "Ananya Reddy",
        matrimonyId: "AR2847594",
        age: 23,
        height: "5.3",
        lastseen: "Last seen 4 Nov 2025",
        education: "B.Tech / Software Engineer",
        location: "Hyderabad",
        image:
          bride2,
        isPremium: false,
      },
      {
        id: 3,
        name: "Divya Patel",
        matrimonyId: "DP2847595",
        age: 25,
        height: "5.5",
        lastseen: "Last seen 4 Nov 2025",
        education: "CA / Chartered Accountant",
        location: "Ahmedabad",
        image:
         bride3,
        isPremium: true,
      },
      {
        id: 4,
        name: "Divya Patel",
        matrimonyId: "DP2847595",
        age: 25,
        height: "5.5",
        lastseen: "Last seen 4 Nov 2025",
        education: "CA / Chartered Accountant",
        location: "Ahmedabad",
        image:
         groom2,
        isPremium: true,
      },
    ],
    sent: [
      {
        id: 5,
        name: "Kavya Iyer",
        matrimonyId: "KI2847596",
        age: 22,
        height: "5.2",
        lastseen: "Last seen 4 Nov 2025",
        education: "BCA / Data Analyst",
        location: "Chennai",
        image:
          bride4,
        isPremium: true,
      },
      {
        id: 6,
        name: "Neha Singh",
        matrimonyId: "NS2847597",
        age: 26,
        height: "5.6",
        lastseen: "Last seen 4 Nov 2025",
        education: "MD / Doctor",
        location: "Delhi",
        image:
          bride1,
        isPremium: false,
      },
      {
        id: 7,
        name: "Neha Singh",
        matrimonyId: "NS2847597",
        age: 26,
        height: "5.6",
        lastseen: "Last seen 4 Nov 2025",
        education: "MD / Doctor",
        location: "Delhi",
        image:
          bride2,
        isPremium: false,
      },
       {
        id: 8,
        name: "Neha Singh",
        matrimonyId: "NS2847597",
        age: 26,
        height: "5.6",
        lastseen: "Last seen 4 Nov 2025",
        education: "MD / Doctor",
        location: "Delhi",
        image:
          bride3,
        isPremium: false,
      },
    ],
    accepted: [
      {
        id: 9,
        name: "Shreya Nair",
        matrimonyId: "SN2847598",
        age: 24,
        height: "5.4",
        lastseen: "Last seen 4 Nov 2025",
        education: "B.Sc / Nurse",
        location: "Kochi",
        image:
          groom1,
        isPremium: true,
      },
      {
        id: 10,
        name: "Meera Desai",
        matrimonyId: "MD2847599",
        age: 23,
        height: "5.3",
       lastseen: "Last seen 4 Nov 2025",
        education: "BBA / HR Manager",
        location: "Pune",
        image:
          groom2,
        isPremium: false,
      },
      {
        id: 11,
        name: "Riya Kumar",
        matrimonyId: "RK2847600",
        age: 25,
        height: "5.5",
       lastseen: "Last seen 4 Nov 2025",
        education: "M.Tech / Project Manager",
        location: "Bangalore",
        image:
          groom3,
        isPremium: true,
      },
      {
        id: 12,
        name: "Riya Kumar",
        matrimonyId: "RK2847600",
        age: 25,
        height: "5.5",
       lastseen: "Last seen 4 Nov 2025",
        education: "M.Tech / Project Manager",
        location: "Bangalore",
        image:
          groom1,
        isPremium: true,
      },
    ],
    rejected: [
      {
        id: 13,
        name: "Sanya Joshi",
        matrimonyId: "SJ2847601",
        age: 27,
        height: "5.7",
        lastseen: "Last seen 4 Nov 2025",
        education: "LLB / Lawyer",
        location: "Nagpur",
        image:
         groom4,
        isPremium: false,
      },
      {
        id: 14,
        name: "Sanya Joshi",
        matrimonyId: "SJ2847601",
        age: 27,
        height: "5.7",
        lastseen: "Last seen 4 Nov 2025",
        education: "LLB / Lawyer",
        location: "Nagpur",
        image:
         groom3,
        isPremium: false,
      },
      {
        id: 15,
        name: "Sanya Joshi",
        matrimonyId: "SJ2847601",
        age: 27,
        height: "5.7",
        lastseen: "Last seen 4 Nov 2025",
        education: "LLB / Lawyer",
        location: "Nagpur",
        image:
         bride1,
        isPremium: false,
      },
       {
        id: 16,
        name: "Sanya Joshi",
        matrimonyId: "SJ2847601",
        age: 27,
        height: "5.7",
        lastseen: "Last seen 4 Nov 2025",
        education: "LLB / Lawyer",
        location: "Nagpur",
        image:
         bride2,
        isPremium: false,
      },
    ],
  };


 // Step 1: Use state for profiles
const [profiles, setProfiles] = useState({
  received: [...profilesData.received],
  sent: [...profilesData.sent],
  accepted: [...profilesData.accepted],
  rejected: [...profilesData.rejected],
});

// Corrected handleDelete to update profiles state properly
  const handleDelete = (id) => {
    setProfiles((prev) => {
      const updated = { ...prev };
      Object.keys(updated).forEach((key) => {
        updated[key] = updated[key].filter((p) => p.id !== id);
      });
      return updated;
    });
    toast.success("Profile deleted successfully!", {
      duration: 2000,
    });
  };


  return (
    <div className=" py-8 px-0">
      <div className="max-w-[1400px] mx-auto">
        {/* Header */}

          <div className="flex justify-center mb-8 items-center gap-4">
        <div className={`cursor-pointer text-center bg-green-50 p-4 rounded-[10px]  mb-8  ${
              intreasteactiveTab === "receivedintreaste"
                ? "border-1 border-green-600 text-green-600"
                : "text-gray-500 hover:text-gray-700"
            }`}
               onClick={() => setIntreasteactiveTab("receivedintreaste")}>
          <h1 className="text-xl md:text-xl font-bold text-gray-800 mb-2">
         Received  Interest 
          </h1>
          <p className="text-gray-600">
            Manage your matrimony profile interests
          </p>
        </div>
        <div className={`cursor-pointer text-center mb-8 bg-green-50 p-4 rounded-[10px] ${
              intreasteactiveTab === "sendintreaste"
                ? "border-1 border-green-600 text-green-600"
                : "text-gray-500 hover:text-gray-700"
            }`}   onClick={() => setIntreasteactiveTab("sendintreaste")}>
          <h1 className="text-xl md:text-xl font-bold text-gray-800 mb-2">
         Send  Interest 
          </h1>
          <p className="text-gray-600">
            Manage your matrimony profile interests
          </p>
        </div>
</div>
  {intreasteactiveTab === "receivedintreaste" && (

<>

 {/* MUI Tabs */}
        <Box
         sx={{ width: "100%", maxWidth:"1400px", typography: "body1" }}
         >
          <TabContext value={value}>
            <Box
              sx={{
               
                width: "100%",
                maxWidth: "800px",
                margin: "0px auto",
                marginBottom:"40px",
                display:"flex",
                justifyContent:"center",
                background:"#f5fbff",
                borderRadius:"10px",
                padding:"20px 15px",
              }}
            >
              <TabList
                onChange={handleChange}
                aria-label="interest management tabs"
                variant="scrollable"
                // scrollButtons="auto"
                scrollButtons="on"
                allowScrollButtonsMobile
                sx={{
                  "& .MuiTabs-scrollButtons": {
                    display: "flex !important", // force visible
                    alignItems: "center",
                    justifyContent: "center",
                    width: "36px",
                    height: "36px",
                    borderRadius: "50%",
                    backgroundColor: "#034E08",
                    color: "white",
                    margin: "0 6px",
                    boxShadow: "0 2px 5px rgba(0,0,0,0.2)",

                    
                  },

                  "& .MuiTabs-scrollButtons:hover": {
                    backgroundColor: "#046b0b",
                  },

                  "& .MuiTabs-scrollButtons.Mui-disabled": {
                    opacity: 0.4,
                    backgroundColor: "#9bcf9d",
                  },

                  "& .MuiTab-root": {
                    fontSize: { xs: "14px", sm: "16px" },
                    fontWeight: 600,
                    textTransform: "none",
                    minWidth: { xs: 120, sm: 150 },
                    color: "#666",
                  },
                  "& .Mui-selected": {
                    color: "#034E08 !important",
                  },
                  "& .MuiTabs-indicator": {
                    backgroundColor: "#034E08",
                    height: 3,
                  },
                }}
              >
                {/* <Tab label="All " value="1" /> */}
                <Tab label="Pending" value="2" />
                <Tab label="Accepted" value="3" />
                <Tab label="Rejected" value="4" />
              </TabList>
            </Box>

            {/* Received Requests */}
            <TabPanel value="1" sx={{ padding: "10px 0" }}>
              <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 
              w-[100%] max-w-[1400px] mx-auto">
                {profilesData.received.map((profile) => (
                   <ProfileCard key={profile.id} profile={profile} activeTab={value} />
                ))}
              </div>
            </TabPanel>

            {/* Sent Requests */}
            <TabPanel value="2" sx={{ padding: "24px 0" }}>
              <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 w-[100%] max-w-[1400px] mx-auto">
                {profilesData.sent.map((profile) => (
                 <ProfileCard key={profile.id} profile={profile} activeTab={value}  handleDelete={handleDelete}/>
                ))}
              </div>
            </TabPanel>

            {/* Accepted */}
            <TabPanel value="3" sx={{ padding: "24px 0" }}>
              <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 w-[100%] max-w-[1400px] mx-auto">
                {profilesData.accepted.map((profile) => (
                  <ProfileCard key={profile.id} profile={profile} activeTab={value} />
                ))}
              </div>
            </TabPanel>

            {/* Rejected */}
            <TabPanel value="4" sx={{ padding: "24px 0" }}>
              <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 w-[100%] max-w-[1400px] mx-auto">
                {profilesData.rejected.map((profile) => (
                  <ProfileCard key={profile.id} profile={profile} activeTab={value} />
                ))}
              </div>
            </TabPanel>
          </TabContext>
        </Box>


</>
      )}   




       {intreasteactiveTab === "sendintreaste" && (

<>

 {/* MUI Tabs */}
        <Box
         sx={{ width: "100%", maxWidth:"1400px", typography: "body1" }}
         >
          <TabContext value={value}>
            <Box
              sx={{
               
                width: "100%",
                maxWidth: "800px",
                margin: "0px auto",
                marginBottom:"40px",
                display:"flex",
                justifyContent:"center",
                background:"#f5fbff",
                borderRadius:"10px",
                padding:"20px 15px",
              }}
            >
              <TabList
                onChange={handleChange}
                aria-label="interest management tabs"
                variant="scrollable"
                // scrollButtons="auto"
                scrollButtons="on"
                allowScrollButtonsMobile
                sx={{
                  "& .MuiTabs-scrollButtons": {
                    display: "flex !important", // force visible
                    alignItems: "center",
                    justifyContent: "center",
                    width: "36px",
                    height: "36px",
                    borderRadius: "50%",
                    backgroundColor: "#034E08",
                    color: "white",
                    margin: "0 6px",
                    boxShadow: "0 2px 5px rgba(0,0,0,0.2)",

                    
                  },

                  "& .MuiTabs-scrollButtons:hover": {
                    backgroundColor: "#046b0b",
                  },

                  "& .MuiTabs-scrollButtons.Mui-disabled": {
                    opacity: 0.4,
                    backgroundColor: "#9bcf9d",
                  },

                  "& .MuiTab-root": {
                    fontSize: { xs: "14px", sm: "16px" },
                    fontWeight: 600,
                    textTransform: "none",
                    minWidth: { xs: 120, sm: 150 },
                    color: "#666",
                  },
                  "& .Mui-selected": {
                    color: "#034E08 !important",
                  },
                  "& .MuiTabs-indicator": {
                    backgroundColor: "#034E08",
                    height: 3,
                  },
                }}
              >
                {/* <Tab label="All " value="1" /> */}
                <Tab label="Pending" value="2" />
                <Tab label="Accepted" value="3" />
                <Tab label="Rejected" value="4" />
              </TabList>
            </Box>

            {/* Received Requests */}
            <TabPanel value="1" sx={{ padding: "10px 0" }}>
              <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 
              w-[100%] max-w-[1400px] mx-auto">
                {profilesData.received.map((profile) => (
                   <ProfileCard key={profile.id} profile={profile} activeTab={value} />
                ))}
              </div>
            </TabPanel>

            {/* Sent Requests */}
            <TabPanel value="2" sx={{ padding: "24px 0" }}>
              <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 w-[100%] max-w-[1400px] mx-auto">
                {profilesData.sent.map((profile) => (
                 <ProfileCard key={profile.id} profile={profile} activeTab={value}  handleDelete={handleDelete}/>
                ))}
              </div>
            </TabPanel>

            {/* Accepted */}
            <TabPanel value="3" sx={{ padding: "24px 0" }}>
              <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 w-[100%] max-w-[1400px] mx-auto">
                {profilesData.accepted.map((profile) => (
                  <ProfileCard key={profile.id} profile={profile} activeTab={value} />
                ))}
              </div>
            </TabPanel>

            {/* Rejected */}
            <TabPanel value="4" sx={{ padding: "24px 0" }}>
              <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 w-[100%] max-w-[1400px] mx-auto">
                {profilesData.rejected.map((profile) => (
                  <ProfileCard key={profile.id} profile={profile} activeTab={value} />
                ))}
              </div>
            </TabPanel>
          </TabContext>
        </Box>


</>
      )}   
            


      </div>
    </div>
  );
}
