import { useState } from 'react';
import axios from 'axios';
import { useAuth } from '../context/AuthContext';
import { useNavigate, Link } from 'react-router-dom';

export default function Login() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const { login } = useAuth();
  const navigate = useNavigate();

  const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    try {
      const res = await axios.post('/api/auth/login', { email, password });
      login(res.data.user, res.data.token);
      navigate('/dashboard');
    } catch (err: any) {
      setError(err.response?.data?.error || 'Login failed');
      setIsLoading(false);
    }
  };

  return (
    <div className="min-h-[calc(100vh-100px)] flex items-center justify-center -mt-8" style={{ fontFamily: 'Inter, sans-serif' }}>
      <div className="w-full max-w-md relative group">
        <div className="absolute -inset-1 bg-gradient-to-r from-[#8083ff] to-[#4edea3] rounded-2xl blur opacity-25 group-hover:opacity-40 transition duration-1000 group-hover:duration-200"></div>
        <div className="glass-card relative rounded-2xl p-8 md:p-12 shadow-2xl">
          <div className="text-center mb-8">
            <span className="material-symbols-outlined text-[#c0c1ff] text-[48px] mb-4" style={{ fontVariationSettings: "'FILL' 1" }}>lock_open</span>
            <h1 className="text-[32px] font-bold text-[#0f172a] mb-2" style={{ fontFamily: 'Outfit, sans-serif' }}>Welcome Back</h1>
            <p className="text-[#475569] text-[16px]">Sign in to access your workspace</p>
          </div>

          {error && (
            <div className="mb-6 px-4 py-3 bg-[#ffb4ab]/10 border border-[#ffb4ab]/20 rounded-lg text-[#ffb4ab] text-center text-[14px] flex items-center justify-center gap-2">
              <span className="material-symbols-outlined text-[18px]">error</span>
              {error}
            </div>
          )}

          <form onSubmit={handleLogin} className="space-y-6">
            <div>
              <label className="block text-[#475569] text-[14px] font-semibold mb-2">Email Address</label>
              <div className="relative">
                <span className="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-[#475569]">mail</span>
                <input 
                  type="email" 
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  className="w-full bg-black/50 border border-slate-300 rounded-lg py-3 pl-10 pr-4 text-[#0f172a] placeholder-[#c7c4d7]/50 focus:border-[#c0c1ff] focus:ring-1 focus:ring-[#c0c1ff] outline-none transition-all"
                  placeholder="admin@example.com"
                  required 
                />
              </div>
            </div>

            <div>
              <div className="flex justify-between items-center mb-2">
                <label className="block text-[#475569] text-[14px] font-semibold">Password</label>
                <Link to="/forgot-password" className="text-[12px] text-[#8083ff] hover:text-[#c0c1ff] font-semibold transition-colors no-underline">
                  Forgot password?
                </Link>
              </div>
              <div className="relative">
                <span className="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-[#475569]">key</span>
                <input 
                  type="password" 
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  className="w-full bg-black/50 border border-slate-300 rounded-lg py-3 pl-10 pr-4 text-[#0f172a] placeholder-[#c7c4d7]/50 focus:border-[#c0c1ff] focus:ring-1 focus:ring-[#c0c1ff] outline-none transition-all"
                  placeholder="••••••••"
                  required 
                />
              </div>
            </div>

            <button 
              type="submit" 
              disabled={isLoading}
              className="w-full bg-[#c0c1ff] hover:bg-[#8083ff] text-[#1000a9] font-bold py-3 rounded-lg flex items-center justify-center gap-2 transition-all active:scale-95 disabled:opacity-70 primary-glow border-none mt-8"
              style={{ fontFamily: 'Outfit, sans-serif' }}
            >
              {isLoading ? (
                <>
                  <span className="animate-spin material-symbols-outlined">progress_activity</span>
                  Authenticating...
                </>
              ) : (
                <>
                  Sign In
                  <span className="material-symbols-outlined text-[20px]">login</span>
                </>
              )}
            </button>
            <p className="mt-8 text-center text-[#475569] text-[14px]">
              Don't have an account?{' '}
              <Link to="/register" className="text-[#8083ff] font-semibold hover:text-[#c0c1ff] transition-colors no-underline">
                Register here
              </Link>
            </p>
          </form>
        </div>
      </div>
    </div>
  );
}
