"use client";

import { motion } from 'framer-motion';
import { Save, Bell, Shield, Database, Cpu, Settings, MessageSquare, Sliders, HardDrive, Trash2 } from 'lucide-react';

const containerVariants = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1,
    }
  }
};

const itemVariants = {
  hidden: { opacity: 0, y: 20, scale: 0.95 },
  show: { opacity: 1, y: 0, scale: 1, transition: { type: "spring" as const, stiffness: 300, damping: 24 } }
};

export default function SettingsPage() {
  return (
    <div className="container mx-auto px-6 py-12 relative">
      <div className="absolute top-[20%] left-[-10%] w-[30%] h-[30%] bg-blue-500/10 rounded-full blur-[120px] pointer-events-none -z-10" />
      <div className="absolute bottom-[10%] right-[10%] w-[30%] h-[30%] bg-purple-500/10 rounded-full blur-[120px] pointer-events-none -z-10" />

      <motion.div 
        initial={{ opacity: 0, y: -20 }}
        animate={{ opacity: 1, y: 0 }}
        className="flex flex-col md:flex-row justify-between items-start md:items-center mb-12 gap-4"
      >
        <div>
          <h1 className="text-5xl font-black tracking-tight mb-3 flex items-center gap-4 drop-shadow-sm">
            System Config <motion.div animate={{ rotate: 360 }} transition={{ duration: 10, repeat: Infinity, ease: "linear" }}><Settings className="w-10 h-10 text-primary drop-shadow-md" /></motion.div>
          </h1>
          <p className="text-muted-foreground text-xl font-medium">Adjust core parameters, AI models, and notification routing.</p>
        </div>
        <motion.button 
          whileHover={{ scale: 1.05, boxShadow: "0 0 25px rgba(139, 92, 246, 0.4)" }} 
          whileTap={{ scale: 0.95 }}
          className="flex items-center gap-3 px-8 py-4 bg-primary text-primary-foreground rounded-2xl font-black shadow-lg transition-all relative overflow-hidden group"
        >
          <span className="absolute inset-0 bg-white/20 translate-y-[100%] group-hover:translate-y-[0%] transition-transform duration-300" />
          <Save className="w-5 h-5 relative z-10" /> 
          <span className="relative z-10">Save Changes</span>
        </motion.button>
      </motion.div>

      <motion.div 
        variants={containerVariants}
        initial="hidden"
        animate="show"
        className="grid md:grid-cols-3 gap-8"
      >
        <div className="md:col-span-2 space-y-8">
          {/* AI Settings */}
          <motion.div variants={itemVariants} className="p-8 bg-card/80 backdrop-blur-xl border border-white/5 rounded-[2.5rem] shadow-xl relative overflow-hidden group hover:border-blue-500/30 transition-colors">
            <div className="absolute -right-20 -top-20 w-48 h-48 bg-blue-500/10 rounded-full blur-[60px] group-hover:scale-150 transition-transform duration-700 pointer-events-none" />
            <h2 className="text-3xl font-black mb-8 flex items-center gap-4 border-b border-border/50 pb-6 relative z-10">
               <div className="p-3 bg-blue-500/10 rounded-2xl border border-blue-500/20 shadow-inner"><Cpu className="w-8 h-8 text-blue-500" /></div>
               AI Engine Preferences
            </h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 relative z-10">
              <div>
                <label className="block text-sm font-black text-muted-foreground mb-3 uppercase tracking-wider">Primary Provider</label>
                <div className="relative">
                  <select className="w-full bg-secondary/50 border border-white/10 rounded-2xl px-5 py-4 text-lg font-bold focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/50 transition-all appearance-none shadow-inner cursor-pointer hover:bg-secondary/80">
                    <option>Anthropic (Claude 3.5 Sonnet)</option>
                    <option>OpenAI (GPT-4o)</option>
                    <option>Groq (Llama 3 70B)</option>
                    <option>Ollama (Local)</option>
                  </select>
                  <div className="absolute right-5 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground">▼</div>
                </div>
              </div>
              <div>
                <label className="block text-sm font-black text-muted-foreground mb-3 uppercase tracking-wider">Strictness Level</label>
                <div className="relative">
                  <select className="w-full bg-secondary/50 border border-white/10 rounded-2xl px-5 py-4 text-lg font-bold focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/50 transition-all appearance-none shadow-inner cursor-pointer hover:bg-secondary/80">
                    <option>High (Miss deals, zero noise)</option>
                    <option selected>Balanced</option>
                    <option>Low (Catch everything, more noise)</option>
                  </select>
                  <div className="absolute right-5 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground">▼</div>
                </div>
              </div>
              <div className="col-span-1 md:col-span-2">
                <label className="block text-sm font-black text-muted-foreground mb-3 uppercase tracking-wider">API Key</label>
                <input type="password" value="sk-ant-api03-*************************" className="w-full bg-secondary/50 border border-white/10 rounded-2xl px-5 py-4 text-lg font-bold focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/50 transition-all shadow-inner" readOnly/>
              </div>
            </div>
          </motion.div>

          {/* Alert Routing */}
          <motion.div variants={itemVariants} className="p-8 bg-card/80 backdrop-blur-xl border border-white/5 rounded-[2.5rem] shadow-xl relative overflow-hidden group hover:border-amber-500/30 transition-colors">
            <div className="absolute -left-20 -bottom-20 w-48 h-48 bg-amber-500/10 rounded-full blur-[60px] group-hover:scale-150 transition-transform duration-700 pointer-events-none" />
            <h2 className="text-3xl font-black mb-8 flex items-center gap-4 border-b border-border/50 pb-6 relative z-10">
               <div className="p-3 bg-amber-500/10 rounded-2xl border border-amber-500/20 shadow-inner"><Bell className="w-8 h-8 text-amber-500" /></div>
               Alert Routing
            </h2>
            <div className="space-y-4 relative z-10">
              <motion.div whileHover={{ scale: 1.01 }} className="flex items-center justify-between p-6 bg-secondary/40 border border-white/5 rounded-3xl hover:border-amber-500/50 transition-all cursor-pointer shadow-sm">
                <div className="flex items-center gap-5">
                  <div className="p-4 bg-[#0088cc]/10 rounded-2xl border border-[#0088cc]/20"><MessageSquare className="w-8 h-8 text-[#0088cc]" /></div>
                  <div>
                    <div className="font-black text-xl">Telegram Bot</div>
                    <div className="text-base font-bold text-green-500 mt-1 flex items-center gap-2">
                      <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse" /> Connected (@BidWraithBot)
                    </div>
                  </div>
                </div>
                <div className="w-16 h-8 bg-amber-500 rounded-full relative shadow-[0_0_15px_rgba(245,158,11,0.4)]">
                  <motion.div layout className="absolute right-1 top-1 w-6 h-6 bg-white rounded-full shadow-md"></motion.div>
                </div>
              </motion.div>
              <motion.div whileHover={{ scale: 1.01 }} className="flex items-center justify-between p-6 bg-secondary/40 border border-white/5 rounded-3xl hover:border-border/80 transition-all cursor-pointer shadow-sm opacity-70">
                <div className="flex items-center gap-5">
                  <div className="p-4 bg-[#5865F2]/10 rounded-2xl border border-[#5865F2]/20"><MessageSquare className="w-8 h-8 text-[#5865F2]" /></div>
                  <div>
                    <div className="font-black text-xl">Discord Webhook</div>
                    <div className="text-base font-bold text-muted-foreground mt-1">Not Configured</div>
                  </div>
                </div>
                <div className="w-16 h-8 bg-secondary-foreground/20 rounded-full relative shadow-inner">
                  <motion.div layout className="absolute left-1 top-1 w-6 h-6 bg-card rounded-full shadow-sm"></motion.div>
                </div>
              </motion.div>
            </div>
          </motion.div>
        </div>

        <div className="space-y-8">
           {/* Stealth Mode */}
           <motion.div variants={itemVariants} className="p-8 bg-card/80 backdrop-blur-xl border border-white/5 rounded-[2.5rem] shadow-xl relative overflow-hidden group hover:border-purple-500/30 transition-colors">
            <div className="absolute -right-10 -bottom-10 w-40 h-40 bg-purple-500/10 rounded-full blur-[50px] group-hover:scale-150 transition-transform duration-700 pointer-events-none" />
            <h2 className="text-3xl font-black mb-8 flex items-center gap-4 border-b border-border/50 pb-6 relative z-10">
               <div className="p-3 bg-purple-500/10 rounded-2xl border border-purple-500/20 shadow-inner"><Shield className="w-8 h-8 text-purple-500" /></div>
               Stealth Mode
            </h2>
            <div className="space-y-8 relative z-10">
              <div>
                <label className="block text-sm font-black text-muted-foreground mb-4 uppercase tracking-wider">Humanization Level</label>
                <input type="range" min="1" max="100" defaultValue="75" className="w-full accent-purple-500 h-3 bg-secondary/80 rounded-full appearance-none cursor-pointer shadow-inner" />
                <div className="flex justify-between text-sm font-bold text-muted-foreground mt-4">
                  <span className="bg-secondary px-3 py-1 rounded-lg">Fast / Bot</span>
                  <span className="bg-secondary px-3 py-1 rounded-lg text-purple-500">Slow / Human</span>
                </div>
              </div>
              <div className="pt-2">
                <label className="flex items-center justify-between p-5 bg-secondary/40 border border-white/5 rounded-2xl hover:bg-secondary/60 transition-colors cursor-pointer group">
                  <span className="text-lg font-black group-hover:text-purple-500 transition-colors">Use Proxy Rotation</span>
                  <input type="checkbox" defaultChecked className="w-6 h-6 accent-purple-500 rounded text-purple-500 focus:ring-purple-500 bg-card border-white/10" /> 
                </label>
              </div>
            </div>
          </motion.div>

          {/* Data Management */}
          <motion.div variants={itemVariants} className="p-8 bg-card/80 backdrop-blur-xl border border-white/5 rounded-[2.5rem] shadow-xl relative overflow-hidden group hover:border-red-500/30 transition-colors">
            <h2 className="text-3xl font-black mb-8 flex items-center gap-4 border-b border-border/50 pb-6 relative z-10">
               <div className="p-3 bg-red-500/10 rounded-2xl border border-red-500/20 shadow-inner"><HardDrive className="w-8 h-8 text-red-500" /></div>
               Data Management
            </h2>
            <div className="space-y-4 relative z-10">
              <motion.button whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }} className="w-full py-4 bg-secondary/60 hover:bg-secondary border border-white/5 hover:border-red-500/50 text-lg font-black rounded-2xl transition-all flex items-center justify-center gap-3 text-foreground">
                <Database className="w-5 h-5 text-red-500" /> Export Database
              </motion.button>
              <motion.button whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }} className="w-full py-4 bg-red-500/10 hover:bg-red-500/20 border border-red-500/20 text-lg font-black rounded-2xl transition-all flex items-center justify-center gap-3 text-red-500">
                <Trash2 className="w-5 h-5" /> Purge Old Logs
              </motion.button>
            </div>
          </motion.div>
        </div>
      </motion.div>
    </div>
  );
}