// BEGIN CHANGE: pagina admin namelock (paridade namelocks.php)
"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { useI18n } from "@/i18n/LanguageProvider";
import { useAuth } from "@/auth/AuthProvider";
import { Navbar } from "@/components/Navbar";
import { Footer } from "@/components/Footer";
import { apiUrl } from "@/lib/api";

type Row = { name: string; nameNew: string; playerId: number };

export default function NamelockPage() {
  const { t } = useI18n();
  const { ready, token, account } = useAuth();
  const [rows, setRows] = useState<Row[]>([]);
  const [status, setStatus] = useState<"loading" | "ok" | "error" | "denied">("loading");
  const [busy, setBusy] = useState(false);
  const [msg, setMsg] = useState("");

  function load() {
    if (!token) return;
    setStatus("loading");
    fetch(apiUrl("namelock.php"), { headers: { Authorization: `Bearer ${token}` } })
      .then((r) => {
        if (r.status === 403) {
          setStatus("denied");
          return null;
        }
        if (!r.ok) throw new Error("http");
        return r.json();
      })
      .then((json) => {
        if (!json) return;
        setRows(json.data ?? []);
        setStatus("ok");
      })
      .catch(() => setStatus("error"));
  }

  useEffect(() => {
    if (!ready) return;
    if (!token) {
      setStatus("denied");
      return;
    }
    load();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [ready, token]);

  async function act(action: "accept" | "reject", row: Row) {
    if (!token) return;
    setBusy(true);
    setMsg("");
    try {
      const r = await fetch(apiUrl("namelock.php"), {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        },
        body: JSON.stringify({ action, name: row.name, nameNew: row.nameNew }),
      });
      if (!r.ok) {
        setMsg(t.auth.accountFailed);
        return;
      }
      setMsg(t.auth.accountSaved);
      load();
    } catch {
      setMsg(t.auth.accountFailed);
    } finally {
      setBusy(false);
    }
  }

  return (
    <div className="flex min-h-screen flex-col">
      <Navbar />
      <main className="mx-auto w-full max-w-3xl flex-1 px-6 py-14">
        <Link href="/account" className="text-sm text-muted hover:text-brand">
          &larr; {t.auth.myAccount}
        </Link>
        <h1 className="mt-4 text-3xl font-semibold tracking-tight">{t.auth.namelockTitle}</h1>
        {account?.name && <p className="mt-1 text-sm text-muted">{account.name}</p>}
        {msg && <p className="mt-4 text-sm text-brand">{msg}</p>}

        {status === "loading" && <p className="mt-8 text-muted">{t.common.loading}</p>}
        {status === "error" && <p className="mt-8 text-muted">{t.common.error}</p>}
        {status === "denied" && (
          <p className="mt-8 text-muted">
            <Link href="/login/" className="text-brand hover:underline">
              {t.nav.items.login}
            </Link>
            {" / "}
            {t.auth.accountFailed}
          </p>
        )}
        {status === "ok" && rows.length === 0 && (
          <p className="mt-8 text-muted">{t.common.empty}</p>
        )}
        {status === "ok" && rows.length > 0 && (
          <ul className="mt-8 divide-y divide-border/50 rounded-xl border border-border bg-panel">
            {rows.map((row) => (
              <li key={row.playerId + row.nameNew} className="flex flex-wrap items-center justify-between gap-3 px-4 py-3 text-sm">
                <div>
                  <span className="font-medium">{row.name}</span>
                  <span className="mx-2 text-muted">-&gt;</span>
                  <span className="text-brand">{row.nameNew}</span>
                </div>
                <div className="flex gap-2">
                  <button
                    type="button"
                    disabled={busy}
                    className="rounded border border-emerald-500/40 px-3 py-1 text-xs text-emerald-400"
                    onClick={() => act("accept", row)}
                  >
                    Accept
                  </button>
                  <button
                    type="button"
                    disabled={busy}
                    className="rounded border border-red-500/40 px-3 py-1 text-xs text-red-400"
                    onClick={() => act("reject", row)}
                  >
                    Reject
                  </button>
                </div>
              </li>
            ))}
          </ul>
        )}
      </main>
      <Footer />
    </div>
  );
}
// END CHANGE