import React, { useState } from "react";
import { Crown, Bookmark, CurrencyIcon, Currency, Wallet, Receipt, Sparkles, MoonStar, IdCard, RockingChair, LocateFixed, School, WorkflowIcon } from "lucide-react";
import CakeIcon from "@mui/icons-material/Cake";
import GroupsIcon from "@mui/icons-material/Groups";
import SchoolIcon from "@mui/icons-material/School";
import LocationOnIcon from "@mui/icons-material/LocationOn";
import AccessibilityNewIcon from "@mui/icons-material/AccessibilityNew";
import PersonIcon from "@mui/icons-material/Person";
import StarIcon from "@mui/icons-material/Star";
import VisibilityIcon from "@mui/icons-material/Visibility";
import PersonAddIcon from "@mui/icons-material/PersonAdd";
import { motion } from "framer-motion";
import FilterModal from "../../feature/FilterModal";
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 horoscope from "../../assets/images/horoscopeicon.png";
import { useNavigate } from "react-router-dom";
import { Button, Fab } from "@mui/material";
import MessageIcon from "@mui/icons-material/Message";
import PhoneIcon from "@mui/icons-material/Phone";
// Profile Card Component
function ProfileCard({ profile }) {
  const [isLiked, setIsLiked] = useState(false);
  const navigate = useNavigate();
  return (
    <div
      onClick={() => navigate(`/profile-details/${profile.id}`)}
      className="w-full max-w-sm rounded-[10px] shadow-xl overflow-hidden border border-green-200"
    >
      <div className="relative">
        <motion.div
          initial={{ scale: 0 }}
          animate={{ scale: 1 }}
          transition={{ delay: 0.2, type: "spring" }}
          className="absolute top-4 left-4 z-10 bg-red-900 rounded-full p-2 shadow-lg"
        >
          <Crown className="w-5 h-5 text-white" />
        </motion.div>

        <motion.button
          whileHover={{ scale: 1 }}
          whileTap={{ scale: 0.9 }}
          className="absolute top-4 right-4 z-10 bg-white rounded-full px-4 py-2 shadow-lg flex items-center space-x-2 hover:bg-gray-50 transition-colors"
        >
          <Bookmark className="w-4 h-4" />
          <span className="text-[12px] font-medium">Shortlist</span>
        </motion.button>
        <div
          classname=" bg-gray-200 overflow-hidden w-full max-w-sm h-[300px]"
          style={{ height: "300px" }}
        >
          <img
            src={profile.image}
            alt="Profile"
            className="w-full h-full object-cover bg-gray-200"
            style={{
              // objectFit:"inherit",
              objectPosition: "top",
            }}
          />
        </div>
        <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>

        <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">
            Matrimony ID: {profile.id}
          </p>
        </div>
      </div>

      <div className="px-4 pt-2 pb-4 flex flex-col gap-2 bg-white">
        <div className="flex items-center gap-2">
          <VisibilityIcon />
          <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 className="w-4 h-4 text-gray-700" />
            <span className="text-[14px] font-semibold text-gray-900">
               {profile.age} yr
            </span>
          </div>

          <div className="flex items-center gap-2">
            <AccessibilityNewIcon className="w-4 h-4 text-gray-700" />
            <span className="text-[14px] font-semibold text-gray-900">
              {profile.height} cm
            </span>
          </div>

          <div className="flex items-center gap-2">
            <Receipt   className="w-4 h-4 text-gray-700" />
            <span className="text-[14px] font-semibold 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" />
            <span className="text-[14px] font-semibold text-gray-900">
               Aries
            </span>
          </div>

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

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

        <div className="flex items-center gap-2">
          <LocationOnIcon className="w-4 h-4 text-gray-700" />
          <span className="text-[14px] font-semibold text-gray-900">
            {profile.location}
          </span>
        </div>

        <div className="flex gap-3 my-2 justify-between w-full px-[0px]">
          <button 
           onClick={(e) => {
    e.stopPropagation();
    // your decline logic
  }} className="gap-2  px-3 w-[fit-content]   bg-red-50 border-1 border-red-200
            font-400 text-base py-1.5  rounded-[20px] shadow-md  text-[14px]
            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>
            Decline
          </button>
          
          <button 
            className="w-[fit-content]  bg-green-50  border-1 border-green-200  font-400 text-base   text-[14px]
              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>
            )}

            Interest
          </button>
        </div>

        {/* <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={{
              color: "#000000",
              background: "#f5fbff",
              fontWeight: "600",
              borderRadius: "30px",
            }}
          >
            View Details
          </Button>
        </div> */}
      </div>
    </div>
  );
}

