// apps/verify/src/pages/Login.jsx
import React, { useState } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import { motion, AnimatePresence } from 'framer-motion';
import { 
  Mail, 
  Lock, 
  Eye, 
  EyeOff, 
  ArrowRight, 
  AlertCircle,
  Loader2,
  ShieldCheck,
  Building,
  CheckCircle,
  LayoutDashboard,
  Users,
  Settings,
  LogOut,
  User,
  Briefcase,
  Activity,
  ChevronRight,
  Crown,
  Star,
  Zap,
  KeyRound,
  Smartphone,
  Shield,
  Fingerprint
} from 'lucide-react';

// Import logo
import logo from '../../../../services/api/src/components/Logo.png';

export function Login() {
  const navigate = useNavigate();
  const [showPassword, setShowPassword] = useState(false);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [success, setSuccess] = useState('');
  
  // OTP Verification State
  const [showOtpVerification, setShowOtpVerification] = useState(false);
  const [otpCode, setOtpCode] = useState('');
  const [userId, setUserId] = useState(null);
  const [isNewDevice, setIsNewDevice] = useState(false);
  const [otpLoading, setOtpLoading] = useState(false);
  
  // Dashboard Picker State
  const [showDashboardPicker, setShowDashboardPicker] = useState(false);
  const [userData, setUserData] = useState(null);
  const [selectedDashboard, setSelectedDashboard] = useState(null);

  const [formData, setFormData] = useState({
    email: '',
    password: '',
    rememberMe: false
  });

  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: type === 'checkbox' ? checked : value
    }));
    if (error) setError('');
  };

  // ─── Login Submission ──────────────────────────────────────────────────────

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError('');
    setSuccess('');

    try {
      if (!formData.email.trim()) throw new Error('Email address is required');
      if (!formData.password) throw new Error('Password is required');

      const response = await fetch('/auth/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          email: formData.email,
          password: formData.password
        })
      });

      const data = await response.json();

      if (!response.ok) {
        // Handle new device detection
        if (response.status === 403 && data.requiresOtp) {
          setUserId(data.userId);
          setIsNewDevice(true);
          setShowOtpVerification(true);
          setLoading(false);
          setSuccess('Security verification required. Check your email for the OTP code.');
          return;
        }
        throw new Error(data.error || 'Login failed');
      }

      if (data.data?.token) {
        localStorage.setItem('skillnexus_token', data.data.token);
        if (data.data.refreshToken) {
          localStorage.setItem('skillnexus_refresh_token', data.data.refreshToken);
        }
        if (data.data.user) {
          localStorage.setItem('skillnexus_user', JSON.stringify(data.data.user));
          setUserData(data.data.user);
        }
        
        setSuccess('Login successful!');
        
        // Check if user has admin role
        const isAdmin = data.data.user?.role === 'admin' || data.data.user?.isAdmin === true;
        
        if (isAdmin) {
          setShowDashboardPicker(true);
          setLoading(false);
        } else {
          setTimeout(() => navigate('/dashboard'), 800);
        }
      } else {
        throw new Error('No token received');
      }

    } catch (err) {
      setError(err.message || 'Invalid email or password. Please try again.');
      setLoading(false);
    }
  };

  // ─── OTP Verification ──────────────────────────────────────────────────────

  const handleOtpSubmit = async (e) => {
    e.preventDefault();
    setOtpLoading(true);
    setError('');
    setSuccess('');

    try {
      if (!otpCode || otpCode.length !== 6) {
        throw new Error('Please enter the full 6-digit verification code');
      }

      const response = await fetch('/auth/verify-device-otp', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          userId: userId,
          otp: otpCode
        })
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.error || 'OTP verification failed');
      }

      if (data.data?.token) {
        localStorage.setItem('skillnexus_token', data.data.token);
        if (data.data.refreshToken) {
          localStorage.setItem('skillnexus_refresh_token', data.data.refreshToken);
        }
        if (data.data.user) {
          localStorage.setItem('skillnexus_user', JSON.stringify(data.data.user));
          setUserData(data.data.user);
        }

        setSuccess('Device verified! Redirecting...');
        
        const isAdmin = data.data.user?.role === 'admin' || data.data.user?.isAdmin === true;
        
        if (isAdmin) {
          setShowDashboardPicker(true);
          setOtpLoading(false);
        } else {
          setTimeout(() => navigate('/dashboard'), 800);
        }
      }

    } catch (err) {
      setError(err.message || 'Invalid verification code. Please try again.');
      setOtpLoading(false);
    }
  };

  // ─── Dashboard Picker ─────────────────────────────────────────────────────

  const handleDashboardSelect = (dashboard) => {
    setSelectedDashboard(dashboard);
    if (dashboard === 'admin') {
      navigate('/admin');
    } else {
      navigate('/dashboard');
    }
  };

  const handleLogout = () => {
    localStorage.removeItem('skillnexus_token');
    localStorage.removeItem('skillnexus_refresh_token');
    localStorage.removeItem('skillnexus_user');
    setShowDashboardPicker(false);
    setShowOtpVerification(false);
    setUserData(null);
    setSuccess('');
    setSelectedDashboard(null);
  };

  // ─── Render: OTP Verification ─────────────────────────────────────────────

  if (showOtpVerification) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-indigo-50 flex items-center justify-center p-4">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          className="w-full max-w-md"
        >
          <div className="text-center mb-8">
            <Link to="/" className="inline-flex items-center gap-2">
              <img 
                src={logo} 
                alt="SkillNexus" 
                className="w-12 h-12 rounded-xl shadow-lg shadow-blue-500/20"
              />
              <span className="text-2xl font-bold text-gray-900 tracking-tight">SkillNexus</span>
            </Link>
            <h2 className="mt-4 text-2xl font-bold text-gray-900">Security Verification</h2>
            <p className="text-gray-600 text-sm mt-1">Enter the 6-digit code sent to your email</p>
          </div>

          <div className="bg-white rounded-2xl shadow-xl border border-gray-100 p-8">
            {success && (
              <motion.div
                initial={{ opacity: 0, y: -10 }}
                animate={{ opacity: 1, y: 0 }}
                className="mb-6 p-4 bg-green-50 border border-green-200 rounded-xl flex items-center gap-3 text-green-700 text-sm"
              >
                <CheckCircle className="w-5 h-5 flex-shrink-0 text-green-600" />
                <span>{success}</span>
              </motion.div>
            )}

            {error && (
              <motion.div
                initial={{ opacity: 0, y: -10 }}
                animate={{ opacity: 1, y: 0 }}
                className="mb-6 p-4 bg-red-50 border border-red-200 rounded-xl flex items-center gap-3 text-red-700 text-sm"
              >
                <AlertCircle className="w-5 h-5 flex-shrink-0 text-red-600" />
                <span>{error}</span>
              </motion.div>
            )}

            <div className="mb-6 p-4 bg-blue-50 rounded-xl border border-blue-100 flex items-start gap-3">
              <Shield className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" />
              <div className="text-sm text-blue-800">
                <p className="font-semibold">New device detected</p>
                <p className="text-xs mt-0.5">We've sent a verification code to your registered email address for security.</p>
              </div>
            </div>

            <form onSubmit={handleOtpSubmit} className="space-y-5">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Verification Code
                </label>
                <div className="relative">
                  <KeyRound className="absolute left-3.5 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
                  <input
                    type="text"
                    maxLength={6}
                    value={otpCode}
                    onChange={(e) => setOtpCode(e.target.value.replace(/\D/g, ''))}
                    placeholder="Enter 6-digit code"
                    className="w-full pl-11 pr-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors text-center tracking-[0.5em] font-mono text-lg font-bold"
                    disabled={otpLoading}
                    required
                  />
                </div>
                <p className="text-xs text-gray-500 mt-2">
                  Code expires in 10 minutes. Check your spam folder if you don't see it.
                </p>
              </div>

              <button
                type="submit"
                disabled={otpLoading || otpCode.length !== 6}
                className="w-full px-4 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 text-white rounded-xl font-medium hover:shadow-lg hover:shadow-blue-500/25 transition-all hover:scale-[1.01] active:scale-[0.99] disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
              >
                {otpLoading ? (
                  <>
                    <Loader2 className="w-5 h-5 animate-spin" />
                    <span>Verifying...</span>
                  </>
                ) : (
                  <>
                    <span>Verify Device</span>
                    <ArrowRight className="w-5 h-5" />
                  </>
                )}
              </button>

              <div className="text-center pt-2">
                <button
                  type="button"
                  onClick={() => {
                    setShowOtpVerification(false);
                    setError('');
                    setSuccess('');
                  }}
                  className="text-sm text-blue-600 hover:text-blue-700 font-medium"
                >
                  ← Back to login
                </button>
              </div>
            </form>
          </div>
        </motion.div>
      </div>
    );
  }

  // ─── Render: Dashboard Picker ─────────────────────────────────────────────

  if (showDashboardPicker && userData) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-indigo-50 flex items-center justify-center p-4">
        <AnimatePresence mode="wait">
          <motion.div
            initial={{ opacity: 0, scale: 0.95 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ duration: 0.3 }}
            className="w-full max-w-2xl"
          >
            <div className="text-center mb-8">
              <div className="inline-flex items-center gap-2 mb-4">
                <img 
                  src={logo} 
                  alt="SkillNexus" 
                  className="w-14 h-14 rounded-2xl shadow-lg shadow-blue-500/20"
                />
                <span className="text-2xl font-bold text-gray-900 tracking-tight">SkillNexus</span>
              </div>
              <h2 className="text-2xl font-bold text-gray-900">Welcome back, {userData.name?.split(' ')[0] || 'Admin'}! 👋</h2>
              <p className="text-gray-600 text-sm mt-1">Choose which dashboard you'd like to access</p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {/* Admin Dashboard */}
              <motion.div
                whileHover={{ scale: 1.02, y: -4 }}
                whileTap={{ scale: 0.98 }}
                className={`relative bg-white rounded-2xl shadow-xl border-2 p-6 cursor-pointer transition-all ${
                  selectedDashboard === 'admin' 
                    ? 'border-blue-600 shadow-blue-100' 
                    : 'border-gray-200 hover:border-blue-300'
                }`}
                onClick={() => handleDashboardSelect('admin')}
              >
                <div className="absolute top-3 right-3">
                  <div className="px-2 py-0.5 bg-gradient-to-r from-amber-400 to-amber-500 text-white text-[10px] font-bold rounded-full">
                    Admin
                  </div>
                </div>
                <div className="flex items-start gap-4">
                  <div className="p-3 bg-gradient-to-br from-blue-600 to-indigo-600 rounded-xl shadow-md shadow-blue-500/20">
                    <LayoutDashboard className="w-6 h-6 text-white" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <h3 className="text-lg font-bold text-gray-900">Admin Console</h3>
                    <p className="text-sm text-gray-500 mt-1">
                      Full platform management, user administration, API monitoring, and business analytics.
                    </p>
                    <div className="flex flex-wrap gap-1.5 mt-3">
                      <span className="px-2 py-0.5 bg-blue-50 text-blue-700 text-[10px] font-semibold rounded-full">Users</span>
                      <span className="px-2 py-0.5 bg-emerald-50 text-emerald-700 text-[10px] font-semibold rounded-full">Analytics</span>
                      <span className="px-2 py-0.5 bg-purple-50 text-purple-700 text-[10px] font-semibold rounded-full">Monitoring</span>
                      <span className="px-2 py-0.5 bg-amber-50 text-amber-700 text-[10px] font-semibold rounded-full">Billing</span>
                    </div>
                  </div>
                </div>
                <div className="mt-4 flex items-center justify-end text-blue-600 font-semibold text-sm">
                  <span>Access Admin Panel</span>
                  <ChevronRight className="w-4 h-4 ml-1" />
                </div>
              </motion.div>

              {/* User Dashboard */}
              <motion.div
                whileHover={{ scale: 1.02, y: -4 }}
                whileTap={{ scale: 0.98 }}
                className={`relative bg-white rounded-2xl shadow-xl border-2 p-6 cursor-pointer transition-all ${
                  selectedDashboard === 'user' 
                    ? 'border-emerald-600 shadow-emerald-100' 
                    : 'border-gray-200 hover:border-emerald-300'
                }`}
                onClick={() => handleDashboardSelect('user')}
              >
                <div className="absolute top-3 right-3">
                  <div className="px-2 py-0.5 bg-gradient-to-r from-emerald-400 to-emerald-500 text-white text-[10px] font-bold rounded-full">
                    User
                  </div>
                </div>
                <div className="flex items-start gap-4">
                  <div className="p-3 bg-gradient-to-br from-emerald-600 to-teal-600 rounded-xl shadow-md shadow-emerald-500/20">
                    <User className="w-6 h-6 text-white" />
                  </div>
                  <div className="flex-1 min-w-0">
                    <h3 className="text-lg font-bold text-gray-900">User Dashboard</h3>
                    <p className="text-sm text-gray-500 mt-1">
                      Manage your hiring pipeline, verify candidates, view analytics, and track placements.
                    </p>
                    <div className="flex flex-wrap gap-1.5 mt-3">
                      <span className="px-2 py-0.5 bg-blue-50 text-blue-700 text-[10px] font-semibold rounded-full">Candidates</span>
                      <span className="px-2 py-0.5 bg-emerald-50 text-emerald-700 text-[10px] font-semibold rounded-full">Verifications</span>
                      <span className="px-2 py-0.5 bg-purple-50 text-purple-700 text-[10px] font-semibold rounded-full">Analytics</span>
                      <span className="px-2 py-0.5 bg-amber-50 text-amber-700 text-[10px] font-semibold rounded-full">API Keys</span>
                    </div>
                  </div>
                </div>
                <div className="mt-4 flex items-center justify-end text-emerald-600 font-semibold text-sm">
                  <span>Go to Dashboard</span>
                  <ChevronRight className="w-4 h-4 ml-1" />
                </div>
              </motion.div>
            </div>

            <div className="mt-6 bg-white/80 backdrop-blur-sm rounded-2xl border border-gray-200 p-4 flex flex-wrap items-center justify-between gap-3">
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-600 to-indigo-600 flex items-center justify-center text-white font-bold text-sm">
                  {userData.name?.[0] || userData.email?.[0] || 'A'}
                </div>
                <div>
                  <p className="text-sm font-semibold text-gray-900">{userData.name || 'Admin User'}</p>
                  <p className="text-xs text-gray-500">{userData.email}</p>
                </div>
              </div>
              <div className="flex items-center gap-2">
                <button
                  onClick={() => navigate('/settings')}
                  className="px-3 py-1.5 text-xs font-semibold text-gray-600 hover:bg-gray-100 rounded-lg transition-colors flex items-center gap-1.5"
                >
                  <Settings className="w-3.5 h-3.5" />
                  Settings
                </button>
                <button
                  onClick={handleLogout}
                  className="px-3 py-1.5 text-xs font-semibold text-red-600 hover:bg-red-50 rounded-lg transition-colors flex items-center gap-1.5"
                >
                  <LogOut className="w-3.5 h-3.5" />
                  Logout
                </button>
              </div>
            </div>

            <div className="mt-4 flex items-center justify-center gap-2 text-xs text-gray-400">
              <ShieldCheck className="w-4 h-4" />
              <span>Enterprise-grade security • SOC 2 Compliant</span>
            </div>
          </motion.div>
        </AnimatePresence>
      </div>
    );
  }

  // ─── Render: Login Form ───────────────────────────────────────────────────

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-indigo-50 flex items-center justify-center p-4">
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
        className="w-full max-w-md"
      >
        <div className="text-center mb-8">
          <Link to="/" className="inline-flex items-center gap-2">
            <img 
              src={logo} 
              alt="SkillNexus" 
              className="w-12 h-12 rounded-xl shadow-lg shadow-blue-500/20"
            />
            <span className="text-2xl font-bold text-gray-900 tracking-tight">SkillNexus</span>
          </Link>
          <h2 className="mt-4 text-2xl font-bold text-gray-900">Welcome Back</h2>
          <p className="text-gray-600 text-sm mt-1">Sign in to continue managing your hiring pipeline</p>
        </div>

        <div className="bg-white rounded-2xl shadow-xl border border-gray-100 p-8">
          {success && !showDashboardPicker && (
            <motion.div
              initial={{ opacity: 0, y: -10 }}
              animate={{ opacity: 1, y: 0 }}
              className="mb-6 p-4 bg-green-50 border border-green-200 rounded-xl flex items-center gap-3 text-green-700 text-sm"
            >
              <CheckCircle className="w-5 h-5 flex-shrink-0 text-green-600" />
              <span>{success}</span>
            </motion.div>
          )}

          {error && (
            <motion.div
              initial={{ opacity: 0, y: -10 }}
              animate={{ opacity: 1, y: 0 }}
              className="mb-6 p-4 bg-red-50 border border-red-200 rounded-xl flex items-center gap-3 text-red-700 text-sm"
            >
              <AlertCircle className="w-5 h-5 flex-shrink-0 text-red-600" />
              <span>{error}</span>
            </motion.div>
          )}

          <form onSubmit={handleSubmit} className="space-y-5">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Email Address
              </label>
              <div className="relative">
                <Mail className="absolute left-3.5 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
                <input
                  type="email"
                  name="email"
                  value={formData.email}
                  onChange={handleChange}
                  placeholder="jane@company.com"
                  className="w-full pl-11 pr-4 py-2.5 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors text-sm"
                  disabled={loading}
                  required
                />
              </div>
            </div>

            <div>
              <div className="flex items-center justify-between mb-1">
                <label className="block text-sm font-medium text-gray-700">
                  Password
                </label>
                <Link to="/forgot-password" className="text-xs text-blue-600 hover:text-blue-700 font-medium">
                  Forgot password?
                </Link>
              </div>
              <div className="relative">
                <Lock className="absolute left-3.5 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
                <input
                  type={showPassword ? 'text' : 'password'}
                  name="password"
                  value={formData.password}
                  onChange={handleChange}
                  placeholder="Enter your password"
                  className="w-full pl-11 pr-12 py-2.5 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors text-sm"
                  disabled={loading}
                  required
                />
                <button
                  type="button"
                  onClick={() => setShowPassword(!showPassword)}
                  className="absolute right-3.5 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
                >
                  {showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
                </button>
              </div>
            </div>

            <div className="flex items-center justify-between">
              <label className="flex items-center gap-2 cursor-pointer">
                <input
                  type="checkbox"
                  name="rememberMe"
                  checked={formData.rememberMe}
                  onChange={handleChange}
                  className="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                />
                <span className="text-xs text-gray-600">Remember me</span>
              </label>
            </div>

            <button
              type="submit"
              disabled={loading}
              className="w-full px-4 py-3 bg-gradient-to-r from-blue-600 to-indigo-600 text-white rounded-xl font-medium hover:shadow-lg hover:shadow-blue-500/25 transition-all hover:scale-[1.01] active:scale-[0.99] disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
            >
              {loading ? (
                <>
                  <Loader2 className="w-5 h-5 animate-spin" />
                  <span>Signing In...</span>
                </>
              ) : (
                <>
                  <span>Sign In</span>
                  <ArrowRight className="w-5 h-5" />
                </>
              )}
            </button>
          </form>

          <div className="mt-6 pt-6 border-t border-gray-100 text-center">
            <p className="text-sm text-gray-600">
              Don't have an account?{' '}
              <Link to="/register" className="text-blue-600 hover:text-blue-700 font-medium">
                Create one now
              </Link>
            </p>
          </div>

          <div className="mt-4 flex items-center justify-center gap-2 text-xs text-gray-400">
            <ShieldCheck className="w-4 h-4" />
            <span>Enterprise-grade security • SOC 2 Compliant</span>
          </div>
        </div>
      </motion.div>
    </div>
  );
}

export default Login;