function Login({ onLogin, lang, setLang }) {
  const { useState, useEffect } = React;
  const T = window.T;
  const LangToggle = window.LangToggle;
  const t = T[lang].login;

  const [email,       setEmail]       = useState("");
  const [password,    setPassword]    = useState("");
  const [loading,     setLoading]     = useState(false);
  const [resetOpen,   setResetOpen]   = useState(false);
  const [resetEmail,  setResetEmail]  = useState("");
  const [resetLoading,setResetLoading]= useState(false);

  // Auto-login if session already exists
  useEffect(() => {
    window.SVX.getSession().then(session => { if (session) onLogin(); });
  }, []);

  async function handleSubmit(e) {
    e.preventDefault();
    setLoading(true);
    try {
      await window.SVX.auth.login(email, password);
      onLogin();
    } catch (_) {
      // toast already shown inside auth.js
    } finally {
      setLoading(false);
    }
  }

  async function handleReset(e) {
    e.preventDefault();
    setResetLoading(true);
    try {
      await window.SVX.auth.resetPassword(resetEmail);
      window.SVX.toast(t.resetSent || "Correu enviat!", "success");
      setResetOpen(false);
      setResetEmail("");
    } catch (_) {
      // toast already shown inside auth.js
    } finally {
      setResetLoading(false);
    }
  }

  return (
    <div className="srv-auth">
      <div className="srv-auth-lang"><LangToggle lang={lang} setLang={setLang} /></div>
      <div className="srv-auth-card">
        <div className="srv-auth-mark">{t.mark}</div>
        <h1 className="srv-auth-title t-h1">{t.title}</h1>
        <p className="srv-auth-sub">{t.sub}</p>
        <form className="srv-auth-form" onSubmit={handleSubmit}>
          <div className="srv-field">
            <label className="eyebrow" htmlFor="em">{t.email}</label>
            <input id="em" type="email" value={email} onChange={e => setEmail(e.target.value)} required />
          </div>
          <div className="srv-field">
            <label className="eyebrow" htmlFor="pw">{t.pass}</label>
            <input id="pw" type="password" value={password} onChange={e => setPassword(e.target.value)} required />
          </div>
          <button type="submit" className="btn primary srv-auth-btn" disabled={loading}>
            {loading
              ? <i className="ph ph-spinner" style={{animation: "spin 0.8s linear infinite"}}></i>
              : <>{t.in} <i className="ph ph-arrow-right"></i></>}
          </button>
          <a className="srv-auth-link" href="#" onClick={e => { e.preventDefault(); setResetOpen(o => !o); setResetEmail(""); }}>
            {t.forgot}
          </a>
        </form>

        {resetOpen && (
          <form className="srv-auth-form" onSubmit={handleReset} style={{marginTop: 12, borderTop: "1px solid var(--line)", paddingTop: 16}}>
            <div className="srv-field">
              <label className="eyebrow" htmlFor="re">{t.email}</label>
              <input id="re" type="email" value={resetEmail} onChange={e => setResetEmail(e.target.value)} required />
            </div>
            <button type="submit" className="btn primary srv-auth-btn" disabled={resetLoading}>
              {resetLoading
                ? <i className="ph ph-spinner" style={{animation: "spin 0.8s linear infinite"}}></i>
                : (t.resetSend || "Enviar")}
            </button>
          </form>
        )}

        <p className="srv-auth-foot t-pullquote" style={{fontSize: 15, color: "var(--ink-3)"}}>{t.foot}</p>
      </div>
    </div>
  );
}

window.Login = Login;