/* global React, ReactDOM, WORKS, ArtworkViewer, Footer, SiteHeader, PHOTOS, Pill */
const { useState, useMemo } = React;

// ─── fixed curatorial order for category groups ────────────────
const CATEGORY_ORDER = [
  "New Work", "Tarp", "People", "Portraits", "Color Collision", "Animals", "Sports", "Architecture",
];

// ─── sort definitions ──────────────────────────────────────────
const SORT_OPTS = [
  { value: "newest", label: "Newest first" },
  { value: "oldest", label: "Oldest first" },
  { value: "title",  label: "Title A\u2013Z" },
];

function sortWorks(list, sort) {
  const out = [...list];
  if (sort === "newest") out.sort((a, b) => Number(b.year) - Number(a.year));
  else if (sort === "oldest") out.sort((a, b) => Number(a.year) - Number(b.year));
  else if (sort === "title") out.sort((a, b) => a.title.localeCompare(b.title));
  return out;
}

// ─── a single grid tile ────────────────────────────────────────
function IGTile({ work, onOpen }) {
  return (
    <a className="ig-tile" href={"#" + work.id} onClick={(e) => { e.preventDefault(); onOpen(work); }}>
      <img className="ig-tile__media" src={work.src} alt={work.title} loading="lazy" />
      <div className="ig-tile__cap">
        <span className="name">{work.title}</span>
        <span className="sep">|</span>
        <span className="meta">{work.dimension}</span>
      </div>
    </a>
  );
}

// ─── app ───────────────────────────────────────────────────────
function IGApp() {
  const initial = useMemo(() => {
    try {
      const q = new URLSearchParams(window.location.search);
      const v = q.get("view");
      return {
        view: v && v.toLowerCase() === "for sale" ? "For Sale" : "All Art",
        category: q.get("category"),
      };
    } catch (e) { return { view: "All Art", category: null }; }
  }, []);

  const [view, setView] = useState(initial.view);
  const [sort, setSort] = useState("newest");
  const [open, setOpen] = useState(null);
  const [photoIndex, setPhotoIndex] = useState(null);
  const category = initial.category;

  const items = useMemo(() => {
    let pool = view === "For Sale" ? WORKS.filter((w) => w.status === "Available") : WORKS;
    if (category) pool = pool.filter((w) => w.category && w.category.toLowerCase() === category.toLowerCase());
    return sortWorks(pool, sort);
  }, [view, sort, category]);

  // group into rows by category, in a fixed curatorial order, unless a
  // single category is already selected (then just one flat row of results)
  const groups = useMemo(() => {
    if (category) return [{ name: category, items }];
    const map = {};
    const order = [];
    items.forEach((w) => {
      const name = w.category || "Other";
      if (!map[name]) { map[name] = []; order.push(name); }
      map[name].push(w);
    });
    const ranked = order.slice().sort((a, b) => {
      const ia = CATEGORY_ORDER.indexOf(a);
      const ib = CATEGORY_ORDER.indexOf(b);
      if (ia === -1 && ib === -1) return 0;
      if (ia === -1) return 1;
      if (ib === -1) return -1;
      return ia - ib;
    });
    return ranked.map((name) => ({ name, items: map[name] }));
  }, [items, category]);

  // flat, row-by-row order (matches the grouped layout) so prev/next in the
  // lightbox walks each row left-to-right, then continues into the next row
  const flatOrder = useMemo(() => groups.flatMap((g) => g.items), [groups]);

  return (
    <div className={"ig" + (view === "For Sale" ? " ig--forsale" : "")}>
      <SiteHeader
        current="Artwork"
        view={view}
        onView={setView}
        photoIndex={photoIndex}
        onOpenPhoto={(w) => setPhotoIndex(PHOTOS.findIndex((p) => p.id === w.id))}
        onClosePhoto={() => setPhotoIndex(null)}
      />

      {category && (
        <div className="ig__catbar">
          Showing <strong>{category}</strong> <a href="Artwork.html">View all</a>
        </div>
      )}

      {items.length === 0 ? (
        <div className="ig__empty">
          <p>Nothing currently for sale.</p>
          <button className="ig__clear" onClick={() => setView("All Art")}>Show all art</button>
        </div>
      ) : (
        <div className="ig__groups">
          {groups.map((g) => (
            <section className="ig__group" key={g.name}>
              <h2 className="ig__group-title">{g.name}</h2>
              <div className="ig__row">
                {g.items.map((w) => <IGTile key={w.id} work={w} onOpen={setOpen} />)}
              </div>
            </section>
          ))}
        </div>
      )}

      <div className="ig__footer-band">
        <Footer />
      </div>

      <ArtworkViewer
        work={open}
        onClose={() => setOpen(null)}
        onPrev={open ? () => {
          const i = flatOrder.findIndex((w) => w.id === open.id);
          if (i === -1) return;
          setOpen(flatOrder[(i - 1 + flatOrder.length) % flatOrder.length]);
        } : undefined}
        onNext={open ? () => {
          const i = flatOrder.findIndex((w) => w.id === open.id);
          if (i === -1) return;
          setOpen(flatOrder[(i + 1) % flatOrder.length]);
        } : undefined}
      />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<IGApp />);