import React, { useState } from 'react';
import axios from 'axios';

const ResetPasswordForm = ({ showLogin }) => {
  const [token, setToken] = useState('');
  const [newPassword, setNewPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [error, setError] = useState('');
  const [success, setSuccess] = useState('');
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (newPassword !== confirmPassword) {
      setError("Passwords don't match.");
      return;
    }
    setLoading(true);
    setError('');
    setSuccess('');

    try {
      // Assuming you have a webhook for resetting the password
      await axios.post('https://api.karyamanswasta.my.id/webhook/forgot-password/adventure', { token, newPassword });
      setSuccess('Password has been sent successfully!');
      setTimeout(() => {
        showLogin();
      }, 2000);
    } catch (err) {
      setError(err.response?.data?.message || 'Failed to reset password.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
      <div className="text-center">
        <h2 className="text-3xl font-bold text-white">Reset Password</h2>
        <p className="mt-2 text-sm text-gray-300">Enter the token from your email/WhatsApp and a new password.</p>
      </div>
      <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
        <input name="token" type="text" required className="appearance-none relative block w-full px-4 py-3 border border-gray-500 bg-white/20 text-white placeholder-gray-300 focus:outline-none focus:ring-brand-orange focus:border-brand-orange sm:text-sm rounded-md" placeholder="Reset Token" value={token} onChange={(e) => setToken(e.target.value)} />
        <input name="newPassword" type="password" required className="appearance-none relative block w-full px-4 py-3 border border-gray-500 bg-white/20 text-white placeholder-gray-300 focus:outline-none focus:ring-brand-orange focus:border-brand-orange sm:text-sm rounded-md" placeholder="New Password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} />
        <input name="confirmPassword" type="password" required className="appearance-none relative block w-full px-4 py-3 border border-gray-500 bg-white/20 text-white placeholder-gray-300 focus:outline-none focus:ring-brand-orange focus:border-brand-orange sm:text-sm rounded-md" placeholder="Confirm New Password" value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} />
        {error && <p className="text-sm text-red-300 text-center">{error}</p>}
        {success && <p className="text-sm text-green-400 text-center">{success}</p>}
        <div>
          <button type="submit" disabled={loading} className="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-bold rounded-md text-white bg-brand-orange hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-orange focus:ring-offset-gray-800 disabled:opacity-60">
            {loading ? 'Resetting...' : 'Reset Password'}
          </button>
        </div>
        <p className="text-center text-sm text-gray-300">
          <button type="button" onClick={showLogin} className="font-medium text-brand-orange hover:underline">
            Back to Login
          </button>
        </p>
      </form>
    </>
  );
};

export default ResetPasswordForm;