import { useState, useRef, useMemo } from 'react';
import { Heart, X, RotateCcw, MapPin, Briefcase, GraduationCap } from 'lucide-react';
import LazyImage from './LazyImage';
import nomoreimg from "../../assets/images/nomoreimg.png";
const TinderCard = ({ children, onSwipe, onCardLeftScreen, preventSwipe, className }) => {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  const [dragging, setDragging] = useState(false);
  const [startPos, setStartPos] = useState({ x: 0, y: 0 });
  const [gone, setGone] = useState(false);

  const handleStart = (clientX, clientY) => {
    if (gone) return;
    setDragging(true);
    setStartPos({ x: clientX - pos.x, y: clientY - pos.y });
  };

  const handleMove = (clientX, clientY) => {
    if (!dragging || gone) return;
    setPos({ x: clientX - startPos.x, y: clientY - startPos.y });
  };

  const handleEnd = () => {
    if (gone) return;
    setDragging(false);
    if (Math.abs(pos.x) > 120) {
      const dir = pos.x > 0 ? 'right' : 'left';
      if (onSwipe) onSwipe(dir);
      setGone(true);
      setTimeout(() => onCardLeftScreen && onCardLeftScreen(dir), 300);
    } else {
      setPos({ x: 0, y: 0 });
    }
  };

  if (gone) return null;

  const rotation = pos.x / 20;
  const opacity = Math.min(Math.abs(pos.x) / 100, 1);

  return (
    <div
      className={className}
      style={{
        transform: `translate(${pos.x}px, ${pos.y}px) rotate(${rotation}deg)`,
        transition: dragging ? 'none' : 'transform 0.3s ease-out',
        touchAction: 'none'
      }}
      onMouseDown={(e) => handleStart(e.clientX, e.clientY)}
      onMouseMove={(e) => handleMove(e.clientX, e.clientY)}
      onMouseUp={handleEnd}
      onMouseLeave={() => dragging && handleEnd()}
      onTouchStart={(e) => handleStart(e.touches[0].clientX, e.touches[0].clientY)}
      onTouchMove={(e) => handleMove(e.touches[0].clientX, e.touches[0].clientY)}
      onTouchEnd={handleEnd}
    >
      {pos.x > 50 && (
        <div className="absolute top-8 left-8 z-10 border-4 border-green-500 text-green-500 px-4 py-2 rounded-lg text-2xl font-bold rotate-[-20deg]" style={{ opacity }}>
          LIKE
        </div>
      )}
      {pos.x < -50 && (
        <div className="absolute top-8 right-8 z-10 border-4 border-red-500 text-red-500 px-4 py-2 rounded-lg text-2xl font-bold rotate-[20deg]" style={{ opacity }}>
          NOPE
        </div>
      )}
      {children}
    </div>
  );
};

const profiles = [
  {
    id: 1,
    name: 'Priya Sharma',
    age: 26,
    location: 'Mumbai, India',
    profession: 'Software Engineer',
    education: 'B.Tech from IIT Bombay',
    about: 'Love traveling, reading, and cooking. Looking for someone who values family.',
    image: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=500&fit=crop'
  },
  {
    id: 2,
    name: 'Ananya Patel',
    age: 24,
    location: 'Bangalore, India',
    profession: 'Doctor',
    education: 'MBBS from AIIMS',
    about: 'Passionate about healthcare and music. Seeking a caring life partner.',
    image: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&h=500&fit=crop'
  },
  {
    id: 3,
    name: 'Neha Gupta',
    age: 27,
    location: 'Delhi, India',
    profession: 'CA',
    education: 'CA from ICAI',
    about: 'Enjoy yoga and meditation. Looking for someone with similar values.',
    image: 'https://images.unsplash.com/photo-1517841905240-472988babdf9?w=400&h=500&fit=crop'
  },
  {
    id: 4,
    name: 'Kavya Reddy',
    age: 25,
    location: 'Hyderabad, India',
    profession: 'Marketing Manager',
    education: 'MBA from ISB',
    about: 'Creative soul who loves art and dance. Seeking a supportive partner.',
    image: 'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?w=400&h=500&fit=crop'
  }
];

