import { useState, useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuthStore } from '../../store/authStore';
import { loginApi, getCaptchaApi } from '../../api/auth';
import { toast } from 'sonner';
import { Button } from '../../components/ui/button';
import { Input } from '../../components/ui/input';
import { Label } from '../../components/ui/label';
import { ShieldCheck, Disc3, ArrowRight, Heart, Sparkles, Waves } from 'lucide-react';
import { motion } from 'framer-motion';

export default function Login() {
    const navigate = useNavigate();
    const setToken = useAuthStore((state) => state.setToken);
    const setUserInfo = useAuthStore((state) => state.setUserInfo);

    const [account, setAccount] = useState('');
    const [password, setPassword] = useState('');
    const [captcha, setCaptcha] = useState('');
    const [captchaId, setCaptchaId] = useState('');
    const [captchaImage, setCaptchaImage] = useState('');
    const [loading, setLoading] = useState(false);

    const mounted = useRef(false);

    const fetchCaptcha = async () => {
        try {
            const res: any = await getCaptchaApi();
            const b64 = res.captcha;
            if (b64 && !b64.startsWith('data:')) {
                setCaptchaImage(`data:image/png;base64,${b64}`);
            } else {
                setCaptchaImage(b64);
            }
            setCaptchaId(res.captchaId);
        } catch (error) {
            console.error('获取验证码失败', error);
        }
    };

    useEffect(() => {
        if (!mounted.current) {
            fetchCaptcha();
            mounted.current = true;
        }
    }, []);

    const handleLogin = async (e: React.FormEvent) => {
        e.preventDefault();
        if (!account || !password) return toast.error('请输入账号和密码');
        if (!captcha) return toast.error('请输入验证码');

        try {
            setLoading(true);
            const res: any = await loginApi({
                account,
                password,
                captcha,
                captchaId
            });
            toast.success('欢迎回来，首席播音官');
            setToken(res.token);
            setUserInfo(res.user);
            navigate('/');
        } catch (error: any) {
            fetchCaptcha();
            setCaptcha('');
        } finally {
            setLoading(false);
        }
    };

    return (
        <div className="min-h-screen flex items-center justify-center bg-[#FAF5E6] relative overflow-hidden font-sans warm-noise selection:bg-[#D28F4F]/30 selection:text-[#4A3A2C]">
            {/* Ambient Background Elements */}
            <div className="absolute top-[-20%] left-[-10%] w-[60%] h-[60%] bg-gradient-to-br from-[#D28F4F]/15 via-transparent to-transparent rounded-full blur-[160px] animate-pulse" />
            <div className="absolute bottom-[-15%] right-[-5%] w-[55%] h-[55%] bg-gradient-to-tr from-[#A64452]/10 via-transparent to-transparent rounded-full blur-[140px] animate-pulse transition-duration-[4s]" />

            {/* Animated Floating Particles */}
            <div className="absolute inset-0 pointer-events-none opacity-20">
                <motion.div
                    animate={{ y: [0, -40, 0], opacity: [0.1, 0.4, 0.1] }}
                    transition={{ duration: 10, repeat: Infinity }}
                    className="absolute top-1/4 left-1/4 w-32 h-32 bg-[#D28F4F] rounded-full blur-[80px]"
                />
                <motion.div
                    animate={{ y: [0, 50, 0], opacity: [0.1, 0.3, 0.1] }}
                    transition={{ duration: 12, repeat: Infinity, delay: 1 }}
                    className="absolute bottom-1/4 right-1/3 w-40 h-40 bg-[#A64452] rounded-full blur-[90px]"
                />
            </div>

            <motion.div
                initial={{ opacity: 0, scale: 0.98, y: 15 }}
                animate={{ opacity: 1, scale: 1, y: 0 }}
                transition={{ duration: 1.2, ease: [0.22, 1, 0.36, 1] }}
                className="w-full max-w-[1240px] grid grid-cols-1 lg:grid-cols-2 bg-white/40 backdrop-blur-3xl rounded-[4.5rem] shadow-[0_40px_100px_-20px_rgba(74,58,44,0.12)] border border-white/60 overflow-hidden relative z-10 m-6 ring-1 ring-[#D28F4F]/5"
            >
                {/* Visual Side (Japanese Zen/Retro Radio Vibe) */}
                <div className="hidden lg:flex flex-col justify-between p-20 sidebar-noise text-white relative overflow-hidden group">
                    <div className="absolute inset-0 bg-[#4A3A2C]/10 mix-blend-overlay pointer-events-none" />
                    <div className="absolute top-[-30%] right-[-20%] w-[120%] h-[120%] bg-gradient-to-bl from-[#D28F4F]/40 via-transparent to-transparent rounded-full blur-[120px] group-hover:scale-110 transition-transform duration-[4s]" />

                    <div className="relative z-10">
                        <motion.div
                            initial={{ x: -30, opacity: 0 }}
                            animate={{ x: 0, opacity: 1 }}
                            transition={{ delay: 0.4, duration: 0.8 }}
                            className="flex items-center gap-6"
                        >
                            <div className="w-20 h-20 bg-white rounded-[2.5rem] flex items-center justify-center shadow-2xl shadow-[#D28F4F]/30 ring-1 ring-white/40 overflow-hidden relative group p-2.5">
                                <img src="/favicon.jpg" alt="logo" className="w-full h-full object-cover rounded-[1.8rem]" />
                                <div className="absolute inset-0 bg-[#D28F4F] opacity-0 group-hover:opacity-20 transition-opacity" />
                            </div>
                            <div className="flex flex-col">
                                <span className="text-3xl font-black tracking-tightest leading-none drop-shadow-sm">全声汇</span>
                                <div className="flex items-center gap-3 mt-2">
                                    <span className="text-[10px] uppercase font-black tracking-[0.4em] opacity-50 px-2 py-0.5 rounded-full border border-white/20">QUAN SHENG HUI</span>
                                </div>
                            </div>
                        </motion.div>

                        <div className="mt-28 space-y-10">
                            <motion.h2
                                initial={{ opacity: 0, y: 30 }}
                                animate={{ opacity: 1, y: 0 }}
                                transition={{ delay: 0.6, duration: 1 }}
                                className="text-6xl font-black text-white leading-[1.05] tracking-tighter"
                            >
                                听见<span className="text-white/40 italic font-serif mx-1">万物</span><br />
                                汇聚<span className="text-transparent bg-clip-text bg-gradient-to-r from-[#D28F4F] to-[#E29A66] italic px-2">共振</span>之旅。
                            </motion.h2>
                            <motion.div
                                initial={{ opacity: 0 }}
                                animate={{ opacity: 1 }}
                                transition={{ delay: 0.8 }}
                                className="flex flex-col gap-6"
                            >
                                <p className="text-white/60 text-xl font-medium max-w-sm leading-relaxed border-l-3 border-[#D28F4F] pl-8">
                                    专业音频管理中枢，<br />
                                    在简约之中，掌控声音的力量。
                                </p>
                                <div className="flex gap-4 items-center">
                                    <div className="h-px w-12 bg-white/20" />
                                    <span className="text-[10px] font-black uppercase tracking-[0.4em] text-white/30">System v2.5.0 Premium</span>
                                </div>
                            </motion.div>
                        </div>
                    </div>

                    <div className="relative z-10 flex items-end justify-between">
                        <div className="flex flex-col">
                            <div className="flex items-center gap-3 mb-2">
                                <Waves className="w-5 h-5 text-[#D28F4F]" />
                                <span className="text-[10px] uppercase font-black tracking-widest text-[#D28F4F]">Live Interaction Index</span>
                            </div>
                            <div className="text-4xl font-black flex items-baseline gap-2">
                                99.9%
                                <span className="text-xs text-white/40 font-bold uppercase">Up-time</span>
                            </div>
                        </div>
                        <div className="bg-white/10 backdrop-blur-xl rounded-[2rem] px-6 py-4 border border-white/10 flex items-center gap-4 group cursor-help hover:bg-white/20 transition-all">
                            <div className="w-3 h-3 rounded-full bg-emerald-500 shadow-[0_0_12px_#10b981]" />
                            <span className="text-sm font-black tracking-wide text-white/80 flex items-center gap-2">
                                <ShieldCheck className="w-4 h-4 text-[#D28F4F]" />
                                军用级加密信道
                            </span>
                        </div>
                    </div>
                </div>

                {/* Form Side (Clean Japanese Creamy Minimalist) */}
                <div className="p-12 lg:p-24 flex flex-col justify-center bg-[#FAF5E6]/30 backdrop-blur-2xl relative overflow-hidden group">
                    <div className="absolute top-0 right-0 w-64 h-64 bg-[#D28F4F]/5 rounded-full blur-[100px] pointer-events-none" />

                    <div className="max-w-md mx-auto w-full relative z-10">
                        <motion.div
                            initial={{ opacity: 0, y: 20 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ delay: 0.5 }}
                            className="mb-16"
                        >
                            <div className="flex items-center gap-4 mb-3">
                                <Sparkles className="w-5 h-5 text-[#D28F4F]" />
                                <span className="text-[11px] font-black text-[#D28F4F] uppercase tracking-[0.5em] opacity-70">Identity Authentication</span>
                            </div>
                            <h3 className="text-5xl font-black text-[#4A3A2C] tracking-tight leading-tight">管理员登入</h3>
                            <div className="h-1.5 w-24 bg-gradient-to-r from-[#D28F4F] to-transparent rounded-full mt-6" />
                        </motion.div>

                        <form onSubmit={handleLogin} className="space-y-12">
                            <div className="space-y-10">
                                <motion.div
                                    initial={{ opacity: 0, x: 20 }}
                                    animate={{ opacity: 1, x: 0 }}
                                    transition={{ delay: 0.7 }}
                                    className="space-y-4"
                                >
                                    <Label className="text-[12px] uppercase font-black tracking-[0.2em] text-[#8C7E6C] ml-2 flex items-center gap-2">
                                        <div className="w-1 h-1 rounded-full bg-[#D28F4F]" />
                                        账户标识
                                    </Label>
                                    <Input
                                        placeholder="Admin / Operator ID"
                                        className="h-20 rounded-[2rem] border-none bg-white shadow-[0_8px_30px_rgb(0,0,0,0.04)] font-bold text-[#4A3A2C] focus:ring-4 ring-[#D28F4F]/15 transition-all pl-10 placeholder:text-[#8C7E6C]/30 text-lg group-hover:shadow-[0_8px_30px_rgba(210,143,79,0.08)]"
                                        value={account}
                                        onChange={(e) => setAccount(e.target.value)}
                                        disabled={loading}
                                    />
                                </motion.div>

                                <motion.div
                                    initial={{ opacity: 0, x: 20 }}
                                    animate={{ opacity: 1, x: 0 }}
                                    transition={{ delay: 0.8 }}
                                    className="space-y-4"
                                >
                                    <Label className="text-[12px] uppercase font-black tracking-[0.2em] text-[#8C7E6C] ml-2 flex items-center gap-2">
                                        <div className="w-1 h-1 rounded-full bg-[#D28F4F]" />
                                        安全密钥
                                    </Label>
                                    <Input
                                        type="password"
                                        placeholder="Secure Passphrase"
                                        className="h-20 rounded-[2rem] border-none bg-white shadow-[0_8px_30px_rgb(0,0,0,0.04)] font-bold text-[#4A3A2C] focus:ring-4 ring-[#D28F4F]/15 transition-all pl-10 placeholder:text-[#8C7E6C]/30 text-lg group-hover:shadow-[0_8px_30px_rgba(210,143,79,0.08)]"
                                        value={password}
                                        onChange={(e) => setPassword(e.target.value)}
                                        disabled={loading}
                                    />
                                </motion.div>

                                <motion.div
                                    initial={{ opacity: 0, x: 20 }}
                                    animate={{ opacity: 1, x: 0 }}
                                    transition={{ delay: 0.9 }}
                                    className="space-y-4"
                                >
                                    <Label className="text-[12px] uppercase font-black tracking-[0.2em] text-[#8C7E6C] ml-2 flex items-center gap-2">
                                        <div className="w-1 h-1 rounded-full bg-[#D28F4F]" />
                                        灵态验证
                                    </Label>
                                    <div className="flex gap-5">
                                        <Input
                                            placeholder="Code"
                                            className="h-20 rounded-[2rem] border-none bg-white shadow-[0_8px_30px_rgb(0,0,0,0.04)] font-bold text-[#4A3A2C] focus:ring-4 ring-[#D28F4F]/15 transition-all pl-10 flex-1 placeholder:text-[#8C7E6C]/30 text-lg"
                                            value={captcha}
                                            onChange={(e) => setCaptcha(e.target.value)}
                                            disabled={loading}
                                        />
                                        <div
                                            className="h-20 w-44 bg-white rounded-[2rem] p-3 shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-[#D28F4F]/10 cursor-pointer hover:ring-4 ring-[#D28F4F]/20 transition-all flex items-center justify-center overflow-hidden group/captcha"
                                            onClick={fetchCaptcha}
                                        >
                                            {captchaImage ? (
                                                <img src={captchaImage} alt="captcha" className="h-full w-full object-contain filter group-hover/captcha:scale-110 transition-transform duration-500 contrast-125" />
                                            ) : (
                                                <Disc3 className="w-6 h-6 text-[#D28F4F]/40 animate-spin" />
                                            )}
                                        </div>
                                    </div>
                                </motion.div>
                            </div>

                            <motion.div
                                initial={{ opacity: 0, y: 20 }}
                                animate={{ opacity: 1, y: 0 }}
                                transition={{ delay: 1.1 }}
                            >
                                <Button
                                    type="submit"
                                    disabled={loading}
                                    className="w-full h-24 rounded-[2.5rem] bg-gradient-to-r from-[#D28F4F] to-[#A64452] hover:scale-[1.02] active:scale-[0.98] transition-all shadow-2xl shadow-[#D28F4F]/30 border-none group overflow-hidden relative"
                                >
                                    <div className="relative z-10 flex items-center justify-center gap-6 text-2xl font-black tracking-tight text-white">
                                        {loading ? (
                                            <>
                                                <Disc3 className="w-8 h-8 animate-spin" />
                                                <span>同步核心中...</span>
                                            </>
                                        ) : (
                                            <>
                                                <span>进入播控中心</span>
                                                <div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center group-hover:bg-white/30 transition-colors">
                                                    <ArrowRight className="w-6 h-6 group-hover:translate-x-1.5 transition-transform" />
                                                </div>
                                            </>
                                        )}
                                    </div>
                                    <div className="absolute inset-0 bg-white/10 opacity-0 group-hover:opacity-100 transition-opacity" />
                                    {/* Liquid gradient animation effect */}
                                    <motion.div
                                        className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent -translate-x-full"
                                        animate={{ translateX: ['-100%', '200%'] }}
                                        transition={{ duration: 2.5, repeat: Infinity, ease: "linear" }}
                                    />
                                </Button>
                            </motion.div>
                        </form>

                        <motion.div
                            initial={{ opacity: 0 }}
                            animate={{ opacity: 1 }}
                            transition={{ delay: 1.3 }}
                            className="mt-20 pt-10 border-t border-[#4A3A2C]/5 flex items-center justify-between"
                        >
                            <div className="flex items-center gap-3">
                                <span className="w-2 h-2 rounded-full bg-[#A64452]/20 border border-[#A64452]/40" />
                                <span className="text-[10px] font-black text-[#8C7E6C]/50 uppercase tracking-[0.25em]">Crafted For Visual Harmony</span>
                            </div>
                            <div className="flex items-center gap-2">
                                <Heart className="w-3.5 h-3.5 text-[#A64452] fill-[#A64452]/30 animate-pulse" />
                            </div>
                        </motion.div>
                    </div>
                </div>
            </motion.div>

            {/* Decorative Kanji/Background elements for Japanese Zen Vibe */}
            <div className="absolute top-20 left-20 pointer-events-none select-none opacity-[0.03] flex flex-col items-center">
                <span className="text-[200px] font-serif leading-none">声</span>
                <span className="text-[100px] font-serif leading-none mt-[-40px]">汇</span>
            </div>

            <div className="absolute bottom-12 right-12 flex gap-4 opacity-[0.05] pointer-events-none">
                <div className="w-4 h-32 bg-[#D28F4F] rounded-full blur-[1px]" />
                <div className="w-4 h-48 bg-[#D28F4F] rounded-full mt-10 blur-[1px]" />
                <div className="w-4 h-32 bg-[#D28F4F] rounded-full mt-4 blur-[1px]" />
            </div>
        </div>
    );
}