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

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

export type AdminInvite = {
  id: string;
  created_at: string;
  mapName: string;
  ownerName: string;
};
export function AdminInvites({ onChange }: { onChange: () => void }) {
  const { t } = useI18n();
  const [invites, setInvites] = useState<AdminInvite[]>([]);
  const [error, setError] = useState("");
  const [busy, setBusy] = useState(false);
  const load = useCallback(async () => {
    try {
      setInvites((await api<{ invites: AdminInvite[] }>("admin-invites")).invites);
      setError("");
    } catch (e) {
      setError((e as Error).message);
    }
  }, []);
  useEffect(() => {
    load();
    const timer = setInterval(load, 10000);
    return () => clearInterval(timer);
  }, [load]);
  async function respond(id: string, decision: "accept" | "decline") {
    setBusy(true);
    setError("");
    try {
      await api(`admin-invites/${id}`, { decision });
      await load();
      onChange();
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setBusy(false);
    }
  }
  if (!invites.length && !error) return null;
  return (
    <section className="token-box">
      <span className="eyebrow">{t("SHARED WITH YOU")}</span>
      <h2>{t("Map admin invites")}</h2>
      {invites.map((invite) => (
        <div className="draft-row" key={invite.id}>
          <span>
            {t("{owner} invited you to manage {map}.", {
              owner: invite.ownerName,
              map: invite.mapName,
            })}
          </span>
          <div className="inline-actions">
            <button
              className="button primary"
              disabled={busy}
              onClick={() => respond(invite.id, "accept")}
            >
              {t("Accept")}
            </button>
            <button
              className="button"
              disabled={busy}
              onClick={() => respond(invite.id, "decline")}
            >
              {t("Decline")}
            </button>
          </div>
        </div>
      ))}
      {error && (
        <p role="alert" className="error-message">
          {t(error)}
        </p>
      )}
    </section>
  );
}