/* Tachiara client — Auth screen (đăng nhập / đăng ký) using axios. */

function AuthScreen({ onSignedIn }) {
  const [mode, setMode] = React.useState("signin"); // 'signin' | 'signup'
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [name, setName] = React.useState("");
  const [error, setError] = React.useState("");
  const [loading, setLoading] = React.useState(false);

  const submit = async (e) => {
    e.preventDefault();
    setError("");
    if (!email.includes("@")) { setError("Email không hợp lệ"); return; }
    if (password.length < 6) { setError("Mật khẩu cần ≥ 6 ký tự"); return; }
    if (mode === "signup" && !name.trim()) { setError("Cho mình biết tên với"); return; }

    setLoading(true);
    try {
      const data = mode === "signin"
        ? await window.api.auth.login({ email, password })
        : await window.api.auth.register({ name: name.trim(), email, password });
      window.api.setToken(data.token);
      onSignedIn(data.user);
    } catch (err) {
      setError(err.message || "Có lỗi xảy ra");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="auth-shell">
      <div className="auth-card">
        <div className="auth-brand">
          <div className="brand-mark">T</div>
          <span>Tachiara</span>
        </div>
        <h1 className="auth-title">
          {mode === "signin" ? "Chào mừng quay lại" : "Tạo tài khoản"}
        </h1>
        <p className="auth-sub">
          {mode === "signin"
            ? "Đăng nhập để xem các phòng quỹ của bạn."
            : "Quản lý chi tiêu chung với bạn bè trong vài giây."}
        </p>

        <form onSubmit={submit} className="stack stack-md">
          {mode === "signup" && (
            <Field label="Họ tên">
              <input className="input" value={name} onChange={e => setName(e.target.value)}
                     placeholder="Nguyễn Văn A" autoFocus />
            </Field>
          )}
          <Field label="Email">
            <input className="input" type="email" value={email}
                   onChange={e => setEmail(e.target.value)}
                   placeholder="ban@email.com"
                   autoFocus={mode === "signin"} />
          </Field>
          <Field label="Mật khẩu" hint={mode === "signup" ? "Ít nhất 6 ký tự" : undefined}>
            <input className="input" type="password" value={password}
                   onChange={e => setPassword(e.target.value)}
                   placeholder="••••••••" />
          </Field>

          {error && (
            <div style={{
              background: "var(--danger-soft)", color: "var(--danger)",
              padding: "8px 12px", borderRadius: "var(--r-md)", fontSize: 13,
            }}>{error}</div>
          )}

          <Button type="submit" variant="primary" size="lg" disabled={loading}>
            {loading ? "Đang xử lý..." : mode === "signin" ? "Đăng nhập" : "Tạo tài khoản"}
          </Button>
        </form>

        <div className="auth-switcher">
          {mode === "signin" ? "Chưa có tài khoản?" : "Đã có tài khoản?"}
          <button type="button" onClick={() => { setMode(mode === "signin" ? "signup" : "signin"); setError(""); }}>
            {mode === "signin" ? "Đăng ký" : "Đăng nhập"}
          </button>
        </div>
      </div>
    </div>
  );
}

window.AuthScreen = AuthScreen;