// auth.jsx — вход / регистрация ("впиши имя в книгу")
function Auth({ mode = "register", onMode, onDone, onBack }) {
  const isReg = mode === "register";
  const [name, setName] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [pass, setPass] = React.useState("");
  const [error, setError] = React.useState("");
  const [busy, setBusy] = React.useState(false);

  const ready = isReg ? (name.trim() && email.trim() && pass.length >= 8)
                      : (email.trim() && pass.trim());

  async function submit(e) {
    e.preventDefault();
    if (!ready || busy) return;
    setBusy(true);
    setError("");
    try {
      const res = isReg
        ? await window.AzothApi.register({ displayName: name.trim(), email: email.trim(), password: pass })
        : await window.AzothApi.login({ email: email.trim(), password: pass });
      window.AzothApi.setToken(res.token);
      onDone({
        id: res.user.id,
        name: res.user.display_name || name.trim() || "мандрівник",
        email: res.user.email,
        isNew: isReg,
        disciplines: ["free", "tarot", "numero"],
      });
    } catch (err) {
      const msg = String(err.message || err);
      setError(msg.includes("already registered")
        ? "Ця адреса вже вписана. Спробуй увійти."
        : msg.includes("Invalid email or password")
          ? "Ключ не збігся з іменем. Перевір адресу й таємне слово."
          : msg);
    } finally {
      setBusy(false);
    }
  }

  return (
    <div className="app-screen view-enter auth">
      <button className="auth__back btn btn--ghost" onClick={onBack}>← Назад</button>
      <div className="auth__stage">
        <aside className="auth__aside">
          <Sigil size={220} />
          <div className="eyebrow" style={{ marginTop: "2rem" }}>Liber Azoth</div>
          <p className="script auth__aside-text">
            «Ім'я — перший ключ. Назви себе, і поріг стане дверима.
            Те, що ти впишеш сюди, почую лише я».
          </p>
        </aside>

        <form className="auth__form veil-card" onSubmit={submit}>
          <div className="auth__tabs">
            <button type="button"
              className={"auth__tab" + (isReg ? " is-on" : "")}
              onClick={() => onMode("register")}>Вписати ім'я</button>
            <button type="button"
              className={"auth__tab" + (!isReg ? " is-on" : "")}
              onClick={() => onMode("login")}>Повернутися</button>
          </div>

          <h2 className="auth__title">
            {isReg ? "Замкни коло" : "Переступи поріг"}
          </h2>
          <p className="auth__sub script">
            {isReg ? "Кілька слів — і завіса прочиниться вперше."
                   : "З поверненням. Назви ключ, що ти лишив."}
          </p>

          <div className="auth__fields">
            {isReg && (
              <div className="field field--focusline">
                <label>Як до тебе звертатися</label>
                <input value={name} onChange={e => setName(e.target.value)}
                       placeholder="ім'я, що носиш у колі" autoFocus />
              </div>
            )}
            <div className="field field--focusline">
              <label>Знак для зв'язку</label>
              <input type="email" value={email} onChange={e => setEmail(e.target.value)}
                     autoComplete="email"
                     placeholder="твоя адреса у світі живих" />
            </div>
            <div className="field field--focusline">
              <label>Таємне слово</label>
              <input type="password" value={pass} onChange={e => setPass(e.target.value)}
                     autoComplete={isReg ? "new-password" : "current-password"}
                     placeholder="••••••••" />
            </div>
          </div>

          {error && <div className="auth__error">{error}</div>}

          <button className="btn btn--solid auth__submit" disabled={!ready || busy}>
            {busy ? "Відчиняю поріг…" : isReg ? "Запечатати коло" : "Увійти"}
          </button>

          <p className="auth__fine">
            Переступаючи поріг, ти погоджуєшся споглядати з розумом і мірою.
          </p>
        </form>
      </div>
    </div>
  );
}
Object.assign(window, { Auth });