"use client";

import { motion } from 'framer-motion';
import { Save, Bell, Shield, Database, Cpu } from 'lucide-react';

export default function SettingsPage() {
  return (
    <div className="container mx-auto px-4 py-8">
      <div className="flex justify-between items-end mb-8">
        <div>
          <h1 className="text-3xl font-bold font-mono tracking-tight mb-2">SYSTEM_<span className="text-primary">CONFIG</span></h1>
          <p className="text-muted-foreground">Adjust core parameters, AI models, and notification routing.</p>
        </div>
        <button className="flex items-center gap-2 px-6 py-2 bg-primary hover:bg-primary/90 text-primary-foreground rounded font-mono text-sm font-bold shadow-[0_0_15px_rgba(0,255,136,0.3)] transition-all">
          <Save className="w-4 h-4" /> COMMIT_CHANGES
        </button>
      </div>

      <div className="grid md:grid-cols-3 gap-8">
        <div className="md:col-span-2 space-y-6">
          <motion.div initial={{opacity: 0}} animate={{opacity: 1}} className="p-6 bg-card border border-border rounded-lg">
            <h2 className="text-lg font-bold font-mono mb-4 flex items-center gap-2 border-b border-border pb-2"><Cpu className="w-5 h-5 text-primary" /> AI_ENGINE_SETTINGS</h2>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="block text-xs font-mono text-muted-foreground mb-1">Primary Provider</label>
                <select className="w-full bg-background border border-border rounded px-3 py-2 text-sm focus:outline-none focus:border-primary">
                  <option>Anthropic (Claude 3.5 Sonnet)</option>
                  <option>OpenAI (GPT-4o)</option>
                  <option>Groq (Llama 3 70B)</option>
                  <option>Ollama (Local)</option>
                </select>
              </div>
              <div>
                <label className="block text-xs font-mono text-muted-foreground mb-1">Strictness Level</label>
                <select className="w-full bg-background border border-border rounded px-3 py-2 text-sm focus:outline-none focus:border-primary">
                  <option>High (Miss deals, zero noise)</option>
                  <option selected>Balanced</option>
                  <option>Low (Catch everything, more noise)</option>
                </select>
              </div>
              <div className="col-span-2">
                <label className="block text-xs font-mono text-muted-foreground mb-1">API Key</label>
                <input type="password" value="*************************" className="w-full bg-background border border-border rounded px-3 py-2 text-sm focus:outline-none focus:border-primary" readOnly/>
              </div>
            </div>
          </motion.div>

          <motion.div initial={{opacity: 0}} animate={{opacity: 1}} transition={{delay: 0.1}} className="p-6 bg-card border border-border rounded-lg">
            <h2 className="text-lg font-bold font-mono mb-4 flex items-center gap-2 border-b border-border pb-2"><Bell className="w-5 h-5 text-accent" /> ALERT_ROUTING</h2>
            <div className="space-y-4">
              <div className="flex items-center justify-between p-3 bg-background border border-border rounded">
                <div>
                  <div className="font-bold">Telegram Bot</div>
                  <div className="text-xs text-muted-foreground">Status: Connected (@BidWraithBot)</div>
                </div>
                <div className="w-10 h-5 bg-primary rounded-full relative cursor-pointer"><div className="absolute right-1 top-1 w-3 h-3 bg-primary-foreground rounded-full"></div></div>
              </div>
              <div className="flex items-center justify-between p-3 bg-background border border-border rounded">
                <div>
                  <div className="font-bold">Discord Webhook</div>
                  <div className="text-xs text-muted-foreground">Status: Not Configured</div>
                </div>
                <div className="w-10 h-5 bg-border rounded-full relative cursor-pointer"><div className="absolute left-1 top-1 w-3 h-3 bg-muted-foreground rounded-full"></div></div>
              </div>
            </div>
          </motion.div>
        </div>

        <div className="space-y-6">
           <motion.div initial={{opacity: 0}} animate={{opacity: 1}} transition={{delay: 0.2}} className="p-6 bg-card border border-border rounded-lg">
            <h2 className="text-lg font-bold font-mono mb-4 flex items-center gap-2 border-b border-border pb-2"><Shield className="w-5 h-5 text-muted-foreground" /> STEALTH_MODE</h2>
            <div className="space-y-4">
              <div>
                <label className="block text-xs font-mono text-muted-foreground mb-1">Humanization Level</label>
                <input type="range" min="1" max="100" defaultValue="75" className="w-full accent-primary" />
                <div className="flex justify-between text-xs text-muted-foreground mt-1"><span>Fast/Bot</span><span>Slow/Human</span></div>
              </div>
              <div className="pt-2">
                <label className="flex items-center gap-2 text-sm cursor-pointer">
                  <input type="checkbox" defaultChecked className="accent-primary w-4 h-4" /> Use Proxy Rotation
                </label>
              </div>
            </div>
          </motion.div>

          <motion.div initial={{opacity: 0}} animate={{opacity: 1}} transition={{delay: 0.3}} className="p-6 bg-card border border-border rounded-lg">
            <h2 className="text-lg font-bold font-mono mb-4 flex items-center gap-2 border-b border-border pb-2"><Database className="w-5 h-5 text-muted-foreground" /> DATA_MANAGEMENT</h2>
            <div className="space-y-2">
              <button className="w-full py-2 bg-background border border-border hover:border-primary text-sm font-mono rounded transition-colors text-left px-3">Export Database Backup</button>
              <button className="w-full py-2 bg-background border border-border hover:border-primary text-sm font-mono rounded transition-colors text-left px-3">Clear Old Logs (&gt;30d)</button>
              <button className="w-full py-2 bg-destructive/10 border border-destructive/30 text-destructive hover:bg-destructive hover:text-destructive-foreground text-sm font-mono rounded transition-colors text-left px-3 mt-4">FACTORY RESET</button>
            </div>
          </motion.div>
        </div>
      </div>
    </div>
  );
}