import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

function ResetPassword() {
    const [email, setEmail] = useState('');
    const [message, setMessage] = useState('');
    const [error, setError] = useState('');

    const handleEmailChange = (e) => {
        setEmail(e.target.value);
    };

    const handleSubmit = async (e) => {
        e.preventDefault();
        setMessage("");
        setError("");
    
        const token = localStorage.getItem("authToken");
    
        if (!token) {
          setError("Authorization token is missing.");
          return;
        }
    
        try {
          const response = await fetch(`${process.env.REACT_APP_API_URL}api/resources/forgotpassword`, {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
              Authorization: `Bearer ${token}`,
            },
            body: JSON.stringify({ email }),
          });
    
          const data = await response.json();
    
          if (response.ok) {
            setMessage("A reset link has been sent to your email address.");
          } else {
            setError(data.message || "There was an issue sending the reset link. Please try again.");
          }
        } catch (error) {
          setError("An error occurred. Please try again later.");
        }
      };
    return (
        // <div className="position-fixed top-0 start-0 w-100 h-100 d-flex justify-content-center align-items-center" style={{ backgroundColor: 'gray' }}>
        //     <div className="card p-5" style={{ borderRadius: '15px', width: '100%', maxWidth: '500px' }}>
        //         <h5 className="text-center mb-4">Forgot My Username and Password</h5>
        //         <p className="text-center mb-4">
        //             By signing up, I agree to the CloudnSure <a href="/privacy-policy" target="_blank" rel="noopener noreferrer"><u>Privacy Policy</u></a> and <a href="/terms-of-service" target="_blank" rel="noopener noreferrer"><u>Terms of Service</u></a>.
        //         </p>
        //         <form onSubmit={handleSubmit}>
        //             <div className="form-group mb-3">
        //                 <label htmlFor="email">Email Address:</label>
        //                 <input
        //                     type="email"
        //                     id="email"
        //                     className="form-control"
        //                     value={email}
        //                     onChange={handleEmailChange}
        //                     required
        //                 />
        //             </div>
        //             <button type="submit" className="btn btn-block mb-2" style={{backgroundColor:" #007bff"}}>Send Reset Link</button>
        //         </form>
        //         {message && <p className="text-success text-center mt-3">{message}</p>}
        //         {error && <p className="text-danger text-center mt-3">{error}</p>}
        //     </div>
        // </div>

        <div
  className="position-fixed top-0 start-0 w-100 h-100"
  style={{
    backgroundColor: 'rgba(128, 128, 128, -0.1)', // Full-page background with slight transparency
    zIndex: 1, // Ensure background is behind the card
  }}
>
  <div
    className="d-flex justify-content-center align-items-center h-100"
    style={{
      position: 'relative', // Ensures proper stacking
      zIndex: 2, // Ensures card stays above background
    }}
  >
    <div
      className="card shadow-lg p-5"
      style={{
        borderRadius: '15px',
        width: '100%',
        maxWidth: '500px',
        backgroundColor: '#fff', // Explicit white background for card
        zIndex: 3, // Card always stays on top
      }}
    >
      <h5 className="text-center mb-4">Forgot My Username and Password</h5>
      <p className="text-center mb-4">
        By signing up, I agree to the CloudnSure{' '}
        <a href="/privacy-policy" target="_blank" rel="noopener noreferrer">
          <u>Privacy Policy</u>
        </a>{' '}
        and{' '}
        <a href="/terms-of-service" target="_blank" rel="noopener noreferrer">
          <u>Terms of Service</u>
        </a>.
      </p>
      <form onSubmit={handleSubmit}>
        <div className="form-group mb-3">
          <label htmlFor="email">Email Address:</label>
          <input
            type="email"
            id="email"
            className="form-control"
            value={email}
            onChange={handleEmailChange}
            required
          />
        </div>
        <button
          type="submit"
          className="btn btn-block mb-2"
          style={{
            backgroundColor: '#007bff',
            color: '#fff',
          }}
        >
          Send Reset Link
        </button>
      </form>
      {message && <p className="text-success text-center mt-3">{message}</p>}
      {error && <p className="text-danger text-center mt-3">{error}</p>}
    </div>
  </div>
</div>

      
    );
}

export default ResetPassword;
