// BEGIN CHANGE: bestiario com link para ficha (DB + 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 { Outfit } from "@/components/Outfit";
import { apiUrl, type Look } from "@/lib/api";

type Monster = {
  name: string;
  exp: number;
  health: number;
  race: string;
  immunities: string;
  look: Look;
};

export default function MonstersPage() {
  const { t } = useI18n();
  const [rows, setRows] = useState<Monster[]>([]);
  const [query, setQuery] = useState("");
  const [status, setStatus] = useState<"loading" | "ok" | "error">("loading");

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

  const filtered = useMemo(() => {
    const q = query.trim().toLowerCase();
    if (!q) return rows;
    return rows.filter((m) => m.name.toLowerCase().includes(q));
  }, [rows, query]);

  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.monsters.title}</h1>
        <p className="mt-2 text-muted">
          {t.monsters.subtitle}{" "}
          {status === "ok" && <span className="text-brand">{filtered.length}</span>}
        </p>

        <input
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder={t.monsters.searchPlaceholder}
          className="mt-6 w-full max-w-sm rounded-lg border border-border bg-panel px-4 py-2 text-sm outline-none focus:border-brand/60"
        />

        {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.common.empty}</p>
        )}

        {status === "ok" && filtered.length > 0 && (
          <div className="mt-8 grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
            {filtered.map((m) => (
              <Link
                key={m.name}
                href={`/monster/?name=${encodeURIComponent(m.name)}`}
                className="flex items-center gap-4 rounded-xl border border-border bg-panel p-4 transition-colors hover:border-brand/40"
              >
                <div className="grid shrink-0 place-items-center">
                  <Outfit look={m.look} size="grid" alt={m.name} />
                </div>
                <div className="min-w-0">
                  <div className="truncate font-medium">{m.name}</div>
                  <div className="mt-1 text-xs text-muted">
                    {t.monsters.exp}: {m.exp.toLocaleString()}
                  </div>
                  <div className="text-xs text-muted">
                    {t.monsters.health}: {m.health.toLocaleString()}
                  </div>
                </div>
              </Link>
            ))}
          </div>
        )}
      </main>
      <Footer />
    </div>
  );
}
// END CHANGE