import React, { useState } from 'react';
import { X, Loader2, GraduationCap, School, KeyRound, UserPlus } from 'lucide-react';
import { useAuth } from '../context/AuthContext';
import { useNavigate } from 'react-router-dom';
import { UserRole } from '../types';

interface LoginModalProps {
  isOpen: boolean;
  onClose: () => void;
}

export const LoginModal: React.FC<LoginModalProps> = ({ isOpen, onClose }) => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [name, setName] = useState('');
  const [role, setRole] = useState<UserRole>('student');
  const [isRegistering, setIsRegistering] = useState(false);
  const [error, setError] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const { login, register, logout } = useAuth();
  const navigate = useNavigate();

  if (!isOpen) return null;

  const handleSubmit = async (event: React.FormEvent) => {
    event.preventDefault();
    setError('');
    setIsSubmitting(true);

    if (isRegistering && role === 'professor') {
      setIsSubmitting(false);
      setError('Contas de instrutor são liberadas pelo administrador da plataforma.');
      return;
    }

    const signedInUser = isRegistering
      ? await register(name, email, password)
      : await login(email, password);
    setIsSubmitting(false);

    if (!signedInUser) {
      setError(isRegistering
        ? 'Não foi possível criar sua conta. Use um e-mail válido e uma senha com pelo menos 12 caracteres.'
        : 'Credenciais inválidas. Verifique seu e-mail e senha.');
      return;
    }

    if (signedInUser.role !== role) {
      logout();
      setError(role === 'professor'
        ? 'Esta conta não possui acesso de instrutor.'
        : 'Esta conta possui acesso de instrutor. Selecione a opção Instrutor.');
      return;
    }

    onClose();
    navigate(signedInUser.role === 'professor' ? '/gerenciar' : '/');
  };

  const handleDemoLogin = (roleType: UserRole) => {
    setRole(roleType);
    setIsRegistering(false);
    if (roleType === 'professor') {
      setEmail('admin@compor.local');
      setPassword('ComporAdmin123!');
    } else {
      setEmail('student@compor.local');
      setPassword('ComporStudent123!');
    }
    setError('');
  };

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
      <div className="absolute inset-0 bg-black/60 backdrop-blur-xl transition-opacity" onClick={onClose} />

      <div className="relative w-full max-w-md bg-[#1c1c1e] rounded-[8px] shadow-xl border border-white/10 p-6 md:p-8 animate-fade-in-up">
        <button onClick={onClose} className="absolute top-5 right-5 text-white/40 hover:text-white transition-colors" aria-label="Fechar">
          <X className="w-5 h-5" />
        </button>

        <div className="text-center mb-6">
          <h2 className="font-display text-heading-sm font-bold text-white mb-1.5 tracking-heading-sm leading-heading-sm">Compor HUB ID</h2>
          <p className="text-body-sm font-normal text-white/60 tracking-body-sm leading-body-sm">Acesse seu espaço de aprendizado e materiais</p>
        </div>

        <div className="flex bg-black/40 p-1 rounded-[8px] mb-6 border border-white/5 relative">
          <div className={`absolute top-1 bottom-1 w-[calc(50%-4px)] bg-orange-500/20 rounded-[8px] transition-all duration-300 ease-out border border-orange-500/30 shadow-md ${role === 'student' ? 'left-1' : 'left-[calc(50%+4px)]'}`} />
          <button type="button" onClick={() => setRole('student')} className={`flex-1 flex items-center justify-center gap-2 py-2.5 rounded-[8px] relative z-10 transition-colors duration-300 ${role === 'student' ? 'text-white font-semibold' : 'text-gray-400 hover:text-gray-300'}`}>
            <GraduationCap className="w-4 h-4" />
            <span className="text-body-sm font-semibold tracking-body-sm">Aluno</span>
          </button>
          <button type="button" onClick={() => setRole('professor')} className={`flex-1 flex items-center justify-center gap-2 py-2.5 rounded-[8px] relative z-10 transition-colors duration-300 ${role === 'professor' ? 'text-white font-semibold' : 'text-gray-400 hover:text-gray-300'}`}>
            <School className="w-4 h-4" />
            <span className="text-body-sm font-semibold tracking-body-sm">Instrutor</span>
          </button>
        </div>

        <form onSubmit={handleSubmit} className="space-y-5">
          <div className="space-y-3">
            {isRegistering && <input type="text" placeholder="Seu nome" value={name} onChange={(event) => setName(event.target.value)} className="w-full bg-white/10 text-white placeholder:text-white/30 px-4 py-3 rounded-[8px] focus:outline-none focus:ring-2 focus:ring-orange-500/50 focus:bg-white/15 transition-all text-body tracking-body" required autoFocus />}
            <input type="email" placeholder="Seu e-mail" value={email} onChange={(event) => setEmail(event.target.value)} className="w-full bg-white/10 text-white placeholder:text-white/30 px-4 py-3 rounded-[8px] focus:outline-none focus:ring-2 focus:ring-orange-500/50 focus:bg-white/15 transition-all text-body tracking-body" required autoFocus={!isRegistering} />
            <input type="password" placeholder="Sua senha" value={password} onChange={(event) => setPassword(event.target.value)} minLength={12} className="w-full bg-white/10 text-white placeholder:text-white/30 px-4 py-3 rounded-[8px] focus:outline-none focus:ring-2 focus:ring-orange-500/50 focus:bg-white/15 transition-all text-body tracking-body" required />
          </div>

          {!isRegistering && (
            <div className="flex gap-2 justify-center">
              <button type="button" onClick={() => handleDemoLogin('student')} className="text-caption font-semibold tracking-caption text-orange-400 hover:text-orange-300 px-3 py-1 rounded-[980px] bg-orange-500/10 border border-orange-500/20 flex items-center gap-1 transition-colors">
                <KeyRound className="w-3 h-3" /> Acesso Aluno (Demo)
              </button>
              <button type="button" onClick={() => handleDemoLogin('professor')} className="text-caption font-semibold tracking-caption text-emerald-400 hover:text-emerald-300 px-3 py-1 rounded-[980px] bg-emerald-500/10 border border-emerald-500/20 flex items-center gap-1 transition-colors">
                <KeyRound className="w-3 h-3" /> Acesso Instrutor (Demo)
              </button>
            </div>
          )}

          {error && <div className="bg-red-500/10 border border-red-500/20 rounded-[8px] p-3"><p className="text-red-400 text-caption font-semibold tracking-caption text-center">{error}</p></div>}

          <button type="submit" disabled={isSubmitting} className="w-full bg-white text-black text-body-sm font-semibold tracking-body-sm py-3.5 rounded-[980px] hover:bg-gray-200 active:scale-95 transition-all duration-200 flex items-center justify-center gap-2 shadow-xl">
            {isSubmitting ? <Loader2 className="w-5 h-5 animate-spin" /> : isRegistering ? <UserPlus className="w-5 h-5" /> : null}
            {isRegistering ? 'Criar conta' : 'Entrar'}
          </button>
        </form>

        <button type="button" onClick={() => { setIsRegistering((value) => !value); setError(''); }} className="w-full mt-5 text-xs text-orange-400 hover:text-orange-300 transition-colors">
          {isRegistering ? 'Já possui conta? Entrar' : 'Não possui conta? Criar acesso de aluno'}
        </button>
      </div>
    </div>
  );
};