"use client";
import { useState } from "react";
import { Settings2 } from "lucide-react";
import { useI18n } from "./I18nProvider";
import { useSiteSettings } from "./SiteSettingsProvider";
import { api } from "@/lib/client-api";
import type { SiteSettings } from "@/shared/site-settings";

export function ModeratorSettings() {
  const { t } = useI18n();
  const { settings, updateSettings } = useSiteSettings();
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");
  const [saved, setSaved] = useState(false);
  async function toggle() {
    setBusy(true);
    setError("");
    setSaved(false);
    try {
      const next = await api<SiteSettings>(
        "moderation/settings",
        {
          betaBadgeEnabled: !settings.betaBadgeEnabled,
        },
        "PATCH",
      );
      updateSettings(next);
      setSaved(true);
    } catch (e) {
      setError((e as Error).message);
    } finally {
      setBusy(false);
    }
  }
  return (
    <section
      className="tool-card moderator-settings"
      aria-labelledby="site-settings-heading"
    >
      <div className="settings-heading">
        <Settings2 size={24} aria-hidden="true" />
        <div>
          <h2 id="site-settings-heading">{t("Site settings")}</h2>
          <p>
            {t(
              "Changes apply to every player. Only admins can edit these settings.",
            )}
          </p>
        </div>
      </div>
      <div className="moderator-setting-row">
        <div>
          <h3>{t("Beta badge")}</h3>
          <p className="muted">
            {t("Show BETA next to the MineGeo logo throughout the site.")}
          </p>
          <p className="muted">
            {settings.betaBadgeEnabled
              ? t("Visible to all players")
              : t("Hidden for all players")}
          </p>
        </div>
        <button className="button" disabled={busy} onClick={toggle}>
          {busy
            ? t("Saving…")
            : settings.betaBadgeEnabled
              ? t("Hide beta badge")
              : t("Show beta badge")}
        </button>
      </div>
      {error && (
        <p role="alert" className="error-message">
          {t(error)}
        </p>
      )}
      {saved && (
        <p role="status" className="muted">
          {t("Setting saved. Open pages update within 30 seconds.")}
        </p>
      )}
    </section>
  );
}