// BEGIN CHANGE: dashboard do painel admin
"use client";

import { useEffect, useMemo, useState } from "react";
import Link from "next/link";
import { apiUrl } from "@/lib/api";
import { CollapsiblePanel } from "@/components/CollapsiblePanel";
import {
  DashboardData,
  DonationRow,
  HouseDetail,
  fmtGold,
  fmtTs,
  rentStatusClass,
  rentStatusLabel,
  type AdminSection,
} from "./types";

export function AdminDashboard({
  token,
  onGo,
  canUnban,
  labels,
}: {
  token: string;
  onGo: (section: AdminSection, opts?: { account?: string; player?: string }) => void;
  // BEGIN CHANGE: item 7 - unban direto no dashboard (so quem tem permissao economia+)
  canUnban?: boolean;
  // END CHANGE
  labels: {
    loading: string;
    failed: string;
    refresh: string;
    online: string;
    accounts: string;
    players: string;
    bans: string;
    shopQueue: string;
    undelivered: string;
    unprocessedDonations: string;
    helpdesk: string;
    recentDonations: string;
    recentBans: string;
    openSupport: string;
    openEconomy: string;
    openModeration: string;
  };
}) {
  const [data, setData] = useState<DashboardData | null>(null);
  const [err, setErr] = useState("");
  const [busy, setBusy] = useState(false);
  // BEGIN CHANGE: 2026-08-03 - filtro da lista de houses
  const [houseFilter, setHouseFilter] = useState<"all" | "rent_risk" | "cleanup">("all");
  const [houseQuery, setHouseQuery] = useState("");
  // END CHANGE

  async function load() {
    setBusy(true);
    setErr("");
    try {
      const r = await fetch(apiUrl("admin-panel.php?tool=dashboard"), {
        headers: { Authorization: `Bearer ${token}` },
      });
      const json = await r.json().catch(() => ({}));
      if (!r.ok) throw new Error(json.error || "fail");
      setData(json.data as DashboardData);
    } catch {
      setErr(labels.failed);
    } finally {
      setBusy(false);
    }
  }

  // BEGIN CHANGE: item 7 - unban a partir da tabela unica de bans
  async function unban(banId: number) {
    setBusy(true);
    setErr("");
    try {
      const r = await fetch(apiUrl("admin-panel.php"), {
        method: "POST",
        headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` },
        body: JSON.stringify({ action: "unban", banId }),
      });
      const json = await r.json().catch(() => ({}));
      if (!r.ok) throw new Error(json.error || "fail");
      await load();
    } catch {
      setErr(labels.failed);
      setBusy(false);
    }
  }
  // END CHANGE

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

  // BEGIN CHANGE: 2026-08-03 - KPI cards clicaveis
  const cards = data
    ? [
        { label: labels.online, value: data.online, go: null as AdminSection | "support" | null },
        { label: labels.accounts, value: data.accounts, go: "accounts" as const },
        { label: labels.players, value: data.players, go: "accounts" as const },
        { label: labels.bans, value: data.activeBans, go: null },
        { label: labels.shopQueue, value: data.shopQueue, go: "economy" as const },
        { label: labels.undelivered, value: data.shopUndelivered, go: "economy" as const },
        {
          label: labels.unprocessedDonations,
          value: data.donationsUnprocessed.total,
          go: "economy" as const,
        },
        { label: labels.helpdesk, value: data.helpdeskWaiting, go: "support" as const },
      ]
    : [];
  // END CHANGE

  function flatDonations(d: DashboardData["recentDonations"]): DonationRow[] {
    return [...(d.mercadopago || []), ...(d.paypal || []), ...(d.pagseguro || [])].slice(0, 12);
  }

  // BEGIN CHANGE: 2026-08-03 - lista filtrada de houses
  const cleanupRisk = data?.houses?.atRiskCleanup || data?.houses?.atRisk || [];
  const rentRisk = data?.houses?.rentAtRisk || [];
  const rentedList = data?.houses?.rentedList || [];
  const filteredHouses = useMemo(() => {
    const q = houseQuery.trim().toLowerCase();
    const cleanupIds =
      houseFilter === "cleanup" ? new Set(cleanupRisk.map((c) => c.houseId)) : null;
    return rentedList.filter((h) => {
      if (houseFilter === "rent_risk") {
        if (!["overdue", "warning", "clear", "due_soon"].includes(h.rentStatus)) return false;
      }
      if (cleanupIds && !cleanupIds.has(h.houseId)) return false;
      if (!q) return true;
      return (
        h.houseName.toLowerCase().includes(q) ||
        (h.ownerName || "").toLowerCase().includes(q) ||
        String(h.town).includes(q)
      );
    });
  }, [rentedList, houseFilter, houseQuery, cleanupRisk]);
  // END CHANGE

  return (
    <div className="space-y-6">
      <div className="flex flex-wrap items-center justify-between gap-2">
        <h2 className="text-xl font-semibold">Dashboard</h2>
        <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>
      {err && <p className="text-sm text-red-400">{err}</p>}
      {!data && !err && <p className="text-sm text-muted">{labels.loading}</p>}
      {data && (
        <>
          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
            {cards.map((c) => {
              const clickable = c.go !== null;
              if (!clickable) {
                return (
                  <div key={c.label} className="rounded-xl border border-border bg-panel px-4 py-3">
                    <p className="text-xs text-muted">{c.label}</p>
                    <p className="mt-1 text-2xl font-semibold tabular-nums">{c.value}</p>
                  </div>
                );
              }
              return (
                <button
                  key={c.label}
                  type="button"
                  className="rounded-xl border border-border bg-panel px-4 py-3 text-left hover:border-brand"
                  onClick={() => {
                    if (c.go === "support") window.location.href = "/support/";
                    else if (c.go) onGo(c.go);
                  }}
                >
                  <p className="text-xs text-muted">{c.label}</p>
                  <p className="mt-1 text-2xl font-semibold tabular-nums">{c.value}</p>
                </button>
              );
            })}
          </div>

          {/* BEGIN CHANGE: 2026-08-03 - Dominion Castle / Favela */}
          {data.dominion && (
            <div className="grid gap-3 sm:grid-cols-2">
              <DominionMini
                label="Castle War"
                guild={data.dominion.castle}
                tone="castle"
              />
              <DominionMini
                label="Favela"
                guild={data.dominion.favela}
                tone="favela"
              />
            </div>
          )}
          {/* END CHANGE */}

          {/* BEGIN CHANGE: documentacao players.salvar (portal + OTX2) */}
          <CollapsiblePanel
            id="admin-dash-salvar"
            title="Campo players.salvar"
            titleClassName="font-medium"
            defaultOpen={false}
          >
            <p className="text-sm text-muted">
              Flag por personagem (coluna MySQL). Editavel em Contas / Players. Nao existe uso em C++ do OTX2 - so Lua + portal.
            </p>
            <div className="mt-3 grid gap-3 md:grid-cols-2 text-sm">
              <div className="rounded-md border border-border/60 p-3">
                <p className="font-medium">Portal (visibilidade)</p>
                <ul className="mt-2 list-disc space-y-1 pl-5 text-muted">
                  <li>
                    <span className="text-foreground">0</span> - visivel em tudo (rankings, home, guilds, casting, last kills, etc.).
                  </li>
                  <li>
                    <span className="text-foreground">&gt; 0 (ex.: 1)</span> - so aparece no Who&apos;s Online e na pagina /character. Fora de highscores, top kills, top guilds, last kills, casting, lottery e listagens de guild.
                  </li>
                  <li>
                    <span className="text-foreground">&gt; 1</span> - oculto de tudo no portal (incluindo online e /character = &quot;nao encontrado&quot;).
                  </li>
                </ul>
              </div>
              <div className="rounded-md border border-border/60 p-3">
                <p className="font-medium">OTX2 in-game</p>
                <ul className="mt-2 list-disc space-y-1 pl-5 text-muted">
                  <li>
                    <span className="text-foreground">Anti-Bot</span> - so roda se salvar &lt; 1. Com salvar &gt;= 1 o player e isento (sem desafio / punicao).
                  </li>
                  <li>
                    <span className="text-foreground">DB Cleaner</span> (startup) - so apaga inativos com salvar &lt; 1. salvar &gt;= 1 protege o char da limpeza por inatividade.
                  </li>
                  <li>
                    Valor em cache no login do Anti-Bot: mudar no DB so vale apos relog.
                  </li>
                  <li>Sem outras restricoes de gameplay (movimento, combate, shop, etc.).</li>
                </ul>
              </div>
            </div>
            <p className="mt-3 text-xs text-muted">
              Uso tipico: 1 = protegido (anti-bot off + fora de ranking, ainda achavel em online/character). 2+ = oculto total no site (bots/staff/test).
            </p>
          </CollapsiblePanel>
          {/* END CHANGE */}

          <div className="flex flex-wrap gap-2 text-sm">
            <button
              type="button"
              className="rounded-md border border-border px-3 py-1.5 hover:border-brand"
              onClick={() => onGo("economy")}
            >
              {labels.openEconomy}
            </button>
            <button
              type="button"
              className="rounded-md border border-border px-3 py-1.5 hover:border-brand"
              onClick={() => onGo("moderation")}
            >
              {labels.openModeration}
            </button>
            <Link href="/support/" className="rounded-md border border-border px-3 py-1.5 hover:border-brand">
              {labels.openSupport}
            </Link>
          </div>
          <CollapsiblePanel
            id="admin-dash-recent-donations"
            title={labels.recentDonations}
            titleClassName="font-medium"
            defaultOpen={false}
          >
            <div className="max-h-56 overflow-auto">
              <table className="w-full text-left text-sm">
                <thead className="text-muted">
                  <tr>
                    <th className="py-1 pr-2">Prov</th>
                    <th className="py-1 pr-2">Acc</th>
                    <th className="py-1 pr-2">Valor</th>
                    <th className="py-1">Status</th>
                  </tr>
                </thead>
                <tbody>
                  {flatDonations(data.recentDonations).map((d) => (
                    <tr key={d.provider + d.id} className="border-t border-border/40">
                      <td className="py-1 pr-2">{d.provider}</td>
                      <td className="py-1 pr-2">
                        <button
                          type="button"
                          className="text-brand hover:underline"
                          onClick={() => onGo("accounts", { account: d.account })}
                        >
                          {d.account}
                        </button>
                      </td>
                      <td className="py-1 pr-2">{d.amount}</td>
                      <td className="py-1">
                        {d.status}
                        {d.processed === false ? " / unprocessed" : ""}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </CollapsiblePanel>

          {/* BEGIN CHANGE: 2026-08-03 - collapsible novos players/contas */}
          <CollapsiblePanel
            id="admin-dash-recent-players"
            title={`Novos players criados (${(data.recentPlayers || []).length})`}
            titleClassName="font-medium"
            defaultOpen={false}
          >
            <div className="max-h-64 overflow-auto">
              <table className="w-full text-left text-sm">
                <thead className="text-muted">
                  <tr>
                    <th className="py-1 pr-2">Player</th>
                    <th className="py-1 pr-2">Lv</th>
                    <th className="py-1 pr-2">Conta</th>
                    <th className="py-1">Criado em</th>
                  </tr>
                </thead>
                <tbody>
                  {(data.recentPlayers || []).map((p) => (
                    <tr key={p.id} className="border-t border-border/40">
                      <td className="py-1 pr-2">
                        <button
                          type="button"
                          className="text-brand hover:underline"
                          onClick={() => onGo("accounts", { player: p.name })}
                        >
                          {p.name}
                        </button>
                      </td>
                      <td className="py-1 pr-2 tabular-nums">{p.level}</td>
                      <td className="py-1 pr-2 text-muted">{p.accountName || "-"}</td>
                      <td className="py-1 whitespace-nowrap">{fmtTs(p.created)}</td>
                    </tr>
                  ))}
                  {(!data.recentPlayers || data.recentPlayers.length === 0) && (
                    <tr>
                      <td colSpan={4} className="py-3 text-center text-muted">
                        Sem registros (ou sem coluna created).
                      </td>
                    </tr>
                  )}
                </tbody>
              </table>
            </div>
          </CollapsiblePanel>

          <CollapsiblePanel
            id="admin-dash-recent-accounts"
            title={`Novas contas criadas (${(data.recentAccounts || []).length})`}
            titleClassName="font-medium"
            defaultOpen={false}
          >
            <div className="max-h-56 overflow-auto">
              <table className="w-full text-left text-sm">
                <thead className="text-muted">
                  <tr>
                    <th className="py-1 pr-2">Conta</th>
                    <th className="py-1 pr-2">E-mail</th>
                    <th className="py-1 pr-2">ACL</th>
                    <th className="py-1">Criada em</th>
                  </tr>
                </thead>
                <tbody>
                  {(data.recentAccounts || []).map((a) => (
                    <tr key={a.id} className="border-t border-border/40">
                      <td className="py-1 pr-2">
                        <button
                          type="button"
                          className="text-brand hover:underline"
                          onClick={() => onGo("accounts", { account: a.name })}
                        >
                          {a.name}
                        </button>
                      </td>
                      <td className="py-1 pr-2 text-muted">{a.email || "-"}</td>
                      <td className="py-1 pr-2 tabular-nums">{a.pageAccess ?? 0}</td>
                      <td className="py-1 whitespace-nowrap">{fmtTs(a.created)}</td>
                    </tr>
                  ))}
                  {(!data.recentAccounts || data.recentAccounts.length === 0) && (
                    <tr>
                      <td colSpan={4} className="py-3 text-center text-muted">
                        Sem registros (ou sem coluna created).
                      </td>
                    </tr>
                  )}
                </tbody>
              </table>
            </div>
          </CollapsiblePanel>
          {/* END CHANGE */}

          {/* BEGIN CHANGE: 2026-08-03 - houses detalhadas + dual risk + collapsible */}
          {data.houses && (
            <CollapsiblePanel
              id="admin-dash-houses"
              title={`Houses (livres ${data.houses.free ?? 0} / alugadas ${data.houses.rented ?? 0})`}
              titleClassName="font-medium"
              defaultOpen={false}
              headerRight={
                <span className="text-xs text-muted">
                  rent {data.houses.rentPeriod || "daily"}
                </span>
              }
            >
              <div className="flex flex-wrap gap-3 text-sm">
                <span className="rounded-md border border-border px-3 py-1">
                  Livres: <strong className="tabular-nums">{data.houses.free ?? 0}</strong>
                </span>
                <span className="rounded-md border border-border px-3 py-1">
                  Alugadas: <strong className="tabular-nums">{data.houses.rented ?? 0}</strong>
                </span>
                {rentRisk.length > 0 && (
                  <span className="rounded-md border border-red-500/40 bg-red-500/10 px-3 py-1 text-red-200">
                    Risco aluguel: <strong>{rentRisk.length}</strong>
                  </span>
                )}
                {cleanupRisk.length > 0 && (
                  <span className="rounded-md border border-amber-500/40 bg-amber-500/10 px-3 py-1 text-amber-200">
                    Risco limpeza: <strong>{cleanupRisk.length}</strong>
                  </span>
                )}
              </div>
              <p className="mt-2 text-xs text-muted">
                Aluguel = paid / warnings / clear do engine. Limpeza = inatividade (houseCleanOld, sem premium). Sao riscos distintos.
              </p>

              <div className="mt-3 flex flex-wrap items-center gap-2">
                {(
                  [
                    ["all", "Todas alugadas"],
                    ["rent_risk", "Risco aluguel"],
                    ["cleanup", "Risco limpeza"],
                  ] as const
                ).map(([id, lab]) => (
                  <button
                    key={id}
                    type="button"
                    className={`rounded border px-2 py-1 text-xs ${
                      houseFilter === id ? "border-brand bg-brand/10" : "border-border text-muted"
                    }`}
                    onClick={() => setHouseFilter(id)}
                  >
                    {lab}
                  </button>
                ))}
                <input
                  className="min-w-[160px] flex-1 rounded border border-border bg-background px-2 py-1 text-xs"
                  placeholder="Filtrar house / dono / town..."
                  value={houseQuery}
                  onChange={(e) => setHouseQuery(e.target.value)}
                />
              </div>

              <div className="mt-3 max-h-80 overflow-auto">
                <table className="w-full min-w-[720px] text-left text-xs sm:text-sm">
                  <thead className="text-muted">
                    <tr>
                      <th className="py-1 pr-2">House</th>
                      <th className="py-1 pr-2">Dono</th>
                      <th className="py-1 pr-2">Town</th>
                      <th className="py-1 pr-2">Rent</th>
                      <th className="py-1 pr-2">Pago ate</th>
                      <th className="py-1 pr-2">Warn</th>
                      <th className="py-1 pr-2">Status</th>
                      <th className="py-1">Preco</th>
                    </tr>
                  </thead>
                  <tbody>
                    {filteredHouses.map((h) => (
                      <HouseRow key={h.houseId} h={h} onGo={onGo} />
                    ))}
                    {filteredHouses.length === 0 && (
                      <tr>
                        <td colSpan={8} className="py-3 text-center text-muted">
                          Nenhuma house neste filtro.
                        </td>
                      </tr>
                    )}
                  </tbody>
                </table>
              </div>

              {cleanupRisk.length > 0 && (
                <div className="mt-4">
                  <h4 className="text-sm font-medium text-amber-200">
                    Limpeza por inatividade ({cleanupRisk.length})
                  </h4>
                  <div className="mt-2 max-h-48 overflow-auto">
                    <table className="w-full text-left text-sm">
                      <thead className="text-muted">
                        <tr>
                          <th className="py-1 pr-2">House</th>
                          <th className="py-1 pr-2">Dono</th>
                          <th className="py-1 pr-2">Last login</th>
                          <th className="py-1 pr-2">Prazo</th>
                          <th className="py-1">Status</th>
                        </tr>
                      </thead>
                      <tbody>
                        {cleanupRisk.map((h) => (
                          <tr key={`c-${h.houseId}`} className="border-t border-border/40">
                            <td className="py-1 pr-2">{h.houseName}</td>
                            <td className="py-1 pr-2">
                              <button
                                type="button"
                                className="text-brand hover:underline"
                                onClick={() => onGo("accounts", { player: h.ownerName })}
                              >
                                {h.ownerName}
                              </button>
                            </td>
                            <td className="py-1 pr-2 whitespace-nowrap">{fmtTs(h.lastLogin)}</td>
                            <td className="py-1 pr-2 whitespace-nowrap">{fmtTs(h.deadline)}</td>
                            <td className="py-1">
                              <span className={h.status === "overdue" ? "text-red-400" : "text-amber-300"}>
                                {h.status === "overdue" ? "vencido" : "aviso"}
                              </span>
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                </div>
              )}
            </CollapsiblePanel>
          )}
          {/* END CHANGE */}

          {/* BEGIN CHANGE: item 7 + 2026-08-03 collapsible bans */}
          <CollapsiblePanel
            id="admin-dash-bans"
            title={`${labels.bans} (${(data.bans || data.recentBans || []).length})`}
            titleClassName="font-medium"
            defaultOpen={false}
            headerRight={
              <button
                type="button"
                className="rounded-md border border-border px-2 py-0.5 text-xs hover:border-brand"
                onClick={(e) => {
                  e.stopPropagation();
                  onGo("moderation");
                }}
              >
                {labels.openModeration}
              </button>
            }
          >
            <div className="max-h-72 overflow-auto">
              <table className="w-full text-left text-sm">
                <thead className="text-muted">
                  <tr>
                    <th className="py-1 pr-2">ID</th>
                    <th className="py-1 pr-2">Player</th>
                    <th className="py-1 pr-2">Type</th>
                    <th className="py-1 pr-2">Reason</th>
                    <th className="py-1 pr-2">Added</th>
                    {canUnban && <th className="py-1">Acao</th>}
                  </tr>
                </thead>
                <tbody>
                  {(data.bans || data.recentBans || []).map((b) => (
                    <tr key={b.id} className="border-t border-border/40">
                      <td className="py-1 pr-2 tabular-nums">{b.id}</td>
                      <td className="py-1 pr-2">{b.playerName || b.value}</td>
                      <td className="py-1 pr-2 tabular-nums">{b.type}</td>
                      <td className="py-1 pr-2 tabular-nums">{b.reason}</td>
                      <td className="py-1 pr-2 whitespace-nowrap">{fmtTs(b.added)}</td>
                      {canUnban && (
                        <td className="py-1">
                          <button
                            type="button"
                            disabled={busy}
                            className="rounded border border-border px-2 py-1 text-xs hover:border-brand disabled:opacity-50"
                            onClick={() => unban(b.id)}
                          >
                            Unban
                          </button>
                        </td>
                      )}
                    </tr>
                  ))}
                  {(data.bans || data.recentBans || []).length === 0 && (
                    <tr>
                      <td colSpan={canUnban ? 6 : 5} className="py-3 text-center text-muted">
                        Nenhum ban ativo.
                      </td>
                    </tr>
                  )}
                </tbody>
              </table>
            </div>
          </CollapsiblePanel>
          {/* END CHANGE */}
        </>
      )}
    </div>
  );
}

// BEGIN CHANGE: 2026-08-03 - helpers UI houses / dominion
function HouseRow({
  h,
  onGo,
}: {
  h: HouseDetail;
  onGo: (section: AdminSection, opts?: { account?: string; player?: string }) => void;
}) {
  return (
    <tr className="border-t border-border/40">
      <td className="py-1 pr-2">
        {h.houseName}
        {h.clear ? <span className="ml-1 text-red-400">(clear)</span> : null}
      </td>
      <td className="py-1 pr-2">
        {h.ownerName ? (
          <button
            type="button"
            className="text-brand hover:underline"
            onClick={() => onGo("accounts", { player: h.ownerName })}
          >
            {h.ownerName}
          </button>
        ) : (
          "-"
        )}
        {h.level ? (
          <span className="ml-1 text-muted tabular-nums">
            L{h.level}
            {h.reset && h.reset > 0 ? ` RR${h.reset}` : ""}
          </span>
        ) : null}
      </td>
      <td className="py-1 pr-2 tabular-nums">{h.town}</td>
      <td className="py-1 pr-2 tabular-nums">{fmtGold(h.rent)}</td>
      <td className="py-1 pr-2 whitespace-nowrap">
        {fmtTs(h.paid)}
        {h.daysLeft !== null && h.daysLeft !== undefined ? (
          <span className="ml-1 text-muted">({h.daysLeft}d)</span>
        ) : null}
      </td>
      <td className="py-1 pr-2 tabular-nums">{h.warnings}</td>
      <td className={`py-1 pr-2 ${rentStatusClass(h.rentStatus)}`}>{rentStatusLabel(h.rentStatus)}</td>
      <td className="py-1 tabular-nums">{fmtGold(h.price)}</td>
    </tr>
  );
}

function DominionMini({
  label,
  guild,
  tone,
}: {
  label: string;
  guild: { id: number; name: string; logo: string } | null;
  tone: "castle" | "favela";
}) {
  const bar = tone === "castle" ? "bg-amber-400" : "bg-lime-400";
  return (
    <div className="relative overflow-hidden rounded-xl border border-border bg-panel px-4 py-3">
      <div className={`absolute left-0 top-0 h-full w-1 ${bar}`} />
      <p className="text-xs text-muted">{label}</p>
      {guild ? (
        <Link
          href={`/guild/?id=${guild.id}`}
          className="mt-1 block font-medium text-brand hover:underline"
        >
          {guild.name}
        </Link>
      ) : (
        <p className="mt-1 text-sm text-muted">-</p>
      )}
    </div>
  );
}
// END CHANGE