/* ProHippo — Auth Screen (Login / Signup) */

function AuthScreen() {
  const [mode, setMode] = React.useState("login");
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState("");

  const clean = (msg) =>
    msg.replace("Firebase: ", "").replace(/ \(auth\/[^)]+\)\.?/g, "");

  const handleGoogle = async () => {
    setBusy(true); setError("");
    try {
      const provider = new firebase.auth.GoogleAuthProvider();
      await firebase.auth().signInWithPopup(provider);
    } catch (e) {
      setError(clean(e.message));
      setBusy(false);
    }
  };

  const handleEmail = async (ev) => {
    ev.preventDefault();
    if (!email || !password) { setError("Please fill in your email and password."); return; }
    if (mode === "signup" && password.length < 6) { setError("Password must be at least 6 characters."); return; }
    setBusy(true); setError("");
    try {
      if (mode === "signup") {
        await firebase.auth().createUserWithEmailAndPassword(email, password);
      } else {
        await firebase.auth().signInWithEmailAndPassword(email, password);
      }
    } catch (e) {
      setError(clean(e.message));
      setBusy(false);
    }
  };

  const handleForgot = async () => {
    if (!email) { setError("Enter your email address first, then click Forgot password."); return; }
    try {
      await firebase.auth().sendPasswordResetEmail(email);
      setError("");
      alert("Password reset email sent! Please check your inbox.");
    } catch (e) {
      setError(clean(e.message));
    }
  };

  const switchMode = () => { setMode(m => m === "login" ? "signup" : "login"); setError(""); };

  return (
    <div className="auth-page">

      {/* ── LEFT PANEL ── */}
      <div className="auth-left">
        <div className="auth-brand-panel">

          <div className="auth-logo-row">
            <div className="auth-logo-mark">
              <svg viewBox="0 0 24 24" fill="none" style={{width:20,height:20}}>
                <path d="M6 4c3 0 3 4 6 4s3-4 6-4v16c-3 0-3-4-6-4s-3 4-6 4V4z" fill="white"/>
              </svg>
            </div>
            <span className="auth-logo-text">ProHippo</span>
          </div>

          <h1 className="auth-headline">Practice OS for<br/>Income-Tax Professionals</h1>
          <p className="auth-pitch">
            Everything your CA firm needs — assessees, notices, hearings, invoices
            and billing — all in one unified platform.
          </p>

          <div className="auth-feature-list">
            {[
              { emoji: "🧑‍💼", text: "Manage 200+ assessees & family groups" },
              { emoji: "🤖", text: "AI notice parsing & auto-scheduling" },
              { emoji: "📅", text: "Hearing calendar with client reminders" },
              { emoji: "🧾", text: "Invoices, billing & receivables tracking" },
            ].map(f => (
              <div key={f.text} className="auth-feature-row">
                <span className="auth-feature-emoji">{f.emoji}</span>
                <span>{f.text}</span>
              </div>
            ))}
          </div>

        </div>
      </div>

      {/* ── RIGHT PANEL ── */}
      <div className="auth-right">
        <div className="auth-card">

          <h2 className="auth-card-title">
            {mode === "login" ? "Welcome back 👋" : "Create your account"}
          </h2>
          <p className="auth-card-sub">
            {mode === "login"
              ? "Sign in to your ProHippo workspace"
              : "Start managing your practice smarter, today"}
          </p>

          {/* Google Button */}
          <button className="auth-google-btn" onClick={handleGoogle} disabled={busy}>
            <svg width="18" height="18" viewBox="0 0 48 48">
              <path fill="#EA4335" d="M24 9.5c3.5 0 6.6 1.2 9.1 3.6l6.8-6.8C35.8 2.5 30.3 0 24 0 14.7 0 6.7 5.4 2.7 13.3l7.9 6.1C12.5 13.1 17.8 9.5 24 9.5z"/>
              <path fill="#4285F4" d="M46.5 24.5c0-1.6-.1-3.1-.4-4.5H24v8.5h12.7c-.6 3-2.3 5.5-4.9 7.2l7.7 6c4.5-4.2 7-10.3 7-17.2z"/>
              <path fill="#FBBC05" d="M10.6 28.6A14.9 14.9 0 0 1 9.5 24c0-1.6.3-3.1.7-4.6L2.3 13.3A24 24 0 0 0 0 24c0 3.8.9 7.4 2.5 10.6l8.1-6z"/>
              <path fill="#34A853" d="M24 48c6.5 0 11.9-2.1 15.9-5.8l-7.7-6c-2.2 1.5-5 2.3-8.2 2.3-6.2 0-11.5-3.6-13.4-9.1l-8 6.1C6.7 42.6 14.7 48 24 48z"/>
            </svg>
            Continue with Google
          </button>

          <div className="auth-or"><span>or</span></div>

          {/* Email / Password Form */}
          <form onSubmit={handleEmail}>

            <div className="auth-field-group">
              <label className="auth-label">Email address</label>
              <input
                type="email"
                className="auth-input"
                placeholder="you@yourfirm.com"
                value={email}
                onChange={e => setEmail(e.target.value)}
                disabled={busy}
                autoComplete="email"
              />
            </div>

            <div className="auth-field-group">
              <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:6}}>
                <label className="auth-label" style={{marginBottom:0}}>Password</label>
                {mode === "login" && (
                  <button type="button" className="auth-link-btn" onClick={handleForgot}>
                    Forgot password?
                  </button>
                )}
              </div>
              <input
                type="password"
                className="auth-input"
                placeholder={mode === "signup" ? "Minimum 6 characters" : "••••••••"}
                value={password}
                onChange={e => setPassword(e.target.value)}
                disabled={busy}
                autoComplete={mode === "signup" ? "new-password" : "current-password"}
              />
            </div>

            {error && <div className="auth-error-box">{error}</div>}

            <button type="submit" className="auth-submit-btn" disabled={busy}>
              {busy ? "Please wait…" : mode === "login" ? "Sign in →" : "Create account →"}
            </button>

          </form>

          <p className="auth-switch-text">
            {mode === "login" ? "New to ProHippo? " : "Already have an account? "}
            <button type="button" className="auth-link-btn" style={{fontWeight:700}} onClick={switchMode}>
              {mode === "login" ? "Sign up free" : "Sign in instead"}
            </button>
          </p>

        </div>
      </div>

    </div>
  );
}

window.AuthScreen = AuthScreen;