// BEGIN CHANGE: Server Info completa (paridade serverinfo.php + otinfo)
"use client";

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

type Stage = { minLevel: number; maxLevel: number | null; multiplier: number };
type Cmd = { cmd: string; desc: string };
type ResetRow = { rr: number; neededLevel: number; damagePercent: number; hpmpPercent: number };
type CleanRow = { maxLevel: number | string; days: number | string; daysReset: number };
type CleanupTodayRow = { name: string; extra: string; refId: number; created: number };
type CleanupRiskPlayer = {
  id: number;
  name: string;
  level: number;
  reset: number;
  lastLogin: number;
  deadline: number;
  status: "overdue" | "warning";
  hasEmail?: boolean;
};
type CleanupRiskHouse = {
  houseId: number;
  houseName: string;
  ownerName: string;
  level: number;
  reset: number;
  lastLogin: number;
  deadline: number;
  status: "overdue" | "warning";
};
type CleanupPayload = {
  warnSeconds: number;
  houseCleanOld: number;
  today: { players: CleanupTodayRow[]; houses: CleanupTodayRow[]; accounts: CleanupTodayRow[] };
  atRiskPlayers: CleanupRiskPlayer[];
  atRiskHouses: CleanupRiskHouse[];
};

type Info = {
  serverName: string;
  protocol: string;
  client: string;
  worldType: string;
  motd: string;
  location: string;
  url: string;
  ip: string;
  loginPort: number;
  gamePort: number;
  statusPort: number;
  ownerName: string;
  mapName: string;
  online: number;
  players: number;
  accounts: number;
  guilds: number;
  housesFree: number;
  housesRented: number;
  banned: number;
  record: { record: number; timestamp: number } | null;
  lastJoined: { name: string } | null;
  bestLevel: { name: string; level: number } | null;
  rates: {
    experienceStages: boolean;
    exp: number;
    skill: number;
    magic: number;
    loot: number;
    spawnMin: number;
    spawnMax: number;
    stages: Stage[];
  };
  skulls: {
    redDaily: number;
    redWeekly: number;
    redMonthly: number;
    blackDaily: number;
    blackWeekly: number;
    blackMonthly: number;
    redLengthDays: number;
    blackLengthDays: number;
    whiteSkullMinutes: number;
    useBlackSkull: boolean;
  };
  general: {
    protectionLevel: number;
    levelToBuyHouse: number;
    levelToCreateGuild: number;
    pzLockedSeconds: number;
    idleKickMinutes: number;
    freePremium: boolean;
    bankSystem: boolean;
    guildHalls: boolean;
    blessings: boolean;
  };
  liveStatus: {
    reachable: boolean;
    uptimeLabel: string | null;
    playersOnline: number;
    playersMax: number | null;
    playersPeak: number | null;
    playersUnique: number | null;
    monsters: number | null;
    npcs: number | null;
    mapName: string | null;
    mapAuthor: string | null;
    mapWidth: number | null;
    mapHeight: number | null;
    distro: string | null;
    version: string | null;
    client: string | null;
    error: string | null;
  };
  commands: { general: Cmd[]; house: Cmd[] };
  resets: ResetRow[];
  dbCleaner: CleanRow[];
  cleanup?: CleanupPayload;
  houseCleanDays?: number;
  banishment?: {
    fragsDaily: number;
    fragsWeekly: number;
    fragsMonthly: number;
    banLengthDays: number;
    notationsToBan: number;
  };
  bless?: {
    command: string;
    autoOnLogin: boolean;
    freeBelowProtectionLevel: boolean;
    paidRequiresPremium: boolean;
    config: {
      lowLevelBase: number;
      lowLevelIncrement: number;
      lowLevelMax: number;
      highLevelBase: number;
      highLevelIncrement: number;
      resetMultiplier: number;
      wealthTaxLow: number;
      wealthTaxHigh: number;
      blessCount: number;
      blessMultiplier: number;
      blessNames: string[];
    };
    formulaSummary: { tier1: string; tier2: string };
  };
  onlineReward?: {
    points: number;
    chance: number;
    onlineTime: number;
    boxItemId: number;
    minLevel: number;
  };
  deathSpawn?: { level: number; tempo: number; price: number };
  playerCommands?: { words: string; access: string; script: string }[];
  systems: {
    autolootFreeSlots: number;
    autolootDonateSlots: number;
    megaBossHour: number;
    eventCoinsNpc: string;
    infoNpc: string;
    // BEGIN CHANGE: PvP Swap (anti-trap)
    pvpSwap?: boolean;
    // END CHANGE
  };
};

