import { useMemo } from "react";
import { CopyChecklistItemsButton } from "../CopyChecklistItemsButton.jsx";
import { GameBreadcrumb } from "../GameBreadcrumb.jsx";
import { Diablo4AffixCard } from "./Diablo4AffixCard.jsx";
import { Diablo4Filters } from "./Diablo4Filters.jsx";
import { getCategoryLabel, getFilteredDiablo4Affixes } from "./utils.js";

export function Diablo4Listing({ game, diablo4, filters, setFilters }) {
  const activeFilters = filters.diablo4;
  const options = [...(diablo4.filterOptions.affixes || [])].sort((a, b) => getCategoryLabel(a).localeCompare(getCategoryLabel(b), "fr"));
  const visible = useMemo(
    () => getFilteredDiablo4Affixes({ affixes: diablo4.affixes, filters: activeFilters }),
    [diablo4.affixes, activeFilters]
  );

  return (
    <>
      <section className="page-heading game-heading">
        <div>
          <GameBreadcrumb game={game} />
          <div className="game-title-row">
            <h1>Affixes</h1>
            <span className="results-count">{visible.length} / {diablo4.affixes.length}</span>
            <CopyChecklistItemsButton labels={visible.map((affix) => affix.label)} title="Copier les affixes visibles pour checklist" />
          </div>
          <p>Filtrez les affixes par nom et catégories pour retrouver rapidement les statistiques utiles à votre build.</p>
        </div>
      </section>
      <section className="game-layout diablo4-layout" data-game-category="diablo4-affixes">
        <aside className="game-filters">
          <Diablo4Filters options={options} filters={activeFilters} setFilters={setFilters} />
        </aside>
        <section className="game-results" aria-live="polite">
          <div className="game-grid diablo4-affix-grid">
            {visible.length ? visible.map((affix) => (
              <Diablo4AffixCard key={affix.id} affix={affix} categoryMap={diablo4.categoryMap} />
            )) : (
              <div className="empty">
                <h2>Aucun résultat</h2>
                <p>Ajustez la recherche ou réinitialisez les filtres actifs.</p>
              </div>
            )}
          </div>
        </section>
      </section>
    </>
  );
}