import { useState } from "react";
import { register, login, saveToken } from "../authApi";

function Register({ onSuccess, onSwitchToLogin }) {
  const [username, setUsername] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [displayName, setDisplayName] = useState("");
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError("");

    // Validation
    if (password !== confirmPassword) {
      setError("הסיסמאות אינן תואמות");
      return;
    }

    if (password.length < 6) {
      setError("הסיסמה חייבת להכיל לפחות 6 תווים");
      return;
    }

    if (!displayName.trim()) {
      setError("שם תצוגה הוא שדה חובה");
      return;
    }

    setLoading(true);

    try {
      // Register the user
      await register(username, email, password, firstName, lastName, displayName);
      
      // Automatically login after successful registration
      const response = await login(username, password);
      saveToken(response.access_token);
      onSuccess();
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="auth-container">
      <div className="auth-card">
        <h1 className="auth-title">הרשמה</h1>
        <p className="auth-subtitle">צור חשבון חדש והתחל לנהל את המתכונים שלך</p>

        <form onSubmit={handleSubmit} className="auth-form">
          {error && <div className="error-banner">{error}</div>}

          <div className="field">
            <label>שם פרטי</label>
            <input
              type="text"
              value={firstName}
              onChange={(e) => setFirstName(e.target.value)}
              placeholder="שם פרטי (אופציונלי)"
            />
          </div>

          <div className="field">
            <label>שם משפחה</label>
            <input
              type="text"
              value={lastName}
              onChange={(e) => setLastName(e.target.value)}
              placeholder="שם משפחה (אופציונלי)"
            />
          </div>

          <div className="field">
            <label>שם תצוגה *</label>
            <input
              type="text"
              value={displayName}
              onChange={(e) => setDisplayName(e.target.value)}
              required
              placeholder="איך תרצה שיופיע שמך?"
              minLength={2}
            />
          </div>

          <div className="field">
            <label>שם משתמש * (אנגלית בלבד)</label>
            <input
              type="text"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              required
              placeholder="username (English only)"
              autoComplete="username"
              minLength={3}
              pattern="[a-zA-Z0-9_-]+"
              title="שם משתמש יכול להכיל רק אותיות באנגלית, מספרים, _ ו-"
            />
          </div>

          <div className="field">
            <label>אימייל *</label>
            <input
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
              placeholder="your@email.com"
              autoComplete="email"
            />
          </div>

          <div className="field">
            <label>סיסמה *</label>
            <input
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
              placeholder="בחר סיסמה חזקה"
              autoComplete="new-password"
              minLength={6}
            />
          </div>

          <div className="field">
            <label>אימות סיסמה *</label>
            <input
              type="password"
              value={confirmPassword}
              onChange={(e) => setConfirmPassword(e.target.value)}
              required
              placeholder="הזן סיסמה שוב"
              autoComplete="new-password"
              minLength={6}
            />
          </div>

          <button type="submit" className="btn primary full-width" disabled={loading}>
            {loading ? "נרשם..." : "הירשם"}
          </button>
        </form>

        <div className="auth-footer">
          <p>
            כבר יש לך חשבון?{" "}
            <button className="link-btn" onClick={onSwitchToLogin}>
              התחבר
            </button>
          </p>
        </div>
      </div>
    </div>
  );
}

export default Register;
