// Top-level app: state, GSAP triggers, mounts everything.

const { useState, useEffect, useRef } = React;

function App() {
  const [cart, setCart] = useState([]);
  const [drawerOpen, setDrawerOpen] = useState(false);
  const [bumping, setBumping] = useState(false);
  const [toast, setToast] = useState(null);
  const bumpTimer = useRef(null);
  const toastTimer = useRef(null);

  // Exhibit dumpster refs (scroll-driven lid + contents)
  const exhibitRef = useRef(null);
  const lidRef = useRef(null);
  const contentsRef = useRef(null);

  // Detect coarse-pointer / touch — disable cursor flies, keep everything else
  const [isTouch, setIsTouch] = useState(false);
  useEffect(() => {
    if (typeof window === "undefined" || !window.matchMedia) return;
    const mql = window.matchMedia("(hover: none), (pointer: coarse)");
    const set = () => setIsTouch(mql.matches);
    set();
    mql.addEventListener ? mql.addEventListener("change", set) : mql.addListener(set);
    return () => {
      mql.removeEventListener ? mql.removeEventListener("change", set) : mql.removeListener(set);
    };
  }, []);

  // Reveal-on-scroll
  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("in");
            observer.unobserve(entry.target);
          }
        });
      },
      { threshold: 0.1, rootMargin: "0px 0px -40px 0px" }
    );
    document.querySelectorAll(".reveal:not(.in)").forEach((el) => observer.observe(el));
    return () => observer.disconnect();
  }, []);

  // GSAP scroll triggers — Exhibit dumpster lid open + contents reveal
  useEffect(() => {
    if (!window.gsap || !window.ScrollTrigger) return;
    gsap.registerPlugin(ScrollTrigger);
    const triggers = [];

    if (lidRef.current && exhibitRef.current) {
      const t = gsap.fromTo(
        lidRef.current,
        { rotate: 0 },
        {
          rotate: -110,
          ease: "none",
          scrollTrigger: {
            trigger: exhibitRef.current,
            start: "top 80%",
            end: "bottom 30%",
            scrub: true,
          },
        }
      );
      triggers.push(t);
    }
    if (contentsRef.current && exhibitRef.current) {
      const t = gsap.fromTo(
        contentsRef.current,
        { opacity: 0, y: 30 },
        {
          opacity: 1, y: 0, ease: "none",
          scrollTrigger: {
            trigger: exhibitRef.current,
            start: "top 50%",
            end: "bottom 40%",
            scrub: true,
          },
        }
      );
      triggers.push(t);
    }

    return () => triggers.forEach((t) => t && t.scrollTrigger && t.scrollTrigger.kill());
  }, []);

  const cartCount = cart.reduce((s, it) => s + it.qty, 0);

  const addToCart = (p) => {
    setCart((prev) => {
      const idx = prev.findIndex((i) => i.cat === p.cat);
      if (idx >= 0) {
        const next = [...prev];
        next[idx] = { ...next[idx], qty: next[idx].qty + 1 };
        return next;
      }
      return [...prev, { cat: p.cat, name: p.name, price: p.price, qty: 1 }];
    });
    setBumping(true);
    clearTimeout(bumpTimer.current);
    bumpTimer.current = setTimeout(() => setBumping(false), 540);

    setToast({ cat: p.cat, name: p.name, price: p.price, id: Date.now() });
    clearTimeout(toastTimer.current);
    toastTimer.current = setTimeout(() => setToast(null), 3000);
  };

  const removeFromCart = (idx) => setCart((prev) => prev.filter((_, i) => i !== idx));
  const checkout = () => {
    alert("Manifest signed. (Prototype — Shopify checkout would take over here.)");
  };

  return (
    <React.Fragment>
      <Marquee />
      <Nav cartCount={cartCount} bumping={bumping} onCartClick={() => setDrawerOpen(true)} />
      <Hero />
      <Exhibit exhibitRef={exhibitRef} lidRef={lidRef} contentsRef={contentsRef} />
      <FounderNote />
      <Shop onAdd={addToCart} />
      <Newsletter />
      <PodcastTeaser />
      <Footer />

      <CartDrawer
        open={drawerOpen}
        items={cart}
        onClose={() => setDrawerOpen(false)}
        onRemove={removeFromCart}
        onCheckout={checkout}
      />

      {!isTouch && <FlySwarm count={5} />}

      <div className={`add-toast ${toast ? "in" : ""}`} role="status" aria-live="polite">
        {toast && (
          <React.Fragment>
            <div className="add-toast-head">
              <span><span className="check" aria-hidden>✓</span>&nbsp; ADDED TO HAUL</span>
              <span>NO. {toast.cat}</span>
            </div>
            <div className="add-toast-body">
              <div>
                <div className="add-toast-name">{toast.name}</div>
                <div className="add-toast-cat">QTY 1 · CONFIRMED</div>
              </div>
              <div className="add-toast-price">${toast.price}</div>
            </div>
            <div className="add-toast-foot">
              <span>TICKET · LOGGED</span>
              <button
                onClick={() => { setToast(null); setDrawerOpen(true); }}
                className="swarm"
              >
                View Haul →
              </button>
            </div>
          </React.Fragment>
        )}
      </div>
    </React.Fragment>
  );
}

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