import { motion } from 'motion/react';
import { Database, Monitor, Server, Shuffle, Zap, Brain, Code2, Trophy, Calculator, Cpu, Map, Layers, Gift } from 'lucide-react';

export function DSAVisual() {
  return (
    <div className="w-full h-full bg-gradient-to-br from-[#0a0a14] to-[#121225] flex items-center justify-center overflow-hidden relative">
      <div className="absolute inset-0 opacity-20 bg-[radial-gradient(circle_at_50%_50%,rgba(59,130,246,0.3),transparent_70%)]" />
      <svg className="w-full h-full absolute inset-0 opacity-10" viewBox="0 0 100 100" preserveAspectRatio="none">
        <pattern id="grid-dsa" width="10" height="10" patternUnits="userSpaceOnUse">
          <path d="M 10 0 L 0 0 0 10" fill="none" stroke="currentColor" strokeWidth="0.5" />
        </pattern>
        <rect width="100" height="100" fill="url(#grid-dsa)" />
      </svg>
      <div className="relative w-3/4 h-3/4 bg-[#05050a]/80 backdrop-blur-sm border border-blue-500/20 rounded-xl overflow-hidden shadow-[0_0_30px_rgba(59,130,246,0.15)] flex flex-col group-hover:border-blue-500/40 transition-colors duration-500">
        <div className="h-6 border-b border-white/5 bg-white/5 flex items-center px-3 gap-1.5">
          <div className="w-2 h-2 rounded-full bg-red-500/50" />
          <div className="w-2 h-2 rounded-full bg-amber-500/50" />
          <div className="w-2 h-2 rounded-full bg-green-500/50" />
        </div>
        <div className="flex-1 p-3 flex flex-col gap-2">
          <motion.div initial={{ width: "30%" }} animate={{ width: "80%" }} transition={{ duration: 2, repeat: Infinity, repeatType: "reverse" }} className="h-2 rounded-full bg-blue-500/30" />
          <motion.div initial={{ width: "50%" }} animate={{ width: "40%" }} transition={{ duration: 1.5, repeat: Infinity, repeatType: "reverse" }} className="h-2 rounded-full bg-cyan-500/30 ml-4" />
          <motion.div initial={{ width: "20%" }} animate={{ width: "60%" }} transition={{ duration: 2.5, repeat: Infinity, repeatType: "reverse" }} className="h-2 rounded-full bg-blue-400/30 ml-8" />
        </div>
      </div>
    </div>
  );
}

export function AITutorVisual() {
  return (
    <div className="w-full h-full bg-gradient-to-br from-[#080514] to-[#160a24] flex items-center justify-center overflow-hidden relative">
      <div className="absolute inset-0 opacity-20 bg-[radial-gradient(circle_at_50%_50%,rgba(139,92,246,0.3),transparent_70%)]" />
      <motion.div animate={{ rotate: 360 }} transition={{ duration: 20, repeat: Infinity, ease: "linear" }} className="absolute inset-0 opacity-30">
        <div className="absolute top-1/4 left-1/4 w-32 h-32 bg-violet-500/20 rounded-full blur-3xl" />
        <div className="absolute bottom-1/4 right-1/4 w-32 h-32 bg-purple-500/20 rounded-full blur-3xl" />
      </motion.div>
      <div className="relative w-16 h-16 rounded-full bg-gradient-to-br from-violet-500/20 to-purple-600/20 border border-violet-500/30 flex items-center justify-center group-hover:scale-110 transition-transform duration-500 shadow-[0_0_40px_rgba(139,92,246,0.2)]">
        <Brain className="text-violet-400 w-8 h-8" />
        <motion.div animate={{ scale: [1, 1.2, 1], opacity: [0.5, 1, 0.5] }} transition={{ duration: 2, repeat: Infinity }} className="absolute inset-0 rounded-full border border-violet-400/30" />
      </div>
    </div>
  );
}

export function QuestsVisual() {
  return (
    <div className="w-full h-full bg-gradient-to-br from-[#140a05] to-[#24100a] flex items-center justify-center overflow-hidden relative">
      <div className="absolute inset-0 opacity-20 bg-[radial-gradient(circle_at_50%_50%,rgba(249,115,22,0.3),transparent_70%)]" />
      <svg className="absolute inset-0 w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
        <motion.path d="M 0 50 Q 25 30 50 50 T 100 50" fill="none" stroke="rgba(249,115,22,0.3)" strokeWidth="1" strokeDasharray="4 4" initial={{ strokeDashoffset: 0 }} animate={{ strokeDashoffset: -20 }} transition={{ duration: 2, repeat: Infinity, ease: "linear" }} />
      </svg>
      <div className="relative flex items-center gap-4">
        <div className="w-8 h-8 rounded-full bg-orange-500/20 border border-orange-500/50 flex items-center justify-center shadow-[0_0_20px_rgba(249,115,22,0.3)]">
          <Map className="w-4 h-4 text-orange-400" />
        </div>
        <motion.div animate={{ x: [0, 10, 0] }} transition={{ duration: 2, repeat: Infinity }} className="w-8 h-8 rounded-full bg-rose-500/10 border border-rose-500/30 flex items-center justify-center">
          <div className="w-2 h-2 rounded-full bg-rose-400/50" />
        </motion.div>
      </div>
    </div>
  );
}

