MineGeo/components/MapAdmins.tsx

"use client";
import { useI18n } from "@/components/I18nProvider";

import { useCallback, useEffect, useState } from "react";
import { api } from "./StartGame";

export type MapAdmin = {
  id: string;
  user_id: string;
  state: string;
  created_at: string;
  name: string;
  username: string | null;
};
export function MapAdmins({ id, access }: { id: string; access: string }) {
  const { t } = useI18n();
  const [admins, setAdmins] = useState<MapAdmin[]>([]);
  const [caller, setCaller] = useState("");
  const [name, setName] = useState("");
  const [error, setError] = useState("");
  const [message, setMessage] = useState("");
  const [busy, setBusy] = useState(false);
  const load = useCallback(async () => {
    try {
      const result = await api<{ admins: MapAdmin[]; caller: string }>(
        `datasets/${id}/admins`,
      );
      setAdmins(result.admins);
      setCaller(result.caller);
      setError("");
    } catch (e) {
      setError((e as Error).message);
    }
  }, [id]);
  useEffect(() => {
    load();
    const timer = setInterval(load, 10000);
    return () => clearInterval(timer);
  }, [load]);
  async function invite(event: React.FormEvent) {
    event.preventDefault();
    setBusy(true);
    setError("");
    setMessage("");
    try {
      await api(`datasets/${id}/admins`, { name });
      setName("");
      setMessage(
        "Invite sent. Your friend can accept it from their dashboard.",
      );
      await load();
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setBusy(false);
    }
  }
  async function remove(userId: string) {
    setBusy(true);
    setError("");
    try {
      await api(`datasets/${id}/admins/${userId}`, undefined, "DELETE");
      await load();
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setBusy(false);
    }
  }
  return (
    <section className="tool-card">
      <h2>{t("Map admins")}</h2>
      <p className="muted">
        {t(
          "Invite friends to manage this map with you. They can edit details, choose locations, refresh the map and handle contributions after accepting your invite.",
        )}
      </p>
      {admins.map((a) => (
        <div className="draft-row" key={a.id}>
          <span>
            {a.name}
            {a.username ? <small className="muted"> @{a.username}</small> : null}{" "}
            <small className="muted">
              {a.state === "accepted" ? t("· admin") : t("· invite pending")}
            </small>
          </span>
          {(access === "owner" || a.user_id === caller) && (
            <button
              className="button"
              disabled={busy}
              onClick={() => remove(a.user_id)}
            >
              {a.user_id === caller && access !== "owner"
                ? t("Leave map")
                : a.state === "accepted"
                  ? t("Remove")
                  : t("Cancel invite")}
            </button>
          )}
        </div>
      ))}
      {access === "owner" && (
        <form onSubmit={invite}>
          <label className="field">
            {t("Player name or username")}
            <input
              value={name}
              onChange={(e) => setName(e.target.value)}
              required
              minLength={1}
              maxLength={80}
            />
          </label>
          <button className="button primary" disabled={busy || !name.trim()}>
            {busy ? t("Sending…") : t("Send invite")}
          </button>
        </form>
      )}
      {error && (
        <p role="alert" className="error-message">
          {t(error)}
        </p>
      )}
      {message && (
        <p role="status" className="success-message">
          {t(message)}
        </p>
      )}
    </section>
  );
}