// web/screens/auth.jsx — Вход и Регистрация (фаза 2, §3.1–3.2).
// Самодостаточные экраны до авторизации: собственные инлайн-стили, не зависят
// от темы приложения. api.auth.* → сохраняет токен → onLogin/onRegistered(me).

const AUTH_SHELL = {
  minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center",
  background: "#f5f6f4", fontFamily: "inherit",
};
const AUTH_CARD = {
  width: 380, background: "#fff", border: "1px solid #e4e6e1", borderRadius: 14,
  padding: "28px 28px 22px", boxShadow: "0 8px 30px rgba(0,0,0,.06)",
};
const A_LABEL = { display: "block", fontSize: 12.5, color: "#5b6157", marginBottom: 5, fontWeight: 500 };
const A_INPUT = {
  width: "100%", boxSizing: "border-box", padding: "9px 11px", fontSize: 14,
  border: "1px solid #d7dad3", borderRadius: 8, outline: "none", background: "#fff",
};
const A_BTN = {
  width: "100%", padding: "10px 14px", fontSize: 14, fontWeight: 600, cursor: "pointer",
  border: "none", borderRadius: 8, background: "#3f6f52", color: "#fff",
};
const A_LINK = { background: "none", border: "none", color: "#3f6f52", cursor: "pointer", fontWeight: 600, padding: 0 };

function AuthBrand() {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 18 }}>
      <div style={{ width: 34, height: 34, borderRadius: 9, background: "#3f6f52", color: "#fff",
        display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700 }}>P</div>
      <div>
        <div style={{ fontWeight: 700, fontSize: 18, lineHeight: 1 }}>pika</div>
        <div style={{ fontSize: 11.5, color: "#8a8f86" }}>кейвординг для фотостоков</div>
      </div>
    </div>
  );
}