export default function ServerInfoPage() {
  const { t } = useI18n();
  const [info, setInfo] = useState<Info | null>(null);
  const [status, setStatus] = useState<"loading" | "ok" | "error">("loading");
  // BEGIN CHANGE: comandos extensos ficam recolhidos por padrao
  const [showGeneralCommands, setShowGeneralCommands] = useState(false);
  const [showHouseCommands, setShowHouseCommands] = useState(false);
  // END CHANGE

  useEffect(() => {
    fetch(apiUrl("serverinfo.php"))
      .then((r) => {
        if (!r.ok) throw new Error("http " + r.status);
        return r.json();
      })
      .then((json) => {
        setInfo(json);
        setStatus("ok");
      })
      .catch(() => setStatus("error"));
  }, []);

  const onOff = (v: boolean) => (v ? t.serverInfo.enabled : t.serverInfo.disabled);

  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.serverInfo.title}</h1>
        <p className="mt-2 text-muted">{t.serverInfo.subtitle}</p>

        {/* BEGIN CHANGE: onboarding Comece aqui */}
        <section className="mt-8 rounded-lg border border-border/60 bg-card/40 p-5">
          <h2 className="text-lg font-semibold tracking-tight">{t.serverInfo.startHereTitle}</h2>
          <p className="mt-2 text-sm text-muted">{t.serverInfo.startHereIntro}</p>
          <ul className="mt-4 grid gap-2 text-sm sm:grid-cols-2 lg:grid-cols-3">
            <li>
              <Link className="text-brand hover:underline" href="/download">
                {t.serverInfo.startHereDownload}
              </Link>
            </li>
            <li>
              <Link className="text-brand hover:underline" href="/rules">
                {t.serverInfo.startHereRules}
              </Link>
            </li>
            <li>
              <Link className="text-brand hover:underline" href="/vocations">
                {t.serverInfo.startHereVocations}
              </Link>
            </li>
            <li>
              <Link className="text-brand hover:underline" href="/tasks">
                {t.serverInfo.startHereTasks}
              </Link>
            </li>
            <li>
              <Link className="text-brand hover:underline" href="/jackpot">
                {t.serverInfo.startHereJackpot}
              </Link>
            </li>
            <li>
              <Link className="text-brand hover:underline" href="/prey">
                {t.serverInfo.startHerePrey}
              </Link>
            </li>
            <li>
              <Link className="text-brand hover:underline" href="/imbuements">
                {t.serverInfo.startHereImbuements}
              </Link>
            </li>
            <li>
              <Link className="text-brand hover:underline" href="/events">
                {t.serverInfo.startHereEvents}
              </Link>
            </li>
            <li>
              <Link className="text-brand hover:underline" href="/addons">
                {t.serverInfo.startHereAddons}
              </Link>
            </li>
          </ul>
        </section>
        {/* END CHANGE */}

        {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 === "ok" && info && (
          <div className="mt-8 space-y-8">
            <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
              <Stat
                label={t.serverInfo.status}
                value={info.liveStatus.reachable ? t.serverInfo.onlineStatus : t.serverInfo.offlineStatus}
                accent={info.liveStatus.reachable}
              />
              <Stat label={t.serverInfo.online} value={info.online} />
              <Stat label={t.serverInfo.uptime} value={info.liveStatus.uptimeLabel || "-"} />
              <Stat label={t.serverInfo.record} value={info.record?.record ?? "-"} />
              <Stat label={t.serverInfo.players} value={info.players} />
              <Stat label={t.serverInfo.accounts} value={info.accounts} />
              <Stat label={t.serverInfo.guilds} value={info.guilds} />
              <Stat label={t.serverInfo.protocol} value={info.protocol} />
            </div>

            <Section title={t.serverInfo.sectionLive}>
              <Rows
                rows={[
                  [t.serverInfo.serverName, info.serverName],
                  [t.serverInfo.worldType, info.worldType],
                  [t.serverInfo.location, info.location],
                  [t.serverInfo.ip, `${info.ip}:${info.loginPort}`],
                  [t.serverInfo.gamePort, String(info.gamePort)],
                  [t.serverInfo.client, info.liveStatus.client || info.client],
                  [t.serverInfo.distro, info.liveStatus.distro || "-"],
                  [t.serverInfo.version, info.liveStatus.version || "-"],
                  [t.serverInfo.playersMax, info.liveStatus.playersMax ?? "-"],
                  [t.serverInfo.playersPeak, info.liveStatus.playersPeak ?? "-"],
                  [t.serverInfo.monsters, info.liveStatus.monsters ?? "-"],
                  [t.serverInfo.npcs, info.liveStatus.npcs ?? "-"],
                  [t.serverInfo.map, info.liveStatus.mapName || info.mapName || "-"],
                  [
                    t.serverInfo.mapSize,
                    info.liveStatus.mapWidth && info.liveStatus.mapHeight
                      ? `${info.liveStatus.mapWidth} x ${info.liveStatus.mapHeight}`
                      : "-",
                  ],
                  [t.serverInfo.motd, info.motd || "-"],
                  [
                    t.serverInfo.lastJoined,
                    info.lastJoined ? (
                      <Link className="text-brand hover:underline" href={`/character/?name=${encodeURIComponent(info.lastJoined.name)}`}>
                        {info.lastJoined.name}
                      </Link>
                    ) : (
                      "-"
                    ),
                  ],
                  [
                    t.serverInfo.bestLevel,
                    info.bestLevel ? (
                      <Link className="text-brand hover:underline" href={`/character/?name=${encodeURIComponent(info.bestLevel.name)}`}>
                        {info.bestLevel.name} (Lv {info.bestLevel.level})
                      </Link>
                    ) : (
                      "-"
                    ),
                  ],
                  [t.serverInfo.housesFree, info.housesFree],
                  [t.serverInfo.housesRented, info.housesRented],
                  [t.serverInfo.banned, info.banned],
                ]}
              />
            </Section>

            <Section title={t.serverInfo.rates}>
              <Rows
                rows={[
                  [t.serverInfo.skill, `${info.rates.skill}x`],
                  [t.serverInfo.magic, `${info.rates.magic}x`],
                  [t.serverInfo.loot, `${info.rates.loot}x`],
                  [
                    t.serverInfo.spawn,
                    info.rates.spawnMin === info.rates.spawnMax
                      ? `${info.rates.spawnMin}x`
                      : `${info.rates.spawnMin}x - ${info.rates.spawnMax}x`,
                  ],
                  [
                    t.serverInfo.exp,
                    info.rates.experienceStages ? t.serverInfo.stagesTable : `${info.rates.exp}x`,
                  ],
                ]}
              />
              {info.rates.experienceStages && info.rates.stages.length > 0 && (
                <div className="mt-4 overflow-x-auto">
                  <table className="w-full text-left text-sm">
                    <thead className="text-muted">
                      <tr>
                        <th className="py-2 pr-4">{t.serverInfo.fromLevel}</th>
                        <th className="py-2 pr-4">{t.serverInfo.toLevel}</th>
                        <th className="py-2">{t.serverInfo.rate}</th>
                      </tr>
                    </thead>
                    <tbody>
                      {info.rates.stages.map((s, i) => (
                        <tr key={i} className="border-t border-border/50">
                          <td className="py-2 pr-4">{s.minLevel}</td>
                          <td className="py-2 pr-4">{s.maxLevel ?? "-"}</td>
                          <td className="py-2 font-medium text-brand">{s.multiplier}x</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )}
            </Section>

            <Section title={t.serverInfo.sectionSkulls}>
              <Rows
                rows={[
                  [t.serverInfo.redDaily, info.skulls.redDaily],
                  [t.serverInfo.redWeekly, info.skulls.redWeekly],
                  [t.serverInfo.redMonthly, info.skulls.redMonthly],
                  [t.serverInfo.blackDaily, info.skulls.blackDaily],
                  [t.serverInfo.blackWeekly, info.skulls.blackWeekly],
                  [t.serverInfo.blackMonthly, info.skulls.blackMonthly],
                  [t.serverInfo.redLength, `${info.skulls.redLengthDays}d`],
                  [t.serverInfo.blackLength, `${info.skulls.blackLengthDays}d`],
                  [t.serverInfo.whiteSkull, `${info.skulls.whiteSkullMinutes} min`],
                ]}
              />
            </Section>

            {info.banishment && (
              <Section title={t.serverInfo.sectionBan}>
                <Rows
                  rows={[
                    [t.serverInfo.banFragsDaily, info.banishment.fragsDaily],
                    [t.serverInfo.banFragsWeekly, info.banishment.fragsWeekly],
                    [t.serverInfo.banFragsMonthly, info.banishment.fragsMonthly],
                    [t.serverInfo.banLength, `${info.banishment.banLengthDays}d`],
                    [t.serverInfo.banNotations, info.banishment.notationsToBan],
                  ]}
                />
              </Section>
            )}

            {info.bless && (
              <Section title={t.serverInfo.sectionBless}>
                <p className="mb-4 text-sm text-muted">{t.serverInfo.blessHint}</p>
                <Rows
                  rows={[
                    [t.serverInfo.blessCommand, info.bless.command],
                    [t.serverInfo.blessCount, info.bless.config.blessCount],
                    [t.serverInfo.blessFree, info.bless.freeBelowProtectionLevel ? t.serverInfo.enabled : t.serverInfo.disabled],
                    [t.serverInfo.blessPremium, info.bless.paidRequiresPremium ? t.serverInfo.enabled : t.serverInfo.disabled],
                    [t.serverInfo.blessLowBase, info.bless.config.lowLevelBase],
                    [t.serverInfo.blessHighBase, info.bless.config.highLevelBase],
                    [t.serverInfo.blessMultiplier, String(info.bless.config.blessMultiplier)],
                  ]}
                />
                <p className="mt-4 text-xs text-muted">{info.bless.formulaSummary.tier1}</p>
                <p className="mt-1 text-xs text-muted">{info.bless.formulaSummary.tier2}</p>
              </Section>
            )}

            {/* BEGIN CHANGE: limpeza de houses removida do Server Info; fica somente no Admin */}
            {(info.onlineReward || info.deathSpawn) && (
              <Section title={t.serverInfo.sectionSystemsLive}>
                <Rows
                  rows={[
                    ...(info.onlineReward
                      ? ([
                          [t.serverInfo.onlinePoints, info.onlineReward.points],
                          [t.serverInfo.onlineChance, `${info.onlineReward.chance}%`],
                          [t.serverInfo.onlineInterval, `${Math.round(info.onlineReward.onlineTime / 60)} min`],
                          [t.serverInfo.onlineBox, `#${info.onlineReward.boxItemId}`],
                        ] as [string, ReactNode][])
                      : []),
                    ...(info.deathSpawn
                      ? ([
                          [t.serverInfo.deathLevel, info.deathSpawn.level],
                          [t.serverInfo.deathPrice, `${Math.round(info.deathSpawn.price / 1e6)}kk`],
                          [t.serverInfo.deathTempo, `${Math.round(info.deathSpawn.tempo / 60)} min`],
                        ] as [string, ReactNode][])
                      : []),
                  ]}
                />
              </Section>
            )}
            {/* END CHANGE */}

            <Section title={t.serverInfo.sectionGeneral}>
              <Rows
                rows={[
                  [t.serverInfo.premium, info.general.freePremium ? t.serverInfo.free : t.serverInfo.notFree],
                  [t.serverInfo.bank, onOff(info.general.bankSystem)],
                  [t.serverInfo.guildHalls, onOff(info.general.guildHalls)],
                  [t.serverInfo.blessings, onOff(info.general.blessings)],
                  [t.serverInfo.kickTime, `${info.general.idleKickMinutes} min`],
                  [t.serverInfo.pzLock, `${info.general.pzLockedSeconds}s`],
                  [t.serverInfo.protectionLevel, info.general.protectionLevel],
                  [t.serverInfo.levelHouse, info.general.levelToBuyHouse],
                  [t.serverInfo.levelGuild, info.general.levelToCreateGuild],
                ]}
              />
            </Section>

            <Section title={t.serverInfo.sectionCommands}>
              {/* BEGIN CHANGE: exibir/ocultar comandos gerais */}
              <ToggleButton
                open={showGeneralCommands}
                onClick={() => setShowGeneralCommands((v) => !v)}
                showLabel={t.serverInfo.showCommands}
                hideLabel={t.serverInfo.hideCommands}
              />
              {showGeneralCommands && (
                <div className="mt-4">
                  {info.playerCommands && info.playerCommands.length > 0 ? (
                    <ul className="space-y-2 text-sm">
                      {info.playerCommands.map((c) => (
                        <li key={c.words} className="border-b border-border/40 pb-2">
                          <div className="font-mono text-brand">{c.words}</div>
                          <div className="text-xs text-muted">access: {c.access}</div>
                        </li>
                      ))}
                    </ul>
                  ) : (
                    <CmdTable rows={info.commands.general} />
                  )}
                </div>
              )}
              {/* END CHANGE */}
            </Section>

            <Section title={t.serverInfo.sectionHouseCommands}>
              {/* BEGIN CHANGE: exibir/ocultar comandos de houses */}
              <ToggleButton
                open={showHouseCommands}
                onClick={() => setShowHouseCommands((v) => !v)}
                showLabel={t.serverInfo.showCommands}
                hideLabel={t.serverInfo.hideCommands}
              />
              {showHouseCommands && (
                <div className="mt-4">
                  <CmdTable rows={info.commands.house} />
                </div>
              )}
              {/* END CHANGE */}
            </Section>

            {info.resets.length > 0 && (
              <Section title={t.serverInfo.sectionResets}>
                <p className="mb-4 text-sm text-muted">{t.serverInfo.resetsHint}</p>
                <div className="overflow-x-auto">
                  <table className="w-full text-left text-sm">
                    <thead className="text-muted">
                      <tr>
                        <th className="py-2 pr-4">RR</th>
                        <th className="py-2 pr-4">{t.serverInfo.neededLevel}</th>
                        <th className="py-2 pr-4">{t.serverInfo.damageBonus}</th>
                        <th className="py-2">{t.serverInfo.hpmpBonus}</th>
                      </tr>
                    </thead>
                    <tbody>
                      {info.resets.map((r) => (
                        <tr key={r.rr} className="border-t border-border/50">
                          <td className="py-2 pr-4">{r.rr}</td>
                          <td className="py-2 pr-4">{r.neededLevel}</td>
                          <td className="py-2 pr-4">{r.damagePercent}%</td>
                          <td className="py-2">{r.hpmpPercent}%</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </Section>
            )}

            <Section title={t.serverInfo.sectionDbCleaner}>
              <p className="mb-4 text-sm text-muted">{t.serverInfo.dbCleanerHint}</p>
              <div className="overflow-x-auto">
                <table className="w-full text-left text-sm">
                  <thead className="text-muted">
                    <tr>
                      <th className="py-2 pr-4">{t.serverInfo.maxLevel}</th>
                      <th className="py-2 pr-4">{t.serverInfo.daysDelete}</th>
                      <th className="py-2">{t.serverInfo.daysDeleteReset}</th>
                    </tr>
                  </thead>
                  <tbody>
                    {info.dbCleaner.map((r, i) => (
                      <tr key={i} className="border-t border-border/50">
                        <td className="py-2 pr-4">{r.maxLevel}</td>
                        <td className="py-2 pr-4">{r.days}</td>
                        <td className="py-2">{r.daysReset}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>

              {info.cleanup && (
                <div className="mt-8 space-y-8">
                  <div>
                    <h3 className="mb-1 text-sm font-semibold">{t.serverInfo.cleanupToday}</h3>
                    <p className="mb-3 text-sm text-muted">{t.serverInfo.cleanupTodayHint}</p>
                    <CleanupTodayTable
                      players={info.cleanup.today.players}
                      accounts={info.cleanup.today.accounts}
                      emptyLabel={t.serverInfo.cleanupEmpty}
                      labels={{
                        name: t.serverInfo.cleanupColName,
                        house: t.serverInfo.cleanupColHouse,
                        extra: t.serverInfo.cleanupColExtra,
                      }}
                    />
                  </div>

                  <div>
                    <h3 className="mb-1 text-sm font-semibold">{t.serverInfo.cleanupAtRiskPlayers}</h3>
                    <p className="mb-3 text-sm text-muted">{t.serverInfo.cleanupAtRiskPlayersHint}</p>
                    <CleanupRiskPlayersTable
                      rows={info.cleanup.atRiskPlayers}
                      emptyLabel={t.serverInfo.cleanupEmpty}
                      labels={{
                        name: t.serverInfo.cleanupColName,
                        level: t.serverInfo.cleanupColLevel,
                        lastLogin: t.serverInfo.cleanupColLastLogin,
                        deadline: t.serverInfo.cleanupColDeadline,
                        status: t.serverInfo.cleanupColStatus,
                        overdue: t.serverInfo.cleanupStatusOverdue,
                        warning: t.serverInfo.cleanupStatusWarning,
                      }}
                    />
                  </div>

                  {/* BEGIN CHANGE: item 2 - tabela de houses em risco movida para o painel Admin */}
                  {/* END CHANGE */}
                </div>
              )}
            </Section>

            <Section title={t.serverInfo.sectionSystems}>
              <div className="space-y-4 text-sm leading-relaxed text-muted">
                <div>
                  <h3 className="mb-1 font-semibold text-foreground">{t.serverInfo.eventCoins}</h3>
                  <p>{t.serverInfo.eventCoinsDesc.replace("{npc}", info.systems.eventCoinsNpc)}</p>
                </div>
                <div>
                  <h3 className="mb-1 font-semibold text-foreground">{t.serverInfo.premiumCoins}</h3>
                  <p>{t.serverInfo.premiumCoinsDesc}</p>
                </div>
                <div>
                  <h3 className="mb-1 font-semibold text-foreground">{t.serverInfo.megaBoss}</h3>
                  <p>{t.serverInfo.megaBossDesc.replace("{hour}", String(info.systems.megaBossHour))}</p>
                </div>
                <div>
                  <h3 className="mb-1 font-semibold text-foreground">{t.serverInfo.autoloot}</h3>
                  <p>
                    {t.serverInfo.autolootDesc
                      .replace("{free}", String(info.systems.autolootFreeSlots))
                      .replace("{donate}", String(info.systems.autolootDonateSlots))
                      .replace("{npc}", info.systems.infoNpc)}
                  </p>
                </div>
                {/* BEGIN CHANGE: PvP Swap (anti-trap) */}
                <div>
                  <h3 className="mb-1 font-semibold text-foreground">{t.serverInfo.pvpSwap}</h3>
                  <p className="mb-2">
                    {t.serverInfo.pvpSwapStatus}:{" "}
                    <span className="font-medium text-foreground">
                      {onOff(!!info.systems.pvpSwap)}
                    </span>
                  </p>
                  <p className="mb-3">{t.serverInfo.pvpSwapIntro}</p>
                  <p className="mb-1 font-medium text-foreground">{t.serverInfo.pvpSwapHowToTitle}</p>
                  <ol className="mb-3 list-decimal space-y-1 pl-5">
                    <li>{t.serverInfo.pvpSwapStep1}</li>
                    <li>{t.serverInfo.pvpSwapStep2}</li>
                    <li>{t.serverInfo.pvpSwapStep3}</li>
                    <li>{t.serverInfo.pvpSwapStep4}</li>
                  </ol>
                  <p className="mb-1 font-medium text-foreground">{t.serverInfo.pvpSwapRulesTitle}</p>
                  <ul className="list-disc space-y-1 pl-5">
                    <li>{t.serverInfo.pvpSwapRule1}</li>
                    <li>{t.serverInfo.pvpSwapRule2}</li>
                    <li>{t.serverInfo.pvpSwapRule3}</li>
                    <li>{t.serverInfo.pvpSwapRule4}</li>
                  </ul>
                </div>
                {/* END CHANGE */}
              </div>
            </Section>
          </div>
        )}
      </main>
      <Footer />
    </div>
  );
}

function Section({ title, children }: { title: string; children: ReactNode }) {
  return (
    <section className="rounded-xl border border-border bg-panel p-6">
      <h2 className="mb-4 text-base font-semibold">{title}</h2>
      {children}
    </section>
  );
}

function Stat({
  label,
  value,
  accent,
}: {
  label: string;
  value: string | number;
  accent?: boolean;
}) {
  return (
    <div className="rounded-xl border border-border bg-panel p-5">
      <div className={`text-2xl font-semibold ${accent ? "text-brand" : "text-brand"}`}>{value}</div>
      <div className="mt-1 text-xs text-muted">{label}</div>
    </div>
  );
}

function Rows({ rows }: { rows: [string, ReactNode][] }) {
  return (
    <dl className="grid gap-2 text-sm sm:grid-cols-2">
      {rows.map(([k, v]) => (
        <div key={k} className="flex justify-between gap-3 border-b border-border/40 py-2">
          <dt className="text-muted">{k}</dt>
          <dd className="text-right font-medium">{v}</dd>
        </div>
      ))}
    </dl>
  );
}

// BEGIN CHANGE: botao reutilizavel para secoes extensas de comandos
function ToggleButton({
  open,
  onClick,
  showLabel,
  hideLabel,
}: {
  open: boolean;
  onClick: () => void;
  showLabel: string;
  hideLabel: string;
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      aria-expanded={open}
      className="rounded-md border border-border px-3 py-1.5 text-sm hover:border-brand"
    >
      {open ? hideLabel : showLabel}
    </button>
  );
}
// END CHANGE

function CmdTable({ rows }: { rows: Cmd[] }) {
  return (
    <ul className="space-y-2 text-sm">
      {rows.map((r) => (
        <li key={r.cmd} className="border-b border-border/40 pb-2">
          <div className="font-mono text-brand">{r.cmd}</div>
          <div className="text-muted">{r.desc}</div>
        </li>
      ))}
    </ul>
  );
}

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

function CleanupTodayTable({
  players,
  accounts,
  emptyLabel,
  labels,
}: {
  players: CleanupTodayRow[];
  accounts: CleanupTodayRow[];
  emptyLabel: string;
  labels: { name: string; house: string; extra: string };
}) {
  // BEGIN CHANGE: houses limpas nao sao exibidas publicamente; somente no Admin
  const empty = players.length + accounts.length === 0;
  // END CHANGE
  if (empty) return <p className="text-sm text-muted">{emptyLabel}</p>;
  return (
    <div className="space-y-4 text-sm">
      {players.length > 0 && (
        <div className="overflow-x-auto">
          <table className="w-full text-left">
            <thead className="text-muted">
              <tr>
                <th className="py-2 pr-4">{labels.name}</th>
                <th className="py-2">{labels.extra}</th>
              </tr>
            </thead>
            <tbody>
              {players.map((r, i) => (
                <tr key={`p-${i}`} className="border-t border-border/50">
                  <td className="py-2 pr-4">
                    <Link className="text-brand hover:underline" href={`/character/?name=${encodeURIComponent(r.name)}`}>
                      {r.name}
                    </Link>
                  </td>
                  <td className="py-2 text-muted">{r.extra || "-"}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
      {accounts.length > 0 && (
        <div className="overflow-x-auto">
          <table className="w-full text-left">
            <thead className="text-muted">
              <tr>
                <th className="py-2 pr-4">{labels.name}</th>
                <th className="py-2">{labels.extra}</th>
              </tr>
            </thead>
            <tbody>
              {accounts.map((r, i) => (
                <tr key={`a-${i}`} className="border-t border-border/50">
                  <td className="py-2 pr-4">{r.name}</td>
                  <td className="py-2 text-muted">{r.extra || "-"}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}

function CleanupRiskPlayersTable({
  rows,
  emptyLabel,
  labels,
}: {
  rows: CleanupRiskPlayer[];
  emptyLabel: string;
  labels: {
    name: string;
    level: string;
    lastLogin: string;
    deadline: string;
    status: string;
    overdue: string;
    warning: string;
  };
}) {
  if (rows.length === 0) return <p className="text-sm text-muted">{emptyLabel}</p>;
  return (
    <div className="overflow-x-auto">
      <table className="w-full text-left text-sm">
        <thead className="text-muted">
          <tr>
            <th className="py-2 pr-4">{labels.name}</th>
            <th className="py-2 pr-4">{labels.level}</th>
            <th className="py-2 pr-4">{labels.lastLogin}</th>
            <th className="py-2 pr-4">{labels.deadline}</th>
            <th className="py-2">{labels.status}</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((r) => (
            <tr key={r.id} className="border-t border-border/50">
              <td className="py-2 pr-4">
                <Link className="text-brand hover:underline" href={`/character/?name=${encodeURIComponent(r.name)}`}>
                  {r.name}
                </Link>
              </td>
              <td className="py-2 pr-4">
                {r.level}
                {r.reset > 0 ? ` (RR ${r.reset})` : ""}
              </td>
              <td className="py-2 pr-4">{fmtTs(r.lastLogin)}</td>
              <td className="py-2 pr-4">{fmtTs(r.deadline)}</td>
              <td className="py-2">{r.status === "overdue" ? labels.overdue : labels.warning}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

// BEGIN CHANGE: item 2 - CleanupRiskHousesTable removida (houses em risco agora no Admin)
// END CHANGE