/* ============================================================
   HUB · TEAM & ACCESS — master-only staff account management.
   Create email+password accounts with roles (master / manager /
   door), reset passwords, deactivate or delete access. Accounts
   are hashed in PPDB.accounts and cloud-synced ("staff").
   ============================================================ */
function useStaffAccounts() {
  const [list, setList] = useState(() => window.PPDB.accounts.all());
  useEffect(() => {
    const f = () => setList(window.PPDB.accounts.all());
    window.addEventListener("pp:staff", f);
    return () => window.removeEventListener("pp:staff", f);
  }, []);
  return list;
}

function TeamModule({ sess }) {
  const t = useT(); const { lang } = useLang();
  const list = useStaffAccounts();
  const blank = { name: "", email: "", pass: "", role: "manager" };
  const [form, setForm] = useState(blank);
  const [err, setErr] = useState("");
  const [okMsg, setOkMsg] = useState("");
  const [resetFor, setResetFor] = useState(null); // account id being reset
  const [newPass, setNewPass] = useState("");
  const set = (k, v) => setForm((p) => ({ ...p, [k]: v }));

  const ROLES = {
    master: { l: t("Master — full access", "Master — acceso total"), c: "#FF2E88" },
    manager: { l: t("Manager — operations (no Team)", "Gerente — operación (sin Equipo)"), c: "#CBA35C" },
    door: { l: t("Door — door, invitations, dashboard", "Puerta — puerta, invitaciones, panel"), c: "#5FBFA8" },
  };
  const flash = (m) => { setOkMsg(m); setTimeout(() => setOkMsg(""), 2500); };

  const create = async (e) => {
    e.preventDefault(); setErr("");
    if (!form.name.trim()) return setErr(t("Name is required.", "El nombre es obligatorio."));
    if (!/.+@.+\..+/.test(form.email)) return setErr(t("Valid email required.", "Se requiere un correo válido."));
    if (window.PPDB.accounts.byEmail(form.email)) return setErr(t("That email already has an account.", "Ese correo ya tiene una cuenta."));
    if (form.pass.length < 8) return setErr(t("Password: minimum 8 characters.", "Contraseña: mínimo 8 caracteres."));
    await window.PPDB.auth.createAccount({ name: form.name.trim(), email: form.email, password: form.pass, role: form.role });
    setForm(blank); flash(t("Account created.", "Cuenta creada."));
  };

  const doReset = async (e) => {
    e.preventDefault(); setErr("");
    if (newPass.length < 8) return setErr(t("Password: minimum 8 characters.", "Contraseña: mínimo 8 caracteres."));
    await window.PPDB.auth.setPassword(resetFor, newPass);
    setResetFor(null); setNewPass(""); flash(t("Password updated.", "Contraseña actualizada."));
  };

  const masters = list.filter((a) => a.role === "master" && a.active !== false).length;

  return (
    <div>
      <div className="rounded-2xl border border-gold/25 bg-gold/5 p-4 mb-6 flex items-center gap-3"><Icon name="shield" className="w-5 h-5 text-gold-soft shrink-0" /><p className="text-white/65 text-sm">{t("Each person on your team gets their own email + password and only sees what their role allows. Passwords are stored hashed — nobody can read them, only reset them.", "Cada persona de tu equipo tiene su propio correo + contraseña y solo ve lo que su rol permite. Las contraseñas se guardan cifradas — nadie puede leerlas, solo restablecerlas.")}</p></div>
      {okMsg && <div className="rounded-xl border border-green-400/40 bg-green-400/10 px-4 py-3 mb-4 text-green-300 text-sm fade-view">{okMsg}</div>}

      <div className="grid lg:grid-cols-12 gap-6 items-start">
        {/* create */}
        <div className="lg:col-span-5">
          <form onSubmit={create} className="rounded-2xl border border-white/12 bg-card p-5 space-y-3.5">
            <div className="label text-coral text-[10px]">{t("New team account", "Nueva cuenta de equipo")}</div>
            <input value={form.name} onChange={(e) => set("name", e.target.value)} placeholder={t("Full name *", "Nombre completo *")} className="w-full bg-ink border border-white/12 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-coral placeholder:text-white/35" />
            <input type="email" value={form.email} onChange={(e) => set("email", e.target.value)} placeholder="email@clubpinkpony.com *" className="w-full bg-ink border border-white/12 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-coral placeholder:text-white/35" />
            <input type="password" autoComplete="new-password" value={form.pass} onChange={(e) => set("pass", e.target.value)} placeholder={t("Temporary password (min 8) *", "Contraseña temporal (mín 8) *")} className="w-full bg-ink border border-white/12 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-coral placeholder:text-white/35" />
            <div className="space-y-1.5">
              {Object.entries(ROLES).map(([id, r]) => (
                <button type="button" key={id} onClick={() => set("role", id)} className={"w-full px-3.5 py-2.5 rounded-xl text-left text-[12px] font-semibold border transition-all flex items-center gap-2.5 " + (form.role === id ? "text-white" : "text-white/50 border-white/12 hover:text-white")} style={form.role === id ? { background: r.c + "1c", borderColor: r.c } : {}}>
                  <span className="w-2 h-2 rounded-full shrink-0" style={{ background: r.c }}></span>{r.l}
                </button>
              ))}
            </div>
            {err && <p className="text-coral text-xs font-semibold">{err}</p>}
            <button className="gbtn w-full py-3.5 rounded-full bg-coral hover:bg-coral-deep text-white text-[12px] font-bold uppercase tracking-[0.14em] flex items-center justify-center gap-2"><Icon name="user-plus" className="w-4 h-4" />{t("Create account", "Crear cuenta")}</button>
          </form>
        </div>

        {/* list */}
        <div className="lg:col-span-7 space-y-2">
          {list.map((a) => {
            const r = ROLES[a.role] || ROLES.manager;
            const isMe = sess && sess.id === a.id;
            const lastMaster = a.role === "master" && masters <= 1;
            return (
              <div key={a.id} className={"rounded-xl border border-white/10 bg-card p-3.5 " + (a.active === false ? "opacity-50" : "")}>
                <div className="flex items-center gap-3">
                  <div className="w-9 h-9 rounded-full bg-gradient-to-br from-coral to-grape flex items-center justify-center text-[12px] font-black text-white shrink-0">{(a.name || "?")[0].toUpperCase()}</div>
                  <div className="flex-1 min-w-0">
                    <div className="font-bold text-sm truncate">{a.name} {isMe && <span className="text-white/40 font-normal">· {t("you", "tú")}</span>}</div>
                    <div className="text-white/45 text-[11px] truncate">{a.email}</div>
                  </div>
                  <Chip color={r.c}>{(a.role || "manager").toUpperCase()}</Chip>
                </div>
                {resetFor === a.id ? (
                  <form onSubmit={doReset} className="flex gap-2 mt-3 pl-12 fade-view">
                    <input type="password" autoFocus autoComplete="new-password" value={newPass} onChange={(e) => setNewPass(e.target.value)} placeholder={t("New password (min 8)", "Nueva contraseña (mín 8)")} className="flex-1 bg-ink border border-white/12 rounded-xl px-3 py-2 text-sm text-white focus:outline-none focus:border-coral placeholder:text-white/35" />
                    <button className="px-4 py-2 rounded-full bg-coral text-white text-[10px] font-bold uppercase tracking-wider">{t("Save", "Guardar")}</button>
                    <button type="button" onClick={() => { setResetFor(null); setNewPass(""); }} className="px-3 py-2 rounded-full border border-white/15 text-white/60 text-[10px] font-bold uppercase tracking-wider">{t("Cancel", "Cancelar")}</button>
                  </form>
                ) : (
                  <div className="flex flex-wrap gap-1.5 mt-2.5 pl-12">
                    <button onClick={() => { setResetFor(a.id); setErr(""); }} className="px-3 py-1.5 rounded-full border border-white/12 text-white/65 text-[10px] font-bold uppercase tracking-wider hover:text-white hover:bg-white/5">{t("Reset password", "Restablecer contraseña")}</button>
                    {!isMe && !lastMaster && (a.active === false
                      ? <button onClick={() => window.PPDB.accounts.update(a.id, { active: true })} className="px-3 py-1.5 rounded-full border border-white/12 text-white/45 text-[10px] font-bold uppercase tracking-wider hover:text-green-400 hover:border-green-400/40">{t("Reactivate", "Reactivar")}</button>
                      : <button onClick={() => window.PPDB.accounts.update(a.id, { active: false })} className="px-3 py-1.5 rounded-full border border-white/12 text-white/45 text-[10px] font-bold uppercase tracking-wider hover:text-coral hover:border-coral/40">{t("Deactivate", "Desactivar")}</button>)}
                    {!isMe && !lastMaster && <button onClick={() => { if (confirm(t("Delete this account?", "¿Borrar esta cuenta?"))) window.PPDB.accounts.remove(a.id); }} className="px-3 py-1.5 rounded-full border border-white/12 text-white/45 text-[10px] font-bold uppercase tracking-wider hover:text-coral hover:border-coral/40 ml-auto"><Icon name="trash-2" className="w-3 h-3" /></button>}
                    {lastMaster && <span className="text-white/30 text-[10px] self-center">{t("Last master account — protected", "Última cuenta master — protegida")}</span>}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TeamModule, useStaffAccounts });