import { useState, useEffect } from "react";
import { getApiBase } from "../api";

function ResetPassword({ token, onSuccess, onBack }) {
  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError("");

    if (password !== confirmPassword) {
      setError("הסיסמאות אינן תואמות");
      return;
    }

    if (password.length < 6) {
      setError("הסיסמה חייבת להכיל לפחות 6 תווים");
      return;
    }

    setLoading(true);

    try {
      const response = await fetch(`${getApiBase()}/reset-password`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          token: token,
          new_password: password,
        }),
      });

      const data = await response.json();

      if (response.ok) {
        onSuccess();
      } else {
        setError(data.detail || "שגיאה באיפוס הסיסמה");
      }
    } catch (err) {
      setError("שגיאה באיפוס הסיסמה");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="auth-container">
      <div className="auth-card">
        <h1 className="auth-title">איפוס סיסמה</h1>
        <p className="auth-subtitle">הזן את הסיסמה החדשה שלך</p>

        <form onSubmit={handleSubmit} className="auth-form">
          {error && <div className="error-banner">{error}</div>}

          <div className="field">
            <label>סיסמה חדשה</label>
            <input
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
              placeholder="הזן סיסמה חדשה"
              autoComplete="new-password"
              minLength={6}
            />
          </div>

          <div className="field">
            <label>אימות סיסמה</label>
            <input
              type="password"
              value={confirmPassword}
              onChange={(e) => setConfirmPassword(e.target.value)}
              required
              placeholder="הזן שוב את הסיסמה"
              autoComplete="new-password"
              minLength={6}
            />
          </div>

          <button
            type="submit"
            className="btn primary full-width"
            disabled={loading}
          >
            {loading ? "מאפס..." : "איפוס סיסמה"}
          </button>
        </form>

        <div className="auth-footer">
          <p>
            <button className="link-btn" onClick={onBack}>
              חזור להתחברות
            </button>
          </p>
        </div>
      </div>
    </div>
  );
}

export default ResetPassword;