"use client"

import { useState, useEffect, useRef } from "react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { 
  User, 
  CheckCircle2, 
  Lock, 
  ChevronLeft, 
  ChevronRight, 
  Sparkles, 
  Zap,
  Trophy,
  Star,
  Award,
  TrendingUp,
  Shield,
  Crown,
  Flame
} from "lucide-react"
import Link from "next/link"

interface Particle {
  x: number
  y: number
  vx: number
  vy: number
  size: number
  opacity: number
  color: string
}

export default function ProfilePage() {
  const [currentBadgeSlide, setCurrentBadgeSlide] = useState(0)
  const [particles, setParticles] = useState<Particle[]>([])
  const [mousePos, setMousePos] = useState({ x: 0, y: 0 })
  const canvasRef = useRef<HTMLCanvasElement>(null)

  // Mock user data
  const userData = {
    nickname: "pennytige",
    totalPoints: 1337,
    level: 5,
    questsCompleted: 7,
    totalQuests: 12,
    gameProgress: 58,
    rank: "Elite Hacker",
    joinDate: "15.08.2024"
  }

  const quests = [
    { id: 1, name: "Registration", date: "2024-08-15 14:23", points: 100, completed: true, active: false },
    { id: 2, name: "Memories", date: "", points: 100, completed: false, active: true, badge: "Получить подарочек" },
    { id: 3, name: "Cyber toy", date: "", points: 100, completed: false, active: false },
    { id: 4, name: "Flood", date: "", points: 100, completed: false, active: false },
    { id: 5, name: "Core", date: "", points: 100, completed: false, active: false },
    { id: 6, name: "Access point", date: "", points: 100, completed: false, active: false }
  ]

  const badges = [
    { 
      id: 1, 
      name: "Speed Runner", 
      date: "16.08.2024",
      description: "За скорость",
      requirement: "Решить: 8%",
      icon: "🏃",
      color: "from-cyan-500 to-blue-500",
      rarity: "rare"
    },
    { 
      id: 2, 
      name: "Precision Master", 
      date: "17.08.2024",
      description: "За точность",
      requirement: "Решить: 25%",
      icon: "🎯",
      color: "from-purple-500 to-pink-500",
      rarity: "epic"
    },
    { 
      id: 3, 
      name: "Secret Master", 
      date: "Заблокировано",
      description: "Заблокировано",
      requirement: "Решить: ???",
      locked: true,
      icon: "🔒",
      color: "from-gray-500 to-gray-700",
      rarity: "legendary"
    },
    { 
      id: 4, 
      name: "NoName", 
      date: "Заблокировано",
      description: "",
      requirement: "Решить:",
      locked: true,
      icon: "❓",
      color: "from-gray-500 to-gray-700",
      rarity: "unknown"
    }
  ]

  const visibleBadges = badges.slice(currentBadgeSlide, currentBadgeSlide + 3)

  // Initialize particles
  useEffect(() => {
    const initParticles: Particle[] = []
    const colors = ['#06b6d4', '#ec4899', '#8b5cf6', '#3b82f6']
    for (let i = 0; i < 60; i++) {
      initParticles.push({
        x: Math.random() * (typeof window !== 'undefined' ? window.innerWidth : 1920),
        y: Math.random() * (typeof window !== 'undefined' ? window.innerHeight : 1080),
        vx: (Math.random() - 0.5) * 0.6,
        vy: (Math.random() - 0.5) * 0.6,
        size: Math.random() * 2.5 + 1,
        opacity: Math.random() * 0.5 + 0.2,
        color: colors[Math.floor(Math.random() * colors.length)]
      })
    }
    setParticles(initParticles)
  }, [])

  // Animate particles
  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return

    const ctx = canvas.getContext('2d')
    if (!ctx) return

    const updateCanvasSize = () => {
      canvas.width = window.innerWidth
      canvas.height = window.innerHeight
    }
    updateCanvasSize()

    let animationFrameId: number

    const animate = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height)

      setParticles(prevParticles => {
        return prevParticles.map(particle => {
          let newX = particle.x + particle.vx
          let newY = particle.y + particle.vy

          if (newX < 0 || newX > canvas.width) particle.vx *= -1
          if (newY < 0 || newY > canvas.height) particle.vy *= -1

          newX = Math.max(0, Math.min(canvas.width, newX))
          newY = Math.max(0, Math.min(canvas.height, newY))

          ctx.shadowBlur = 8
          ctx.shadowColor = particle.color
          ctx.fillStyle = `${particle.color}${Math.floor(particle.opacity * 255).toString(16).padStart(2, '0')}`
          ctx.beginPath()
          ctx.arc(newX, newY, particle.size, 0, Math.PI * 2)
          ctx.fill()

          return { ...particle, x: newX, y: newY }
        })
      })

      animationFrameId = requestAnimationFrame(animate)
    }

    animate()

    window.addEventListener('resize', updateCanvasSize)
    return () => {
      cancelAnimationFrame(animationFrameId)
      window.removeEventListener('resize', updateCanvasSize)
    }
  }, [])

  // Mouse parallax
  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      setMousePos({ x: e.clientX, y: e.clientY })
    }
    window.addEventListener('mousemove', handleMouseMove)
    return () => window.removeEventListener('mousemove', handleMouseMove)
  }, [])

  const nextSlide = () => {
    if (currentBadgeSlide < badges.length - 3) {
      setCurrentBadgeSlide(currentBadgeSlide + 1)
    }
  }

  const prevSlide = () => {
    if (currentBadgeSlide > 0) {
      setCurrentBadgeSlide(currentBadgeSlide - 1)
    }
  }

  const getRarityColor = (rarity: string) => {
    switch (rarity) {
      case 'rare': return 'from-blue-500 to-cyan-500'
      case 'epic': return 'from-purple-500 to-pink-500'
      case 'legendary': return 'from-yellow-500 to-orange-500'
      default: return 'from-gray-500 to-gray-600'
    }
  }

  return (
    <div className="min-h-screen bg-[#0a0e1a] relative overflow-hidden">
      {/* Animated particles canvas */}
      <canvas 
        ref={canvasRef}
        className="fixed inset-0 pointer-events-none z-0"
        style={{ opacity: 0.5 }}
      />

      {/* Animated background effects */}
      <div 
        className="fixed w-[500px] h-[500px] bg-cyan-500/10 rounded-full blur-[150px] animate-pulse transition-transform duration-1000"
        style={{
          top: '10%',
          left: '15%',
          transform: `translate(${(mousePos.x - (typeof window !== 'undefined' ? window.innerWidth : 1920) / 2) * 0.03}px, ${(mousePos.y - (typeof window !== 'undefined' ? window.innerHeight : 1080) / 2) * 0.03}px)`
        }}
      />
      <div 
        className="fixed w-[500px] h-[500px] bg-pink-500/10 rounded-full blur-[150px] animate-pulse transition-transform duration-1000"
        style={{
          bottom: '10%',
          right: '15%',
          animationDelay: '1s',
          transform: `translate(${-(mousePos.x - (typeof window !== 'undefined' ? window.innerWidth : 1920) / 2) * 0.03}px, ${-(mousePos.y - (typeof window !== 'undefined' ? window.innerHeight : 1080) / 2) * 0.03}px)`
        }}
      />
      <div 
        className="fixed w-[400px] h-[400px] bg-purple-500/8 rounded-full blur-[120px] animate-pulse transition-transform duration-1000"
        style={{
          top: '50%',
          left: '50%',
          animationDelay: '0.5s',
          transform: `translate(-50%, -50%) translate(${(mousePos.x - (typeof window !== 'undefined' ? window.innerWidth : 1920) / 2) * 0.02}px, ${(mousePos.y - (typeof window !== 'undefined' ? window.innerHeight : 1080) / 2) * 0.02}px)`
        }}
      />

      {/* Header */}
      <header className="bg-[#0d1117]/80 backdrop-blur-xl border-b border-cyan-500/30 sticky top-0 z-50 shadow-lg shadow-cyan-500/5">
        <nav className="container mx-auto px-6 py-4">
          <div className="flex items-center justify-center">
            <div className="flex items-center gap-12">
              <Link href="/main">
                <button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80 hover:scale-105 cursor-pointer">
                  Main
                </button>
              </Link>
              <Link href="/main/progress">
                <button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80 hover:scale-105 cursor-pointer">
                  Progress
                </button>
              </Link>
              <button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-pink-500 scale-110 drop-shadow-[0_0_8px_rgba(236,72,153,0.5)] cursor-pointer">
                Profile
              </button>
              <Link href="/main/rules">
                <button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80 hover:scale-105 cursor-pointer">
                  Rules
                </button>
              </Link>
              <button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80 hover:scale-105 cursor-pointer">
                Logoff
              </button>
            </div>
          </div>
        </nav>
      </header>

      {/* Main Content */}
      <main className="container mx-auto px-6 py-8 max-w-7xl relative z-10">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Left Column - Personal Progress & Quests */}
          <div className="lg:col-span-2 space-y-6">
            {/* Personal Progress */}
            <Card className="bg-[#0d1117]/50 backdrop-blur-xl border-2 border-cyan-500/30 p-6 shadow-[0_0_30px_rgba(6,182,212,0.1)] hover:shadow-[0_0_50px_rgba(6,182,212,0.2)] transition-all duration-300 relative overflow-hidden group">
              {/* Animated border glow */}
              <div className="absolute inset-0 bg-gradient-to-r from-transparent via-cyan-500/10 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000" />
              
              {/* Animated background pattern */}
              <div className="absolute inset-0 opacity-5">
                <div className="absolute inset-0" style={{
                  backgroundImage: `radial-gradient(circle at 2px 2px, rgba(6, 182, 212, 0.4) 1px, transparent 0)`,
                  backgroundSize: '30px 30px',
                  animation: 'moveBackground 15s linear infinite'
                }} />
              </div>
              
              <div className="relative z-10">
                <div className="flex items-center justify-between mb-6">
                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 bg-gradient-to-br from-cyan-500/20 to-blue-500/20 rounded-lg flex items-center justify-center">
                      <Sparkles className="w-5 h-5 text-cyan-400 animate-pulse" />
                    </div>
                    <h3 className="text-xl font-bold text-cyan-400 font-mono">
                      Personal Progress
                    </h3>
                  </div>
                  <div className="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-yellow-500/10 to-orange-500/10 border border-yellow-500/30 rounded-lg">
                    <Crown className="w-5 h-5 text-yellow-400" />
                    <span className="text-sm font-mono font-bold text-yellow-400">{userData.rank}</span>
                  </div>
                </div>
                
                <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
                  <div className="bg-gradient-to-br from-[#1a2332] to-[#0d1117] border border-cyan-500/30 rounded-xl p-4 text-center hover:border-cyan-500/50 transition-all hover:scale-105 hover:shadow-[0_0_30px_rgba(6,182,212,0.2)] group/card relative overflow-hidden cursor-pointer">
                    <div className="absolute inset-0 bg-gradient-to-br from-cyan-500/10 to-transparent opacity-0 group-hover/card:opacity-100 transition-opacity" />
                    <div className="absolute top-2 right-2 w-8 h-8 bg-cyan-500/10 rounded-full flex items-center justify-center opacity-0 group-hover/card:opacity-100 transition-opacity">
                      <Trophy className="w-4 h-4 text-cyan-400" />
                    </div>
                    <div className="relative z-10">
                      <div className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-blue-400 to-cyan-400 font-mono mb-1 animate-gradient">
                        {userData.totalPoints}
                      </div>
                      <div className="text-xs text-cyan-400/60 font-mono font-semibold">
                        Total Points
                      </div>
                    </div>
                  </div>

                  <div className="bg-gradient-to-br from-[#1a2332] to-[#0d1117] border border-cyan-500/30 rounded-xl p-4 text-center hover:border-cyan-500/50 transition-all hover:scale-105 hover:shadow-[0_0_30px_rgba(6,182,212,0.2)] group/card relative overflow-hidden cursor-pointer">
                    <div className="absolute inset-0 bg-gradient-to-br from-purple-500/10 to-transparent opacity-0 group-hover/card:opacity-100 transition-opacity" />
                    <div className="absolute top-2 right-2 w-8 h-8 bg-purple-500/10 rounded-full flex items-center justify-center opacity-0 group-hover/card:opacity-100 transition-opacity">
                      <Star className="w-4 h-4 text-purple-400" />
                    </div>
                    <div className="relative z-10">
                      <div className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 via-pink-400 to-purple-400 font-mono mb-1 animate-gradient">
                        Level {userData.level}
                      </div>
                      <div className="text-xs text-cyan-400/60 font-mono font-semibold">
                        Current Level
                      </div>
                    </div>
                  </div>

                  <div className="bg-gradient-to-br from-[#1a2332] to-[#0d1117] border border-cyan-500/30 rounded-xl p-4 text-center hover:border-cyan-500/50 transition-all hover:scale-105 hover:shadow-[0_0_30px_rgba(6,182,212,0.2)] group/card relative overflow-hidden cursor-pointer">
                    <div className="absolute inset-0 bg-gradient-to-br from-green-500/10 to-transparent opacity-0 group-hover/card:opacity-100 transition-opacity" />
                    <div className="absolute top-2 right-2 w-8 h-8 bg-green-500/10 rounded-full flex items-center justify-center opacity-0 group-hover/card:opacity-100 transition-opacity">
                      <CheckCircle2 className="w-4 h-4 text-green-400" />
                    </div>
                    <div className="relative z-10">
                      <div className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-green-400 via-emerald-400 to-green-400 font-mono mb-1 animate-gradient">
                        {userData.questsCompleted}/{userData.totalQuests}
                      </div>
                      <div className="text-xs text-cyan-400/60 font-mono font-semibold">
                        Quests Completed
                      </div>
                    </div>
                  </div>

                  <div className="bg-gradient-to-br from-[#1a2332] to-[#0d1117] border border-cyan-500/30 rounded-xl p-4 text-center hover:border-cyan-500/50 transition-all hover:scale-105 hover:shadow-[0_0_30px_rgba(6,182,212,0.2)] group/card relative overflow-hidden cursor-pointer">
                    <div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-transparent opacity-0 group-hover/card:opacity-100 transition-opacity" />
                    <div className="absolute top-2 right-2 w-8 h-8 bg-blue-500/10 rounded-full flex items-center justify-center opacity-0 group-hover/card:opacity-100 transition-opacity">
                      <TrendingUp className="w-4 h-4 text-blue-400" />
                    </div>
                    <div className="relative z-10">
                      <div className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-cyan-400 to-blue-400 font-mono mb-1 animate-gradient">
                        {userData.gameProgress}%
                      </div>
                      <div className="text-xs text-cyan-400/60 font-mono font-semibold">
                        Game Progress
                      </div>
                    </div>
                  </div>
                </div>

                {/* Progress Bar */}
                <div className="mb-6 p-4 bg-[#0a0e1a]/50 rounded-xl border border-cyan-500/20">
                  <div className="flex items-center justify-between mb-2">
                    <span className="text-xs text-cyan-400/60 font-mono">Overall Progress</span>
                    <span className="text-xs text-cyan-400 font-mono font-bold">{userData.gameProgress}%</span>
                  </div>
                  <div className="h-3 bg-[#0a0e1a] rounded-full overflow-hidden relative">
                    <div 
                      className="h-full bg-gradient-to-r from-cyan-500 via-blue-500 to-purple-500 rounded-full transition-all duration-500 relative"
                      style={{ width: `${userData.gameProgress}%` }}
                    >
                      <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent animate-shimmer" />
                    </div>
                  </div>
                </div>

                {/* Quests List */}
                <div className="space-y-3">
                  <div className="flex items-center gap-2 mb-3">
                    <Shield className="w-5 h-5 text-cyan-400" />
                    <h4 className="text-sm font-mono font-bold text-cyan-400">Quest Log</h4>
                  </div>
                  {quests.map((quest, index) => (
                    <div
                      key={quest.id}
                      className={`flex items-center justify-between p-4 rounded-xl border transition-all duration-300 group/quest relative overflow-hidden cursor-pointer ${
                        quest.active 
                          ? 'bg-gradient-to-r from-yellow-900/40 via-yellow-800/30 to-yellow-900/40 border-yellow-500/60 shadow-[0_0_25px_rgba(234,179,8,0.2)] hover:shadow-[0_0_40px_rgba(234,179,8,0.3)]'
                          : quest.completed
                          ? 'bg-[#0a0e1a]/80 border-green-500/40 hover:border-green-500/60 hover:shadow-[0_0_25px_rgba(34,197,94,0.15)] hover:scale-[1.01]'
                          : 'bg-[#0a0e1a]/50 border-cyan-500/20 hover:border-cyan-500/40 hover:shadow-[0_0_20px_rgba(6,182,212,0.1)] hover:scale-[1.01]'
                      }`}
                      style={{ animationDelay: `${index * 0.1}s` }}
                    >
                      {/* Animated background for active quest */}
                      {quest.active && (
                        <>
                          <div className="absolute inset-0 bg-gradient-to-r from-transparent via-yellow-500/15 to-transparent -translate-x-full group-hover/quest:translate-x-full transition-transform duration-1000" />
                          <div className="absolute inset-0 animate-pulse-border" />
                        </>
                      )}
                      
                      <div className="flex items-center gap-4 flex-1 relative z-10">
                        {quest.completed ? (
                          <div className="relative">
                            <div className="w-10 h-10 bg-gradient-to-br from-green-500/30 to-emerald-500/30 rounded-lg flex items-center justify-center border border-green-500/40">
                              <CheckCircle2 className="w-5 h-5 text-green-400 drop-shadow-[0_0_8px_rgba(34,197,94,0.5)]" />
                            </div>
                            <div className="absolute -inset-1 bg-green-500/20 rounded-lg blur animate-pulse" />
                          </div>
                        ) : (
                          <div className={`w-10 h-10 rounded-lg flex items-center justify-center border relative ${
                            quest.active 
                              ? 'bg-gradient-to-br from-yellow-500/30 to-orange-500/30 border-yellow-500/40' 
                              : 'bg-cyan-500/10 border-cyan-500/30'
                          }`}>
                            {quest.active && (
                              <div className="absolute inset-0 bg-yellow-500/20 rounded-lg animate-pulse" />
                            )}
                            <Lock className={`w-5 h-5 relative z-10 ${quest.active ? 'text-yellow-400 animate-pulse' : 'text-cyan-400/50'}`} />
                          </div>
                        )}
                        <div className="flex-1">
                          <div className="flex items-center gap-3 mb-1">
                            <span className={`font-bold font-mono text-sm ${
                              quest.active ? 'text-yellow-300' : quest.completed ? 'text-green-400' : 'text-cyan-400'
                            }`}>
                              {quest.name}
                            </span>
                            {quest.badge && (
                              <span className="px-3 py-1 bg-gradient-to-r from-pink-500 to-pink-600 text-white text-xs font-mono font-bold rounded-full shadow-[0_0_20px_rgba(236,72,153,0.5)] animate-pulse flex items-center gap-1">
                                <Zap className="w-3 h-3" />
                                {quest.badge}
                              </span>
                            )}
                          </div>
                          {quest.date && (
                            <div className="text-xs text-cyan-400/50 font-mono">
                              {quest.date}
                            </div>
                          )}
                        </div>
                      </div>
                      <div className="flex items-center gap-3">
                        <div className={`font-mono font-bold text-sm px-4 py-2 rounded-lg ${
                          quest.completed 
                            ? 'bg-green-500/20 text-green-400 border border-green-500/40' 
                            : 'bg-cyan-500/20 text-cyan-400 border border-cyan-500/40'
                        } drop-shadow-[0_0_8px_rgba(6,182,212,0.3)]`}>
                          +{quest.points} XP
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </Card>

            {/* Badges Carousel */}
            <Card className="bg-[#0d1117]/50 backdrop-blur-xl border-2 border-cyan-500/30 p-6 shadow-[0_0_30px_rgba(6,182,212,0.1)] hover:shadow-[0_0_50px_rgba(6,182,212,0.2)] transition-all duration-300 relative overflow-hidden group">
              <div className="absolute inset-0 bg-gradient-to-r from-transparent via-cyan-500/10 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000" />
              
              <div className="relative z-10">
                <div className="flex items-center gap-3 mb-6">
                  <div className="w-10 h-10 bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-lg flex items-center justify-center">
                    <Award className="w-5 h-5 text-purple-400 animate-pulse" />
                  </div>
                  <h3 className="text-xl font-bold text-cyan-400 font-mono">
                    Achievement Collection
                  </h3>
                </div>

                <div className="flex items-center justify-between mb-6">
                  <button
                    onClick={prevSlide}
                    disabled={currentBadgeSlide === 0}
                    className="w-12 h-12 rounded-xl bg-gradient-to-br from-cyan-500/20 to-cyan-600/10 border border-cyan-500/40 flex items-center justify-center hover:from-cyan-500/30 hover:to-cyan-600/20 hover:border-cyan-400/60 transition-all disabled:opacity-20 disabled:cursor-not-allowed hover:scale-110 hover:shadow-[0_0_20px_rgba(6,182,212,0.3)] active:scale-95 cursor-pointer"
                  >
                    <ChevronLeft className="w-6 h-6 text-cyan-400" />
                  </button>
                  
                  <div className="flex-1 px-4">
                    <div className="grid grid-cols-3 gap-4">
                      {visibleBadges.map((badge, index) => (
                        <Card
                          key={badge.id}
                          className={`p-6 text-center transition-all duration-300 relative overflow-hidden group/badge cursor-pointer ${
                            badge.locked
                              ? 'bg-[#0a0e1a]/30 border-cyan-500/10 opacity-40'
                              : 'bg-gradient-to-br from-[#1a2332] to-[#0d1117] border-cyan-500/40 hover:border-cyan-500/70 hover:scale-105 hover:shadow-[0_0_40px_rgba(6,182,212,0.25)]'
                          }`}
                          style={{ animationDelay: `${index * 0.1}s` }}
                        >
                          {!badge.locked && (
                            <>
                              <div className="absolute inset-0 bg-gradient-to-br from-cyan-500/5 to-transparent opacity-0 group-hover/badge:opacity-100 transition-opacity" />
                              <div className={`absolute top-2 right-2 px-2 py-1 bg-gradient-to-r ${getRarityColor(badge.rarity)} rounded-full text-[8px] font-mono font-bold text-white uppercase opacity-80`}>
                                {badge.rarity}
                              </div>
                            </>
                          )}
                          
                          <div className="relative z-10">
                            <div className={`w-20 h-20 rounded-xl mx-auto mb-3 flex items-center justify-center text-4xl relative ${
                              badge.locked ? 'bg-cyan-500/5' : `bg-gradient-to-br ${badge.color}/20 shadow-inner border-2 border-cyan-500/20`
                            }`}>
                              {!badge.locked && (
                                <>
                                  <div className={`absolute inset-0 rounded-xl bg-gradient-to-br ${badge.color} opacity-0 group-hover/badge:opacity-30 blur transition-opacity`} />
                                  <div className="absolute inset-0 rounded-xl bg-gradient-to-br from-white/10 to-transparent" />
                                </>
                              )}
                              <span className="relative z-10 drop-shadow-lg transform group-hover/badge:scale-110 transition-transform">
                                {badge.icon}
                              </span>
                            </div>
                            <h4 className={`font-bold font-mono text-sm mb-1 ${
                              badge.locked ? 'text-cyan-400/30' : 'text-cyan-400'
                            }`}>
                              {badge.name}
                            </h4>
                            <p className={`text-xs font-mono mb-2 ${
                              badge.locked ? 'text-cyan-400/20' : 'text-cyan-400/60'
                            }`}>
                              {badge.date}
                            </p>
                            {badge.description && (
                              <p className="text-xs text-cyan-400/60 font-mono mb-1">
                                {badge.description}
                              </p>
                            )}
                            <p className="text-xs text-cyan-400/50 font-mono">
                              {badge.requirement}
                            </p>
                          </div>
                        </Card>
                      ))}
                    </div>
                  </div>

                  <button
                    onClick={nextSlide}
                    disabled={currentBadgeSlide >= badges.length - 3}
                    className="w-12 h-12 rounded-xl bg-gradient-to-br from-cyan-500/20 to-cyan-600/10 border border-cyan-500/40 flex items-center justify-center hover:from-cyan-500/30 hover:to-cyan-600/20 hover:border-cyan-400/60 transition-all disabled:opacity-20 disabled:cursor-not-allowed hover:scale-110 hover:shadow-[0_0_20px_rgba(6,182,212,0.3)] active:scale-95 cursor-pointer"
                  >
                    <ChevronRight className="w-6 h-6 text-cyan-400" />
                  </button>
                </div>

                {/* Dots Indicator */}
                <div className="flex justify-center gap-2">
                  {Array.from({ length: badges.length - 2 }).map((_, index) => (
                    <button
                      key={index}
                      onClick={() => setCurrentBadgeSlide(index)}
                      className={`h-2 rounded-full transition-all cursor-pointer ${
                        currentBadgeSlide === index
                          ? 'bg-cyan-400 w-8 shadow-[0_0_10px_rgba(6,182,212,0.5)]'
                          : 'bg-cyan-500/30 w-2 hover:bg-cyan-500/50'
                      }`}
                    />
                  ))}
                </div>
              </div>
            </Card>
          </div>

          {/* Right Column - Profile Settings */}
          <Card className="bg-[#0d1117]/50 backdrop-blur-xl border-2 border-cyan-500/30 p-6 shadow-[0_0_30px_rgba(6,182,212,0.1)] hover:shadow-[0_0_50px_rgba(6,182,212,0.2)] transition-all duration-300 relative overflow-hidden group h-fit">
            <div className="absolute inset-0 bg-gradient-to-br from-cyan-500/5 via-transparent to-pink-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
            
            {/* Animated corner decorations */}
            <div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-cyan-500/10 to-transparent rounded-bl-full opacity-50" />
            <div className="absolute bottom-0 left-0 w-32 h-32 bg-gradient-to-tr from-pink-500/10 to-transparent rounded-tr-full opacity-50" />
            
            <div className="relative z-10">
              <div className="text-center mb-6">
                <div className="relative inline-block mb-4">
                  <div className="w-28 h-28 bg-gradient-to-br from-cyan-500/30 via-blue-500/30 to-purple-500/30 rounded-2xl flex items-center justify-center border-4 border-cyan-500/40 shadow-[0_0_40px_rgba(6,182,212,0.3)] hover:scale-110 hover:shadow-[0_0_60px_rgba(6,182,212,0.5)] hover:rotate-6 transition-all duration-300 group/avatar relative overflow-hidden cursor-pointer">
                    <div className="absolute inset-0 bg-gradient-to-br from-cyan-400/20 to-blue-400/20 animate-pulse" />
                    <div className="absolute inset-0 bg-gradient-to-br from-transparent via-white/10 to-transparent" />
                    <User className="w-14 h-14 text-cyan-400 relative z-10 drop-shadow-[0_0_10px_rgba(6,182,212,0.5)]" />
                  </div>
                  {/* Level badge */}
                  <div className="absolute -bottom-2 -right-2 w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center border-4 border-[#0d1117] shadow-lg">
                    <span className="text-white font-mono font-bold text-sm">{userData.level}</span>
                  </div>
                  {/* Status indicator */}
                  <div className="absolute -top-1 -right-1 w-4 h-4 bg-green-500 rounded-full border-2 border-[#0d1117] animate-pulse" />
                </div>
                <h3 className="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-blue-400 to-purple-400 font-mono mb-1">
                  Profile Settings
                </h3>
                <p className="text-xs text-cyan-400/60 font-mono">
                  Member since {userData.joinDate}
                </p>
              </div>

              {/* School Nickname */}
              <div className="space-y-2 mb-6">
                <Label className="text-cyan-400 font-mono text-sm flex items-center gap-2">
                  <Sparkles className="w-3 h-3" />
                  School nickname:
                </Label>
                <Input
                  value={userData.nickname}
                  readOnly
                  className="bg-[#0a0e1a]/80 backdrop-blur border-cyan-500/40 text-cyan-400 font-mono hover:border-cyan-500/60 transition-all focus:shadow-[0_0_20px_rgba(6,182,212,0.2)] cursor-text"
                />
              </div>

              {/* Change Password */}
              <div className="space-y-4 mb-6">
                <Label className="text-cyan-400 font-mono text-sm flex items-center gap-2">
                  <Lock className="w-3 h-3" />
                  Change password
                </Label>
                <Input
                  type="password"
                  placeholder="Current pswd"
                  className="bg-[#0a0e1a]/80 backdrop-blur border-cyan-500/40 text-cyan-400 placeholder:text-cyan-400/30 font-mono hover:border-cyan-500/60 transition-all focus:border-cyan-400 focus:shadow-[0_0_20px_rgba(6,182,212,0.2)] cursor-text"
                />
                <Input
                  type="password"
                  placeholder="New pswd"
                  className="bg-[#0a0e1a]/80 backdrop-blur border-cyan-500/40 text-cyan-400 placeholder:text-cyan-400/30 font-mono hover:border-cyan-500/60 transition-all focus:border-cyan-400 focus:shadow-[0_0_20px_rgba(6,182,212,0.2)] cursor-text"
                />
                <Input
                  type="password"
                  placeholder="Confirm new pswd"
                  className="bg-[#0a0e1a]/80 backdrop-blur border-cyan-500/40 text-cyan-400 placeholder:text-cyan-400/30 font-mono hover:border-cyan-500/60 transition-all focus:border-cyan-400 focus:shadow-[0_0_20px_rgba(6,182,212,0.2)] cursor-text"
                />
                <Button className="w-full bg-gradient-to-r from-cyan-500 to-cyan-600 hover:from-cyan-400 hover:to-cyan-500 text-black font-mono font-bold shadow-[0_0_20px_rgba(6,182,212,0.3)] hover:shadow-[0_0_40px_rgba(6,182,212,0.5)] transition-all hover:scale-105 active:scale-95 cursor-pointer">
                  Apply Changes
                </Button>
              </div>

              {/* Change Avatar */}
              <div className="space-y-3">
                <Label className="text-cyan-400 font-mono text-sm flex items-center gap-2">
                  <User className="w-3 h-3" />
                  Change avatar
                </Label>
                <div className="grid grid-cols-2 gap-3">
                  <Button 
                    variant="outline"
                    className="bg-gradient-to-r from-cyan-500/90 to-cyan-600/90 hover:from-cyan-400 hover:to-cyan-500 border-0 text-black font-mono font-bold shadow-[0_0_15px_rgba(6,182,212,0.2)] hover:shadow-[0_0_30px_rgba(6,182,212,0.4)] transition-all hover:scale-105 active:scale-95 cursor-pointer"
                  >
                    Choose File
                  </Button>
                  <Button 
                    variant="outline"
                    className="bg-gradient-to-r from-cyan-500/90 to-cyan-600/90 hover:from-cyan-400 hover:to-cyan-500 border-0 text-black font-mono font-bold shadow-[0_0_15px_rgba(6,182,212,0.2)] hover:shadow-[0_0_30px_rgba(6,182,212,0.4)] transition-all hover:scale-105 active:scale-95 cursor-pointer"
                  >
                    Upload Avatar
                  </Button>
                </div>
              </div>

              {/* Additional Stats */}
              <div className="mt-6 pt-6 border-t border-cyan-500/20">
                <div className="grid grid-cols-2 gap-3">
                  <div className="bg-[#0a0e1a]/50 rounded-lg p-3 border border-cyan-500/20 hover:border-cyan-500/40 transition-all cursor-pointer hover:scale-105">
                    <div className="flex items-center gap-2 mb-1">
                      <Flame className="w-4 h-4 text-orange-400" />
                      <span className="text-xs text-cyan-400/60 font-mono">Streak</span>
                    </div>
                    <div className="text-lg font-bold text-orange-400 font-mono">7 days</div>
                  </div>
                  <div className="bg-[#0a0e1a]/50 rounded-lg p-3 border border-cyan-500/20 hover:border-cyan-500/40 transition-all cursor-pointer hover:scale-105">
                    <div className="flex items-center gap-2 mb-1">
                      <Trophy className="w-4 h-4 text-yellow-400" />
                      <span className="text-xs text-cyan-400/60 font-mono">Rank</span>
                    </div>
                    <div className="text-lg font-bold text-yellow-400 font-mono">#42</div>
                  </div>
                </div>
              </div>
            </div>
          </Card>
        </div>
      </main>

      {/* Enhanced Background grid */}
      <div 
        className="fixed inset-0 pointer-events-none -z-10 opacity-40"
        style={{
          backgroundImage: `
            linear-gradient(rgba(6, 182, 212, 0.08) 1px, transparent 1px),
            linear-gradient(90deg, rgba(6, 182, 212, 0.08) 1px, transparent 1px)
          `,
          backgroundSize: '60px 60px'
        }}
      />

      <style jsx>{`
        @keyframes pulse-slow {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.8; }
        }
        .animate-pulse-slow {
          animation: pulse-slow 3s ease-in-out infinite;
        }
        @keyframes moveBackground {
          0% { transform: translate(0, 0); }
          100% { transform: translate(30px, 30px); }
        }
        @keyframes shimmer {
          0% { transform: translateX(-100%); }
          100% { transform: translateX(100%); }
        }
        .animate-shimmer {
          animation: shimmer 2s infinite;
        }
        @keyframes gradient {
          0%, 100% { background-position: 0% 50%; }
          50% { background-position: 100% 50%; }
        }
        .animate-gradient {
          background-size: 200% 200%;
          animation: gradient 3s ease infinite;
        }
        @keyframes pulse-border {
          0%, 100% { box-shadow: 0 0 20px rgba(234, 179, 8, 0.2); }
          50% { box-shadow: 0 0 30px rgba(234, 179, 8, 0.4); }
        }
        .animate-pulse-border {
          animation: pulse-border 2s ease-in-out infinite;
        }
      `}</style>
    </div>
  )
}