import React, { useState } from 'react';
import { useAuthContext } from '@/components/shared/AuthProvider';
import { useNavigate } from 'react-router-dom';
import { Lock, User } from 'lucide-react';
import { useDocumentMetadata } from '@/hooks/useDocumentMetadata';
import '../styles/gr-theme.css';

const LoginView = () => {
  useDocumentMetadata('Cockpit GR - Login', 'gr');
  const { login, error } = useAuthContext();
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);
  const [formData, setFormData] = useState({
    username: '',
    password: ''
  });

  const handleLogin = async (e) => {
    e.preventDefault();
    setLoading(true);
    try {
      const ok = await login({ email: formData.username, password: formData.password }, 'gr');
      if (ok) {
        navigate('/plataforma/gr/cadastros');
      }
    } catch (err) {
      console.error('Login GR falhou', err);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-slate-50 dark:bg-[#0f0f0f] relative overflow-hidden p-6">
       {/* Background Animated Elements */}
       <div className="absolute top-[-20%] left-[-10%] w-[60%] h-[60%] bg-[var(--gr-primary)]/10 rounded-full blur-[120px] animate-pulse"></div>
       <div className="absolute bottom-[-20%] right-[-10%] w-[50%] h-[50%] bg-[var(--gr-primary-dark)]/10 rounded-full blur-[100px] animate-pulse" style={{ animationDelay: '2s' }}></div>

       {/* Decorative Lines */}
       <div className="absolute inset-0 opacity-[0.03] dark:opacity-[0.05] pointer-events-none" 
            style={{ backgroundImage: 'radial-gradient(var(--gr-primary) 1px, transparent 1px)', backgroundSize: '30px 30px' }}></div>

       <div className="w-full max-w-md bg-white dark:bg-[#1a1a1a] rounded-[40px] shadow-[0_20px_60px_-15px_rgba(0,0,0,0.1)] dark:shadow-[0_20px_60px_-15px_rgba(0,0,0,0.5)] p-10 z-10 relative border border-slate-100 dark:border-white/5 overflow-hidden">
          {/* Top Accent Bar */}
          <div className="absolute top-0 left-0 right-0 h-2 bg-gradient-to-r from-[var(--gr-primary)] to-[var(--gr-primary-dark)]"></div>

          <div className="flex flex-col items-center mb-10">
             <div className="w-20 h-20 bg-gradient-to-br from-[var(--gr-primary)] to-[var(--gr-primary-dark)] text-white rounded-[24px] flex items-center justify-center text-3xl font-bold shadow-xl shadow-[var(--gr-primary)]/20 mb-6 group transition-transform hover:scale-105">
               GR
             </div>
             <h1 className="text-3xl font-bold text-slate-800 dark:text-white tracking-tight">Cockpit <span className="text-[var(--gr-primary)]">GR</span></h1>
             <p className="text-slate-500 dark:text-slate-400 text-sm mt-2 font-medium">Entre para gerenciar riscos e contratos.</p>
          </div>

          <form onSubmit={handleLogin} className="space-y-6">
             <div className="space-y-2">
                <label className="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest ml-1">Usuário</label>
                <div className="relative group">
                   <div className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 dark:text-slate-600 group-focus-within:text-[var(--gr-primary)] transition-colors">
                     <User size={20} strokeWidth={2.5} />
                   </div>
                   <input 
                     type="text" 
                     className="w-full pl-12 pr-4 py-4 bg-slate-50 dark:bg-black/20 border border-slate-100 dark:border-white/5 rounded-[20px] focus:outline-none focus:border-[var(--gr-primary)] focus:ring-4 focus:ring-[var(--gr-primary)]/5 dark:text-white transition-all font-medium placeholder:text-slate-300 dark:placeholder:text-slate-700"
                     placeholder="Nome de usuário"
                     value={formData.username}
                     onChange={e => setFormData({...formData, username: e.target.value})}
                   />
                </div>
             </div>

             <div className="space-y-2">
                <label className="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest ml-1">Senha</label>
                <div className="relative group">
                   <div className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 dark:text-slate-600 group-focus-within:text-[var(--gr-primary)] transition-colors">
                     <Lock size={20} strokeWidth={2.5} />
                   </div>
                   <input 
                     type="password" 
                     className="w-full pl-12 pr-4 py-4 bg-slate-50 dark:bg-black/20 border border-slate-100 dark:border-white/5 rounded-[20px] focus:outline-none focus:border-[var(--gr-primary)] focus:ring-4 focus:ring-[var(--gr-primary)]/5 dark:text-white transition-all font-medium placeholder:text-slate-300 dark:placeholder:text-slate-700"
                     placeholder="••••••••"
                     value={formData.password}
                     onChange={e => setFormData({...formData, password: e.target.value})}
                   />
                </div>
             </div>

             {error && (
               <div className="rounded-xl bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-900/50 px-4 py-3 text-sm text-red-700 dark:text-red-300">
                 {error}
               </div>
             )}
             <button 
               type="submit"
               disabled={loading}
               className="w-full py-4 bg-gradient-to-r from-[var(--gr-primary)] to-[var(--gr-primary-dark)] text-white font-bold rounded-[20px] hover:opacity-95 hover:scale-[1.02] active:scale-95 transition-all shadow-xl shadow-[var(--gr-primary)]/20 disabled:opacity-70 disabled:cursor-not-allowed mt-6 text-sm uppercase tracking-widest"
             >
               {loading ? 'Validando...' : 'Acessar Ambiente'}
             </button>

              <div className="pt-4 flex flex-col items-center gap-4">
                {/* <button 
                  type="button"
                  onClick={() => navigate('/plataforma/gr/reset-senha')}
                  className="text-[10px] font-bold text-[var(--gr-primary)] hover:underline uppercase tracking-[0.2em] transition-colors"
                >
                  Esqueci minha senha
                </button> */}

                <button 
                  type="button"
                  onClick={() => navigate('/plataforma/cadastro-motorista')}
                  className="text-[10px] font-bold text-slate-400 dark:text-slate-500 hover:text-[var(--gr-primary)] dark:hover:text-white uppercase tracking-[0.2em] transition-colors"
                >
                  Não é colaborador? <span className="text-[var(--gr-primary)] underline ml-1">Junte-se a nós</span>
                </button>

              </div>
          </form>

          {/* Footer Decoration */}
          <div className="mt-12 flex justify-center gap-2">
            <div className="w-1.5 h-1.5 rounded-full bg-slate-100 dark:bg-white/5"></div>
            <div className="w-1.5 h-1.5 rounded-full bg-[var(--gr-primary)]/50"></div>
            <div className="w-1.5 h-1.5 rounded-full bg-slate-100 dark:bg-white/5"></div>
          </div>
       </div>
    </div>
  );
};

export default LoginView;
