// BEGIN CHANGE: lista de Guilds + criar guild (paridade guilds.php)
"use client";

import { useEffect, useState, FormEvent } 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 { PlayerName } from "@/components/PlayerName";
import { apiUrl, guildLogoUrl, type Look } from "@/lib/api";

type Row = {
  id: number;
  name: string;
  owner: string;
  ownerLook: Look | null;
  members: number;
  description: string;
  motd: string;
  logo: string;
  castle: boolean;
  favela: boolean;
};

type Eligible = { name: string; level: number };

export default function GuildsPage() {
  const { t } = useI18n();
  const { ready, token, account, setSession } = useAuth();
  const [rows, setRows] = useState<Row[]>([]);
  const [status, setStatus] = useState<"loading" | "ok" | "error">("loading");
  const [eligible, setEligible] = useState<Eligible[]>([]);
  const [needLevel, setNeedLevel] = useState(150);
  const [leader, setLeader] = useState("");
  const [guildName, setGuildName] = useState("");
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState("");
  const [msg, setMsg] = useState("");
  const isAdmin = !!(account && account.isAdmin);
  function loadList() {
    setStatus("loading");
    fetch(apiUrl("guilds.php"))
      .then((r) => {
        if (!r.ok) throw new Error("http " + r.status);
        return r.json();
      })
      .then((json) => {
        setRows(json.data ?? []);
        setStatus("ok");
      })
      .catch(() => setStatus("error"));
  }

  function loadEligible() {
    if (!token) {
      setEligible([]);
      return;
    }
    fetch(apiUrl("guild-create.php"), {
      headers: { Authorization: `Bearer ${token}` },
    })
      .then((r) => (r.ok ? r.json() : null))
      .then((json) => {
        if (!json) return;
        setNeedLevel(json.needLevel ?? 150);
        setEligible(json.eligible ?? []);
        if ((json.eligible ?? []).length && !leader) {
          setLeader(json.eligible[0].name);
        }
      })
      .catch(() => undefined);
  }

  useEffect(() => {
    loadList();
  }, []);

  useEffect(() => {
    if (!ready || !token) return;
    loadEligible();
    fetch(apiUrl("me.php"), { headers: { Authorization: `Bearer ${token}` } })
      .then((r) => (r.ok ? r.json() : null))
      .then((json) => {
        if (!json?.account) return;
        setSession({ token, account: json.account, characters: json.characters ?? [] });
      })
      .catch(() => undefined);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [ready, token]);

  async function onCreate(e: FormEvent) {
    e.preventDefault();
    if (!token || !leader || !guildName.trim()) return;
    setBusy(true);
    setErr("");
    setMsg("");
    try {
      const r = await fetch(apiUrl("guild-create.php"), {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        },
        body: JSON.stringify({ guild: guildName.trim(), name: leader }),
      });
      const j = await r.json().catch(() => ({}));
      if (!r.ok || !j.ok) {
        setErr(t.guilds.actionFailed);
        return;
      }
      setMsg(t.guilds.saved);
      setGuildName("");
      window.location.href = `/guild/?id=${j.id}`;
    } catch {
      setErr(t.guilds.actionFailed);
    } finally {
      setBusy(false);
    }
  }

  async function adminAction(action: string, id?: number) {
    if (!token) return;
    setBusy(true);
    setErr("");
    setMsg("");
    try {
      const body: Record<string, unknown> = { action };
      if (id) body.id = id;
      const r = await fetch(apiUrl("guild-admin.php"), {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        },
        body: JSON.stringify(body),
      });
      const j = await r.json().catch(() => ({}));
      if (!r.ok || !j.ok) {
        setErr(t.guilds.actionFailed);
        return;
      }
      if (action === "cleanup_players" || action === "cleanup_guilds") {
        const extra =
          action === "cleanup_players"
            ? ` players=${(j.changedPlayers || []).length} ranks=${(j.deletedRanks || []).length}`
            : ` guilds=${(j.deletedGuilds || []).length}`;
        setMsg(t.guilds.cleanupDone + extra);
      } else {
        setMsg(t.guilds.saved);
      }
      loadList();
      loadEligible();
    } catch {
      setErr(t.guilds.actionFailed);
    } finally {
      setBusy(false);
    }
  }

  return (
    <div className="flex min-h-screen flex-col">
      <Navbar />
      <main className="mx-auto w-full max-w-5xl flex-1 px-6 py-14">
        <h1 className="text-3xl font-semibold tracking-tight">{t.guilds.title}</h1>
        <p className="mt-2 text-muted">{t.guilds.subtitle}</p>

        {token ? (
          <div className="mt-6 rounded-xl border border-border bg-panel p-6">
            <h2 className="text-base font-semibold">{t.guilds.createGuild}</h2>
            <p className="mt-1 text-xs text-muted">
              {t.guilds.createGuildHint} ({t.guilds.needLevel}: {needLevel})
            </p>
            {eligible.length === 0 ? (
              <p className="mt-3 text-sm text-muted">{t.guilds.noEligible}</p>
            ) : (
              <form onSubmit={onCreate} className="mt-4 flex flex-wrap items-end gap-3">
                <div>
                  <label className="mb-1 block text-xs text-muted">{t.guilds.leaderChar}</label>
                  <select
                    value={leader}
                    onChange={(e) => setLeader(e.target.value)}
                    className="rounded border border-border bg-background px-2 py-1.5 text-sm"
                  >
                    {eligible.map((c) => (
                      <option key={c.name} value={c.name}>
                        {c.name} (Lv {c.level})
                      </option>
                    ))}
                  </select>
                </div>
                <div className="min-w-[12rem] flex-1">
                  <label className="mb-1 block text-xs text-muted">{t.guilds.guildName}</label>
                  <input
                    value={guildName}
                    onChange={(e) => setGuildName(e.target.value)}
                    maxLength={50}
                    className="w-full rounded border border-border bg-background px-2 py-1.5 text-sm outline-none focus:border-brand/60"
                  />
                </div>
                <button
                  type="submit"
                  disabled={busy || !guildName.trim()}
                  className="rounded-lg bg-brand px-4 py-2 text-sm font-medium text-background disabled:opacity-50"
                >
                  {t.guilds.createGuild}
                </button>
              </form>
            )}
            {(msg || err) && (
              <p className={`mt-3 text-sm ${err ? "text-red-400" : "text-brand"}`}>{err || msg}</p>
            )}
          </div>
        ) : (
          <p className="mt-4 text-sm text-muted">
            <Link href="/login" className="text-brand hover:underline">
              {t.login}
            </Link>{" "}
            - {t.guilds.createGuild}
          </p>
        )}

        <div className="mt-8 overflow-hidden rounded-xl border border-border bg-panel">
          {status === "loading" && (
            <div className="p-8 text-center text-muted">{t.common.loading}</div>
          )}
          {status === "error" && (
            <div className="p-8 text-center text-muted">{t.common.error}</div>
          )}
          {status === "ok" && rows.length === 0 && (
            <div className="p-8 text-center text-muted">{t.common.empty}</div>
          )}
          {status === "ok" && rows.length > 0 && (
            <table className="w-full text-sm">
              <thead>
                <tr className="border-b border-border text-left text-muted">
                  <th className="w-20 px-4 py-3 font-medium">{t.guilds.colLogo}</th>
                  <th className="px-4 py-3 font-medium">{t.guilds.colDescription}</th>
                  <th className="px-4 py-3 font-medium">{t.guilds.colOwner}</th>
                  <th className="px-4 py-3 text-right font-medium">{t.guilds.colMembers}</th>
                  <th className="px-4 py-3 font-medium"></th>
                </tr>
              </thead>
              <tbody>
                {rows.map((row) => (
                  <tr
                    key={row.id}
                    className="border-b border-border/50 last:border-0 hover:bg-background/40"
                  >
                    <td className="px-4 py-3">
                      {/* eslint-disable-next-line @next/next/no-img-element */}
                      <img
                        src={guildLogoUrl(row.logo)}
                        alt={row.name}
                        width={64}
                        height={64}
                        className="h-16 w-16 rounded object-contain"
                        onError={(e) => {
                          (e.target as HTMLImageElement).src = guildLogoUrl(
                            "default_main_logo.gif",
                          );
                        }}
                      />
                    </td>
                    <td className="px-4 py-3 align-top">
                      <div className="flex flex-wrap items-center gap-2">
                        <Link
                          href={`/guild/?id=${row.id}`}
                          className="font-semibold hover:text-brand"
                        >
                          {row.name}
                        </Link>
                        {row.castle && (
                          <span className="rounded bg-brand/15 px-1.5 py-0.5 text-xs text-brand">
                            {t.guilds.castle}
                          </span>
                        )}
                        {row.favela && (
                          <span className="rounded bg-brand/15 px-1.5 py-0.5 text-xs text-brand">
                            {t.guilds.favela}
                          </span>
                        )}
                      </div>
                      {row.description && (
                        <p className="mt-1 whitespace-pre-line text-muted">
                          {row.description}
                        </p>
                      )}
                      {row.motd && (
                        <p className="mt-1 text-xs text-muted/80">
                          {t.guilds.colMotd}: {row.motd}
                        </p>
                      )}
                      {isAdmin && (
                        <button
                          type="button"
                          disabled={busy}
                          className="mt-2 text-xs text-red-400 hover:underline disabled:opacity-40"
                          onClick={() => {
                            if (!window.confirm(t.guilds.adminDeleteConfirm)) return;
                            adminAction("deletebyadmin", row.id);
                          }}
                        >
                          {t.guilds.adminDelete}
                        </button>
                      )}
                    </td>
                    <td className="px-4 py-2 align-top">
                      {row.owner !== "-" ? (
                        <PlayerName name={row.owner} look={row.ownerLook} size="inline" />
                      ) : (
                        <span className="text-muted">-</span>
                      )}
                    </td>
                    <td className="px-4 py-3 text-right align-top">{row.members}</td>
                    <td className="px-4 py-3 align-top">
                      <Link
                        href={`/guild/?id=${row.id}`}
                        className="rounded-lg border border-border px-3 py-1.5 text-xs transition-colors hover:border-brand/50"
                      >
                        {t.guilds.view}
                      </Link>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>

        {token && (
          <div className="mt-8 rounded-xl border border-border bg-panel p-6 text-sm">
            <p className="text-muted">
              {t.guilds.cleanupPlayersHint}
              <br />
              {t.guilds.cleanupGuildsHint}
            </p>
            <div className="mt-3 flex flex-wrap gap-3">
              <button
                type="button"
                disabled={busy}
                className="rounded border border-border px-3 py-1.5 text-xs hover:border-brand/60 disabled:opacity-40"
                onClick={() => adminAction("cleanup_players")}
              >
                {t.guilds.cleanupPlayers}
              </button>
              <button
                type="button"
                disabled={busy}
                className="rounded border border-border px-3 py-1.5 text-xs hover:border-brand/60 disabled:opacity-40"
                onClick={() => adminAction("cleanup_guilds")}
              >
                {t.guilds.cleanupGuilds}
              </button>
            </div>
            {(msg || err) && (
              <p className={`mt-3 text-sm ${err ? "text-red-400" : "text-brand"}`}>{err || msg}</p>
            )}
          </div>
        )}
      </main>
      <Footer />
    </div>
  );
}
// END CHANGE