import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Lock, User, Briefcase, ArrowRight } from 'lucide-react';
import { useAuthContext } from '@/components/shared/AuthProvider';
import { toast } from 'sonner';
import { motion } from 'framer-motion';
import { useDocumentMetadata } from '@/hooks/useDocumentMetadata';

export const RhLoginView = () => {
    useDocumentMetadata('Login | Integra RH', 'rh');
    const navigate = useNavigate();
    const { login, loading: authLoading } = useAuthContext();
    const [credentials, setCredentials] = useState({ email: '', password: '' });
    
    const handleChange = (e) => {
        const { name, value } = e.target;
        setCredentials(prev => ({ ...prev, [name]: value }));
    };

    const handleLogin = async (e) => {
        e.preventDefault();
        const success = await login(credentials, 'rh');
        if (success) {
            toast.success('Login realizado com sucesso!');
            navigate('/plataforma/rh/colaboradores');
        } else {
            toast.error('Falha na autenticação. Verifique suas credenciais.');
        }
    };

    return (
        <div className="min-h-screen w-full flex items-center justify-center bg-[#09090b] relative overflow-hidden">
            
            {/* Ambient Background */}
            <div className="absolute inset-0 w-full h-full overflow-hidden pointer-events-none">
                <motion.div 
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 0.6 }}
                    transition={{ duration: 1.5 }}
                    className="absolute top-[-10%] left-[-10%] w-[60vw] h-[60vw] bg-emerald-600/20 rounded-full blur-[120px]" 
                />
                <motion.div 
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 0.4 }}
                    transition={{ duration: 1.5, delay: 0.5 }}
                    className="absolute bottom-[-10%] right-[-10%] w-[60vw] h-[60vw] bg-teal-900/20 rounded-full blur-[150px]" 
                />
                <div className="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20 brightness-100 contrast-150"></div>
            </div>

            <motion.div 
                initial={{ opacity: 0, y: 20, scale: 0.95 }}
                animate={{ opacity: 1, y: 0, scale: 1 }}
                transition={{ duration: 0.5, ease: "easeOut" }}
                className="w-full max-w-[420px] bg-white/5 backdrop-blur-2xl border border-white/10 p-8 md:p-10 rounded-3xl shadow-2xl relative z-10 mx-4"
            >
                <div className="flex flex-col items-center mb-10 text-center">
                    <motion.div 
                        initial={{ scale: 0 }}
                        animate={{ scale: 1 }}
                        transition={{ duration: 0.5, delay: 0.2, type: "spring" }}
                        className="w-16 h-16 bg-gradient-to-br from-emerald-400 to-emerald-600 rounded-2xl flex items-center justify-center shadow-lg shadow-emerald-500/20 mb-6 rotate-3 hover:rotate-6 transition-transform duration-300"
                    >
                        <Briefcase className="text-white" size={32} />
                    </motion.div>
                    
                    <motion.div
                        initial={{ opacity: 0, y: 10 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ delay: 0.3 }}
                    >
                        <h1 className="text-3xl font-bold text-white mb-2 tracking-tight">
                            Pra<span className="text-emerald-400">Gente</span>
                        </h1>
                        <p className="text-slate-400 text-sm font-medium">
                            Gestão de Pessoas Inteligente
                        </p>
                    </motion.div>
                </div>

                <form onSubmit={handleLogin} className="space-y-5">
                    <motion.div 
                        initial={{ opacity: 0, x: -20 }}
                        animate={{ opacity: 1, x: 0 }}
                        transition={{ delay: 0.4 }}
                        className="space-y-1.5"
                    >
                        <label className="text-[11px] font-bold uppercase tracking-wider text-slate-400 pl-1">Email Corporativo</label>
                        <div className="relative group">
                            <User className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-500 group-focus-within:text-emerald-400 transition-colors" size={18} />
                            <input 
                                type="email" 
                                name="email"
                                value={credentials.email}
                                onChange={handleChange}
                                placeholder="seunome@empresa.com"
                                className="w-full pl-10 pr-4 py-3.5 bg-slate-900/50 border border-slate-700/50 rounded-xl focus:outline-none focus:border-emerald-500/50 focus:ring-4 focus:ring-emerald-500/10 text-slate-200 placeholder:text-slate-600 transition-all"
                                required
                            />
                        </div>
                    </motion.div>

                    <motion.div 
                        initial={{ opacity: 0, x: -20 }}
                        animate={{ opacity: 1, x: 0 }}
                        transition={{ delay: 0.5 }}
                        className="space-y-1.5"
                    >
                        <label className="text-[11px] font-bold uppercase tracking-wider text-slate-400 pl-1">Senha de Acesso</label>
                        <div className="relative group">
                            <Lock className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-500 group-focus-within:text-emerald-400 transition-colors" size={18} />
                            <input 
                                type="password" 
                                name="password"
                                value={credentials.password}
                                onChange={handleChange}
                                placeholder="••••••••"
                                className="w-full pl-10 pr-4 py-3.5 bg-slate-900/50 border border-slate-700/50 rounded-xl focus:outline-none focus:border-emerald-500/50 focus:ring-4 focus:ring-emerald-500/10 text-slate-200 placeholder:text-slate-600 transition-all"
                                required
                            />
                        </div>
                    </motion.div>

                    <motion.button 
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ delay: 0.6 }}
                        type="submit" 
                        disabled={authLoading}
                        className="w-full bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-600 hover:to-emerald-700 text-white font-bold py-3.5 rounded-xl transition-all transform active:scale-[0.98] shadow-lg shadow-emerald-500/25 flex items-center justify-center gap-2 group mt-2"
                    >
                        {authLoading ? (
                            <span className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                        ) : (
                            <>
                                <span>Acessar Ambiente</span>
                                <ArrowRight size={18} className="group-hover:translate-x-1 transition-transform" />
                            </>
                        )}
                    </motion.button>
                </form>

                <motion.div 
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    transition={{ delay: 0.8 }}
                    className="mt-8 text-center"
                >
                    <a href="#" className="text-xs text-slate-500 hover:text-emerald-400 transition-colors">
                        Esqueceu sua senha?
                    </a>
                </motion.div>
            </motion.div>

            <div className="absolute bottom-6 text-center w-full opacity-30">
                <p className="text-[10px] text-slate-400 uppercase tracking-[0.2em]">Integra Finance &copy; 2026</p>
            </div>
        </div>
    );
};