// Main Component
export default function MatchesInterface() {
  const navigate = useNavigate();
  const [selectedTab, setSelectedTab] = useState("your-matches");

  const tabs = [
    {
      id: "your-matches",
      icon: <PersonIcon className="w-6 h-6" />,
      title: "Your Matches",
      description: "View all the profiles that match your preferences",
      category: "All Matches",
    },
    {
      id: "shortlisted-by-you",
      icon: <StarIcon className="w-6 h-6" />,
      title: "Shortlisted by you",
      description: "Matches you have shortlisted",
      category: "Based on activity",
    },
    {
      id: "viewed-you",
      icon: <VisibilityIcon className="w-6 h-6" />,
      title: "Viewed you",
      description: "Matches who have viewed your profile",
      category: "Based on activity",
    },
    {
      id: "shortlisted-you",
      icon: <PersonAddIcon className="w-6 h-6" />,
      title: "Shortlisted you",
      description: "Matches who have shortlisted your profile",
      category: "Based on activity",
    },
    {
      id: "viewed-by-you",
      icon: <VisibilityIcon className="w-6 h-6" />,
      title: "Viewed by you",
      description: "Matches you have viewed",
      category: "Based on activity",
    },
    {
      id: "newly-joined",
      icon: <RockingChair className="w-6 h-6" />,
      title: "Newly Joined",
      description: "Matches who Joined within the last 30 days",
      category: "Based on activity",
    },
     {
      id: "location",
      icon: <LocateFixed className="w-6 h-6" />,
      title: "Location matches",
      description: "Matches near your location",
      category: "Based on activity",
    },
     {
      id: "education",
      icon: <School className="w-6 h-6" />,
      title: "Education matches",
      description: "Matches near your education match",
      category: "Based on activity",
    },
    {
      id: "job",
      icon: <WorkflowIcon className="w-6 h-6" />,
      title: "Job matches",
      description: "Matches near your job",
      category: "Based on activity",
    },
  ];

  const profiles = [
    {
      id: "JB2847593",
      name: "Jerome Bell",
      age: 22,
      height: "5.2",
      lastseen: "Last seen 14 Nov 2025",
      education: "BCA / Data analyst",
      location: "Chennai",
      image: bride1,
    },
    {
      id: "SA8392847",
      name: "Sarah Anderson",
      age: 24,
      height: "5.4",
      lastseen: "Last seen 14 Nov 2025",
      education: "MBA / Marketing Manager",
      location: "Bangalore",
      image: bride4,
    },
    {
      id: "PR9384756",
      name: "Priya Reddy",
      age: 23,
      height: "5.3",
      lastseen: "Last seen 14 Nov 2025",
      education: "B.Tech / Software Engineer",
      location: "Hyderabad",
      image: bride2,
    },
    {
      id: "AN4758392",
      name: "Ananya Krishnan",
      age: 25,
      height: "5.5",
      lastseen: "Last seen 14 Nov 2025",
      education: "MD / Doctor",
      location: "Kochi",
      image: bride3,
    },
    {
      id: "AN4758392",
      name: "Ananya Krishnan",
      age: 25,
      height: "5.5",
      lastseen: "Last seen 14 Nov 2025",
      education: "MD / Doctor",
      location: "Kochi",
      image: groom1,
    },
    {
      id: "AN4758392",
      name: "Ananya Krishnan",
      age: 25,
      height: "5.5",
      lastseen: "Last seen 14 Nov 2025",
      education: "MD / Doctor",
      location: "Kochi",
      image: groom2,
    },
    {
      id: "AN4758392",
      name: "Ananya Krishnan",
      age: 25,
      height: "5.5",
      lastseen: "Last seen 14 Nov 2025",
      education: "MD / Doctor",
      location: "Kochi",
      image: groom4,
    },
    {
      id: "AN4758392",
      name: "Ananya Krishnan",
      age: 25,
      height: "5.5",
      lastseen: "Last seen 14 Nov 2025",
      education: "MD / Doctor",
      location: "Kochi",
      image: groom3,
    },
  ];

  let currentCategory = "";

  return (

     <>

    {/* <div className="grid grid-cols-1  md:grid-cols-[300px_auto]  md:px-4 gap-2 md:gap-10" > */}
      <div className="flex flex-col md:flex-row my-6" >
     

      {/* Left Sidebar - Fixed on desktop, scrollable on mobile */}

      <div className="w-full md:w-80">
      <div
         className="rounded-[10px] border border-gray-200 bg-white my-6
    shadow-lg h-[400px] md:h-[600px] overflow-y-auto md:sticky md:top-[150px]"
      >

   <div  className="py-2  px-4 sticky top-0 bg-[#fff] ">
 <h2 className="text-xl font-bold text-green-900 mb-4 mt-6 first:mt-0">
                   Filter Matches </h2>

   </div>

        <div className="py-6 px-4 h-full" >
          {tabs.map((tab) => {
            const showCategory = tab.category !== currentCategory;
            if (showCategory) {
              currentCategory = tab.category;
            }

            return (
              <div key={tab.id}>
                {showCategory && (
                  <h2 className="text-xl font-bold text-gray-900 mb-4 mt-6 first:mt-0">
                    {tab.category}
                  </h2>
                )}
                <div
                  onClick={() => setSelectedTab(tab.id)}
                  className={`p-4 rounded-lg mb-3 cursor-pointer transition-all ${
                    selectedTab === tab.id
                      ? "bg-green-50 border-l-4 border-green-600"
                      : "hover:bg-gray-50"
                  }`}
                >
                  <div className="flex items-start gap-3">
                    <div
                      className={`mt-1 ${
                        selectedTab === tab.id
                          ? "text-green-600"
                          : "text-gray-600"
                      }`}
                    >
                      {tab.icon}
                    </div>
                    <div className="flex-1">
                      <div className="flex items-center justify-between">
                        <h3
                          className={`font-semibold text-base ${
                            selectedTab === tab.id
                              ? "text-green-900"
                              : "text-gray-900"
                          }`}
                        >
                          {tab.title}
                        </h3>
                        <svg
                          className={`w-5 h-5 ${
                            selectedTab === tab.id
                              ? "text-green-600"
                              : "text-gray-400"
                          }`}
                          fill="none"
                          stroke="currentColor"
                          viewBox="0 0 24 24"
                        >
                          <path
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            strokeWidth={2}
                            d="M9 5l7 7-7 7"
                          />
                        </svg>
                      </div>
                      <p className="text-sm text-gray-600 mt-1">
                        {tab.description}
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
</div>
      {/* Right Content Area - Scrollable */}
      <div className=" px-2 py-8 w-full md:w-9/12 ">
        <div className="w-[100%] max-w-[1200px] mx-auto">
          <div className="flex justify-between gap-2 itemes-center mb-8">
            <h1 className="text-[24px] font-bold text-gray-900 ">
              {tabs.find((t) => t.id === selectedTab)?.title}
            </h1>
            <div className="flex gap-2 items-center">
              <img
                src={horoscope}
                onClick={() => {
                  navigate("/horoscoper-generate");
                }}
              />
              <FilterModal />
            </div>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-2">
            {profiles.map((profile) => (
              <ProfileCard key={profile.id} profile={profile} />
            ))}
          </div>
        </div>
      </div>
    </div>














    </>




  );
}
