import { useState } from 'react';
import axios from 'axios';
import { useParams, useNavigate } from 'react-router-dom';

export default function ResetPassword() {
  const { token } = useParams();
  const navigate = useNavigate();
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [message, setMessage] = useState('');
  const [error, setError] = useState('');
  const [isLoading, setIsLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (password !== confirmPassword) {
      return setError('Passwords do not match');
    }

    setIsLoading(true);
    setMessage('');
    setError('');
    
    try {
      const res = await axios.post('/api/reset-password', { token, newPassword: password });
      setMessage(res.data.message);
      setTimeout(() => navigate('/login'), 3000);
    } catch (err: any) {
      setError(err.response?.data?.error || 'Failed to reset password');
    } finally {
      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"></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" }}>key</span>
            <h1 className="text-[32px] font-bold text-[#0f172a] mb-2" style={{ fontFamily: 'Outfit, sans-serif' }}>New Password</h1>
            <p className="text-[#475569] text-[16px]">Enter your new password below</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>
          )}

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

          <form onSubmit={handleSubmit} className="space-y-6">
            <div>
              <label className="block text-[#475569] text-[14px] font-semibold mb-2">New Password</label>
              <div className="relative">
                <span className="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-[#475569]">lock</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 
                  minLength={6}
                />
              </div>
            </div>

            <div>
              <label className="block text-[#475569] text-[14px] font-semibold mb-2">Confirm Password</label>
              <div className="relative">
                <span className="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-[#475569]">lock</span>
                <input 
                  type="password" 
                  value={confirmPassword}
                  onChange={(e) => setConfirmPassword(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 
                  minLength={6}
                />
              </div>
            </div>

            <button 
              type="submit" 
              disabled={isLoading || !!message}
              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>
                  Saving...
                </>
              ) : (
                <>
                  Save Password
                  <span className="material-symbols-outlined text-[20px]">save</span>
                </>
              )}
            </button>
          </form>
        </div>
      </div>
    </div>
  );
}