function LoginScreen({ onLogin, onGoRegister }) {
  const [ident, setIdent] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [remember, setRemember] = React.useState(true);
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState("");

  const submit = async (e) => {
    e.preventDefault();
    setError(""); setLoading(true);
    try {
      const key = await api.auth.Login(ident.trim(), password, remember);
      api.auth.setToken(key);
      const me = await api.auth.Me();
      onLogin(me);
    } catch (err) {
      setError(err.message || "Не удалось войти");
      api.auth.logout();
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={AUTH_SHELL}>
      <form style={AUTH_CARD} onSubmit={submit}>
        <AuthBrand />
        <h1 style={{ fontSize: 19, margin: "0 0 4px" }}>Вход</h1>
        <p style={{ fontSize: 13, color: "#777c73", margin: "0 0 18px" }}>
          Войдите по email или логину, чтобы продолжить.
        </p>
        <div style={{ marginBottom: 13 }}>
          <label style={A_LABEL}>Email или логин</label>
          <input style={A_INPUT} value={ident} autoFocus
                 onChange={(e) => setIdent(e.target.value)} placeholder="you@mail.ru или ваш_логин" />
        </div>
        <div style={{ marginBottom: 12 }}>
          <label style={A_LABEL}>Пароль</label>
          <input style={A_INPUT} type="password" value={password}
                 onChange={(e) => setPassword(e.target.value)} placeholder="••••••••" />
        </div>
        <label style={{ display: "flex", alignItems: "center", gap: 7, fontSize: 12.5, color: "#5b6157", marginBottom: 14 }}>
          <input type="checkbox" checked={remember} onChange={(e) => setRemember(e.target.checked)} />
          Запомнить меня
        </label>
        {error && <div style={{ color: "#c0392b", fontSize: 12.5, marginBottom: 12 }}>{error}</div>}
        <button style={{ ...A_BTN, opacity: loading ? 0.6 : 1 }} type="submit" disabled={loading}>
          {loading ? "Проверяем…" : "Войти"}
        </button>
        <div style={{ textAlign: "center", marginTop: 16, fontSize: 13, color: "#777c73" }}>
          Нет аккаунта? <button type="button" style={A_LINK} onClick={onGoRegister}>Зарегистрироваться</button>
        </div>
      </form>
    </div>
  );
}

function RegisterScreen({ onRegistered, onGoLogin }) {
  const [email, setEmail] = React.useState("");
  const [login, setLogin] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [password2, setPassword2] = React.useState("");
  const [check, setCheck] = React.useState({ valid: false, free: null, reason: "" });
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState("");
  const [pending, setPending] = React.useState(false); // регистрация принята, ждёт ручной активации

  // Live-проверка логина (дебаунс 350мс) через auth.CheckLogin.
  React.useEffect(() => {
    if (!login) { setCheck({ valid: false, free: null, reason: "" }); return; }
    let alive = true;
    const t = setTimeout(() => {
      api.auth.CheckLogin(login.trim())
        .then((r) => { if (alive) setCheck(r); })
        .catch(() => {});
    }, 350);
    return () => { alive = false; clearTimeout(t); };
  }, [login]);

  const emailOk = /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email);
  const passOk = password.length >= 8;
  const matchOk = password.length > 0 && password === password2;
  const canSubmit = emailOk && check.valid && check.free && passOk && matchOk && !loading;

  const submit = async (e) => {
    e.preventDefault();
    if (!canSubmit) return;
    setError(""); setLoading(true);
    try {
      const key = await api.auth.Register(email.trim(), login.trim(), password);
      if (!key) {
        // Ворота ручной активации включены: аккаунт создан, но заблокирован до
        // одобрения админом. Не логиним — показываем «ждите активации».
        setPending(true);
        return;
      }
      api.auth.setToken(key);
      const me = await api.auth.Me();
      onRegistered(me);
    } catch (err) {
      setError(err.message || "Не удалось зарегистрироваться");
      api.auth.logout();
    } finally {
      setLoading(false);
    }
  };

  const loginBorder = login
    ? (check.valid && check.free ? "#3f9f6a" : check.valid ? "#c0392b" : "#d7dad3")
    : "#d7dad3";

  if (pending) {
    return (
      <div style={AUTH_SHELL}>
        <div style={{ ...AUTH_CARD, width: 400, textAlign: "center" }}>
          <AuthBrand />
          <div style={{ fontSize: 34, margin: "8px 0" }}>✓</div>
          <h1 style={{ fontSize: 19, margin: "0 0 8px" }}>Заявка принята</h1>
          <p style={{ fontSize: 13.5, color: "#777c73", margin: "0 0 18px", lineHeight: 1.5 }}>
            Аккаунт <b>{login.trim()}</b> создан и ожидает активации администратором.
            Как только тебя активируют — сможешь войти под своим логином и паролем.
          </p>
          <button type="button" style={A_BTN} onClick={onGoLogin}>На страницу входа</button>
        </div>
      </div>
    );
  }

  return (
    <div style={AUTH_SHELL}>
      <form style={{ ...AUTH_CARD, width: 400 }} onSubmit={submit}>
        <AuthBrand />
        <h1 style={{ fontSize: 19, margin: "0 0 4px" }}>Регистрация</h1>
        <p style={{ fontSize: 13, color: "#777c73", margin: "0 0 16px" }}>
          Создайте аккаунт — сразу дадим пробный период.
        </p>

        <div style={{ marginBottom: 12 }}>
          <label style={A_LABEL}>Email</label>
          <input style={A_INPUT} type="email" value={email} autoFocus
                 onChange={(e) => setEmail(e.target.value)} placeholder="you@mail.ru" />
        </div>

        <div style={{ marginBottom: 12 }}>
          <label style={A_LABEL}>Логин</label>
          <input style={{ ...A_INPUT, borderColor: loginBorder }} value={login}
                 onChange={(e) => setLogin(e.target.value)} placeholder="ваш_логин" />
          <div style={{ fontSize: 11.5, marginTop: 4,
            color: login && check.valid ? (check.free ? "#3f9f6a" : "#c0392b") : "#9a9f95" }}>
            {login && check.reason
              ? check.reason
              : "латиница, цифры и _, без пробелов и @ · станет именем вашей папки"}
          </div>
        </div>

        <div style={{ marginBottom: 12 }}>
          <label style={A_LABEL}>Пароль</label>
          <input style={A_INPUT} type="password" value={password}
                 onChange={(e) => setPassword(e.target.value)} placeholder="минимум 8 символов" />
          {password && !passOk &&
            <div style={{ fontSize: 11.5, marginTop: 4, color: "#c0392b" }}>слишком короткий — нужно хотя бы 8</div>}
        </div>

        <div style={{ marginBottom: 14 }}>
          <label style={A_LABEL}>Повтор пароля</label>
          <input style={{ ...A_INPUT, borderColor: password2 ? (matchOk ? "#3f9f6a" : "#c0392b") : "#d7dad3" }}
                 type="password" value={password2}
                 onChange={(e) => setPassword2(e.target.value)} placeholder="ещё раз" />
          {password2 && !matchOk &&
            <div style={{ fontSize: 11.5, marginTop: 4, color: "#c0392b" }}>пароли не совпадают</div>}
        </div>

        {error && <div style={{ color: "#c0392b", fontSize: 12.5, marginBottom: 12 }}>{error}</div>}
        <button style={{ ...A_BTN, opacity: canSubmit ? 1 : 0.5, cursor: canSubmit ? "pointer" : "default" }}
                type="submit" disabled={!canSubmit}>
          {loading ? "Создаём аккаунт…" : "Зарегистрироваться"}
        </button>
        <div style={{ textAlign: "center", marginTop: 16, fontSize: 13, color: "#777c73" }}>
          Уже есть аккаунт? <button type="button" style={A_LINK} onClick={onGoLogin}>Войти</button>
        </div>
      </form>
    </div>
  );
}

window.LoginScreen = LoginScreen;
window.RegisterScreen = RegisterScreen;