// Valdebebas Life — Acceso: entrar, crear cuenta, Google, recuperar contraseña y requisitos
const GoogleG = () => <svg width="18" height="18" viewBox="0 0 48 48" aria-hidden="true"><path fill="#EA4335" d="M24 9.5c3.5 0 6.6 1.2 9 3.6l6.7-6.7C35.6 2.5 30.2 0 24 0 14.6 0 6.6 5.4 2.6 13.3l7.8 6C12.3 13.6 17.7 9.5 24 9.5z"></path><path fill="#4285F4" d="M46.1 24.6c0-1.6-.1-3.1-.4-4.6H24v9h12.4c-.5 2.9-2.2 5.3-4.6 6.9l7.4 5.8c4.3-4 6.9-9.9 6.9-17.1z"></path><path fill="#FBBC05" d="M10.4 28.7c-.5-1.4-.8-3-.8-4.7s.3-3.2.8-4.7l-7.8-6C1 16.6 0 20.2 0 24s1 7.4 2.6 10.7l7.8-6z"></path><path fill="#34A853" d="M24 48c6.5 0 11.9-2.1 15.9-5.8l-7.4-5.8c-2.1 1.4-4.8 2.3-8.5 2.3-6.3 0-11.7-4.1-13.6-9.8l-7.8 6C6.6 42.6 14.6 48 24 48z"></path></svg>;

