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

export default function LoginView() {
  useDocumentMetadata('Login | Prafrota', 'prafrot');
  const [formData, setFormData] = useState({ email: '', password: '' });
  const { login, loading, error } = useAuthContext();
  const navigate = useNavigate();

  const handleLogin = async (e) => {
    e.preventDefault();
    // Simulate login for prafrot environment
    const success = await login(formData, 'prafrot'); 
    // Note: 'prafrot' might need to be added to authorized environments in useAuth or mocked
    if (success) {
      navigate('/plataforma/prafrot/estatisticas');
    }
  };

  return (
    <div className="min-h-screen bg-[#141414] flex items-center justify-center p-4 font-inter">
      <div className="w-full max-w-5xl h-[600px] flex shadow-2xl rounded-3xl overflow-hidden border border-[#2a2a2a]">
        
        {/* Visual Side */}
        <div className="hidden md:flex flex-1 bg-[#1c1c1c] relative items-center justify-center p-12">
           <div className="absolute inset-0 bg-emerald-500/5 mix-blend-overlay" />
           <div className="absolute top-0 left-0 w-full h-full bg-[url('https://images.unsplash.com/photo-1592838064575-70ed431fb924?q=80&w=2070&auto=format&fit=crop')] bg-cover bg-center opacity-10" />
           
           <div className="relative z-10 text-center">
             <motion.div 
               initial={{ scale: 0.8, opacity: 0 }}
               animate={{ scale: 1, opacity: 1 }}
               className="w-24 h-24 bg-emerald-500 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-xl shadow-emerald-500/20"
             >
               <Truck size={40} className="text-[#141414]" strokeWidth={2.5} />
             </motion.div>
             <h1 className="text-4xl font-black text-white tracking-tighter mb-2">PRA <span className="text-emerald-500">FROTA</span></h1>
             <p className="text-slate-500 font-medium tracking-widest uppercase text-xs">Gestão Inteligente de Ativos</p>
           </div>
        </div>

        {/* Form Side */}
        <div className="flex-1 bg-[#18181b] flex items-center justify-center p-10">
           <div className="w-full max-w-sm space-y-8">
             <div className="text-center md:text-left">
               <h2 className="text-2xl font-bold text-white mb-2">Acesso ao Monitoramento</h2>
               <p className="text-slate-400 text-sm">Entre com suas credenciais de gestor.</p>
             </div>

             <form onSubmit={handleLogin} className="space-y-5">
               <div className="space-y-2">
                 <label className="text-xs font-bold text-slate-500 uppercase ml-1">Email</label>
                 <div className="relative">
                   <Mail className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-500" size={18} />
                   <input 
                     type="email"
                     value={formData.email}
                     onChange={e => setFormData({...formData, email: e.target.value})}
                     className="w-full bg-[#27272a] border border-[#3f3f46] text-slate-200 text-sm rounded-xl px-11 py-3 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 transition-all placeholder:text-slate-600"
                     placeholder="gestor@prafrota.com"
                     required
                   />
                 </div>
               </div>

               <div className="space-y-2">
                 <label className="text-xs font-bold text-slate-500 uppercase ml-1">Senha</label>
                 <div className="relative">
                   <Lock className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-500" size={18} />
                   <input 
                     type="password"
                     value={formData.password}
                     onChange={e => setFormData({...formData, password: e.target.value})}
                     className="w-full bg-[#27272a] border border-[#3f3f46] text-slate-200 text-sm rounded-xl px-11 py-3 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 transition-all placeholder:text-slate-600"
                     placeholder="••••••••"
                     required
                   />
                 </div>
               </div>

               {error && (
                 <div className="p-3 bg-red-500/10 border border-red-500/20 text-red-500 text-xs font-bold rounded-lg text-center">
                   {error}
                 </div>
               )}

               <button 
                 type="submit" 
                 disabled={loading}
                 className="w-full bg-emerald-500 hover:bg-emerald-400 text-[#141414] font-bold py-3.5 rounded-xl transition-all shadow-lg shadow-emerald-500/10 flex items-center justify-center gap-2"
               >
                 {loading ? 'Acessando...' : <>Acessar Painel <ArrowRight size={18} /></>}
               </button>
             </form>

             {/* <div className="text-center">
               <span className="text-xs text-slate-600 font-medium">© 2024 PraFrota System v2.0</span>
             </div> */}
           </div>
        </div>

      </div>
    </div>
  );
}
