import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '@/contexts/AuthContext';
import { Plane, LogIn, Shield } from 'lucide-react';

export function Login() {
  const { isAuthenticated, loginWithRedirect } = useAuth();
  const navigate = useNavigate();

  useEffect(() => {
    if (isAuthenticated) {
      navigate('/dashboard');
    }
  }, [isAuthenticated, navigate]);

  return (
    <div className="min-h-screen flex items-center justify-center relative overflow-hidden bg-gradient-to-br from-slate-950 via-slate-900 to-blue-950">
      {/* Background ambient effects */}
      <div className="absolute inset-0 overflow-hidden">
        <div className="absolute -top-1/2 -left-1/2 w-full h-full bg-gradient-radial from-blue-500/10 to-transparent rounded-full blur-3xl" />
        <div className="absolute -bottom-1/2 -right-1/2 w-full h-full bg-gradient-radial from-indigo-500/8 to-transparent rounded-full blur-3xl" />
        <div className="absolute top-1/4 right-1/4 w-96 h-96 bg-blue-500/5 rounded-full blur-3xl" />
      </div>

      {/* Content */}
      <div className="relative z-10 flex flex-col items-center gap-10 px-4 w-full max-w-sm">
        {/* Breathing logo circle */}
        <div className="animate-heartbeat">
          <div className="relative w-36 h-36 rounded-full bg-gradient-to-br from-blue-500/20 to-indigo-600/20 backdrop-blur-sm border border-white/10 flex items-center justify-center animate-glow-pulse">
            {/* Inner circle */}
            <div className="w-28 h-28 rounded-full bg-gradient-to-br from-blue-500/30 to-indigo-600/30 border border-white/10 flex items-center justify-center shadow-2xl">
              <Plane className="h-14 w-14 text-blue-400 drop-shadow-lg" />
            </div>
          </div>
        </div>

        {/* Title */}
        <div className="text-center">
          <h1 className="text-4xl font-bold text-white tracking-tight mb-2">
            VIP Coordinator
          </h1>
          <p className="text-blue-200/60 text-sm tracking-wide">
            Transportation logistics & event coordination
          </p>
        </div>

        {/* Sign in card */}
        <div className="w-full">
          <button
            onClick={() => loginWithRedirect()}
            className="w-full group relative flex items-center justify-center gap-3 bg-gradient-to-r from-blue-600 to-indigo-600 text-white py-4 px-6 rounded-2xl font-semibold text-lg shadow-lg shadow-blue-500/25 hover:shadow-blue-500/40 hover:from-blue-500 hover:to-indigo-500 active:scale-[0.98] transition-all duration-200"
          >
            <LogIn className="h-5 w-5 transition-transform group-hover:-translate-x-0.5" />
            Sign In
          </button>
        </div>

        {/* Footer note */}
        <div className="flex items-center gap-2 text-blue-300/40 text-xs">
          <Shield className="h-3.5 w-3.5" />
          <span>Authorized personnel only</span>
        </div>
      </div>
    </div>
  );
}