export function DailyContestVisual() {
  return (
    <div className="w-full h-full bg-gradient-to-br from-[#141005] to-[#241a0a] flex flex-col items-center justify-center overflow-hidden relative">
      <div className="absolute inset-0 opacity-20 bg-[radial-gradient(circle_at_50%_50%,rgba(245,158,11,0.3),transparent_70%)]" />
      <div className="relative flex flex-col items-center gap-3">
        <Zap className="w-10 h-10 text-amber-400 opacity-80" />
        <div className="flex gap-2 items-end h-10">
          {[40, 70, 50, 90, 60].map((h, i) => (
            <motion.div key={i} initial={{ height: "20%" }} animate={{ height: `${h}%` }} transition={{ duration: 1.5, repeat: Infinity, repeatType: "reverse", delay: i * 0.2 }} className="w-3 rounded-t-sm bg-gradient-to-t from-amber-600/50 to-amber-400/80" />
          ))}
        </div>
      </div>
    </div>
  );
}

export function WeeklyArenaVisual() {
  return (
    <div className="w-full h-full bg-gradient-to-br from-[#05140a] to-[#0a2414] flex items-center justify-center overflow-hidden relative">
      <div className="absolute inset-0 opacity-20 bg-[radial-gradient(circle_at_50%_50%,rgba(16,185,129,0.3),transparent_70%)]" />
      <motion.div animate={{ rotate: 360 }} transition={{ duration: 10, repeat: Infinity, ease: "linear" }} className="absolute w-[200%] h-[200%] bg-[conic-gradient(from_0deg,transparent_0_340deg,rgba(16,185,129,0.1)_360deg)]" />
      <div className="relative flex items-center justify-center">
        <div className="absolute w-20 h-20 bg-emerald-500/20 rounded-full blur-xl" />
        <Trophy className="w-12 h-12 text-emerald-400 relative z-10 drop-shadow-[0_0_15px_rgba(16,185,129,0.5)]" />
      </div>
    </div>
  );
}

export function CompilerVisual() {
  return (
    <div className="w-full h-full bg-gradient-to-br from-[#14050a] to-[#240a12] flex items-center justify-center overflow-hidden relative">
      <div className="absolute inset-0 opacity-20 bg-[radial-gradient(circle_at_50%_50%,rgba(244,63,94,0.3),transparent_70%)]" />
      <div className="relative w-4/5 h-2/3 bg-black/60 rounded-lg border border-rose-500/20 overflow-hidden flex flex-col shadow-[0_0_30px_rgba(244,63,94,0.15)] group-hover:border-rose-500/40 transition-colors duration-500">
        <div className="flex-1 p-3 font-mono text-[10px] text-rose-300/70 leading-relaxed flex flex-col gap-1.5">
          <motion.div initial={{ opacity: 0.5 }} animate={{ opacity: 1 }} transition={{ duration: 1, repeat: Infinity, repeatType: "reverse" }} className="flex gap-2">
            <span className="text-slate-500">1</span>
            <span className="text-pink-400">print</span>
            <span className="text-rose-300">("Hello RYP")</span>
          </motion.div>
          <div className="flex gap-2">
            <span className="text-slate-500">2</span>
            <span className="text-rose-400">def</span>
            <span className="text-rose-200"> solve():</span>
          </div>
          <div className="flex gap-2 pl-4">
            <span className="text-slate-500">3</span>
            <span className="text-pink-400">return</span>
            <span className="text-rose-300"> True</span>
          </div>
        </div>
      </div>
    </div>
  );
}

export function SystemDesignVisual() {
  return (
    <div className="w-full h-full bg-gradient-to-br from-[#051014] to-[#0a1c24] flex items-center justify-center overflow-hidden relative">
      <div className="absolute inset-0 opacity-20 bg-[radial-gradient(circle_at_50%_50%,rgba(14,165,233,0.3),transparent_70%)]" />
      <svg className="absolute inset-0 w-full h-full opacity-30" viewBox="0 0 100 100">
        <motion.path d="M 20 50 L 40 50 M 60 40 L 80 30 M 60 60 L 80 70" stroke="#38bdf8" strokeWidth="1" strokeDasharray="2 2" />
        <motion.circle cx="30" cy="50" r="1" fill="#38bdf8" animate={{ cx: [20, 40] }} transition={{ duration: 1, repeat: Infinity }} />
        <motion.circle cx="70" cy="35" r="1" fill="#38bdf8" animate={{ cx: [60, 80], cy: [40, 30] }} transition={{ duration: 1, repeat: Infinity }} />
      </svg>
      <div className="relative flex items-center gap-6">
        <div className="w-8 h-8 rounded-lg bg-sky-500/10 border border-sky-500/30 flex items-center justify-center"><Monitor className="w-4 h-4 text-sky-400" /></div>
        <div className="flex flex-col gap-3">
          <div className="w-8 h-8 rounded-lg bg-blue-500/10 border border-blue-500/30 flex items-center justify-center"><Server className="w-4 h-4 text-blue-400" /></div>
          <div className="w-8 h-8 rounded-lg bg-indigo-500/10 border border-indigo-500/30 flex items-center justify-center"><Database className="w-4 h-4 text-indigo-400" /></div>
        </div>
      </div>
    </div>
  );
}

