// BEGIN CHANGE: pagina /bans - lista publica de bans ativos
"use client";

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

type BanRow = {
  id: number;
  type: number;
  typeLabel: string;
  reason: string;
  comment: string;
  added: number;
  expires: number;
  player: { name: string; level: number; look: Look };
  bannedBy: { name: string; look: Look } | null;
};

function fmtTs(epoch: number) {
  if (!epoch) return "-";
  return new Date(epoch * 1000).toLocaleString();
}

export default function BansPage() {
  const { t } = useI18n();
  const tr = t.bansPage;
  const [status, setStatus] = useState<"loading" | "ok" | "error">("loading");
  const [rows, setRows] = useState<BanRow[]>([]);
  const [count, setCount] = useState(0);

  useEffect(() => {
    let cancelled = false;
    (async () => {
      try {
        const r = await fetch(apiUrl("bans.php?limit=100"));
        if (!r.ok) throw new Error("fail");
        const j = (await r.json()) as { data?: BanRow[]; count?: number };
        if (cancelled) return;
        setRows(Array.isArray(j.data) ? j.data : []);
        setCount(typeof j.count === "number" ? j.count : j.data?.length || 0);
        setStatus("ok");
      } catch {
        if (!cancelled) setStatus("error");
      }
    })();
    return () => {
      cancelled = true;
    };
  }, []);

  return (
    <div className="flex min-h-screen flex-col">
      <Navbar />
      <main className="mx-auto w-full max-w-5xl flex-1 px-4 py-8">
        <div className="mb-6">
          <h1 className="text-2xl font-semibold tracking-tight">{tr.title}</h1>
          <p className="mt-2 text-sm text-muted">{tr.subtitle}</p>
          <p className="mt-3 text-sm">
            <Link href="/rules" className="text-brand hover:underline">
              {tr.linkRules}
            </Link>
            {" - "}
            <Link href="/support" className="text-brand hover:underline">
              {tr.linkSupport}
            </Link>
          </p>
        </div>

        {status === "loading" && (
          <p className="text-sm text-muted">{t.common.loading}</p>
        )}
        {status === "error" && (
          <p className="text-sm text-red-600">{tr.loadError}</p>
        )}

        {status === "ok" && rows.length === 0 && (
          <p className="rounded-xl border border-border bg-card/40 p-5 text-sm text-muted">
            {tr.empty}
          </p>
        )}

        {status === "ok" && rows.length > 0 && (
          <div className="space-y-4">
            <p className="text-sm text-muted">
              {tr.countLabel.replace("{n}", String(count))}
            </p>
            <ul className="divide-y divide-border overflow-hidden rounded-xl border border-border bg-card/40">
              {rows.map((b) => (
                <li key={b.id} className="flex items-start gap-3 px-4 py-4 sm:px-5">
                  <Outfit look={b.player.look} size="inline" alt={b.player.name} />
                  <div className="min-w-0 flex-1 text-sm">
                    <div className="flex flex-wrap items-baseline gap-x-2 gap-y-1">
                      <Link
                        href={`/character/?name=${encodeURIComponent(b.player.name)}`}
                        className="font-medium text-brand hover:underline"
                      >
                        {b.player.name}
                      </Link>
                      <span className="text-xs text-muted">
                        lvl {b.player.level}
                      </span>
                      <span className="rounded border border-border/70 px-1.5 py-0.5 text-xs text-muted">
                        {b.typeLabel}
                      </span>
                    </div>
                    <p className="mt-1 text-muted">
                      {b.reason}
                      {b.comment ? ` - ${b.comment}` : ""}
                    </p>
                    <div className="mt-2 flex flex-wrap gap-x-3 gap-y-1 text-xs text-muted">
                      <span>
                        {tr.added}: {fmtTs(b.added)}
                      </span>
                      <span>
                        {b.expires === -1
                          ? tr.permanent
                          : b.expires > 0
                            ? `${tr.expires}: ${fmtTs(b.expires)}`
                            : "-"}
                      </span>
                      {b.bannedBy && (
                        <span className="inline-flex items-center gap-1.5">
                          {tr.by}:{" "}
                          <Outfit
                            look={b.bannedBy.look}
                            size={28}
                            alt={b.bannedBy.name}
                          />
                          <Link
                            href={`/character/?name=${encodeURIComponent(b.bannedBy.name)}`}
                            className="text-brand hover:underline"
                          >
                            {b.bannedBy.name}
                          </Link>
                        </span>
                      )}
                    </div>
                  </div>
                </li>
              ))}
            </ul>
          </div>
        )}
      </main>
      <Footer />
    </div>
  );
}
// END CHANGE