import React, { useState } from 'react';
import { 
  ArrowRight, 
  Mail, 
  Lock, 
  Github, 
  Chrome, 
  ChevronLeft 
} from 'lucide-react';
import { motion } from 'motion/react';
import { useTranslation } from 'react-i18next';

interface LoginProps {
  onLogin: () => void;
  onBack: () => void;
}

export const Login: React.FC<LoginProps> = ({ onLogin, onBack }) => {
  const { t } = useTranslation();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // Simulate login
    onLogin();
  };

  return (
    <div className="min-h-screen bg-brand-bg flex flex-col items-center justify-center p-6 selection:bg-brand-accent/20 overflow-hidden relative">
      {/* Background Decorative Elements */}
      <div className="absolute -top-24 -left-24 w-96 h-96 bg-brand-accent/10 rounded-full blur-3xl opacity-50" />
      <div className="absolute -bottom-24 -right-24 w-96 h-96 bg-brand-dark/5 rounded-full blur-3xl opacity-50" />
      
      <motion.button 
        initial={{ opacity: 0, x: -20 }}
        animate={{ opacity: 1, x: 0 }}
        onClick={onBack}
        className="fixed top-12 left-12 flex items-center gap-3 text-[10px] font-black uppercase tracking-[0.4em] text-brand-dark/30 hover:text-brand-dark transition-all group z-10"
      >
        <ChevronLeft size={16} className="group-hover:-translate-x-1 transition-transform" />
        Retour à l'accueil
      </motion.button>

      <div className="w-full max-w-[480px] relative z-10">
        <motion.div 
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="text-center mb-12"
        >
          <div className="inline-flex items-center gap-5 group mb-10">
            <div className="w-14 h-14 bg-brand-dark rounded-2xl flex items-center justify-center text-white font-bold text-3xl shadow-2xl transition-all duration-500 group-hover:rotate-[15deg] group-hover:scale-110">
              W
            </div>
            <div className="text-left">
              <span className="text-3xl font-black tracking-tighter uppercase block leading-none">Wordly</span>
              <span className="text-[9px] font-black uppercase tracking-[0.4em] text-brand-accent">Neural Engine</span>
            </div>
          </div>
          <h1 className="text-5xl font-black uppercase tracking-tighter mb-4 leading-none text-brand-dark">Connexion</h1>
          <p className="text-brand-dark/40 font-medium">L'excellence de la traduction, propulsée par l'IA.</p>
        </motion.div>

        <motion.div 
          initial={{ opacity: 0, y: 30, scale: 0.98 }}
          animate={{ opacity: 1, y: 0, scale: 1 }}
          transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1], delay: 0.1 }}
          className="editorial-card p-12 bg-white border-none shadow-editorial relative overflow-hidden"
        >
          <div className="absolute top-0 right-0 w-24 h-24 bg-brand-accent/5 rounded-bl-full pointer-events-none" />
          
          <form onSubmit={handleSubmit} className="space-y-8 relative">
            <div>
              <label className="text-[9px] font-black text-brand-dark/40 uppercase tracking-[0.2em] block mb-3">Email professionnel</label>
              <div className="relative group">
                <Mail className="absolute left-5 top-1/2 -translate-y-1/2 text-brand-dark/20 group-focus-within:text-brand-accent transition-colors" size={18} />
                <input 
                  type="email" 
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="sepehr@wordly.art"
                  required
                  className="w-full pl-14 pr-6 py-5 bg-brand-muted rounded-2xl border border-transparent focus:border-brand-accent/30 focus:ring-4 focus:ring-brand-accent/5 outline-none text-sm transition-all font-medium"
                />
              </div>
            </div>

            <div>
              <div className="flex justify-between items-center mb-3">
                <label className="text-[9px] font-black text-brand-dark/40 uppercase tracking-[0.2em]">Mot de passe</label>
                <button type="button" className="text-[9px] font-black text-brand-accent uppercase tracking-widest hover:underline">Oublié ?</button>
              </div>
              <div className="relative group">
                <Lock className="absolute left-5 top-1/2 -translate-y-1/2 text-brand-dark/20 group-focus-within:text-brand-accent transition-colors" size={18} />
                <input 
                  type="password" 
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  placeholder="••••••••"
                  required
                  className="w-full pl-14 pr-6 py-5 bg-brand-muted rounded-2xl border border-transparent focus:border-brand-accent/30 focus:ring-4 focus:ring-brand-accent/5 outline-none text-sm transition-all font-medium"
                />
              </div>
            </div>

            <button 
              type="submit"
              className="premium-button w-full py-6 text-[11px] uppercase tracking-[0.3em] flex items-center justify-center gap-3 !rounded-2xl"
            >
              Se connecter <ArrowRight size={18} className="text-brand-accent" />
            </button>
          </form>

          <div className="relative my-12">
            <div className="absolute inset-0 flex items-center">
              <div className="w-full border-t border-black/5"></div>
            </div>
            <div className="relative flex justify-center text-[9px] uppercase tracking-[0.4em] font-black px-4 bg-white text-brand-dark/20">
              Ou continuer avec
            </div>
          </div>

          <div className="grid grid-cols-2 gap-4">
            <button className="flex items-center justify-center gap-3 py-4 border border-black/5 rounded-2xl text-[10px] font-black uppercase tracking-widest hover:bg-brand-muted transition-all">
              <Github size={16} /> Github
            </button>
            <button className="flex items-center justify-center gap-3 py-4 border border-black/5 rounded-2xl text-[10px] font-black uppercase tracking-widest hover:bg-brand-muted transition-all">
              <Chrome size={16} /> Google
            </button>
          </div>
        </motion.div>

        <motion.p 
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.2 }}
          className="text-center mt-12 text-[10px] font-black uppercase tracking-widest text-brand-dark/30"
        >
          Nouveau chez Wordly ? <button className="text-brand-accent hover:underline ml-1">Créer un compte</button>
        </motion.p>
      </div>

      <motion.div 
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 0.3 }}
        className="fixed bottom-12 text-[9px] font-black uppercase tracking-[0.4em] text-brand-dark/10"
      >
        Wordly — Excellence in Neural Translation
      </motion.div>
    </div>
  );
};