function AuthModal({ state, onClose, onAuthed }) {
  const [mode, setMode] = useState("login");
  const [f, setF] = useState({ name: "", email: "", pass: "", live: false, adult: false, rgpd: false });
  const [err, setErr] = useState("");
  const [busy, setBusy] = useState(false);
  const [sent, setSent] = useState(null);
  useEffect(() => { if (state) { setMode(state.mode || "login"); setErr(""); setSent(null); setBusy(false); } }, [state]);
  const set = k => e => setF({ ...f, [k]: e.target.type === "checkbox" ? e.target.checked : e.target.value });
  const invita = (() => { try { return new URLSearchParams(location.search).get("invita") || ""; } catch (e) { return ""; } })();
  const run = async fn => { setErr(""); setBusy(true); try { await fn(); } catch (x) { setErr(VBStore.errMsg(x)); } setBusy(false); };
  const terms = f.adult && f.live && f.rgpd;

  function submit(e) {
    e && e.preventDefault();
    const email = f.email.trim().toLowerCase();
    if (mode === "login") {
      if (!email || !f.pass) return setErr("Escribe tu email y tu contraseña.");
      return run(async () => { const me = await VBStore.signIn(email, f.pass); onAuthed(me, false); });
    }
    if (mode === "forgot") {
      if (!/\S+@\S+\.\S+/.test(email)) return setErr("Escribe un email válido.");
      return run(async () => { await VBStore.resetPassword(email); setSent("reset"); });
    }
    if (mode === "newpass") {
      if (f.pass.length < 6) return setErr("La contraseña debe tener al menos 6 caracteres.");
      return run(async () => { await VBStore.updatePassword(f.pass); onClose(); window.__vrFlash && window.__vrFlash("Contraseña actualizada"); });
    }
    if (mode === "terms") {
      if (!terms) return setErr("Marca las tres casillas para continuar.");
      return run(async () => { await VBStore.acceptTerms(); onAuthed(VBStore.get("vr_me"), true); });
    }
    if (!f.name.trim() || !email || f.pass.length < 6) return setErr("Rellena nombre, email y una contraseña de al menos 6 caracteres.");
    if (!terms) return setErr("Confirma que eres mayor de 18 años, que vives o trabajas en Valdebebas y acepta las condiciones y la política de privacidad.");
    run(async () => { const r = await VBStore.signUp({ name: f.name.trim(), email, pass: f.pass, invita }); if (r.me) onAuthed(r.me, true); else setSent("confirm"); });
  }
  const google = () => {
    if (mode === "register" && !terms) return setErr("Marca las tres casillas antes de continuar con Google.");
    run(async () => { if (mode === "register") localStorage.setItem("vb_terms_ok", "1"); await VBStore.signInGoogle(); });
  };

  if (sent) return (
    <Modal open={!!state} onClose={onClose} title={sent === "confirm" ? "Revisa tu email" : "Te hemos enviado un enlace"} footer={<button className="btn" onClick={onClose}>Entendido</button>}>
      <div className="invite-code" id="auth-sent"><Ic n="mark_email_unread" style={{ fontSize: 40, color: "var(--green)" }} /><b style={{ fontSize: 18, display: "block", marginTop: 6 }}>{f.email}</b></div>
      <p>{sent === "confirm" ? "Pulsa el enlace del email para activar tu cuenta. Después vuelve aquí y entra con tu email y contraseña." : "Pulsa el enlace del email para elegir una contraseña nueva."}</p>
      <p className="baro-note">¿No lo ves? Mira en spam o en promociones.</p>
    </Modal>
  );
  const tabs = mode === "login" || mode === "register";
  const titles = { login: "Entra en tu cuenta", register: "Únete como vecino", forgot: "Recupera tu contraseña", newpass: "Elige una contraseña nueva", terms: "Un último paso" };
  const sub = mode === "terms" ? "Antes de empezar, confirma estos tres puntos." : mode === "forgot" ? "Te enviaremos un enlace para elegir una nueva." : tabs ? (state && state.reason) || "Navegar es libre. La cuenta solo hace falta para publicar en el tablón, proponer planes y votar." : null;
  return (
    <Modal open={!!state} onClose={onClose} title={titles[mode]} sub={sub}
      footer={<><button className="btn ghost" onClick={onClose}>{mode === "terms" ? "Ahora no" : "Cancelar"}</button><button id="auth-submit-btn" className="btn" onClick={submit} disabled={busy}>{busy ? "Un momento…" : { login: "Entrar", register: "Crear cuenta", forgot: "Enviar enlace", newpass: "Guardar", terms: "Continuar" }[mode]}</button></>}>
      {tabs && <div className="tabs"><button className={mode === "login" ? "on" : ""} onClick={() => { setMode("login"); setErr(""); }}>Ya tengo cuenta</button><button className={mode === "register" ? "on" : ""} onClick={() => { setMode("register"); setErr(""); }}>Crear cuenta</button></div>}
      <form id="auth-form" onSubmit={submit} style={{ display: "grid", gap: 14 }}>
        {tabs && <button type="button" id="auth-google-btn" className="btn ghost google-btn" onClick={google} disabled={busy}><GoogleG />{mode === "register" ? "Crear cuenta con Google" : "Entrar con Google"}</button>}
        {tabs && <div className="or"><span>o con tu email</span></div>}
        {mode === "register" && <div className="fld"><label htmlFor="auth-name">Nombre y primera letra del apellido</label><input id="auth-name" className="inp" value={f.name} onChange={set("name")} placeholder="Laura S." autoComplete="given-name" /><small>Así te verán los vecinos. No mostramos tu email.</small></div>}
        {mode !== "newpass" && mode !== "terms" && <div className="fld"><label htmlFor="auth-email">Email</label><input id="auth-email" className="inp" type="email" value={f.email} onChange={set("email")} placeholder="tu@email.com" autoComplete="email" /></div>}
        {(tabs || mode === "newpass") && <div className="fld"><label htmlFor="auth-pass">{mode === "newpass" ? "Nueva contraseña" : "Contraseña"}</label><input id="auth-pass" className="inp" type="password" value={f.pass} onChange={set("pass")} placeholder="Mínimo 6 caracteres" autoComplete={mode === "login" ? "current-password" : "new-password"} /></div>}
        {mode === "login" && <button type="button" className="lnk auth-forgot" onClick={() => { setMode("forgot"); setErr(""); }}>¿Has olvidado tu contraseña?</button>}
        {mode === "forgot" && <button type="button" className="lnk auth-forgot" onClick={() => { setMode("login"); setErr(""); }}>Volver a entrar</button>}
        {(mode === "register" || mode === "terms") && <>
          <label className="check"><input type="checkbox" checked={f.adult} onChange={set("adult")} />Soy mayor de 18 años.</label>
          <label className="check"><input type="checkbox" checked={f.live} onChange={set("live")} />Confirmo que vivo o trabajo en Valdebebas.</label>
          <label className="check"><input type="checkbox" checked={f.rgpd} onChange={set("rgpd")} />Acepto las condiciones de uso y la política de privacidad. Mis datos solo se usan para gestionar mi cuenta y puedo borrarla cuando quiera.</label>
        </>}
        {err && <div className="err">{err}</div>}
        <button type="submit" style={{ display: "none" }}></button>
      </form>
    </Modal>
  );
}

Object.assign(window, { AuthModal });