import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { motion } from 'framer-motion';
import { Shield, LogIn, Mail, Lock } from 'lucide-react';
import { useApp } from '../context/AppContext';

export default function AdminLogin() {
  const { adminLogin } = useApp();
  const navigate = useNavigate();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setError('');

    if (!email.trim()) {
      setError('Please enter your admin email.');
      return;
    }
    if (!password.trim()) {
      setError('Please enter your password.');
      return;
    }

    setLoading(true);
    setTimeout(() => {
      const success = adminLogin(email, password);
      if (success) {
        navigate('/admin/dashboard');
      } else {
        setError('Invalid email or password. Try again.');
      }
      setLoading(false);
    }, 500);
  };

  return (
    <div className="min-h-screen bg-[#0A0A0A] flex items-center justify-center px-4 relative overflow-hidden">
      {/* Background glow effect */}
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-accent-yellow/5 rounded-full blur-[120px] pointer-events-none" />

      <motion.div
        initial={{ opacity: 0, y: 30 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.6 }}
        className="bg-[#111111] border border-[#2A2A2A] rounded-2xl p-8 w-full max-w-md relative z-10"
      >
        {/* Logo */}
        <div className="text-center mb-8">
          <div className="flex items-center justify-center gap-0 mb-4">
            <span className="text-2xl font-bold text-white">MFA</span>
            <span className="text-2xl font-bold text-accent-lime">Tools</span>
            <span className="text-2xl font-extrabold text-accent-yellow">Net</span>
          </div>
          <div className="w-14 h-14 bg-accent-yellow/10 rounded-xl flex items-center justify-center mx-auto mb-4">
            <Shield className="w-7 h-7 text-accent-yellow" />
          </div>
          <h1 className="text-xl font-bold text-white">Secure Admin Panel</h1>
          <p className="text-text-tertiary text-sm mt-1">Administration Login</p>
        </div>

        <form onSubmit={handleSubmit} className="space-y-4">
          {/* Email */}
          <div>
            <label htmlFor="admin-email" className="text-text-secondary text-sm font-medium block mb-1.5">Admin Email</label>
            <div className="relative">
              <Mail size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-text-muted" />
              <input
                id="admin-email"
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="Enter admin email"
                className="w-full bg-bg-input border border-bg-border rounded-xl py-3 pl-10 pr-4 text-sm text-white placeholder:text-text-muted focus:outline-none focus:border-accent-yellow transition-colors"
              />
            </div>
          </div>

          {/* Password */}
          <div>
            <label htmlFor="admin-password" className="text-text-secondary text-sm font-medium block mb-1.5">Password</label>
            <div className="relative">
              <Lock size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-text-muted" />
              <input
                id="admin-password"
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                placeholder="Enter password"
                className="w-full bg-bg-input border border-bg-border rounded-xl py-3 pl-10 pr-4 text-sm text-white placeholder:text-text-muted focus:outline-none focus:border-accent-yellow transition-colors"
              />
            </div>
          </div>

          {error && (
            <p className="text-error text-sm bg-error/10 px-3 py-2 rounded-lg">{error}</p>
          )}

          <button
            type="submit"
            disabled={loading}
            className="w-full bg-accent-yellow text-bg-primary font-semibold py-3 rounded-xl hover:bg-accent-yellow-dark transition-colors flex items-center justify-center gap-2 disabled:opacity-50"
          >
            <LogIn size={18} />
            {loading ? 'Authenticating...' : 'Login'}
          </button>
        </form>

        <div className="mt-6 text-center">
          <a href="/" className="text-text-tertiary text-xs hover:text-accent-yellow transition-colors">
            &larr; Back to site
          </a>
        </div>
      </motion.div>
    </div>
  );
}