// BEGIN CHANGE: pagina NPCs (spawn + outfit + roles)
"use client";

import { useEffect, useMemo, useState } from "react";
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 NpcRole =
  | "sellsItems"
  | "buysItems"
  | "spells"
  | "travel"
  | "bank"
  | "bless"
  | "promotion"
  | "tasks"
  | "addons"
  | "wedding"
  | "arena"
  | "mail"
  | "furniture";

type NpcRow = {
  name: string;
  positions: { x: number; y: number; z: number }[];
  script: string | null;
  looktype: number | null;
  look: Look | null;
  greet: string | null;
  roles: NpcRole[];
};

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

  useEffect(() => {
    fetch(apiUrl("npcs.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 roleLabel = (role: NpcRole) => {
    const map = t.npcsCatalog.roles as Record<string, string>;
    return map[role] ?? role;
  };

  const filtered = useMemo(() => {
    const q = query.trim().toLowerCase();
    if (!q) return rows;
    return rows.filter((n) => {
      if (n.name.toLowerCase().includes(q)) return true;
      if (n.greet && n.greet.toLowerCase().includes(q)) return true;
      return n.roles.some((r) => roleLabel(r).toLowerCase().includes(q) || r.toLowerCase().includes(q));
    });
  }, [rows, query, t]);

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

        <input
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder={t.npcsCatalog.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 gap-3 sm:grid-cols-2">
            {filtered.map((n) => (
              <div key={n.name} className="rounded-xl border border-border bg-panel p-4">
                <div className="flex items-start gap-3">
                  <div className="grid h-20 w-20 shrink-0 place-items-center">
                    {n.look ? (
                      <Outfit look={n.look} size="grid" alt={n.name} />
                    ) : (
                      <div className="text-xs text-muted">-</div>
                    )}
                  </div>
                  <div className="min-w-0 flex-1">
                    <div className="font-semibold text-brand">{n.name}</div>
                    {n.roles.length > 0 && (
                      <div className="mt-2 flex flex-wrap gap-1.5">
                        {n.roles.map((r) => (
                          <span
                            key={r}
                            className="rounded bg-brand/15 px-2 py-0.5 text-[11px] font-medium text-brand"
                          >
                            {roleLabel(r)}
                          </span>
                        ))}
                      </div>
                    )}
                    {n.greet && (
                      <p className="mt-2 text-xs leading-relaxed text-muted">{n.greet}</p>
                    )}
                    <div className="mt-2 space-y-1 text-xs text-muted">
                      {n.positions.slice(0, 3).map((p, i) => (
                        <div key={i}>
                          {t.npcsCatalog.pos}: {p.x}, {p.y}, {p.z}
                        </div>
                      ))}
                      {n.positions.length > 3 && (
                        <div>
                          +{n.positions.length - 3} {t.npcsCatalog.moreSpawns}
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </main>
      <Footer />
    </div>
  );
}
// END CHANGE