import { motion } from 'framer-motion';
import { Link } from 'react-router-dom';
import { 
  Music, 
  PlayCircle, 
  Sparkles, 
  Heart, 
  Clock, 
  TrendingUp,
  User,
  Plus
} from 'lucide-react';
import { useStore } from '../store/useStore';
import { formatDate } from '../utils/cn';

export const DashboardPage = () => {
  const { currentUser, partnerUser } = useStore();

  const features = [
    {
      title: 'Last Listened',
      description: 'See what your partner is listening to right now',
      icon: Music,
      href: '/last-listened',
      color: 'from-blue-500 to-purple-600',
      bgColor: 'bg-blue-500/10',
      borderColor: 'border-blue-500/30',
    },
    {
      title: 'Mixed Playlist',
      description: 'Create AI-powered playlists blending both your tastes',
      icon: PlayCircle,
      href: '/mixed-playlist',
      color: 'from-green-500 to-emerald-600',
      bgColor: 'bg-green-500/10',
      borderColor: 'border-green-500/30',
    },
    {
      title: 'Memory Lane',
      description: 'Your shared musical journey and memories',
      icon: Sparkles,
      href: '/memory-lane',
      color: 'from-pink-500 to-rose-600',
      bgColor: 'bg-pink-500/10',
      borderColor: 'border-pink-500/30',
    },
  ];

  const getLastPlayedTime = () => {
    if (!currentUser?.recentlyPlayed?.[0]) return null;
    return formatDate(currentUser.recentlyPlayed[0].played_at);
  };

  const getPartnerLastPlayedTime = () => {
    if (!partnerUser?.recentlyPlayed?.[0]) return null;
    return formatDate(partnerUser.recentlyPlayed[0].played_at);
  };

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      {/* Header */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        className="mb-8"
      >
        <h1 className="text-4xl font-bold text-white mb-2">
          Welcome back, <span className="gradient-text">{currentUser?.user?.display_name}</span>
        </h1>
        <p className="text-white/70 text-lg">
          Ready to explore your musical connection together?
        </p>
      </motion.div>

      {/* Connection Status */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.1 }}
        className="mb-8"
      >
        {partnerUser ? (
          <div className="glass-bubble rounded-3xl p-8 border border-spotify-green/30 glow">
            <div className="flex items-center space-x-6">
              <div className="w-16 h-16 bg-gradient-to-br from-spotify-green to-green-600 rounded-2xl flex items-center justify-center">
                <Heart className="w-8 h-8 text-white" />
              </div>
              <div>
                <h3 className="text-xl font-semibold text-white">
                  Connected with {partnerUser.user?.display_name}
                </h3>
                <p className="text-white/70">
                  Your musical journey is ready to begin! 💕
                </p>
              </div>
            </div>
          </div>
        ) : (
          <div className="glass-bubble rounded-3xl p-8 border border-orange-500/30">
            <div className="flex items-center space-x-6">
              <div className="w-16 h-16 bg-gradient-to-br from-orange-500 to-red-500 rounded-2xl flex items-center justify-center">
                <Plus className="w-8 h-8 text-white" />
              </div>
              <div>
                <h3 className="text-xl font-semibold text-white">
                  Invite your partner
                </h3>
                <p className="text-white/70">
                  Share this link so your partner can connect their Spotify account
                </p>
                <button className="mt-2 bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-lg transition-colors">
                  Share Connection Link
                </button>
              </div>
            </div>
          </div>
        )}
      </motion.div>

      {/* Quick Stats */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.2 }}
        className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"
      >
        <div className="glass-bubble rounded-2xl p-6">
          <div className="flex items-center space-x-4">
            <div className="w-12 h-12 bg-gradient-to-br from-blue-500/30 to-cyan-500/30 rounded-xl flex items-center justify-center">
              <Clock className="w-6 h-6 text-blue-400" />
            </div>
            <div>
              <p className="text-white/70 text-sm">Your last played</p>
              <p className="text-white font-semibold">{getLastPlayedTime() || 'No recent plays'}</p>
            </div>
          </div>
        </div>

        <div className="glass-bubble rounded-2xl p-6">
          <div className="flex items-center space-x-4">
            <div className="w-12 h-12 bg-gradient-to-br from-green-500/30 to-emerald-500/30 rounded-xl flex items-center justify-center">
              <TrendingUp className="w-6 h-6 text-green-400" />
            </div>
            <div>
              <p className="text-white/70 text-sm">Top tracks analyzed</p>
              <p className="text-white font-semibold">{currentUser?.topTracks?.length || 0} songs</p>
            </div>
          </div>
        </div>

        <div className="glass-bubble rounded-2xl p-6">
          <div className="flex items-center space-x-4">
            <div className="w-12 h-12 bg-gradient-to-br from-purple-500/30 to-pink-500/30 rounded-xl flex items-center justify-center">
              <User className="w-6 h-6 text-purple-400" />
            </div>
            <div>
              <p className="text-white/70 text-sm">Recently played</p>
              <p className="text-white font-semibold">{currentUser?.recentlyPlayed?.length || 0} tracks</p>
            </div>
          </div>
        </div>
      </motion.div>

      {/* Features Grid */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.3 }}
        className="grid md:grid-cols-3 gap-6"
      >
        {features.map((feature, index) => (
          <motion.div
            key={feature.title}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.4 + index * 0.1 }}
            whileHover={{ y: -5, scale: 1.02 }}
          >
            <Link to={feature.href}>
              <div className={`glass rounded-2xl p-6 h-full border ${feature.borderColor} group cursor-pointer transition-all duration-300 hover:shadow-xl`}>
                <div className={`w-12 h-12 ${feature.bgColor} rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300`}>
                  <feature.icon className="w-6 h-6 text-white" />
                </div>
                
                <h3 className="text-xl font-semibold text-white mb-2">{feature.title}</h3>
                <p className="text-white/70 text-sm leading-relaxed mb-4">{feature.description}</p>
                
                <div className={`w-full h-1 bg-gradient-to-r ${feature.color} rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300`} />
              </div>
            </Link>
          </motion.div>
        ))}
      </motion.div>

      {/* Recent Activity Preview */}
      {currentUser?.recentlyPlayed && currentUser.recentlyPlayed.length > 0 && (
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.6 }}
          className="mt-8"
        >
          <h2 className="text-2xl font-bold text-white mb-4">Your Recent Activity</h2>
          <div className="glass rounded-2xl p-6">
            <div className="space-y-4">
              {currentUser.recentlyPlayed.slice(0, 3).map((item, index) => (
                <motion.div
                  key={item.track.id}
                  initial={{ opacity: 0, x: -20 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ delay: 0.7 + index * 0.1 }}
                  className="flex items-center space-x-4 p-3 rounded-lg hover:bg-white/5 transition-colors"
                >
                  <img
                    src={item.track.album.images[0]?.url || '/placeholder-album.png'}
                    alt={item.track.album.name}
                    className="w-12 h-12 rounded-lg object-cover"
                  />
                  <div className="flex-1">
                    <h4 className="text-white font-medium">{item.track.name}</h4>
                    <p className="text-white/70 text-sm">{item.track.artists[0]?.name}</p>
                  </div>
                  <div className="text-white/50 text-sm">
                    {formatDate(item.played_at)}
                  </div>
                </motion.div>
              ))}
            </div>
          </div>
        </motion.div>
      )}
    </div>
  );
};
