import React, { useState, useEffect } from 'react';
import { ChevronLeft, ChevronRight, Heart, X, BarChart } from 'lucide-react';

export default function PreferenceFinder() {
  // Expanded sample data with more diversity
  const [profiles, setProfiles] = useState([
    // Original profiles
    {
      id: 1,
      image: "https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80",
      features: ["blonde", "casual", "outdoors", "caucasian"]
    },
    {
      id: 2,
      image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80",
      features: ["redhead", "smiling", "professional", "freckles", "caucasian"]
    },
    {
      id: 3,
      image: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=764&q=80",
      features: ["dark-hair", "serious", "fashion", "asian"]
    },
    {
      id: 4,
      image: "https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=761&q=80",
      features: ["blonde", "glasses", "casual", "caucasian"]
    },
    {
      id: 5,
      image: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80",
      features: ["dark-hair", "natural", "minimal-makeup", "asian"]
    },
    {
      id: 6,
      image: "https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=764&q=80",
      features: ["brunette", "outdoors", "active", "caucasian"]
    },
    {
      id: 7,
      image: "https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80",
      features: ["brunette", "professional", "glasses", "caucasian"]
    },
    {
      id: 8,
      image: "https://images.unsplash.com/photo-1524250502761-1ac6f2e30d43?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80",
      features: ["blonde", "fashion", "glamour", "caucasian"]
    },
    {
      id: 9,
      image: "https://images.unsplash.com/photo-1464863979621-258859e62245?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=686&q=80",
      features: ["dark-hair", "natural", "outdoors", "caucasian"]
    },
    {
      id: 10,
      image: "https://images.unsplash.com/photo-1485875437342-9b39470b3d95?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1173&q=80",
      features: ["redhead", "artistic", "creative", "caucasian"]
    },
    {
      id: 11,
      image: "https://images.unsplash.com/photo-1509967419530-da38b4704bc6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1195&q=80",
      features: ["dark-hair", "elegant", "formal", "caucasian"]
    },
    {
      id: 12,
      image: "https://images.unsplash.com/photo-1479936343636-73cdc5aae0c3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80",
      features: ["blonde", "casual", "smiling", "caucasian"]
    },
    
    // Additional diverse profiles
    {
      id: 13,
      image: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80",
      features: ["dark-hair", "professional", "indian", "formal"]
    },
    {
      id: 14,
      image: "https://images.unsplash.com/photo-1592124549776-a7f0cc973b24?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80",
      features: ["dark-hair", "indian", "traditional", "jewelry"]
    },
    {
      id: 15,
      image: "https://images.unsplash.com/photo-1595085610896-fb31cfd3df4d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=764&q=80",
      features: ["dark-hair", "indian", "casual", "smiling"]
    },
    {
      id: 16,
      image: "https://images.unsplash.com/photo-1604772659841-a1612f9ed2c2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80",
      features: ["dark-hair", "braces", "smiling", "latina"]
    },
    {
      id: 17,
      image: "https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80",
      features: ["dark-hair", "glasses", "professional", "african-american"]
    },
    {
      id: 18,
      image: "https://images.unsplash.com/photo-1589156280159-27698a70f29e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=686&q=80",
      features: ["dark-hair", "glasses", "braces", "student", "asian"]
    },
    {
      id: 19,
      image: "https://images.unsplash.com/photo-1619855544858-e05e8fc39bc1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80",
      features: ["dark-hair", "middle-eastern", "hijab", "modest"]
    },
    {
      id: 20,
      image: "https://images.unsplash.com/photo-1567532939604-b6b5b0db2604?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80",
      features: ["dark-hair", "latina", "casual", "outdoors"]
    },
    {
      id: 21,
      image: "https://images.unsplash.com/photo-1611432579699-484f7990b127?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80",
      features: ["dark-hair", "indian", "glasses", "professional"]
    },
    {
      id: 22,
      image: "https://images.unsplash.com/photo-1610276198568-eb6d0ff53e48?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80",
      features: ["dark-hair", "asian", "glasses", "casual"]
    },
    {
      id: 23,
      image: "https://images.unsplash.com/photo-1543267099-49d1c2dcc6e6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80",
      features: ["blonde", "glasses", "braces", "student", "caucasian"]
    },
    {
      id: 24,
      image: "https://images.unsplash.com/photo-1548142813-c348350df52b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=689&q=80",
      features: ["dark-hair", "african-american", "professional", "formal"]
    },
    {
      id: 25,
      image: "https://images.unsplash.com/photo-1593351799227-75df2026356f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1171&q=80",
      features: ["dark-hair", "indian", "traditional", "jewelry", "formal"]
    },
    {
      id: 26,
      image: "https://images.unsplash.com/photo-1617922001439-4a2e6562f328?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80",
      features: ["dark-hair", "braces", "latina", "casual", "smiling"]
    },
    {
      id: 27,
      image: "https://images.unsplash.com/photo-1551836022-d5d88e9218df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80",
      features: ["dark-hair", "glasses", "asian", "professional"]
    },
    {
      id: 28,
      image: "https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=761&q=80",
      features: ["blonde", "glasses", "casual", "caucasian"]
    },
    {
      id: 29,
      image: "https://images.unsplash.com/photo-1557053910-d9eadeed1c58?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80",
      features: ["dark-hair", "indian", "casual", "outdoors"]
    },
    {
      id: 30,
      image: "https://images.unsplash.com/photo-1607746882042-944635dfe10e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80",
      features: ["dark-hair", "latina", "casual", "smiling"]
    }
  ]);
  
  const [currentIndex, setCurrentIndex] = useState(0);
  const [likes, setLikes] = useState([]);
  const [dislikes, setDislikes] = useState([]);
  const [showResults, setShowResults] = useState(false);
  const [cardPosition, setCardPosition] = useState({ x: 0, y: 0 });
  const [isDragging, setIsDragging] = useState(false);
  const [startPos, setStartPos] = useState({ x: 0, y: 0 });
  const [swipeDirection, setSwipeDirection] = useState(null);

  // Handle swipe
  const handleSwipe = (direction) => {
    if (currentIndex >= profiles.length) return;
    
    const currentProfile = profiles[currentIndex];
    
    if (direction === 'right') {
      setLikes([...likes, currentProfile]);
      setSwipeDirection('right');
    } else {
      setDislikes([...dislikes, currentProfile]);
      setSwipeDirection('left');
    }
    
    // Reset card position with animation
    setTimeout(() => {
      setCardPosition({ x: 0, y: 0 });
      setSwipeDirection(null);
      setCurrentIndex(currentIndex + 1);
    }, 300);
  };

  // Mouse/touch event handlers
  const handleMouseDown = (e) => {
    setIsDragging(true);
    setStartPos({ x: e.clientX, y: e.clientY });
  };

  const handleTouchStart = (e) => {
    setIsDragging(true);
    setStartPos({ x: e.touches[0].clientX, y: e.touches[0].clientY });
  };

  const handleMouseMove = (e) => {
    if (!isDragging) return;
    const deltaX = e.clientX - startPos.x;
    setCardPosition({ x: deltaX, y: 0 });
  };

  const handleTouchMove = (e) => {
    if (!isDragging) return;
    const deltaX = e.touches[0].clientX - startPos.x;
    setCardPosition({ x: deltaX, y: 0 });
  };

  const handleMouseUp = () => {
    if (!isDragging) return;
    setIsDragging(false);
    
    if (cardPosition.x > 100) {
      handleSwipe('right');
    } else if (cardPosition.x < -100) {
      handleSwipe('left');
    } else {
      setCardPosition({ x: 0, y: 0 });
    }
  };

  const handleTouchEnd = () => {
    if (!isDragging) return;
    setIsDragging(false);
    
    if (cardPosition.x > 100) {
      handleSwipe('right');
    } else if (cardPosition.x < -100) {
      handleSwipe('left');
    } else {
      setCardPosition({ x: 0, y: 0 });
    }
  };

  // Analyze preferences
  const analyzePreferences = () => {
    const featureCounts = {};
    
    likes.forEach(profile => {
      profile.features.forEach(feature => {
        if (!featureCounts[feature]) {
          featureCounts[feature] = 0;
        }
        featureCounts[feature]++;
      });
    });
    
    // Sort features by count
    const sortedFeatures = Object.entries(featureCounts)
      .sort((a, b) => b[1] - a[1])
      .map(([feature, count]) => ({
        feature,
        count,
        percentage: Math.round((count / likes.length) * 100)
      }));
    
    return sortedFeatures;
  };

  // Calculate rotation based on drag position
  const getRotation = () => {
    return cardPosition.x * 0.1;
  };

  // Get card style based on position and swipe direction
  const getCardStyle = () => {
    if (swipeDirection === 'right') {
      return {
        transform: `translateX(150%) rotate(30deg)`,
        opacity: 0,
        transition: 'transform 0.3s ease, opacity 0.3s ease'
      };
    } else if (swipeDirection === 'left') {
      return {
        transform: `translateX(-150%) rotate(-30deg)`,
        opacity: 0,
        transition: 'transform 0.3s ease, opacity 0.3s ease'
      };
    } else {
      return {
        transform: `translateX(${cardPosition.x}px) rotate(${getRotation()}deg)`,
        transition: isDragging ? 'none' : 'transform 0.3s ease'
      };
    }
  };

  // Group analysis by categories
  const getGroupedAnalysis = () => {
    const analysis = analyzePreferences();
    const groups = {
      "Physical Features": ["blonde", "brunette", "redhead", "dark-hair", "glasses", "braces", "freckles"],
      "Ethnicity": ["caucasian", "asian", "indian", "latina", "african-american", "middle-eastern"],
      "Style": ["casual", "professional", "formal", "traditional", "fashion", "glamour", "modest", "elegant"],
      "Personality": ["smiling", "serious", "artistic", "creative", "active", "natural"]
    };
    
    const groupedResults = {};
    
    Object.entries(groups).forEach(([groupName, features]) => {
      const groupFeatures = analysis.filter(item => features.includes(item.feature));
      if (groupFeatures.length > 0) {
        groupedResults[groupName] = groupFeatures;
      }
    });
    
    return groupedResults;
  };

  return (
    <div className="min-h-screen bg-gray-50 flex flex-col items-center py-8 px-4">
      <div className="w-full max-w-md mx-auto">
        <h1 className="text-3xl font-bold text-center mb-6 text-gray-800">Preference Finder</h1>
        
        {!showResults ? (
          <>
            <div className="relative h-[70vh] w-full mb-6">
              {currentIndex < profiles.length ? (
                <div 
                  className="absolute inset-0 bg-white rounded-xl shadow-lg overflow-hidden"
                  style={getCardStyle()}
                  onMouseDown={handleMouseDown}
                  onMouseMove={handleMouseMove}
                  onMouseUp={handleMouseUp}
                  onMouseLeave={handleMouseUp}
                  onTouchStart={handleTouchStart}
                  onTouchMove={handleTouchMove}
                  onTouchEnd={handleTouchEnd}
                >
                  <img 
                    src={profiles[currentIndex].image} 
                    alt="Profile" 
                    className="w-full h-full object-cover"
                  />
                  
                  {/* Swipe indicators */}
                  {cardPosition.x > 50 && (
                    <div className="absolute top-4 right-4 bg-green-500 text-white p-2 rounded-full">
                      <Heart size={24} />
                    </div>
                  )}
                  {cardPosition.x < -50 && (
                    <div className="absolute top-4 left-4 bg-red-500 text-white p-2 rounded-full">
                      <X size={24} />
                    </div>
                  )}
                  
                  {/* Feature tags */}
                  <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4">
                    <div className="flex flex-wrap gap-2">
                      {profiles[currentIndex].features.map((feature, idx) => (
                        <span key={idx} className="px-2 py-1 bg-white/20 backdrop-blur-sm text-white text-xs rounded-full capitalize">
                          {feature}
                        </span>
                      ))}
                    </div>
                  </div>
                </div>
              ) : (
                <div className="flex flex-col items-center justify-center h-full">
                  <p className="text-xl text-gray-700 mb-4">You've seen all profiles!</p>
                  <button
                    onClick={() => setShowResults(true)}
                    className="px-6 py-3 bg-indigo-600 text-white rounded-lg shadow hover:bg-indigo-700 transition-colors"
                  >
                    See Your Results
                  </button>
                </div>
              )}
            </div>
            
            {currentIndex < profiles.length && (
              <div className="flex justify-between items-center w-full">
                <button
                  onClick={() => handleSwipe('left')}
                  className="p-4 bg-red-500 text-white rounded-full shadow-md hover:bg-red-600 transition-colors"
                >
                  <X size={24} />
                </button>
                
                <div className="text-gray-500">
                  {currentIndex + 1} / {profiles.length}
                </div>
                
                <button
                  onClick={() => handleSwipe('right')}
                  className="p-4 bg-green-500 text-white rounded-full shadow-md hover:bg-green-600 transition-colors"
                >
                  <Heart size={24} />
                </button>
              </div>
            )}
          </>
        ) : (
          <div className="bg-white rounded-xl shadow-lg p-6">
            <h2 className="text-2xl font-bold mb-4 text-gray-800">Your Preferences</h2>
            
            {likes.length === 0 ? (
              <p className="text-gray-600">You didn't like any profiles. Try swiping right on some profiles to see your preferences.</p>
            ) : (
              <>
                <p className="text-gray-600 mb-6">Based on your {likes.length} likes, here's what we found:</p>
                
                {Object.entries(getGroupedAnalysis()).map(([groupName, features]) => (
                  <div key={groupName} className="mb-6">
                    <h3 className="text-lg font-semibold mb-3 text-gray-800">{groupName}</h3>
                    <div className="space-y-3">
                      {features.map((item, index) => (
                        <div key={index} className="flex items-center">
                          <div className="w-32 text-gray-700 capitalize">{item.feature}</div>
                          <div className="flex-1">
                            <div className="h-4 bg-gray-200 rounded-full overflow-hidden">
                              <div 
                                className="h-full bg-indigo-600 rounded-full"
                                style={{ width: `${item.percentage}%` }}
                              ></div>
                            </div>
                          </div>
                          <div className="w-16 text-right text-gray-700">{item.percentage}%</div>
                        </div>
                      ))}
                    </div>
                  </div>
                ))}
                
                <h3 className="text-xl font-semibold mb-3 text-gray-800">Your Top Picks</h3>
                <div className="grid grid-cols-3 gap-2 mb-6">
                  {likes.slice(0, 6).map((profile, index) => (
                    <div key={index} className="aspect-square rounded-lg overflow-hidden">
                      <img 
                        src={profile.image} 
                        alt="Liked profile" 
                        className="w-full h-full object-cover"
                      />
                    </div>
                  ))}
                </div>
              </>
            )}
            
            <button
              onClick={() => {
                setCurrentIndex(0);
                setLikes([]);
                setDislikes([]);
                setShowResults(false);
              }}
              className="w-full py-3 bg-indigo-600 text-white rounded-lg shadow hover:bg-indigo-700 transition-colors"
            >
              Start Over
            </button>
          </div>
        )}
      </div>
    </div>
  );
}