/* global React, ReactDOM, BeforeAfter, PageNav, PageFooter, PageCTA, useAppTweaks, AppTweaks */
const { useState, useMemo, useEffect } = React;

// Display order: Kitchen + Bath lead because they sell houses.
const FILTER_ORDER = ["All", "Kitchen", "Bath", "Living Room", "Bedroom", "Exterior", "Dining", "Entry", "Bonus"];

function App() {
  const [tweaks, setTweak] = useAppTweaks();
  const [manifest, setManifest] = useState([]);
  const [filter, setFilter] = useState("All");

  useEffect(() => {
    fetch("gallery-manifest.json")
      .then((r) => r.json())
      .then(setManifest)
      .catch(() => setManifest([]));
  }, []);

  const items = useMemo(
    () => filter === "All" ? manifest : manifest.filter((s) => s.category === filter),
    [filter, manifest]
  );

  const counts = useMemo(() => {
    const c = { All: manifest.length };
    for (const s of manifest) c[s.category] = (c[s.category] || 0) + 1;
    return c;
  }, [manifest]);

  // Only show filters that actually have content
  const filters = FILTER_ORDER.filter((f) => f === "All" || counts[f]);

  return (
    <>
      <PageNav current="gallery" />
      <main>
        <header className="page-hero">
          <p className="page-hero-eyebrow">Gallery</p>
          <h1 className="page-hero-h"><em>Real rooms.</em> Real pixels. Drag to compare.</h1>
          <p className="page-hero-sub">
            Every photo started as something an agent would quietly ask the seller to reshoot — phone-camera lighting, weird color casts, blown-out windows, gloomy skies. We fixed them in about 20 seconds each. No staging, no AI inventions. Filter by room to see how the model handles your situation.
          </p>
        </header>

        <section className="gallery-deep">
          <div className="gallery-filters" role="tablist" aria-label="Filter by room">
            {filters.map((f) => (
              <button
                key={f}
                role="tab"
                aria-selected={filter === f}
                className={`gallery-filter ${filter === f ? "is-active" : ""}`}
                onClick={() => setFilter(f)}
              >
                {f}
                <span className="gallery-filter-count">{counts[f] || 0}</span>
              </button>
            ))}
          </div>

          <div className="gallery-grid">
            {items.map((s, i) => (
              <article key={s.before} className="gallery-item">
                <div className="gallery-item-frame">
                  <BeforeAfter
                    beforeSrc={s.before}
                    afterSrc={s.after}
                    beforeLabel="BEFORE"
                    afterLabel="PIXFIXCO"
                    aspect="4 / 3"
                    initial={48}
                  />
                </div>
                <div className="gallery-item-meta">
                  <span className="gallery-item-room">{s.category}</span>
                  <span className="mono" style={{ color: "var(--ink-3)", fontSize: 11 }}>
                    #{String(i + 1).padStart(3, "0")}
                  </span>
                </div>
              </article>
            ))}
          </div>

          {items.length === 0 && manifest.length > 0 && (
            <p style={{ textAlign: "center", color: "var(--ink-3)", padding: "64px 0" }}>
              No samples in this category yet — but our model handles it. Try one yourself.
            </p>
          )}
          {manifest.length === 0 && (
            <p style={{ textAlign: "center", color: "var(--ink-3)", padding: "64px 0" }}>
              Loading gallery…
            </p>
          )}
        </section>

        <PageCTA
          kicker="See it on yours"
          headline={<>Your photo. <em>Your before-after.</em></>}
          primary={{ label: "Fix one photo, free", href: "index.html#try" }}
          secondary={{ label: "Or batch a listing →", href: "/order" }}
        />
      </main>
      <PageFooter />
      <AppTweaks tweaks={tweaks} setTweak={setTweak} pageContext="sub" />
    </>
  );
}

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