import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Lock, Eye, EyeOff, Zap, ArrowRight, ShieldCheck } from 'lucide-react';
import { motion } from 'framer-motion';

export const LoginView = () => {
  const [password, setPassword] = useState('');
  const [showPassword, setShowPassword] = useState(false);
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);
  const navigate = useNavigate();

  // Senhas de teste autorizadas
  const TEST_PASSWORDS = ['itguys@2026', 'teste@finance', 'admin'];

  const handleLogin = (e) => {
    e.preventDefault();
    setLoading(true);
    setError('');

    // Simula uma pequena latência para efeito visual premium
    setTimeout(() => {
      if (TEST_PASSWORDS.includes(password)) {
        sessionStorage.setItem('workspace_access', 'true');
        navigate('/plataforma/workspace');
      } else {
        setError('Senha de acesso inválida ou expirada.');
      }
      setLoading(false);
    }, 800);
  };

  return (
    <div className="workspace-theme min-h-screen bg-[#050914] flex items-center justify-center p-6 relative overflow-hidden font-sans">
      {/* Background Decorativo */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <div className="absolute top-[20%] right-[10%] w-[30%] h-[30%] bg-[#22c0a3]/10 rounded-full blur-[120px] animate-pulse" />
        <div className="absolute bottom-[20%] left-[10%] w-[30%] h-[30%] bg-[#26b1c7]/10 rounded-full blur-[120px] animate-pulse" style={{ animationDelay: '1s' }} />
      </div>

      <motion.div 
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        className="max-w-md w-full z-10"
      >
        <div className="bg-white/5 backdrop-blur-2xl border border-white/10 rounded-[2.5rem] p-10 shadow-2xl space-y-8">
          <div className="text-center space-y-4">
             <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#22c0a3]/10 text-[#22c0a3] text-[0.65rem] font-black uppercase tracking-widest mb-2 border border-[#22c0a3]/20">
                <ShieldCheck size={14} className="fill-[#22c0a3]" /> Acesso Restrito
             </div>
             <div className="flex flex-col items-center gap-4">
                <div className="w-20 h-20 bg-gradient-to-br from-[#22bb6c] to-[#22c0a3] rounded-3xl flex items-center justify-center shadow-2xl shadow-[#22c0a3]/20">
                   <Zap size={40} className="text-white fill-white" />
                </div>
                <h1 className="text-3xl font-black text-white tracking-tighter">Workspace <span className="text-[#22c0a3]">Finance</span></h1>
             </div>
             <p className="text-slate-400 text-sm font-medium">Ambiente em fase de ajuste. Insira a chave de acesso para continuar.</p>
          </div>

          <form onSubmit={handleLogin} className="space-y-6">
            <div className="space-y-2 group">
              <label className="text-[0.7rem] font-bold uppercase tracking-widest text-slate-500 ml-1 group-focus-within:text-[#22c0a3] transition-colors">
                Chave de Acesso
              </label>
              <div className="relative">
                <div className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-500 group-focus-within:text-[#22c0a3] transition-colors">
                  <Lock size={18} />
                </div>
                <input 
                  type={showPassword ? "text" : "password"} 
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  placeholder="••••••••"
                  className="w-full pl-12 pr-12 py-4 bg-white/5 border-none rounded-2xl ring-1 ring-white/10 focus:ring-2 focus:ring-[#22c0a3] outline-none transition-all text-white font-medium shadow-sm placeholder:text-slate-600"
                  required
                />
                <button 
                  type="button"
                  onClick={() => setShowPassword(!showPassword)}
                  className="absolute right-4 top-1/2 -translate-y-1/2 text-slate-500 hover:text-white transition-colors"
                >
                  {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
                </button>
              </div>
            </div>

            {error && (
               <motion.div 
                 initial={{ opacity: 0, scale: 0.95 }}
                 animate={{ opacity: 1, scale: 1 }}
                 className="p-4 bg-red-500/10 border border-red-500/20 rounded-2xl text-red-500 text-[0.7rem] font-bold text-center uppercase tracking-tight"
               >
                 {error}
               </motion.div>
            )}

            <button 
              type="submit"
              disabled={loading}
              className="w-full py-5 bg-[#22c0a3] hover:bg-[#22bb6c] text-white font-black rounded-2xl shadow-xl shadow-[#22c0a3]/20 transform active:scale-[0.98] transition-all flex items-center justify-center gap-3 text-sm uppercase tracking-[0.2em]"
            >
              {loading ? (
                <div className="w-5 h-5 border-3 border-white/30 border-t-white rounded-full animate-spin" />
              ) : (
                <>
                  Entrar no Workspace <ArrowRight size={20} />
                </>
              )}
            </button>
          </form>

          <div className="pt-6 border-t border-white/5 text-center">
            <span className="text-[10px] text-slate-500 uppercase tracking-[0.4em] font-black opacity-60">
              © 2026 iTGUYS • SISTEMAS DE ALTA PERFORMANCE
            </span>
          </div>
        </div>
      </motion.div>
    </div>
  );
};
