// BEGIN CHANGE: pagina Mounts - Rodrik custos/drops/boss + catalogo completo mounts.xml
"use client";

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

type DropMonster = { name: string; chance: number; countMax: number };

type MountItem = {
  id: number;
  count: number;
  name: string;
  monsterCount: number;
  monsters: DropMonster[];
};

type MountTier = {
  id: string;
  idsFrom: number;
  idsTo: number;
  expPct: number;
  shield: number;
  health: number;
  mana: number;
  skill?: number;
  capacity?: number;
  absorb?: number;
  regen?: number;
  lootPct?: number;
  reflectPct?: number;
  reflectCap?: number;
};

type MountProfile = {
  id: string;
  label: string;
  skill: string;
  absorb: string;
};

type MountRow = {
  mountId: number;
  keyword: string;
  name: string;
  tier: string;
  speed: number;
  clientId: number;
  looktype: number;
  premium: boolean;
  premiumRequired?: boolean;
  needsArena: boolean;
  benefit: string;
  profileId?: string;
  profileLabel?: string;
  requiresExtended?: boolean;
  atRodrik?: boolean;
  npc?: string;
  minLevel?: number;
  gold?: number;
  premiumCoins?: number;
  premiumCoinId?: number;
  premdaysCost?: number;
  eventCoins?: number;
  eventCoinId?: number;
  boss?: string;
  items?: MountItem[];
};

const FALLBACK_TIERS: MountTier[] = [
  { id: "B", idsFrom: 1, idsTo: 65, expPct: 3, shield: 1, health: 0, mana: 0, skill: 1, capacity: 150, absorb: 10, regen: 80, lootPct: 5, reflectPct: 4, reflectCap: 80 },
  { id: "A", idsFrom: 66, idsTo: 131, expPct: 5, shield: 2, health: 150, mana: 0, skill: 2, capacity: 350, absorb: 20, regen: 140, lootPct: 8, reflectPct: 7, reflectCap: 150 },
  { id: "S", idsFrom: 132, idsTo: 246, expPct: 8, shield: 4, health: 300, mana: 150, skill: 4, capacity: 700, absorb: 30, regen: 220, lootPct: 12, reflectPct: 10, reflectCap: 250 },
];

const FALLBACK_PROFILES: MountProfile[] = [
  { id: "club", label: "Club", skill: "club", absorb: "earth" },
  { id: "sword", label: "Sword", skill: "sword", absorb: "death" },
  { id: "axe", label: "Axe", skill: "axe", absorb: "ice" },
  { id: "hunter", label: "Hunter", skill: "distance", absorb: "energy" },
  { id: "mage", label: "Mage", skill: "magic", absorb: "fire" },
];

function parseTiers(raw: unknown): MountTier[] {
  if (!Array.isArray(raw) || raw.length === 0) return FALLBACK_TIERS;
  const out: MountTier[] = [];
  for (const row of raw) {
    if (!row || typeof row !== "object") continue;
    const r = row as Record<string, unknown>;
    const id = String(r.id || "");
    if (!id) continue;
    out.push({
      id,
      idsFrom: Number(r.idsFrom) || 0,
      idsTo: Number(r.idsTo) || 0,
      expPct: Number(r.expPct) || 0,
      shield: Number(r.shield) || 0,
      health: Number(r.health) || 0,
      mana: Number(r.mana) || 0,
      skill: Number(r.skill) || 0,
      capacity: Number(r.capacity) || 0,
      absorb: Number(r.absorb) || 0,
      regen: Number(r.regen) || 0,
      lootPct: Number(r.lootPct) || 0,
      reflectPct: Number(r.reflectPct) || 0,
      reflectCap: Number(r.reflectCap) || 0,
    });
  }
  return out.length > 0 ? out : FALLBACK_TIERS;
}

function parseProfiles(raw: unknown): MountProfile[] {
  if (!Array.isArray(raw) || raw.length === 0) return FALLBACK_PROFILES;
  const out: MountProfile[] = [];
  for (const row of raw) {
    if (!row || typeof row !== "object") continue;
    const r = row as Record<string, unknown>;
    const id = String(r.id || "");
    if (!id) continue;
    out.push({
      id,
      label: String(r.label || id),
      skill: String(r.skill || ""),
      absorb: String(r.absorb || ""),
    });
  }
  return out.length > 0 ? out : FALLBACK_PROFILES;
}

