import { useState } from "react";
import { motion } from "framer-motion";
import { Crown, Bookmark } from "lucide-react";
import { useNavigate } from "react-router-dom";
import CakeIcon from "@mui/icons-material/Cake";
import AccessibilityNewIcon from "@mui/icons-material/AccessibilityNew";
import GroupsIcon from "@mui/icons-material/Groups";
import SchoolIcon from "@mui/icons-material/School";
import LocationOnIcon from "@mui/icons-material/LocationOn";

const buildDefaultRows = (profile) => [
  [
    {
      icon: <CakeIcon className="w-4 h-4 text-gray-700" />,
      text: `Age: ${profile?.age ?? "-"}`,
    },
    {
      icon: <AccessibilityNewIcon className="w-4 h-4 text-gray-700" />,
      text: `Height: ${profile?.height ?? "-"}`,
    },
  ],
  [
    {
      icon: <GroupsIcon className="w-4 h-4 text-gray-700" />,
      text:
        profile?.religion ||
        profile?.caste ||
        profile?.community ||
        "-",
    },
  ],
  [
    {
      icon: <SchoolIcon className="w-4 h-4 text-gray-700" />,
      text: profile?.education || profile?.qualification || "-",
    },
  ],
  [
    {
      icon: <LocationOnIcon className="w-4 h-4 text-gray-700" />,
      text: profile?.location || "-",
    },
  ],
];

const getProfileIdText = (profile) =>
  profile?.userId ||
  profile?.idNumber ||
  profile?.matrimonyId ||
  profile?.id ||
  "-";

const ProfileCardItem = ({
  profile,
  metaRows,
  showActions = true,
  showShortlist = true,
  shortlistLabel = "Shortlist",
  declineLabel = "Decline",
  interestLabel = "Interest",
  onDecline,
  onInterest,
  onShortlist,
  onCardClick,
  detailsPath,
  className = "",
}) => {
  const [isLiked, setIsLiked] = useState(false);
  const navigate = useNavigate();
  const rows = metaRows?.length ? metaRows : buildDefaultRows(profile);

  const handleCardClick = () => {
    if (onCardClick) {
      onCardClick(profile);
      return;
    }
    const target = detailsPath || `/profile-details/${profile?.id ?? ""}`;
    if (target) {
      navigate(target);
    }
  };

  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.9 }}
      whileInView={{ opacity: 1, scale: 1 }}
      viewport={{ once: true }}
      transition={{ duration: 0.5 }}
      onClick={handleCardClick}
      className={`w-full max-w-sm rounded-[10px] shadow-xl overflow-hidden border-1 border-green-200 ${className}`}
    >
      <div className="relative">
        {profile?.isPremium && (
          <motion.div
            initial={{ scale: 0 }}
            animate={{ scale: 1 }}
            transition={{ delay: 0.2, type: "spring" }}
            className="absolute top-4 left-4 z-10 bg-orange-500 rounded-full p-2 shadow-lg"
          >
            <Crown className="w-5 h-5 text-white" />
          </motion.div>
        )}

        {showShortlist && (
          <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"
            onClick={(e) => {
              e.stopPropagation();
              onShortlist?.(profile);
            }}
          >
            <Bookmark className="w-4 h-4" />
            <span className="text-[12px] font-medium">{shortlistLabel}</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?.name || "Profile"}
            className="w-full h-full object-cover"
            loading="lazy"
            decoding="async"
          />
        </div>

        <div
          className="absolute bottom-0 left-0 right-0 h-35 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: {getProfileIdText(profile)}
          </p>
        </div>
      </div>

      <div
        className="px-4 pt-[-2px] pb-4 flex flex-col gap-2"
        style={{ background: "rgb(255, 255, 255)" }}
      >
        {rows.map((row, rowIndex) => (
          <div key={rowIndex} className="flex items-center gap-4">
            {row.map((item, itemIndex) => (
              <div key={itemIndex} className="flex items-center gap-2">
                {item.icon}
                <span className="text-[14px] font-600 text-gray-900">
                  {item.text}
                </span>
              </div>
            ))}
          </div>
        ))}

        {showActions && (
          <div className="flex gap-3 my-2 justify-between w-full px-[0px]">
            <button
              onClick={(e) => {
                e.stopPropagation();
                onDecline?.(profile);
              }}
              className="gap-2 px-3 w-[fit-content] bg-[#A70710] hover:bg-red-600 text-white 
            font-semibold text-base 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>
              {declineLabel}
            </button>

            <button
              className="w-[fit-content] bg-[#034E08] hover:bg-green-700 text-white font-semibold text-base 
              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((prev) => !prev);
                onInterest?.(profile);
              }}
            >
              {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>
              )}
              {interestLabel}
            </button>
          </div>
        )}
      </div>
    </motion.div>
  );
};

export default ProfileCardItem;
