import { useState } from 'react';
import { motion } from 'framer-motion';
import { Heart, Music, Sparkles, ArrowRight, Users } from 'lucide-react';
import { getSpotifyAuthUrl } from '../utils/spotify';

export const LoginPage = () => {
  const [isLoading, setIsLoading] = useState(false);

  const handleSpotifyLogin = () => {
    setIsLoading(true);
    window.location.href = getSpotifyAuthUrl();
  };

  const features = [
    {
      icon: Music,
      title: 'Last Listened',
      description: 'Discover what your partner is listening to right now and play it instantly',
    },
    {
      icon: Sparkles,
      title: 'Mixed Playlist',
      description: 'AI-powered playlists that blend your musical tastes perfectly',
    },
    {
      icon: Heart,
      title: 'Memory Lane',
      description: 'Create beautiful musical memories and shared experiences together',
    },
  ];

  return (
    <div className="min-h-screen flex items-center justify-center px-4 bg-black">
      <div className="max-w-4xl w-full relative">
        {/* Hero Section */}
        <motion.div
          initial={{ opacity: 0, y: 50 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          className="text-center mb-12"
        >
          <motion.div
            initial={{ scale: 0 }}
            animate={{ scale: 1 }}
            transition={{ delay: 0.2, type: "spring", stiffness: 200 }}
            className="w-20 h-20 mx-auto mb-6 bg-gradient-to-br from-pink-500 to-red-500 rounded-full flex items-center justify-center"
          >
            <Heart className="w-10 h-10 text-white" />
          </motion.div>
          
          <h1 className="text-5xl md:text-6xl font-bold mb-4">
            <span className="gradient-text">Our Musical</span>
            <br />
            <span className="text-white">Journey</span>
          </h1>
          
          <p className="text-xl text-white/70 max-w-2xl mx-auto leading-relaxed">
            A private space where two hearts connect through music. 
            Discover, share, and create beautiful musical memories together.
          </p>
        </motion.div>

        {/* Features Grid */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.4, duration: 0.8 }}
          className="grid md:grid-cols-3 gap-6 mb-12"
        >
          {features.map((feature, index) => (
            <motion.div
              key={feature.title}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.5 + index * 0.1 }}
              whileHover={{ y: -8, scale: 1.03 }}
              className="glass-bubble rounded-3xl p-8 text-center group cursor-pointer"
            >
              <motion.div
                whileHover={{ rotate: 15, scale: 1.15 }}
                className="w-16 h-16 mx-auto mb-6 bg-gradient-to-br from-purple-500/30 via-blue-500/30 to-pink-500/30 rounded-2xl flex items-center justify-center backdrop-blur-sm"
              >
                <feature.icon className="w-8 h-8 text-white" />
              </motion.div>
              <h3 className="text-2xl font-bold text-white mb-3">{feature.title}</h3>
              <p className="text-white/70 text-sm leading-relaxed">{feature.description}</p>
            </motion.div>
          ))}
        </motion.div>

        {/* Login Section */}
        <motion.div
          initial={{ opacity: 0, scale: 0.9 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ delay: 0.8, duration: 0.6 }}
          className="glass-fluid rounded-3xl p-10 max-w-lg mx-auto"
        >
          <div className="text-center mb-8">
            <motion.div
              initial={{ scale: 0 }}
              animate={{ scale: 1 }}
              transition={{ delay: 1, type: "spring", stiffness: 200 }}
              className="w-20 h-20 mx-auto mb-6 bg-gradient-to-br from-purple-500/30 via-blue-500/30 to-pink-500/30 rounded-2xl flex items-center justify-center backdrop-blur-sm"
            >
              <Users className="w-10 h-10 text-white" />
            </motion.div>
            <h2 className="text-3xl font-bold text-white mb-3">Begin Your Journey</h2>
            <p className="text-white/70 text-lg">
              Connect your Spotify account to start your musical love story
            </p>
          </div>

          <motion.button
            whileHover={{ scale: 1.05, boxShadow: "0 15px 40px rgba(147, 51, 234, 0.4)" }}
            whileTap={{ scale: 0.95 }}
            onClick={handleSpotifyLogin}
            disabled={isLoading}
            className="w-full bg-gradient-to-r from-purple-600 via-blue-600 to-pink-600 hover:from-purple-700 hover:via-blue-700 hover:to-pink-700 text-white font-bold py-5 px-8 rounded-2xl transition-all duration-300 flex items-center justify-center space-x-3 disabled:opacity-50 shadow-2xl"
          >
            {isLoading ? (
              <div className="w-6 h-6 border-2 border-white border-t-transparent rounded-full animate-spin" />
            ) : (
              <>
                <span className="text-lg">Connect with Spotify</span>
                <ArrowRight className="w-6 h-6" />
              </>
            )}
          </motion.button>

          <p className="text-sm text-white/60 text-center mt-6 leading-relaxed">
            We'll only access your listening history and playlist data to create your personalized musical journey
          </p>
        </motion.div>

        {/* Footer */}
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 1, duration: 0.6 }}
          className="text-center mt-12"
        >
          <p className="text-white/40 text-sm">
            Made with 💕 for a special someone
          </p>
        </motion.div>
      </div>
    </div>
  );
};
