import { useMemo } from "react";
import { EndemicCard } from "./cards/EndemicCard.jsx";
import { MonsterCard } from "./cards/MonsterCard.jsx";
import { MhwildsFilters } from "./MhwildsFilters.jsx";
import { getFilteredMhwildsItems, getMhwildsFilterKey, getUniqueConditionValues } from "./utils.js";

export function MhwildsListing({ category, mhwilds, filters, setFilters, t }) {
  const isMonsters = category === "monsters";
  const filterKey = getMhwildsFilterKey(category, mhwilds);
  const items = isMonsters ? mhwilds.monsters : mhwilds.endemic;
  const options = (mhwilds.filterOptions?.[category]?.length ? mhwilds.filterOptions[category] : getUniqueConditionValues(items, filterKey, t))
    .filter((value) => value !== "none")
    .sort((a, b) => t(a).localeCompare(t(b), "fr"));
  const visible = useMemo(() => getFilteredMhwildsItems({ category, filterKey, mhwilds, filters, t }), [category, filterKey, mhwilds, filters, t]);
  const label = isMonsters ? t("monsters", { capitalize: true }) : t("endemic_life", { capitalize: true });

  return (
    <>
      <section className="page-heading game-heading">
        <div>
          <p className="eyebrow">Monster Hunter Wilds</p>
          <div className="game-title-row">
            <h1>{label}</h1>
            <span className="results-count">{visible.length} / {items.length}</span>
          </div>
          <p>{isMonsters ? "Filtrez les monstres par nom et faiblesses, puis consultez leurs dégâts détaillés." : "Filtrez la faune par nom et zones d'apparition."}</p>
        </div>
        <div className="actions">
          <a className={`button ${isMonsters ? "primary" : ""}`} href="#/games/mhwilds/monsters">Monstres</a>
          <a className={`button ${!isMonsters ? "primary" : ""}`} href="#/games/mhwilds/endemic">Faune</a>
        </div>
      </section>
      <section className="game-layout" data-mhwilds-category={category}>
        <aside className="game-filters">
          <MhwildsFilters category={category} filterKey={filterKey} options={options} filters={filters} setFilters={setFilters} t={t} />
        </aside>
        <section className="game-results" aria-live="polite">
          <div className={`game-grid ${isMonsters ? "monster-grid" : "endemic-grid"}`}>
            {visible.length ? visible.map((item) => (
              isMonsters
                ? <MonsterCard key={item.name} monster={item} t={t} />
                : <EndemicCard key={item.name} item={item} t={t} />
            )) : (
              <div className="empty">
                <h2>Aucun résultat</h2>
                <p>Ajustez la recherche ou réinitialisez les filtres actifs.</p>
              </div>
            )}
          </div>
        </section>
      </section>
    </>
  );
}