export default function MatrimonySwipeCards() {
  const [swipedCards, setSwipedCards] = useState(new Set());
  const [lastDirection, setLastDirection] = useState('');
  const [likedProfiles, setLikedProfiles] = useState([]);
  const [dislikedProfiles, setDislikedProfiles] = useState([]);
  const [key, setKey] = useState(0);

  const activeProfiles = profiles.filter(p => !swipedCards.has(p.id));
  const canSwipe = activeProfiles.length > 0;

  const swiped = (direction, profile) => {
    setLastDirection(direction);
    setSwipedCards(prev => new Set([...prev, profile.id]));
    if (direction === 'right') {
      setLikedProfiles(prev => [...prev, profile]);
    } else {
      setDislikedProfiles(prev => [...prev, profile]);
    }
  };

  const swipe = (dir) => {
    if (canSwipe) {
      const topProfile = activeProfiles[activeProfiles.length - 1];
      swiped(dir, topProfile);
    }
  };

  const reset = () => {
    setSwipedCards(new Set());
    setLikedProfiles([]);
    setDislikedProfiles([]);
    setLastDirection('');
    setKey(prev => prev + 1);
  };

  return (
    <div className=" w-[100%] max-w-[fit-screen] p-2 md:px-6 overflow-hidden">
      <div className="max-w-md mx-auto">
        {/* <h1 className="text-2xl font-bold text-center text-purple-800 mb-2">
          💍 Find Your Match
        </h1>
        <p className="text-center text-gray-600 mb-4 text-sm">
          Swipe right to like, left to pass
        </p> */}

        {/* Card Container with overflow hidden */}
        <div className="relative h-[480px] w-full overflow-hidden rounded-2xl">
          <div className="absolute inset-0 flex items-center justify-center">
            {!canSwipe ? (
              <div className="text-center p-8 bg-white rounded-2xl shadow-lg">
                <p className="text-xl text-gray-600 mb-4">No more profiles!</p>
                 <LazyImage
                                    src={nomoreimg}
                                    className="w-full h-[190px]  object-cover "
                                   
                                  />
                <button
                  onClick={reset}
                  className="cursor-pointer flex items-center gap-2 mx-auto px-6 py-3 bg-[#034E08] text-white rounded-full hover:bg-[#A70710] transition"
                >
                  <RotateCcw size={20} />
                  Start Over
                </button>
              </div>
            ) : (
              profiles
                .filter(p => !swipedCards.has(p.id))
                .map((profile, index) => (
                  <TinderCard
                    key={`${key}-${profile.id}`}
                    onSwipe={(dir) => swiped(dir, profile)}
                    onCardLeftScreen={() => {}}
                    preventSwipe={['up', 'down']}
                    className="absolute w-full max-w-sm cursor-grab active:cursor-grabbing"
                  >
                    <div className="bg-white rounded-2xl shadow-xl overflow-hidden select-none">
                      <div className="relative">
                        <img
                          src={profile.image}
                          alt={profile.name}
                          className="w-full h-72 object-cover pointer-events-none"
                          draggable={false}
                        />
                        <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4">
                          <h2 className="text-2xl font-bold text-white">
                            {profile.name}, {profile.age}
                          </h2>
                        </div>
                      </div>
                      
                      <div className="p-4 space-y-3">
                        <div className="flex items-center gap-2 text-gray-600">
                          <MapPin size={16} className="text-pink-500 flex-shrink-0" />
                          <span className="text-sm">{profile.location}</span>
                        </div>
                        <div className="flex items-center gap-2 text-gray-600">
                          <Briefcase size={16} className="text-purple-500 flex-shrink-0" />
                          <span className="text-sm">{profile.profession}</span>
                        </div>
                        <div className="flex items-center gap-2 text-gray-600">
                          <GraduationCap size={16} className="text-indigo-500 flex-shrink-0" />
                          <span className="text-sm">{profile.education}</span>
                        </div>
                        <p className="text-gray-700 text-sm mt-2 line-clamp-2">
                          {profile.about}
                        </p>
                      </div>
                    </div>
                  </TinderCard>
                ))
            )}
          </div>
        </div>

        {/* Action Buttons */}
        {canSwipe && (
          <div className="flex justify-center gap-6 mt-4">
            <button
              onClick={() => swipe('left')}
              className="w-16 h-16 bg-white rounded-full shadow-lg flex items-center justify-center hover:bg-red-50 transition border-2 border-red-200 hover:border-red-400 active:scale-95"
            >
              <X size={32} className="text-red-500" />
            </button>
            <button
              onClick={reset}
              className="w-12 h-12 bg-white rounded-full shadow-lg flex items-center justify-center hover:bg-yellow-50 transition border-2 border-yellow-200 hover:border-yellow-400 active:scale-95 self-center"
            >
              <RotateCcw size={20} className="text-yellow-500" />
            </button>
            <button
              onClick={() => swipe('right')}
              className="w-16 h-16 bg-white rounded-full shadow-lg flex items-center justify-center hover:bg-green-50 transition border-2 border-green-200 hover:border-green-400 active:scale-95"
            >
              <Heart size={32} className="text-green-500" />
            </button>
          </div>
        )}

        {/* Stats */}
        {/* <div className="mt-6 flex gap-4 text-sm">
          <div className="flex-1 bg-green-100 rounded-lg p-3 text-center">
            <p className="font-semibold text-green-700">👍 Liked: {likedProfiles.length}</p>
          </div>
          <div className="flex-1 bg-red-100 rounded-lg p-3 text-center">
            <p className="font-semibold text-red-700">👎 Passed: {dislikedProfiles.length}</p>
          </div>
        </div> */}

        {/* Liked Profiles Preview */}
        {/* {likedProfiles.length > 0 && (
          <div className="mt-4 bg-white rounded-xl p-4 shadow-md">
            <h3 className="font-semibold text-gray-700 mb-3">💚 Your Likes</h3>
            <div className="flex gap-2 flex-wrap">
              {likedProfiles.map(p => (
                <div key={p.id} className="flex items-center gap-2 bg-green-50 px-3 py-1.5 rounded-full">
                  <img src={p.image} alt={p.name} className="w-6 h-6 rounded-full object-cover" />
                  <span className="text-sm text-green-700">{p.name.split(' ')[0]}</span>
                </div>
              ))}
            </div>
          </div>
        )} */}
      </div>
    </div>
  );
}