// BEGIN CHANGE: moderacao (bans, monster names, helpdesk link, mass email)
"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { apiUrl } from "@/lib/api";
import { canCritical, needsAdminPassword } from "./acl";
import { CollapsiblePanel } from "@/components/CollapsiblePanel";
import { AdminConfirmModal } from "./AdminConfirmModal";

export function AdminModeration({
  token,
  access,
  postAction,
  labels,
}: {
  token: string;
  access: number;
  postAction: (body: Record<string, unknown>) => Promise<void>;
  labels: {
    loading: string;
    failed: string;
    refresh: string;
    bans: string;
    unban: string;
    monsterNames: string;
    deleteAll: string;
    banCommands: string;
    massEmail: string;
    subject: string;
    body: string;
    send: string;
    openSupport: string;
    noPermission: string;
    confirmTitle: string;
    confirmHint: string;
    confirmBtn: string;
    cancel: string;
    adminPassword: string;
  };
}) {
  // BEGIN CHANGE: item 7 - tabela de bans agora vive so no Dashboard (removida daqui)
  const [monsters, setMonsters] = useState<{ id: number; name: string; level: number; online: boolean }[]>([]);
  // BEGIN CHANGE: selecao de quais players com nome de monstro excluir
  const [monsterSel, setMonsterSel] = useState<Record<number, boolean>>({});
  // END CHANGE
  const [banHelp, setBanHelp] = useState<Record<string, unknown> | null>(null);
  const [mailSubject, setMailSubject] = useState("");
  const [mailBody, setMailBody] = useState("");
  const [err, setErr] = useState("");
  const [busy, setBusy] = useState(false);
  const [pending, setPending] = useState<Record<string, unknown> | null>(null);

  async function load() {
    setBusy(true);
    setErr("");
    try {
      const headers = { Authorization: `Bearer ${token}` };
      const [m, h] = await Promise.all([
        fetch(apiUrl("admin-panel.php?tool=monster_names"), { headers }),
        fetch(apiUrl("admin-panel.php?tool=ban_commands"), { headers }),
      ]);
      const mj = await m.json().catch(() => ({}));
      const hj = await h.json().catch(() => ({}));
      if (!m.ok || !h.ok) throw new Error("fail");
      setMonsters(mj.players || []);
      setBanHelp(hj.data || null);
    } catch {
      setErr(labels.failed);
    } finally {
      setBusy(false);
    }
  }
  // END CHANGE

  useEffect(() => {
    load();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [token]);

  async function run(body: Record<string, unknown>) {
    const action = String(body.action || "");
    if (needsAdminPassword(action)) {
      setPending(body);
      return;
    }
    await postAction(body);
    await load();
  }

  return (
    <div className="space-y-6">
      <div className="flex flex-wrap items-center justify-between gap-2">
        <h2 className="text-xl font-semibold">Moderacao</h2>
        <div className="flex gap-2">
          <Link href="/support/" className="rounded-md border border-border px-3 py-1.5 text-sm hover:border-brand">
            {labels.openSupport}
          </Link>
          <Link href="/namelock/" className="rounded-md border border-border px-3 py-1.5 text-sm hover:border-brand">
            Namelock
          </Link>
          <button
            type="button"
            disabled={busy}
            onClick={load}
            className="rounded-md border border-border px-3 py-1.5 text-sm disabled:opacity-50"
          >
            {labels.refresh}
          </button>
        </div>
      </div>
      {err && <p className="text-sm text-red-400">{err}</p>}

      {/* BEGIN CHANGE: item 7 - a lista de bans (com unban) agora fica no Dashboard */}
      <p className="rounded-lg border border-border/60 bg-panel/60 px-3 py-2 text-xs text-muted">
        A lista de bans ativos e o unban foram unificados no Dashboard.
      </p>
      {/* END CHANGE */}

      {/* BEGIN CHANGE: 2026-08-03 - CollapsiblePanel moderacao */}
      <CollapsiblePanel
        id="admin-mod-ban-cmds"
        title={labels.banCommands}
        titleClassName="font-medium"
        defaultOpen={false}
      >
        {banHelp && (
          <div className="mt-3 space-y-2 text-sm text-muted">
            <p>
              <span className="font-medium text-foreground">Ban:</span>{" "}
              {(banHelp as { ban?: { command?: string; example?: string } }).ban?.command}
            </p>
            <p>Ex.: {(banHelp as { ban?: { example?: string } }).ban?.example}</p>
            <p>
              <span className="font-medium text-foreground">Unban:</span>{" "}
              {(banHelp as { unban?: { command?: string } }).unban?.command}
            </p>
          </div>
        )}
      </CollapsiblePanel>

      <CollapsiblePanel
        id="admin-mod-monsters"
        title={`${labels.monsterNames} (${monsters.length})`}
        titleClassName="font-medium"
        defaultOpen={true}
      >
        <div className="flex flex-wrap items-center justify-between gap-2">
          <span />
          {/* BEGIN CHANGE: excluir selecionados ou todos */}
          {canCritical(access) && monsters.length > 0 && (
            <div className="flex flex-wrap gap-2">
              <button
                type="button"
                className="rounded border border-border px-2 py-1 text-xs hover:border-brand"
                onClick={() => {
                  const all: Record<number, boolean> = {};
                  const anyUnset = monsters.some((m) => !monsterSel[m.id]);
                  if (anyUnset) monsters.forEach((m) => (all[m.id] = true));
                  setMonsterSel(all);
                }}
              >
                {monsters.some((m) => !monsterSel[m.id]) ? "Selecionar todos" : "Limpar selecao"}
              </button>
              <button
                type="button"
                disabled={Object.values(monsterSel).filter(Boolean).length === 0}
                className="rounded border border-rose-500/50 px-3 py-1.5 text-sm text-rose-300 disabled:opacity-40"
                onClick={() =>
                  run({
                    action: "delete_monster_name_players",
                    confirm: "DELETE",
                    playerIds: Object.keys(monsterSel).filter((k) => monsterSel[Number(k)]).map(Number),
                  })
                }
              >
                Excluir selecionados ({Object.values(monsterSel).filter(Boolean).length})
              </button>
              <button
                type="button"
                className="rounded border border-rose-500/50 px-3 py-1.5 text-sm text-rose-300"
                onClick={() =>
                  run({ action: "delete_monster_name_players", confirm: "DELETE" })
                }
              >
                {labels.deleteAll}
              </button>
            </div>
          )}
          {/* END CHANGE */}
        </div>
        {/* BEGIN CHANGE: lista com checkbox por player */}
        <ul className="mt-3 max-h-56 space-y-1 overflow-auto text-sm">
          {monsters.map((m) => (
            <li key={m.id} className="flex items-center gap-2">
              <input
                type="checkbox"
                checked={!!monsterSel[m.id]}
                disabled={m.online}
                onChange={(e) =>
                  setMonsterSel((prev) => ({ ...prev, [m.id]: e.target.checked }))
                }
              />
              <span className={m.online ? "text-amber-300" : "text-muted"}>
                {m.name} (L{m.level}){m.online ? " ONLINE (nao pode excluir)" : ""}
              </span>
            </li>
          ))}
          {monsters.length === 0 && (
            <li className="text-muted">Nenhum player com nome de monstro.</li>
          )}
        </ul>
        {/* END CHANGE */}
      </CollapsiblePanel>

      {canCritical(access) && (
        <CollapsiblePanel
          id="admin-mod-mass-email"
          title={labels.massEmail}
          titleClassName="font-medium"
          defaultOpen={false}
        >
          <div className="mt-3 space-y-2">
            <input
              className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm"
              placeholder={labels.subject}
              value={mailSubject}
              onChange={(e) => setMailSubject(e.target.value)}
            />
            <textarea
              className="min-h-[120px] w-full rounded-md border border-border bg-background px-3 py-2 text-sm"
              placeholder={labels.body}
              value={mailBody}
              onChange={(e) => setMailBody(e.target.value)}
            />
            <button
              type="button"
              className="rounded-md bg-brand px-4 py-2 text-sm text-background"
              onClick={() =>
                run({ action: "mass_email", subject: mailSubject, content: mailBody })
              }
            >
              {labels.send}
            </button>
          </div>
        </CollapsiblePanel>
      )}

      {/* END CHANGE */}

      <AdminConfirmModal
        open={!!pending}
        title={labels.confirmTitle}
        hint={labels.confirmHint}
        requirePassword={needsAdminPassword(String(pending?.action || ""))}
        requireDeleteWord={String(pending?.action || "").startsWith("delete_")}
        confirmLabel={labels.confirmBtn}
        cancelLabel={labels.cancel}
        passwordLabel={labels.adminPassword}
        onCancel={() => setPending(null)}
        onConfirm={async ({ adminPassword, confirm }) => {
          if (!pending) return;
          const body = { ...pending, adminPassword, confirm: confirm || pending.confirm };
          setPending(null);
          await postAction(body);
          await load();
        }}
      />
    </div>
  );
}
// END CHANGE