/* ============================================================
   3DAX — Auth: useAuth hook + AuthModal (login / signup)
   ============================================================ */

/* re-render helper: subscribe a selector to Store changes */
function useStoreData(selector, deps){
  const [v, setV] = useState(selector);
  useEffect(() => {
    const fn = () => setV(() => selector());
    fn();
    return window.Store ? Store.subscribe(fn) : undefined;
  }, deps || []);
  return v;
}
function useAuth(){
  return useStoreData(() => (window.Store ? Store.currentUser() : null));
}

/* friendly Spanish messages for Firebase auth error codes */
function prettyAuthErr(e){
  const c = (e && (e.code || e.message)) || "";
  const map = {
    "auth/invalid-email": "El email no es válido.",
    "auth/user-not-found": "No existe una cuenta con ese email.",
    "auth/wrong-password": "Contraseña incorrecta.",
    "auth/invalid-credential": "Email o contraseña incorrectos.",
    "auth/email-already-in-use": "Ya existe una cuenta con ese email. Inicia sesión.",
    "auth/weak-password": "La contraseña debe tener al menos 6 caracteres.",
    "auth/popup-closed-by-user": "Cerraste la ventana antes de terminar.",
    "auth/popup-blocked": "El navegador bloqueó la ventana. Permite las ventanas emergentes.",
    "auth/account-exists-with-different-credential": "Ya tienes cuenta con otro método de acceso. Usa ese.",
    "auth/operation-not-allowed": "Ese método de acceso no está habilitado en Firebase todavía.",
    "auth/unauthorized-domain": "Este dominio no está autorizado en Firebase Authentication.",
  };
  for (const k in map) if (c.indexOf(k) !== -1) return map[k];
  return (e && e.message) || "No se pudo completar. Inténtalo de nuevo.";
}

