// PasswordReset.jsx
function PasswordReset() {
  const [step, setStep] = React.useState(1); // 1: email, 2: код, 3: новый пароль
  const [email, setEmail] = React.useState("");
  const [code, setCode] = React.useState("");
  const [generatedCode, setGeneratedCode] = React.useState("");
  const [newPassword, setNewPassword] = React.useState("");
  const [confirmPassword, setConfirmPassword] = React.useState("");
  const [timer, setTimer] = React.useState(0);
  const [error, setError] = React.useState("");

  React.useEffect(() => {
    if (timer <= 0) return;
    const t = setTimeout(() => setTimer((s) => s - 1), 1000);
    return () => clearTimeout(t);
  }, [timer]);

  const sendCode = () => {
    const raw = localStorage.getItem("mta_profile");
    if (!raw) {
      setError("Пользователь с таким email не найден");
      return;
    }
    const profile = JSON.parse(raw);
    if (profile.email.toLowerCase() !== email.toLowerCase()) {
      setError("Пользователь с таким email не найден");
      return;
    }

    const c = Math.floor(100000 + Math.random() * 900000).toString();
    setGeneratedCode(c);
    setTimer(60);
    setError("");

    console.log("Код восстановления:", c);
    alert("Код отправлен на email (в демо выводится в консоль)");

    setStep(2);
  };

  const verifyCode = () => {
    if (code === generatedCode) {
      setStep(3);
      setError("");
    } else {
      setError("Неверный код");
    }
  };

  const saveNewPassword = () => {
    if (newPassword.length < 8) {
      setError("Пароль должен быть не менее 8 символов");
      return;
    }
    if (newPassword !== confirmPassword) {
      setError("Пароли не совпадают");
      return;
    }

    try {
      const raw = localStorage.getItem("mta_profile");
      const profile = JSON.parse(raw);
      profile.password = newPassword;
      localStorage.setItem("mta_profile", JSON.stringify(profile));

      window.dispatchEvent(new Event("mta_profile_updated"));
      alert("Пароль успешно изменён");
      window.location.hash = "#/login";
    } catch (e) {
      console.error(e);
      setError("Ошибка сохранения пароля");
    }
  };

  return (
    <div style={{ maxWidth: 520, margin: "24px auto", color: "#e6eef8" }}>
      <h2>Восстановление пароля</h2>
      <p className="muted">Введите email, чтобы получить код восстановления</p>

      {step === 1 && (
        <>
          <div className="field">
            <input
              className="registration-input"
              placeholder="Email"
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
          </div>

          {error && <p className="error-text">{error}</p>}

          <button
            className="registration-button"
            onClick={sendCode}
            disabled={!email || timer > 0}
          >
            {timer > 0 ? `Отправить снова через ${timer}с` : "Отправить код"}
          </button>
        </>
      )}

      {step === 2 && (
        <>
          <div className="field">
            <input
              className="registration-input"
              placeholder="Код из письма"
              value={code}
              onChange={(e) => setCode(e.target.value)}
            />
          </div>

          {error && <p className="error-text">{error}</p>}

          <button className="registration-button" onClick={verifyCode}>
            Подтвердить код
          </button>
        </>
      )}

      {step === 3 && (
        <>
          <div className="field">
            <input
              className="registration-input"
              placeholder="Новый пароль"
              type="password"
              value={newPassword}
              onChange={(e) => setNewPassword(e.target.value)}
            />
          </div>

          <div className="field">
            <input
              className="registration-input"
              placeholder="Повторите пароль"
              type="password"
              value={confirmPassword}
              onChange={(e) => setConfirmPassword(e.target.value)}
            />
          </div>

          {error && <p className="error-text">{error}</p>}

          <button className="registration-button" onClick={saveNewPassword}>
            Сохранить пароль
          </button>
        </>
      )}
      <div style={{ marginTop: 20, display: "flex", gap: 10 }}>
        <button
            className="registration-button"
            style={{ background: "transparent", border: "1px solid #334155", color: "#cfe7ff" }}
            onClick={() => (window.location.hash = "#/login")}
        >
            Войти
        </button>

        <button
            className="registration-button"
            style={{ background: "transparent", border: "1px solid #334155", color: "#cfe7ff" }}
            onClick={() => (window.location.hash = "#/register")}
        >
            Регистрация
        </button>
        </div>

    </div>
    
  );
}