function tierIdRange(t: MountTier): string {
  if (t.id === "S") return `${t.idsFrom}+`;
  if (t.idsFrom > 0 && t.idsTo > 0) return `${t.idsFrom}-${t.idsTo}`;
  return "-";
}

function statOrDash(n: number, suffix = ""): string {
  return n > 0 ? `+${n}${suffix}` : "-";
}

function lookFromType(looktype: number): Look {
  return {
    looktype,
    lookhead: 0,
    lookbody: 0,
    looklegs: 0,
    lookfeet: 0,
    lookaddons: 0,
    lookmount: 0,
  };
}

function formatGp(n: number): string {
  if (n <= 0) return "-";
  return n.toLocaleString("en-US") + " gp";
}

function chancePct(c: number): string {
  return c > 0 ? `${(c / 1000).toFixed(1)}%` : "-";
}

export default function MountsPage() {
  const { t } = useI18n();
  const [rodrik, setRodrik] = useState<MountRow[]>([]);
  const [all, setAll] = useState<MountRow[]>([]);
  const [tiers, setTiers] = useState<MountTier[]>(FALLBACK_TIERS);
  const [profiles, setProfiles] = useState<MountProfile[]>(FALLBACK_PROFILES);
  const [strike, setStrike] = useState({
    steps: 12,
    minDmg: 500,
    maxDmg: 2000,
    byTier: {
      B: { minDmg: 500, maxDmg: 900 },
      A: { minDmg: 900, maxDmg: 1400 },
      S: { minDmg: 1400, maxDmg: 2000 },
    } as Record<string, { minDmg: number; maxDmg: number }>,
  });
  const [npc, setNpc] = useState("");
  const [minLevel, setMinLevel] = useState(200);
  const [status, setStatus] = useState<"loading" | "ok" | "error">("loading");
  const [filter, setFilter] = useState("");
  const [tierFilter, setTierFilter] = useState<"all" | "B" | "A" | "S">("all");
  const [tab, setTab] = useState<"rodrik" | "all">("rodrik");
  const [openDrops, setOpenDrops] = useState<Record<string, boolean>>({});

  useEffect(() => {
    fetch(apiUrl("mounts.php"))
      .then((r) => {
        if (!r.ok) throw new Error("http");
        return r.json();
      })
      .then((json) => {
        const data = Array.isArray(json.data) ? json.data : [];
        const allRows = Array.isArray(json.all) ? json.all : data;
        setRodrik(data);
        setAll(allRows);
        setTiers(parseTiers(json.tiers));
        setProfiles(parseProfiles(json.profiles));
        if (json.strike && typeof json.strike === "object") {
          const s = json.strike as Record<string, unknown>;
          const byTierRaw = (s.byTier && typeof s.byTier === "object" ? s.byTier : {}) as Record<
            string,
            { minDmg?: number; maxDmg?: number }
          >;
          const byTier: Record<string, { minDmg: number; maxDmg: number }> = {
            B: { minDmg: 500, maxDmg: 900 },
            A: { minDmg: 900, maxDmg: 1400 },
            S: { minDmg: 1400, maxDmg: 2000 },
          };
          for (const key of ["B", "A", "S"] as const) {
            if (byTierRaw[key]) {
              byTier[key] = {
                minDmg: Number(byTierRaw[key].minDmg) || byTier[key].minDmg,
                maxDmg: Number(byTierRaw[key].maxDmg) || byTier[key].maxDmg,
              };
            }
          }
          setStrike({
            steps: Number(s.steps) || 12,
            minDmg: Number(s.minDmg) || 500,
            maxDmg: Number(s.maxDmg) || 2000,
            byTier,
          });
        }
        setNpc(json.npc ?? "");
        setMinLevel(typeof json.minLevel === "number" ? json.minLevel : 200);
        setStatus("ok");
      })
      .catch(() => setStatus("error"));
  }, []);

  const rows = tab === "rodrik" ? rodrik : all;

  const tierCounts = useMemo(() => {
    const c = { B: 0, A: 0, S: 0 };
    for (const r of rows) {
      const t = String(r.tier || "").toUpperCase();
      if (t === "B" || t === "A" || t === "S") c[t] += 1;
    }
    return c;
  }, [rows]);

  const filtered = useMemo(() => {
    const q = filter.trim().toLowerCase();
    return rows.filter((r) => {
      if (tierFilter !== "all" && String(r.tier || "").toUpperCase() !== tierFilter) {
        return false;
      }
      if (!q) return true;
      if (r.name.toLowerCase().includes(q)) return true;
      if (r.keyword.toLowerCase().includes(q)) return true;
      if (r.tier.toLowerCase().includes(q)) return true;
      if ((r.boss || "").toLowerCase().includes(q)) return true;
      return (r.items || []).some(
        (it) =>
          it.name.toLowerCase().includes(q) ||
          it.monsters.some((m) => m.name.toLowerCase().includes(q)),
      );
    });
  }, [rows, filter, tierFilter]);

  function toggleDrop(key: string) {
    setOpenDrops((prev) => ({ ...prev, [key]: !prev[key] }));
  }

  function tierBadgeClass(tier: string): string {
    const t = tier.toUpperCase();
    if (t === "S") return "border-brand/50 bg-brand/15 text-brand";
    if (t === "A") return "border-border bg-muted/50 text-foreground";
    return "border-border bg-muted/40 text-muted";
  }

  return (
    <div className="flex min-h-screen flex-col">
      <Navbar />
      <main className="mx-auto w-full max-w-6xl flex-1 px-6 py-14">
        <h1 className="text-3xl font-semibold tracking-tight">{t.mounts.title}</h1>
        <p className="mt-2 text-muted">{t.mounts.subtitle}</p>
        {npc && (
          <p className="mt-2 text-sm text-muted">
            {t.mounts.npcLabel}: <span className="font-medium text-foreground">{npc}</span>
            {" - "}
            {t.mounts.minLevel.replace("{n}", String(minLevel))}
          </p>
        )}

        {/* BEGIN CHANGE: 2026-08-13 - guia de bonus / shield / como obter */}
        <section className="mt-8 grid gap-5 lg:grid-cols-2">
          <div className="rounded-xl border border-border bg-panel p-5">
            <h2 className="text-lg font-semibold tracking-tight">{t.mounts.howTitle}</h2>
            <ol className="mt-3 list-decimal space-y-2 pl-5 text-sm text-muted">
              {t.mounts.howSteps.map((step, i) => (
                <li key={i}>{step}</li>
              ))}
            </ol>
          </div>
          <div className="rounded-xl border border-border bg-panel p-5">
            <h2 className="text-lg font-semibold tracking-tight">{t.mounts.rulesTitle}</h2>
            <ul className="mt-3 list-disc space-y-2 pl-5 text-sm text-muted">
              {t.mounts.rules.map((rule, i) => (
                <li key={i}>{rule}</li>
              ))}
            </ul>
            <p className="mt-4 text-sm text-brand">{t.mounts.shieldNote}</p>
          </div>
        </section>

        <section className="mt-5 rounded-xl border border-border bg-panel p-5">
          <h2 className="text-lg font-semibold tracking-tight">{t.mounts.benefitsTitle}</h2>
          <p className="mt-2 text-sm text-muted">{t.mounts.benefitsIntro}</p>
          <div className="mt-4 overflow-x-auto">
            <table className="min-w-full text-left text-sm">
              <thead>
                <tr className="border-b border-border text-muted">
                  <th className="py-2 pr-3 font-medium">{t.mounts.colTier}</th>
                  <th className="py-2 pr-3 font-medium">{t.mounts.colIds}</th>
                  <th className="py-2 pr-3 font-medium">{t.mounts.colExp}</th>
                  <th className="py-2 pr-3 font-medium">{t.mounts.colShield}</th>
                  <th className="py-2 pr-3 font-medium">{t.mounts.colSkill}</th>
                  <th className="py-2 pr-3 font-medium">{t.mounts.colHp}</th>
                  <th className="py-2 pr-3 font-medium">{t.mounts.colMana}</th>
                  <th className="py-2 pr-3 font-medium">{t.mounts.colCap}</th>
                  <th className="py-2 pr-3 font-medium">{t.mounts.colAbsorb}</th>
                  <th className="py-2 pr-3 font-medium">{t.mounts.colRegen}</th>
                  <th className="py-2 pr-3 font-medium">{t.mounts.colLoot}</th>
                  <th className="py-2 pr-3 font-medium">{t.mounts.colReflect}</th>
                  <th className="py-2 font-medium">{t.mounts.colCost}</th>
                </tr>
              </thead>
              <tbody>
                {tiers.map((tier) => (
                  <tr
                    key={tier.id}
                    className={`cursor-pointer border-b border-border/70 last:border-0 transition-colors hover:bg-muted/30 ${
                      tierFilter === tier.id ? "bg-brand/10" : ""
                    }`}
                    onClick={() =>
                      setTierFilter((prev) => (prev === tier.id ? "all" : (tier.id as "B" | "A" | "S")))
                    }
                  >
                    <td className="py-2 pr-3 font-medium">{tier.id}</td>
                    <td className="py-2 pr-3 text-muted">{tierIdRange(tier)}</td>
                    <td className="py-2 pr-3">{statOrDash(tier.expPct, "%")}</td>
                    <td className="py-2 pr-3">{statOrDash(tier.shield)}</td>
                    <td className="py-2 pr-3">{statOrDash(tier.skill || 0)}</td>
                    <td className="py-2 pr-3">{statOrDash(tier.health)}</td>
                    <td className="py-2 pr-3">{statOrDash(tier.mana)}</td>
                    <td className="py-2 pr-3">{statOrDash(tier.capacity || 0)}</td>
                    <td className="py-2 pr-3">{statOrDash(tier.absorb || 0, "%")}</td>
                    <td className="py-2 pr-3">{statOrDash(tier.regen || 0, "/s")}</td>
                    <td className="py-2 pr-3">{statOrDash(tier.lootPct || 0, "%")}</td>
                    <td className="py-2 pr-3">
                      {(tier.reflectPct || 0) > 0
                        ? `+${tier.reflectPct}% / ${tier.reflectCap || 0}`
                        : "-"}
                    </td>
                    <td className="py-2 text-muted">
                      {tier.id === "A"
                        ? t.mounts.tierACost
                        : tier.id === "S"
                          ? t.mounts.tierSCost
                          : t.mounts.tierBCost}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <p className="mt-3 text-sm text-muted">
            {t.mounts.strikeNote
              .replace("{steps}", String(strike.steps))
              .replace("{bMin}", String(strike.byTier.B.minDmg))
              .replace("{bMax}", String(strike.byTier.B.maxDmg))
              .replace("{aMin}", String(strike.byTier.A.minDmg))
              .replace("{aMax}", String(strike.byTier.A.maxDmg))
              .replace("{sMin}", String(strike.byTier.S.minDmg))
              .replace("{sMax}", String(strike.byTier.S.maxDmg))}
          </p>
        </section>

        {/* BEGIN CHANGE: 2026-08-26 - profiles guide */}
        <section className="mt-5 rounded-xl border border-border bg-panel p-5">
          <h2 className="text-lg font-semibold tracking-tight">{t.mounts.profilesTitle}</h2>
          <p className="mt-2 text-sm text-muted">{t.mounts.profilesIntro}</p>
          <div className="mt-4 overflow-x-auto">
            <table className="min-w-full text-left text-sm">
              <thead>
                <tr className="border-b border-border text-muted">
                  <th className="py-2 pr-4 font-medium">{t.mounts.colProfile}</th>
                  <th className="py-2 pr-4 font-medium">{t.mounts.colSkill}</th>
                  <th className="py-2 font-medium">{t.mounts.colAbsorbEl}</th>
                </tr>
              </thead>
              <tbody>
                {profiles.map((p) => (
                  <tr key={p.id} className="border-b border-border/70 last:border-0">
                    <td className="py-2 pr-4 font-medium">{p.label}</td>
                    <td className="py-2 pr-4 text-muted">{p.skill || "-"}</td>
                    <td className="py-2 text-muted">{p.absorb || "-"}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </section>
        {/* END CHANGE */}

        {status === "ok" && (
          <div className="mt-6 flex flex-wrap items-center gap-3">
            <div className="flex rounded-lg border border-border bg-panel p-1 text-sm">
              <button
                type="button"
                onClick={() => setTab("rodrik")}
                className={`rounded-md px-3 py-1.5 ${
                  tab === "rodrik" ? "bg-brand/15 text-brand" : "text-muted hover:text-foreground"
                }`}
              >
                {t.mounts.tabRodrik.replace("{n}", String(rodrik.length))}
              </button>
              <button
                type="button"
                onClick={() => setTab("all")}
                className={`rounded-md px-3 py-1.5 ${
                  tab === "all" ? "bg-brand/15 text-brand" : "text-muted hover:text-foreground"
                }`}
              >
                {t.mounts.tabAll.replace("{n}", String(all.length))}
              </button>
            </div>
            {/* BEGIN CHANGE: filtro por tier B/A/S */}
            <div className="flex flex-wrap items-center gap-1 rounded-lg border border-border bg-panel p-1 text-sm">
              <button
                type="button"
                onClick={() => setTierFilter("all")}
                className={`rounded-md px-3 py-1.5 ${
                  tierFilter === "all" ? "bg-brand/15 text-brand" : "text-muted hover:text-foreground"
                }`}
              >
                {t.mounts.filterTierAll.replace("{n}", String(rows.length))}
              </button>
              {(["B", "A", "S"] as const).map((tier) => (
                <button
                  key={tier}
                  type="button"
                  onClick={() => setTierFilter(tier)}
                  className={`rounded-md px-3 py-1.5 ${
                    tierFilter === tier ? "bg-brand/15 text-brand" : "text-muted hover:text-foreground"
                  }`}
                >
                  {t.mounts.filterTier.replace("{tier}", tier).replace("{n}", String(tierCounts[tier]))}
                </button>
              ))}
            </div>
            {/* END CHANGE */}
            <input
              value={filter}
              onChange={(e) => setFilter(e.target.value)}
              placeholder={t.mounts.filterPlaceholder}
              className="w-full max-w-md rounded-lg border border-border bg-panel px-4 py-2 text-sm outline-none focus:border-brand/60"
            />
          </div>
        )}

        {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" && filtered.length === 0 && (
          <p className="mt-8 text-muted">{t.mounts.noResults}</p>
        )}

        {status === "ok" && (
          <div className="mt-8 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
            {filtered.map((r) => {
              const items = Array.isArray(r.items) ? r.items : [];
              const atRodrik = !!r.atRodrik;
              return (
                <article
                  key={`${tab}-${r.mountId}`}
                  className="flex flex-col rounded-xl border border-border bg-panel p-5"
                >
                  <div className="flex items-start gap-3">
                    {r.looktype > 0 ? (
                      <Outfit look={lookFromType(r.looktype)} size="inline" alt={r.name} />
                    ) : (
                      <div className="flex h-16 w-16 items-center justify-center rounded bg-muted/40 text-[10px] text-muted">
                        {t.mounts.noGif}
                      </div>
                    )}
                    <div className="min-w-0 flex-1">
                      <h2 className="text-lg font-semibold tracking-tight">{r.name}</h2>
                      <div className="mt-1 flex flex-wrap gap-1">
                        {r.tier ? (
                          <span
                            className={`rounded border px-1.5 py-0.5 text-[10px] uppercase tracking-wide ${tierBadgeClass(r.tier)}`}
                          >
                            Tier {r.tier}
                          </span>
                        ) : null}
                        {r.profileLabel ? (
                          <span className="rounded border border-border bg-muted/40 px-1.5 py-0.5 text-[10px] tracking-wide text-muted">
                            {r.profileLabel}
                          </span>
                        ) : null}
                        {atRodrik ? (
                          <span className="rounded border border-brand/40 bg-brand/10 px-1.5 py-0.5 text-[10px] text-brand">
                            {t.mounts.badgeRodrik}
                          </span>
                        ) : (
                          <span className="rounded border border-border bg-muted/40 px-1.5 py-0.5 text-[10px] text-muted">
                            {t.mounts.badgeClientOnly}
                          </span>
                        )}
                        {(r.premiumRequired || r.premium) && (
                          <span className="rounded border border-brand/40 bg-brand/10 px-1.5 py-0.5 text-[10px] text-brand">
                            {t.mounts.premium}
                          </span>
                        )}
                        {r.requiresExtended && (
                          <span className="rounded border border-border bg-muted/40 px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-muted">
                            {t.mounts.requiresExtended}
                          </span>
                        )}
                        {r.needsArena && (
                          <span className="rounded border border-border bg-muted/40 px-1.5 py-0.5 text-[10px] text-muted">
                            {t.mounts.arena}
                          </span>
                        )}
                      </div>
                    </div>
                  </div>

                  {r.benefit && (
                    <p className="mt-3 text-sm text-brand">
                      {t.mounts.colBonus}: {r.benefit}
                    </p>
                  )}
                  <p className="mt-1 text-xs text-muted">
                    {t.mounts.speed}: {r.speed > 0 ? r.speed : "-"}
                    {" - "}
                    ID {r.mountId}
                  </p>
                  {r.keyword ? (
                    <p className="mt-1 text-xs text-muted">
                      {t.mounts.sayKeyword}:{" "}
                      <span className="font-mono text-foreground">{r.keyword}</span>
                    </p>
                  ) : null}

                  {!atRodrik ? (
                    <p className="mt-3 text-sm text-muted">{t.mounts.notAtRodrik}</p>
                  ) : (
                    <div className="mt-4 space-y-2 rounded-lg border border-border/70 bg-background/40 p-3 text-sm">
                      <p>
                        <span className="text-muted">{t.mounts.gold}: </span>
                        <span className="font-medium">{formatGp(r.gold || 0)}</span>
                      </p>
                      {(r.premiumCoins || 0) > 0 && (
                        <p className="flex items-center gap-2">
                          <ItemIcon
                            id={r.premiumCoinId || 12734}
                            alt={t.mounts.premiumCoins}
                            size={24}
                          />
                          <span>
                            <span className="text-muted">{t.mounts.premiumCoins}: </span>
                            <span className="font-medium">{r.premiumCoins}</span>
                          </span>
                        </p>
                      )}
                      {(r.premdaysCost || 0) > 0 && (
                        <p>
                          <span className="text-muted">{t.mounts.premiumDaysCost}: </span>
                          <span className="font-medium">{r.premdaysCost}</span>
                        </p>
                      )}
                      {(r.eventCoins || 0) > 0 && (
                        <p className="flex items-center gap-2">
                          <ItemIcon
                            id={r.eventCoinId || 6527}
                            alt={t.mounts.eventCoins}
                            size={24}
                          />
                          <span>
                            <span className="text-muted">{t.mounts.eventCoins}: </span>
                            <span className="font-medium">{r.eventCoins}</span>
                          </span>
                        </p>
                      )}
                      {r.needsArena && (
                        <p>
                          <span className="text-muted">{t.mounts.boss}: </span>
                          <span className="font-medium">
                            {r.boss && r.boss.length > 0 ? r.boss : t.mounts.noBoss}
                          </span>
                        </p>
                      )}

                      <p className="pt-1 text-xs font-medium uppercase tracking-wide text-muted">
                        {t.mounts.requiredItems}
                      </p>
                      {items.length === 0 ? (
                        <p className="text-xs text-muted">{t.mounts.noItems}</p>
                      ) : (
                        <ul className="space-y-2">
                          {items.map((it) => {
                            const dropKey = `${r.mountId}-${it.id}`;
                            const open = !!openDrops[dropKey];
                            return (
                              <li key={dropKey} className="text-sm">
                                <div className="flex items-center gap-2">
                                  <ItemIcon id={it.id} alt={it.name} size={28} />
                                  <span className="min-w-0 flex-1">
                                    <span className="font-medium">
                                      {it.count}x {it.name}
                                    </span>
                                    <span className="ml-1 text-xs text-muted">#{it.id}</span>
                                  </span>
                                  <button
                                    type="button"
                                    onClick={() => toggleDrop(dropKey)}
                                    className="shrink-0 rounded border border-border px-2 py-0.5 text-xs text-muted transition-colors hover:border-brand/50 hover:text-foreground"
                                  >
                                    {it.monsterCount === 0
                                      ? t.mounts.noDrops
                                      : open
                                        ? t.mounts.hideDrops
                                        : t.mounts.showDrops.replace(
                                            "{n}",
                                            String(it.monsterCount),
                                          )}
                                  </button>
                                </div>
                                {open && it.monsterCount > 0 && (
                                  <div className="mt-2 ml-9 space-y-1">
                                    {it.monsters.map((m) => (
                                      <div
                                        key={`${dropKey}-${m.name}`}
                                        className="flex flex-wrap items-baseline gap-x-2 text-xs text-muted"
                                      >
                                        <Link
                                          href={`/monster/?name=${encodeURIComponent(m.name)}`}
                                          className="text-foreground hover:text-brand"
                                        >
                                          {m.name}
                                        </Link>
                                        <span>
                                          {t.mounts.chance}: {chancePct(m.chance)}
                                          {m.countMax > 1 ? ` (x${m.countMax})` : ""}
                                        </span>
                                      </div>
                                    ))}
                                    {it.monsterCount > it.monsters.length && (
                                      <Link
                                        href={`/item-drops`}
                                        className="inline-block text-xs text-brand hover:underline"
                                      >
                                        {t.mounts.moreDrops.replace(
                                          "{n}",
                                          String(it.monsterCount - it.monsters.length),
                                        )}
                                      </Link>
                                    )}
                                  </div>
                                )}
                                {open && it.monsterCount === 0 && (
                                  <p className="mt-2 ml-9 text-xs text-muted">
                                    {t.mounts.noMonsterDrop}
                                  </p>
                                )}
                              </li>
                            );
                          })}
                        </ul>
                      )}
                    </div>
                  )}
                </article>
              );
            })}
          </div>
        )}
      </main>
      <Footer />
    </div>
  );
}
// END CHANGE