function AuthModal({ open, mode, onClose, onAuthed }){
  const [tab, setTab] = useState(mode || "login");
  const [form, setForm] = useState({ email:"", name:"", password:"" });
  const [err, setErr] = useState("");
  const [busy, setBusy] = useState(false);
  const [remember, setRemember] = useState(true);
  const [social, setSocial] = useState("");

  useEffect(() => { setTab(mode || "login"); setErr(""); setForm({ email:"", name:"", password:"" }); }, [mode, open]);
  useEffect(() => {
    if(!open) return;
    document.body.style.overflow = "hidden";
    const onKey = (e) => { if(e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => { document.body.style.overflow = ""; window.removeEventListener("keydown", onKey); };
  }, [open]);

  if(!open) return null;
  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));

  const submit = async () => {
    setErr(""); setBusy(true);
    try{
      if(Store.setPersistence) await Store.setPersistence(remember);
      let u;
      if(tab === "login") u = await Store.login(form.email, form.password);
      else {
        if(form.password.length < 6) throw new Error("La contraseña debe tener al menos 6 caracteres.");
        u = await Store.signup(form.email, form.name, form.password, "customer");
      }
      setBusy(false);
      onAuthed && onAuthed(u);
      onClose();
    }catch(e){ setErr(prettyAuthErr(e)); setBusy(false); }
  };

  const social_login = async (provider) => {
    setErr(""); setSocial(provider);
    try{
      if(Store.setPersistence) await Store.setPersistence(remember);
      const u = await Store.loginWith(provider);
      setSocial("");
      onAuthed && onAuthed(u);
      onClose();
    }catch(e){ setErr(prettyAuthErr(e)); setSocial(""); }
  };

  return (
    <div className="auth" role="dialog" aria-modal="true">
      <div className="auth__scrim" onClick={onClose} />
      <div className="auth__panel">
        <button className="auth__close" onClick={onClose} aria-label="Cerrar">
          <svg width="20" height="20" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.6"><path d="M6 6l12 12M18 6L6 18"/></svg>
        </button>
        <div className="auth__brand"><span className="brand__mark">3<span>D</span>AX</span></div>
        <h2 className="display auth__title">{tab === "login" ? "Bienvenido de vuelta" : "Únete a la tripulación"}</h2>
        <p className="auth__sub">{tab === "login" ? "Entra para ver tus pedidos y comprar más rápido." : "Crea tu cuenta y sigue el estado de tus pedidos."}</p>

        <div className="auth__tabs">
          <button className={tab==="login"?"on":""} onClick={() => setTab("login")}>Iniciar sesión</button>
          <button className={tab==="signup"?"on":""} onClick={() => setTab("signup")}>Crear cuenta</button>
        </div>

        <div className="auth__social">
          <button className="auth__sso" onClick={() => social_login("google")} disabled={!!social}>
            {social==="google" ? <span className="spin" /> : <><span className="auth__sso-ic" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 18 18"><path fill="#4285F4" d="M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84a4.14 4.14 0 0 1-1.8 2.72v2.26h2.92c1.7-1.57 2.68-3.88 2.68-6.62z"/><path fill="#34A853" d="M9 18c2.43 0 4.47-.8 5.96-2.18l-2.92-2.26c-.8.54-1.84.86-3.04.86-2.34 0-4.32-1.58-5.03-3.7H.96v2.33A9 9 0 0 0 9 18z"/><path fill="#FBBC05" d="M3.97 10.72a5.4 5.4 0 0 1 0-3.44V4.95H.96a9 9 0 0 0 0 8.1l3.01-2.33z"/><path fill="#EA4335" d="M9 3.58c1.32 0 2.5.45 3.44 1.35l2.58-2.58C13.46.89 11.43 0 9 0A9 9 0 0 0 .96 4.95l3.01 2.33C4.68 5.16 6.66 3.58 9 3.58z"/></svg></span>Continuar con Google</>}
          </button>
          <button className="auth__sso auth__sso--apple" onClick={() => social_login("apple")} disabled={!!social}>
            {social==="apple" ? <span className="spin" /> : <><span className="auth__sso-ic" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M10.94 8.49c.02 2.2 1.93 2.93 1.95 2.94-.02.05-.31 1.05-1.02 2.08-.61.9-1.25 1.78-2.26 1.8-.99.02-1.31-.58-2.44-.58-1.13 0-1.48.56-2.42.6-.97.04-1.71-.97-2.33-1.86C.86 11.64-.13 8.3 1.16 6.04c.64-1.12 1.78-1.83 3.02-1.85.95-.02 1.85.64 2.44.64.58 0 1.68-.79 2.83-.68.48.02 1.84.2 2.71 1.47-.07.04-1.62.95-1.6 2.83zM9.2 3.03C9.72 2.4 10.07 1.52 9.97.64 9.22.67 8.31 1.14 7.77 1.77c-.48.56-.9 1.45-.79 2.31.84.06 1.69-.42 2.22-1.05z"/></svg></span>Continuar con Apple</>}
          </button>
        </div>
        <div className="auth__or"><span>o con tu email</span></div>

        <div className="auth__form" onKeyDown={(e)=>{ if(e.key==="Enter") submit(); }}>
          {tab === "signup" && (
            <label className="field"><span className="field__label">Nombre</span>
              <input value={form.name} onChange={set("name")} placeholder="Tu nombre" /></label>
          )}
          <label className="field"><span className="field__label">Email</span>
            <input type="email" value={form.email} onChange={set("email")} placeholder="tu@email.com" /></label>
          <label className="field"><span className="field__label">Contraseña</span>
            <input type="password" value={form.password} onChange={set("password")} placeholder="••••••••" /></label>
          <label className="auth__remember">
            <input type="checkbox" checked={remember} onChange={(e)=>setRemember(e.target.checked)} />
            <span>Recordar sesión en este dispositivo</span>
          </label>
          {err && <div className="auth__err">{err}</div>}
          <button className="btn btn-primary btn-lg btn-block" onClick={submit} disabled={busy}>
            {busy ? <span className="spin" /> : (tab === "login" ? "Entrar" : "Crear cuenta")}
          </button>
        </div>

        <div className="auth__hint">
          🔒 Inicio de sesión seguro con Firebase
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { useStoreData, useAuth, AuthModal });