import React, { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { useNavigate } from "react-router-dom";
import { Crown, Bookmark, X, Heart, Eye, Phone, MessageSquare, ChevronLeft } from "lucide-react";

import VisibilityIcon from "@mui/icons-material/Visibility";
import axiosInstance, { apiForFiles } from "../../api/axiosInstance";

import { API_ENDPOINTS } from "../../api/apiEndpoints";
import UpgradeModal from "./UpgradeModal";
import toast from "react-hot-toast";

// Custom Icons
import personIcon from "../../assets/images/personicon.svg";
import religionIcon from "../../assets/images/religonicon.svg";
import locationIcon from "../../assets/images/locationicon.svg";
import cashIcon from "../../assets/images/cashicon.svg";

import { useQuery, useQueryClient } from "@tanstack/react-query";

import { shortlistProfile, sendInterest, declineProfile } from "../../services/shortlistapi";
import { sendMessage } from "../../services/chatApi";

import { getHeaderDetails } from "../../api/preview.api";

export default function ProfileCardUI({ profile }) {
  const [isLiked, setIsLiked] = useState(false);
  const [isShortlisted, setIsShortlisted] = useState(profile.is_shortlisted === 1);
  const [isUpgradeModalOpen, setIsUpgradeModalOpen] = useState(false);
  const [isViewContactModalOpen, setIsViewContactModalOpen] = useState(false);
  const [isInterestStatusModalOpen, setIsInterestStatusModalOpen] = useState(false);
  const [isInterestRejectedModalOpen, setIsInterestRejectedModalOpen] = useState(false);
  const [isContactSuccessModalOpen, setIsContactSuccessModalOpen] = useState(false);
  const [isChatConfirmModalOpen, setIsChatConfirmModalOpen] = useState(false);
  const [isCreatingChat, setIsCreatingChat] = useState(false);
  const [modalTitle, setModalTitle] = useState("");


  const [modalMessage, setModalMessage] = useState("");
  const [unlockedMobile, setUnlockedMobile] = useState(null);
  
  const navigate = useNavigate();
  const queryClient = useQueryClient();




  const { data: headerData } = useQuery({
    queryKey: ["headerDetails"],
    queryFn: getHeaderDetails,
    staleTime: 60000, // Reuse data for 1 minute
  });

  const isUserPaid = headerData?.myDetails?.is_paid_member === true;

  const handleInterest = async (e) => {
    e.stopPropagation();
    if (!isUserPaid) {
      setIsUpgradeModalOpen(true);
      return;
    }
    try {
      await axiosInstance.post(`${API_ENDPOINTS.INTEREST_SEND}?profile_id=${profile.id}`);
      setIsLiked(true);
      toast.success(`Interest sent to ${profile.name}!`, {
        icon: '❤️',
        style: { borderRadius: '10px', background: '#333', color: '#fff' }
      });
    } catch (error) {
      toast.error("Failed to send interest.");
    }
  };

  const handleDecline = async (e) => {
    e.stopPropagation();
    try {
      await axiosInstance.post(`${API_ENDPOINTS.UPDATE_INTEREST_STATUS}?profile_id=${profile.id}&status=reject`);
      toast.success("Profile declined");
      // Optionally hide card or trigger refresh
    } catch (error) {
      toast.error("Failed to decline profile.");
    }
  };


  const handleCall = (e) => {
    e.stopPropagation();
    if (!isUserPaid) {
      setIsUpgradeModalOpen(true);
      return;
    }

    const interestStatus = (profile.is_send_interest_status || "").toLowerCase();

    if (profile.call_protection === 1) {
      if (profile.is_send_interest) {
        if (interestStatus === 'pending') {
          setModalTitle("Note");
          setModalMessage("An interest request has already been sent for this profile. Please wait for their response");
          setIsInterestStatusModalOpen(true);
          return;
        } else if (interestStatus === 'reject' || interestStatus === 'rejected') {
          setIsInterestRejectedModalOpen(true);
          return;
        }
      }
    }

    _handleCallTap();
  };

  const _handleCallTap = () => {
    const currentMobile = unlockedMobile || profile.mobile_number || "";
    const mobile = currentMobile.toLowerCase();
    if (mobile.includes("upgrade to view")) {
      setIsUpgradeModalOpen(true);
    } else if (mobile.includes("view contact")) {
      setIsViewContactModalOpen(true);
    } else {
      // It's a real number - Show the success modal with the number
      setUnlockedMobile(currentMobile);
      setIsContactSuccessModalOpen(true);
    }
  };



  const handleMessage = (e) => {
    e.stopPropagation();
    
    // 1. Check if chat already exists
    if (profile.chat_id) {
       navigate(`/chat/${profile.chat_id}`);
       return;
    }

    // 2. Check membership
    if (!isUserPaid) {
      setIsUpgradeModalOpen(true);
      return;
    }

    const interestStatus = (profile.is_send_interest_status || "").toLowerCase();

    // 3. Check protection & interest status
    if (profile.chat_protection === 1 || profile.call_protection === 1) {
      if (profile.is_send_interest) {
        if (interestStatus === 'pending') {
          setModalTitle("Note");
          setModalMessage("An interest request has already been sent for this profile. Please wait for their response");
          setIsInterestStatusModalOpen(true);
          return;
        } else if (interestStatus === 'reject' || interestStatus === 'rejected') {
          setIsInterestRejectedModalOpen(true);
          return;
        }
      }
    }

    // 4. Show confirmation dialog
    setIsChatConfirmModalOpen(true);
  };

  const _handleCreateChat = async () => {
    if (isCreatingChat) return;
    
    setIsChatConfirmModalOpen(false);
    setIsCreatingChat(true);
    
    try {
      const response = await axiosInstance.post(API_ENDPOINTS.CHAT_CREATE, { profile_id: profile.id });

      if (response.data?.status === true || response.data?.status === 'success') {
        const newChatId = response.data?.chat_id;
        
        // Send default initiation message manually
        try {
          await sendMessage(newChatId, "This profile has initiated a chat with you");
        } catch (msgErr) {
          console.error("Error sending initial message:", msgErr);
        }

        toast.success("Chat initiated!");
        navigate(`/chat/${newChatId}`);
        queryClient.invalidateQueries();
      }
 else {
        toast.error(response.data?.message || "Could not create chat.");
      }
    } catch (error) {
      console.error("Error creating chat", error);
      toast.error("Failed to start conversation");
    } finally {
      setIsCreatingChat(false);
    }
  };

  const _handleViewContact = async () => {
    setIsViewContactModalOpen(false);
    try {
      const formData = new FormData();
      formData.append("profile_id", profile.id);
      const response = await apiForFiles.post(API_ENDPOINTS.VIEW_CONTACT, formData);




      if (response.data?.status === 'success') {
        const newMobile = response.data?.mobile_number;
        setUnlockedMobile(newMobile);
        setIsContactSuccessModalOpen(true);
        toast.success("Contact details unlocked!");
        // Refresh all queries to update the UI globally
        queryClient.invalidateQueries();
      } else {


        setIsUpgradeModalOpen(true);
      }
    } catch (error) {

      console.error("Error viewing contact", error);
      toast.error("Failed to view contact");
    }
  };

  const handleShortlistClick = async (e) => {
    e.stopPropagation();
    try {
      const res = await axiosInstance.post(`${API_ENDPOINTS.SHORTLIST_API}?profile_id=${profile.id}`);
      if (res.data?.status === "success") {
        setIsShortlisted(!isShortlisted);
        toast.success(res.data.message || "Updated shortlist status");
      }
    } catch (error) {
      toast.error("Failed to update shortlist");
    }
  };



  // Map API fields to UI, handling missing values
  const imageSrc = profile.photo || profile.image || "https://www.thirukalyanam.amrithaa.net/backend/app-assets/images/portrait/small/no-image.png";

  return (
    <>
      <UpgradeModal 
        isOpen={isUpgradeModalOpen} 
        onClose={() => setIsUpgradeModalOpen(false)} 
      />

      {/* View Contact Confirmation Modal */}
      <AnimatePresence>
        {isViewContactModalOpen && (
          <div className="fixed inset-0 z-[10001] flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
            <motion.div 
              initial={{ opacity: 0, scale: 0.9 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.9 }}
              className="bg-white rounded-[32px] p-8 max-w-md w-full shadow-2xl text-center relative"
            >
              <button onClick={() => setIsViewContactModalOpen(false)} className="absolute top-6 left-6 text-gray-400 hover:text-gray-600">
                 <ChevronLeft size={24} />
              </button>
              <h3 className="text-2xl font-bold text-gray-900 mb-6">Note</h3>
              <p className="text-gray-600 mb-8 leading-relaxed">
                You need to view this profile's contact details. If you choose to <span className="text-pink-600 font-bold">"Proceed"</span> one count will be deducted from your subscription.
              </p>
              <div className="flex gap-4">
                <button onClick={() => setIsViewContactModalOpen(false)} className="flex-1 py-4 border border-gray-200 rounded-xl font-bold text-gray-500 hover:bg-gray-50">Cancel</button>
                <button onClick={_handleViewContact} className="flex-1 py-4 bg-[#DF1D46] text-white rounded-xl font-bold hover:bg-red-700 shadow-lg shadow-red-200">Proceed</button>
              </div>
            </motion.div>
          </div>
        )}

        {/* Interest Status Modal (Pending) */}
        {isInterestStatusModalOpen && (
          <div className="fixed inset-0 z-[10001] flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
            <motion.div 
              initial={{ opacity: 0, scale: 0.9 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.9 }}
              className="bg-white rounded-[32px] p-8 max-w-md w-full shadow-2xl text-center"
            >
              <h3 className="text-2xl font-bold text-gray-900 mb-6">{modalTitle}</h3>
              <p className="text-gray-600 mb-8 leading-relaxed">{modalMessage}</p>
              <button onClick={() => setIsInterestStatusModalOpen(false)} className="w-full py-4 bg-[#DF1D46] text-white rounded-xl font-bold hover:bg-red-700">OK</button>
            </motion.div>
          </div>
        )}

        {/* Interest Rejected Modal */}
        {isInterestRejectedModalOpen && (
          <div className="fixed inset-0 z-[10001] flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
            <motion.div 
              initial={{ opacity: 0, scale: 0.9 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.9 }}
              className="bg-white rounded-[32px] p-8 max-w-md w-full shadow-2xl text-center"
            >
              <div className="w-20 h-20 bg-red-50 rounded-full flex items-center justify-center mx-auto mb-6">
                <X size={40} className="text-[#DF1D46]" />
              </div>
              <h3 className="text-2xl font-bold text-gray-900 mb-4">Note</h3>
              <p className="text-gray-600 mb-8 leading-relaxed">
                Your previous interest request was declined. You may resend your interest to this profile
              </p>
              <button onClick={() => setIsInterestRejectedModalOpen(false)} className="w-full py-4 bg-[#DF1D46] text-white rounded-xl font-bold hover:bg-red-700">OK</button>
            </motion.div>
          </div>
        )}

        {/* Contact Success Modal */}
        {isContactSuccessModalOpen && (
          <div className="fixed inset-0 z-[10001] flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
            <motion.div 
              initial={{ opacity: 0, scale: 0.9 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: 0.9 }}
              className="bg-white rounded-[32px] p-8 max-w-md w-full shadow-2xl text-center"
            >
              <div className="w-20 h-20 bg-green-50 rounded-full flex items-center justify-center mx-auto mb-6">
                <Phone size={40} className="text-[#0C8626]" />
              </div>
              <h3 className="text-2xl font-bold text-gray-900 mb-2">Success!</h3>
              <p className="text-gray-500 mb-6">The contact number has been unlocked.</p>
              
              <div className="bg-gray-50 rounded-2xl p-6 mb-8 border border-gray-100 min-h-[80px] flex items-center justify-center">
                <span className="text-3xl font-black text-gray-900 tracking-wider">
                  {unlockedMobile || (!profile.mobile_number?.toLowerCase().includes("view") ? profile.mobile_number : "Fetching...")}
                </span>
              </div>

              <div className="flex gap-4">
                <button 
                  onClick={() => setIsContactSuccessModalOpen(false)} 
                  className="flex-1 py-4 border border-gray-200 rounded-xl font-bold text-gray-500 hover:bg-gray-50"
                >
                  Close
                </button>
                <button 
                  onClick={() => {
                    const finalMobile = unlockedMobile || profile.mobile_number;
                    if (finalMobile) {
                      const cleanMobile = finalMobile.replace(/[^0-9+]/g, '');
                      window.location.href = `tel:${cleanMobile}`;
                    }
                  }} 
                  className="flex-1 py-4 bg-[#0C8626] text-white rounded-xl font-bold hover:bg-green-700 shadow-lg shadow-green-200 flex items-center justify-center gap-2"
                >
                  <Phone size={18} /> Call Now
                </button>
              </div>
            </motion.div>
          </div>
        )}

        {/* Chat Confirmation Modal */}
        {isChatConfirmModalOpen && (() => {
          const currentMobile = profile.mobile_number || "";
          const mobileLower = currentMobile.toLowerCase();
          const isMobileVisible = currentMobile !== "" && 
                                 !mobileLower.includes("upgrade") && 
                                 !mobileLower.includes("view contact");
          
          return (
            <div className="fixed inset-0 z-[10001] flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
              <motion.div 
                initial={{ opacity: 0, scale: 0.9 }}
                animate={{ opacity: 1, scale: 1 }}
                exit={{ opacity: 0, scale: 0.9 }}
                className="bg-white rounded-[32px] p-8 max-w-md w-full shadow-2xl text-center"
              >
                <h3 className="text-2xl font-bold text-gray-900 mb-6">
                  {isMobileVisible ? "Ready to Chat?" : "Note"}
                </h3>
                <p className="text-gray-600 mb-8 leading-relaxed">
                  {isMobileVisible 
                    ? `Are you ready to chat with ${currentMobile}?` 
                    : "Starting a conversation will use 1 chat count. Are you ready to proceed?"}
                </p>
                <div className="flex gap-4">
                  <button 
                    onClick={() => setIsChatConfirmModalOpen(false)} 
                    className="flex-1 py-4 border border-gray-200 rounded-xl font-bold text-gray-500 hover:bg-gray-50"
                  >
                    Cancel
                  </button>
                  <button 
                    onClick={_handleCreateChat} 
                    className={`flex-1 py-4 text-white rounded-xl font-bold transition-all shadow-lg ${isCreatingChat ? "bg-gray-400" : "bg-[#DF1D46] hover:bg-red-700 shadow-red-200"}`}
                  >
                    {isCreatingChat ? "Starting..." : "Proceed"}
                  </button>
                </div>
              </motion.div>
            </div>
          );
        })()}

      </AnimatePresence>



      <div

        onClick={() => navigate(`/profile-details/${profile.id}`)}
        className="w-full max-w-sm rounded-[10px] shadow-xl overflow-hidden border border-green-200 bg-white cursor-pointer hover:shadow-2xl transition-all duration-300"
      >
        <div className="relative">

        {/* Premium Badge */}
        {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-red-900 rounded-full p-2 shadow-lg"
          >
            <Crown className="w-5 h-5 text-white" />
          </motion.div>
        )}

        <motion.button
          whileHover={{ scale: 1.05 }}
          whileTap={{ scale: 0.95 }}
          onClick={handleShortlistClick}
          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 transition-colors ${isShortlisted ? "text-black fill-black" : "text-gray-600"}`} />
          <span className="text-[12px] font-medium text-gray-700">
            {isShortlisted ? "Shortlisted" : "Shortlist"}
          </span>
        </motion.button>


        <div className="bg-gray-200 overflow-hidden w-full max-w-sm h-[300px]">
          <img
            src={imageSrc}
            alt={profile.name}
            className="w-full h-full object-cover bg-gray-200"
            style={{ objectPosition: "top" }}
            onError={(e) => {
              e.target.src = "https://www.thirukalyanam.amrithaa.net/backend/app-assets/images/portrait/small/no-image.png";
            }}
          />
        </div>

        {/* Gradient Overlay */}
        <div className="absolute bottom-0 left-0 right-0 h-24 pointer-events-none" style={{ background: "linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%)" }}></div>

        <div className="absolute bottom-0 left-0 right-0 p-6 pb-2 text-gray-900">
          <h1 className="text-[18px] text-green-900 font-bold mb-1 truncate">{profile.name}</h1>
          <p className="text-[14px] text-gray-700 leading-relaxed font-medium">ID: {profile.member_id || profile.id}</p>
        </div>
      </div>

      <div className="px-5 py-5 -mt-8 bg-white rounded-t-[32px] relative z-[2] shadow-[0_-12px_40px_rgba(0,0,0,0.1)] min-h-[280px] flex flex-col">
        
        <div className="text-left mb-4">

          <h2 className="text-[20px] font-bold text-gray-900 leading-tight">
            {profile.name}
          </h2>
          <div className="flex items-center justify-start gap-3 mt-1.5 text-[11px] font-semibold text-gray-400 uppercase tracking-wider">
            <span>ID: {profile.member_id || profile.id}</span>
            <span className="w-1 h-1 bg-gray-300 rounded-full"></span>
            <span className="flex items-center gap-1">
              <VisibilityIcon sx={{ fontSize: 14 }} /> 
              {profile.last_seen_at && profile.last_seen_at !== "-" ? profile.last_seen_at : "Recently"}
            </span>
          </div>
        </div>

        <div className="space-y-3 mt-2 flex-1">
          {(profile.age || profile.height) && (
            <div className="flex items-center gap-3">
              <div className="w-8 h-8 rounded-full bg-blue-50 flex items-center justify-center flex-shrink-0">
                <img src={personIcon} alt="Person" className="w-4 h-4 opacity-80" />
              </div>
              <span className="text-[13px] font-bold text-gray-700">
                {profile.age ? `${profile.age} yrs` : ""}
                {profile.age && profile.height ? ", " : ""}
                {profile.height ? `${profile.height} cm` : ""}
              </span>
            </div>
          )}

          {(profile.religion_name || profile.caste_name) && (
            <div className="flex items-center gap-3">
              <div className="w-8 h-8 rounded-full bg-pink-50 flex items-center justify-center flex-shrink-0">
                <img src={religionIcon} alt="Religion" className="w-4 h-4 opacity-80" />
              </div>
              <span className="text-[13px] font-bold text-gray-700 truncate">
                {profile.religion_name}
                {profile.religion_name && profile.caste_name ? " / " : ""}
                {profile.caste_name}
              </span>
            </div>
          )}

          {(profile.annual_income_name || profile.income) && (
            <div className="flex items-center gap-3">
              <div className="w-8 h-8 rounded-full bg-green-50 flex items-center justify-center flex-shrink-0">
                <img src={cashIcon} alt="Cash" className="w-4 h-4 opacity-80" />
              </div>
              <span className="text-[13px] font-bold text-gray-700 truncate">
                {profile.annual_income_name || profile.income}
              </span>
            </div>
          )}

          {(profile.district_name || profile.location) && (
            <div className="flex items-center gap-3">
              <div className="w-8 h-8 rounded-full bg-orange-50 flex items-center justify-center flex-shrink-0">
                <img src={locationIcon} alt="Location" className="w-4 h-4 opacity-80" />
              </div>
              <span className="text-[13px] font-bold text-gray-700 truncate">
                {profile.district_name || profile.location}
              </span>
            </div>
          )}
        </div>

        <div className="flex gap-3 mt-6">
          {profile.is_send_interest_received && profile.statusReceived?.toLowerCase() === 'pending' ? (
            <>
              <button 
                onClick={handleInterest} 
                className="flex-1 flex items-center justify-center gap-2 py-3 bg-[#0C8626] text-white rounded-2xl font-bold text-[13px] hover:bg-green-700 transition-all active:scale-[0.98]"
              >
                <Heart size={16} fill="white" /> Accept
              </button>
              <button 
                onClick={handleDecline}
                className="flex-1 flex items-center justify-center gap-2 py-3 bg-white border border-red-200 text-red-600 rounded-2xl font-bold text-[13px] hover:bg-red-50 transition-all active:scale-[0.98]"
              >
                <X size={16} /> Reject
              </button>
            </>
          ) : (!(profile.is_send_interest || isLiked) && !profile.is_send_interest_received) ? (
            <>
              <button 
                onClick={handleInterest}
                className={`flex-[1.2] flex items-center justify-center gap-2 py-3 rounded-2xl font-bold text-[13px] transition-all active:scale-[0.98] shadow-lg shadow-green-900/10 ${isLiked ? "bg-green-100 text-green-700 border border-green-200" : "bg-[#034E08] text-white hover:bg-green-800"}`}
              >
                <Heart size={16} fill={isLiked ? "#034E08" : "white"} />
                {isLiked ? "Sent" : "Interest"}
              </button>
              <button 
                onClick={(e) => { e.stopPropagation(); navigate(`/profile-details/${profile.id}`); }}
                className="flex-1 py-3 bg-gray-50 border border-gray-100 text-gray-600 rounded-2xl font-bold text-[13px] flex items-center justify-center gap-2 hover:bg-gray-100 transition-all active:scale-[0.98]"
              >
                <Eye size={16} /> Detail
              </button>
            </>
          ) : (
            <>
              <button 
                onClick={handleCall}
                className="flex-1 flex items-center justify-center gap-2 py-3 bg-white border border-green-200 text-green-700 rounded-2xl font-bold text-[13px] hover:bg-green-50 transition-all active:scale-[0.98]"
              >
                <Phone size={16} /> Call
              </button>
              <button 
                onClick={handleMessage}
                className="flex-1 flex items-center justify-center gap-2 py-3 bg-white border border-red-200 text-red-600 rounded-2xl font-bold text-[13px] hover:bg-red-50 transition-all active:scale-[0.98]"
              >
                <MessageSquare size={16} /> Message
              </button>
            </>
          )}
        </div>




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