export function CSFundamentalsVisual() {
  return (
    <div className="w-full h-full bg-gradient-to-br from-[#051412] to-[#0a241c] flex items-center justify-center overflow-hidden relative">
      <div className="absolute inset-0 opacity-20 bg-[radial-gradient(circle_at_50%_50%,rgba(20,184,166,0.3),transparent_70%)]" />
      <div className="relative flex gap-3">
        {[1, 2, 3].map((i) => (
          <motion.div key={i} animate={{ y: [0, -5, 0] }} transition={{ duration: 2, repeat: Infinity, delay: i * 0.2 }} className="w-10 h-14 rounded-md bg-teal-500/10 border border-teal-500/30 shadow-[0_4px_15px_rgba(20,184,166,0.1)] flex flex-col p-1.5 gap-1.5">
            <div className="w-full h-2 rounded bg-teal-500/30" />
            <div className="w-3/4 h-1.5 rounded bg-teal-500/20" />
            <div className="w-1/2 h-1.5 rounded bg-teal-500/20" />
          </motion.div>
        ))}
      </div>
    </div>
  );
}

export function AptitudeVisual() {
  return (
    <div className="w-full h-full bg-gradient-to-br from-[#140512] to-[#240a1c] flex items-center justify-center overflow-hidden relative">
      <div className="absolute inset-0 opacity-20 bg-[radial-gradient(circle_at_50%_50%,rgba(217,70,239,0.3),transparent_70%)]" />
      <motion.div animate={{ rotate: -360 }} transition={{ duration: 15, repeat: Infinity, ease: "linear" }} className="absolute w-32 h-32 border border-fuchsia-500/10 rounded-full border-dashed" />
      <div className="relative w-16 h-16 rounded-2xl bg-fuchsia-500/10 border border-fuchsia-500/30 flex items-center justify-center transform rotate-12 group-hover:rotate-0 transition-transform duration-500 shadow-[0_0_30px_rgba(217,70,239,0.2)]">
        <Calculator className="w-8 h-8 text-fuchsia-400" />
      </div>
    </div>
  );
}

export function SwagStoreVisual() {
  return (
    <div className="w-full h-full bg-gradient-to-br from-[#140505] to-[#240a0a] flex flex-col items-center justify-center overflow-hidden relative">
      <div className="absolute inset-0 opacity-20 bg-[radial-gradient(circle_at_50%_50%,rgba(244,63,94,0.3),transparent_70%)]" />
      <div className="relative flex flex-col items-center justify-center gap-2">
        <motion.div animate={{ y: [0, -10, 0], scale: [1, 1.1, 1] }} transition={{ duration: 2, repeat: Infinity }} className="relative z-10 w-12 h-12 rounded-2xl bg-rose-500/20 border border-rose-500/40 flex items-center justify-center shadow-[0_0_30px_rgba(244,63,94,0.3)]">
          <Gift className="w-6 h-6 text-rose-400" />
        </motion.div>
        <div className="flex gap-1 absolute top-0">
          {[1, 2, 3].map((i) => (
            <motion.div key={i} animate={{ y: [20, -40], opacity: [0, 1, 0], scale: [0.5, 1, 0.5] }} transition={{ duration: 1.5, repeat: Infinity, delay: i * 0.4 }} className="w-4 h-4 rounded-full bg-amber-400/80 border border-amber-300 shadow-[0_0_10px_rgba(251,191,36,0.8)] flex items-center justify-center text-[8px] font-bold text-amber-900">
              R
            </motion.div>
          ))}
        </div>
      </div>
    </div>
  );
}

export const FeatureVisualsMap: Record<string, React.FC> = {
  'DSA Practice': DSAVisual,
  'RYP AI Tutor': AITutorVisual,
  'RYP Quests': QuestsVisual,
  'Daily Contest': DailyContestVisual,
  'Weekly Arena': WeeklyArenaVisual,
  'Online Compiler': CompilerVisual,
  'System Design': SystemDesignVisual,
  'CS Fundamentals': CSFundamentalsVisual,
  'Aptitude': AptitudeVisual,
  'RYP Swag Store': SwagStoreVisual,
};