// login-screen.jsx — Full-page login form with email/password, loading state, error display
const { useState } = React;

const LoginScreen = ({ onLogin }) => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!email || !password) { setError("Email and password are required"); return; }
    setLoading(true);
    setError("");
    try {
      const res = await AuthApi.login(email, password);
      if (res.success) {
        onLogin(res.token, res.user);
      } else {
        setError(res.message || "Login failed");
      }
    } catch (err) {
      setError(err.message || "Login failed");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{
      display: "flex", alignItems: "center", justifyContent: "center",
      height: "100vh", background: "var(--bg)"
    }}>
      <div style={{ width: 360 }}>
        <div style={{ textAlign: "center", marginBottom: 32 }}>
          <div style={{
            width: 40, height: 40, background: "var(--accent)", borderRadius: 10,
            display: "inline-flex", alignItems: "center", justifyContent: "center",
            fontSize: 20, fontWeight: 700, color: "#fff", marginBottom: 12
          }}>S</div>
          <h2 style={{ margin: 0, fontSize: 20, fontWeight: 600 }}>Seeding Hub</h2>
          <div style={{ color: "var(--fg-4)", fontSize: 13, marginTop: 4 }}>Sign in to your account</div>
        </div>

        <div className="card">
          <div className="card-body">
            <form onSubmit={handleSubmit} style={{ display: "flex", flexDirection: "column", gap: 16 }}>
              <div>
                <label style={{ display: "block", fontSize: 12, fontWeight: 500, marginBottom: 6, color: "var(--fg-2)" }}>
                  Email
                </label>
                <input
                  className="input"
                  type="email"
                  placeholder="admin@example.com"
                  value={email}
                  onChange={e => setEmail(e.target.value)}
                  autoFocus
                  style={{ width: "100%", boxSizing: "border-box" }}
                />
              </div>
              <div>
                <label style={{ display: "block", fontSize: 12, fontWeight: 500, marginBottom: 6, color: "var(--fg-2)" }}>
                  Password
                </label>
                <input
                  className="input"
                  type="password"
                  placeholder="••••••••"
                  value={password}
                  onChange={e => setPassword(e.target.value)}
                  style={{ width: "100%", boxSizing: "border-box" }}
                />
              </div>

              {error && (
                <div style={{
                  background: "var(--red-bg, rgba(239,68,68,0.1))",
                  border: "1px solid var(--red-border, rgba(239,68,68,0.3))",
                  borderRadius: 6, padding: "8px 12px",
                  color: "var(--red)", fontSize: 13
                }}>
                  {error}
                </div>
              )}

              <button
                className="btn primary"
                type="submit"
                disabled={loading}
                style={{ width: "100%", justifyContent: "center" }}
              >
                {loading ? "Signing in…" : "Sign in"}
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { LoginScreen });