/* Artist directory: browse, filter, search. Two layouts: gallery grid / index list. */

function DirectoryPage({ data, navigate, dark, route, globalSearch, directoryLayout }) {
  const [q, setQ] = React.useState(globalSearch || "");
  const [field, setField] = React.useState(route.field || "All");
  const [country, setCountry] = React.useState("All");
  const [style, setStyle] = React.useState("All");
  const [avail, setAvail] = React.useState("all"); // all | forsale
  const [featuredOnly, setFeaturedOnly] = React.useState(false);
  const [maxPrice, setMaxPrice] = React.useState(15000);
  const [sort, setSort] = React.useState("featured");
  const [filtersOpen, setFiltersOpen] = React.useState(false);
  const [page, setPage] = React.useState(1);
  const PAGE_SIZE = 24;

  React.useEffect(() => {
    if (route.field) setField(route.field);
  }, [route.field]);
  React.useEffect(() => {
    if (globalSearch) setQ(globalSearch);
  }, [globalSearch]);

  const cheapest = (a) => {
    const ps = a.works.filter((w) => w.forSale).map((w) => w.price);
    return ps.length ? Math.min(...ps) : Infinity;
  };

  let results = data.artists.filter((a) => {
    if (field !== "All" && a.field !== field) return false;
    if (country !== "All" && a.country !== country) return false;
    if (style !== "All" && a.style !== style) return false;
    if (featuredOnly && !a.featured) return false;
    if (avail === "forsale" && a.worksForSale === 0) return false;
    if (maxPrice < 15000 && cheapest(a) > maxPrice) return false;
    if (q.trim()) {
      const hay = `${a.name} ${a.field} ${a.style} ${a.city} ${a.country}`.toLowerCase();
      if (!hay.includes(q.trim().toLowerCase())) return false;
    }
    return true;
  });

  results = results.slice().sort((a, b) => {
    if (sort === "featured") return (b.featured ? 1 : 0) - (a.featured ? 1 : 0) || a.name.localeCompare(b.name);
    if (sort === "name") return a.name.localeCompare(b.name);
    if (sort === "price") return cheapest(a) - cheapest(b);
    if (sort === "young") return b.born - a.born;
    return 0;
  });

  const activeFilterCount =
    (field !== "All") + (country !== "All") + (style !== "All") +
    (avail !== "all") + (featuredOnly ? 1 : 0) + (maxPrice < 15000 ? 1 : 0);

  const reset = () => {
    setField("All"); setCountry("All"); setStyle("All"); setAvail("all");
    setFeaturedOnly(false); setMaxPrice(15000); setQ(""); setPage(1);
  };

  React.useEffect(() => { setPage(1); }, [q, field, country, style, avail, featuredOnly, maxPrice, sort]);

  const Filters = (
    <div className="filters">
      <div className="filter-group">
        <Eyebrow>Search</Eyebrow>
        <input
          className="filter-search"
          placeholder="Name, city, field…"
          value={q}
          onChange={(e) => setQ(e.target.value)}
        />
      </div>

      <div className="filter-group">
        <Eyebrow>Field</Eyebrow>
        <div className="chip-wrap">
          {["All", ...data.FIELDS].map((f) => (
            <button key={f} className={"chip" + (field === f ? " on" : "")} onClick={() => setField(f)}>
              {f}
            </button>
          ))}
        </div>
      </div>

      <div className="filter-group">
        <Eyebrow>Location</Eyebrow>
        <select className="filter-select" value={country} onChange={(e) => setCountry(e.target.value)}>
          <option value="All">All countries</option>
          {data.countries.map((c) => (
            <option key={c} value={c}>{c}</option>
          ))}
        </select>
      </div>

      <div className="filter-group">
        <Eyebrow>Style / movement</Eyebrow>
        <select className="filter-select" value={style} onChange={(e) => setStyle(e.target.value)}>
          <option value="All">All styles</option>
          {data.STYLES.map((s) => (
            <option key={s} value={s}>{s}</option>
          ))}
        </select>
      </div>

      <div className="filter-group">
        <Eyebrow>Availability</Eyebrow>
        <div className="seg">
          <button className={avail === "all" ? "on" : ""} onClick={() => setAvail("all")}>All</button>
          <button className={avail === "forsale" ? "on" : ""} onClick={() => setAvail("forsale")}>For sale</button>
        </div>
      </div>

      <div className="filter-group">
        <Eyebrow>Max price · {maxPrice >= 15000 ? "Any" : fmt(maxPrice)}</Eyebrow>
        <input
          type="range" min="500" max="15000" step="100" value={maxPrice}
          className="filter-range"
          onChange={(e) => setMaxPrice(Number(e.target.value))}
        />
      </div>

      <label className="filter-check">
        <input type="checkbox" checked={featuredOnly} onChange={(e) => setFeaturedOnly(e.target.checked)} />
        <span>Featured only</span>
      </label>

      {activeFilterCount > 0 && (
        <button className="link-btn reset" onClick={reset}>Clear all filters ✕</button>
      )}
    </div>
  );

  return (
    <div className="directory">
      <div className="dir-masthead">
        <Eyebrow>The index · {data.artists.length} artists · {data.countries.length} countries</Eyebrow>
        <h1 className="dir-title">ARTISTS</h1>
      </div>

      <div className="dir-toolbar">
        <button className="filters-toggle" onClick={() => setFiltersOpen((o) => !o)}>
          Filters {activeFilterCount > 0 && <span className="ft-badge">{activeFilterCount}</span>}
        </button>
        <span className="dir-result-count">{results.length} result{results.length === 1 ? "" : "s"}</span>
        <div className="dir-sort">
          <span className="sort-label">Sort</span>
          <select className="filter-select small" value={sort} onChange={(e) => setSort(e.target.value)}>
            <option value="featured">Featured</option>
            <option value="name">A–Z</option>
            <option value="price">Price (low)</option>
            <option value="young">Newest artists</option>
          </select>
        </div>
      </div>

      <div className="dir-body">
        <aside className={"dir-aside" + (filtersOpen ? " open" : "")}>{Filters}</aside>

        <div className="dir-results">
          {results.length === 0 ? (
            <div className="no-results">
              <h3>No artists match.</h3>
              <button className="btn-ghost" onClick={reset}>Clear filters</button>
            </div>
          ) : (() => {
            const totalPages = Math.ceil(results.length / PAGE_SIZE);
            const paged = results.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
            const startNum = (page - 1) * PAGE_SIZE;
            return (
              <React.Fragment>
                {directoryLayout === "index" ? (
                  <div className="index-list">
                    <div className="index-head">
                      <span>Artist</span>
                      <span className="ih-field">Field</span>
                      <span className="ih-loc">Location</span>
                      <span className="ih-works">Works</span>
                    </div>
                    {paged.map((a, i) => (
                      <button key={a.id} className="index-row" onClick={() => navigate({ name: "profile", slug: a.slug })}>
                        <span className="ir-num">{String(startNum + i + 1).padStart(2, "0")}</span>
                        <span className="ir-name">{a.name}{a.featured && <i className="ir-star">★</i>}</span>
                        <span className="ir-field">{a.field}</span>
                        <span className="ir-loc">{a.flag} {a.city}{a.city && a.country ? ", " : ""}{a.country}</span>
                        <span className="ir-works">{a.works.length}{a.worksForSale ? ` · ${a.worksForSale}♦` : ""}</span>
                        <span className="ir-arrow"><ArrowIcon /></span>
                      </button>
                    ))}
                  </div>
                ) : (
                  <div className="artist-grid dir-grid">
                    {paged.map((a) => (
                      <ArtistCard key={a.id} artist={a} navigate={navigate} dark={dark} />
                    ))}
                  </div>
                )}
                <Pagination page={page} totalPages={totalPages} onChange={setPage} />
              </React.Fragment>
            );
          })()}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { DirectoryPage });