/* ============================================================
   COMMONS — Discover (events) view + Event detail
   ============================================================ */

function FilterBar({ cat, setCat, day, setDay }) {
  return (
    <div className="filterbar">
      <div className="filter-cats">
        {CATEGORIES.map(c => (
          <button key={c} className="chip" data-on={cat === c} onClick={() => setCat(c)}>
            {c === "All" && <Icon name="bolt" size={14} />}{c}
          </button>
        ))}
      </div>
      <div className="filter-days">
        {DAYS.map(d => (
          <button key={d} className="seg" data-on={day === d} onClick={() => setDay(d)}>{d}</button>
        ))}
      </div>
    </div>
  );
}

function EventCard({ ev, i, onOpen, fav, toggleFav }) {
  return (
    <article className="ev-card" style={{ "--i": i }} onClick={() => onOpen(ev.id)}>
      <Cover seed={ev.id} aspect="16 / 11" radius="12px" className="ev-cover">
        <div className="ev-cover-top">
          <span className="ev-date-chip">
            <b>{ev.date.split(", ")[1].split(" ")[1]}</b>
            <span>{ev.date.split(", ")[1].split(" ")[0]}</span>
          </span>
          <button className={"ev-fav" + (fav ? " on" : "")} onClick={(e) => { e.stopPropagation(); toggleFav(ev.id); }} aria-label="Save">
            <Icon name="heart" size={17} />
          </button>
        </div>
        <div className="ev-cover-cat">{ev.cat}</div>
      </Cover>
      <div className="ev-body">
        <h3 className="ev-title serif">{ev.title}</h3>
        <div className="ev-meta">
          <span><Icon name="clock" size={14} />{ev.time}</span>
          <span><Icon name="pin" size={14} />{ev.dist}</span>
        </div>
        <div className="ev-foot">
          <div className="ev-host">
            <Avatar seed={ev.hostU} label={ev.host} size={22} />
            <span>{ev.host}</span>
          </div>
          <span className="ev-price" data-free={ev.price === "Free"}>{ev.price}</span>
        </div>
      </div>
    </article>
  );
}

function FeatureEvent({ ev, onOpen, fav, toggleFav }) {
  return (
    <article className="feature" onClick={() => onOpen(ev.id)}>
      <Cover seed={ev.id} aspect="auto" radius="0" className="feature-cover">
        <div className="feature-overlay" />
        <div className="feature-content">
          <span className="feature-flag"><Icon name="flame" size={14} /> Featured this week</span>
          <h2 className="feature-title serif">{ev.title}</h2>
          <p className="feature-blurb">{ev.blurb}</p>
          <div className="feature-meta">
            <span><Icon name="calendar" size={15} />{ev.date} · {ev.time}</span>
            <span><Icon name="pin" size={15} />{ev.venue}</span>
            <span><Icon name="users" size={15} />{ev.going} going</span>
          </div>
          <div className="feature-actions">
            <button className="btn btn-primary" onClick={(e) => { e.stopPropagation(); onOpen(ev.id); }}>
              <Icon name="ticket" size={16} /> Get a spot · {ev.price}
            </button>
            <button className={"btn btn-ghost feature-save" + (fav ? " on" : "")} onClick={(e) => { e.stopPropagation(); toggleFav(ev.id); }}>
              <Icon name="heart" size={16} /> Save
            </button>
          </div>
        </div>
      </Cover>
    </article>
  );
}

function Discover({ go, favs, toggleFav }) {
  const [cat, setCat] = useState("All");
  const [day, setDay] = useState("Any day");
  const feature = EVENTS.find(e => e.id === "e4") || EVENTS[0];
  let city = "Worldwide";
  try { city = localStorage.getItem("ipanjab_city") || "Worldwide"; } catch (e) {}
  let list = EVENTS.filter(e => feature && e.id !== feature.id);
  if (cat !== "All") list = list.filter(e => e.cat === cat);
  if (city !== "Worldwide") list = list.filter(e => e.dist === city);

  return (
    <div className="view discover">
      {/* Hero */}
      <section className="hero">
        <div className="shell hero-inner">
          <div className="hero-copy">
            <span className="kicker" style={{ "--i": 0 }}>Punjabi diaspora · worldwide · this season</span>
            <h1 className="hero-title serif" style={{ "--i": 1 }}>
              Find your<br /><span className="italic">pind</span>, wherever you are.
            </h1>
            <p className="hero-sub" style={{ "--i": 2 }}>
              The melas, concerts, mehfils and stories that keep Punjab close —
              for Punjabis everywhere, all in one place.
            </p>
            <div className="hero-search" style={{ "--i": 3 }}>
              <Icon name="search" size={19} />
              <input placeholder="Try ‘kabaddi’, ‘comedy’, ‘Diljit’…" />
              <button className="btn btn-primary">Search</button>
            </div>
            <div className="hero-stats" style={{ "--i": 4 }}>
              <span><b>120+</b> events worldwide</span>
              <span className="dot" />
              <span><b>50k</b> in the sangat</span>
              <span className="dot" />
              <span><b>6</b> communities</span>
            </div>
          </div>
          <div className="hero-deck" aria-hidden="true">
            {["e2", "e8", "e3"].map((id, i) => {
              const ev = EVENTS.find(e => e.id === id);
              return (
                <div key={id} className={"deck-card deck-" + i} style={{ "--i": 5 + i }} onClick={() => go("discover/" + id)}>
                  <Cover seed={id} aspect="3 / 4" radius="16px">
                    <div className="deck-cat">{ev.cat}</div>
                    <div className="deck-foot">
                      <b className="serif">{ev.title.split("—")[0].split(",")[0]}</b>
                      <span>{ev.date} · {ev.going} going</span>
                    </div>
                  </Cover>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      <div className="shell">
        <FilterBar cat={cat} setCat={setCat} day={day} setDay={setDay} />

        {cat === "All" && feature && (city === "Worldwide" || feature.dist === city) && (
          <Reveal className="feature-wrap">
            <FeatureEvent ev={feature} onOpen={(id) => go("discover/" + id)} fav={favs.has(feature.id)} toggleFav={toggleFav} />
          </Reveal>
        )}

        <div className="section-head">
          <h2 className="serif">{cat === "All" ? "Happening near you" : cat}</h2>
          <span className="section-count">{list.length} events</span>
        </div>

        <div className="ev-grid">
          {list.map((ev, i) => (
            <EventCard key={ev.id} ev={ev} i={i} onOpen={(id) => go("discover/" + id)} fav={favs.has(ev.id)} toggleFav={toggleFav} />
          ))}
        </div>
        {list.length === 0 && <div className="empty">No {cat.toLowerCase()} events this week — try another filter.</div>}
      </div>
    </div>
  );
}

/* ---------- Event detail ---------- */
function EventDetail({ id, go, favs, toggleFav }) {
  const ev = EVENTS.find(e => e.id === id) || EVENTS[0];
  const user = (typeof window !== "undefined" && window.__USER__) || null;
  const [rsvp, setRsvp] = useState(!!ev.rsvped);
  const [going, setGoing] = useState(ev.going || 0);
  const [rsvpBusy, setRsvpBusy] = useState(false);
  const doRsvp = async () => {
    if (rsvpBusy) return;
    if (!user) { document.dispatchEvent(new CustomEvent("ipanjab:auth")); return; }
    setRsvpBusy(true);
    const was = rsvp, prev = going;
    setRsvp(!was); setGoing(was ? prev - 1 : prev + 1);
    try {
      const r = await fetch("/api/rsvp", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ id: ev._id }) });
      const j = await r.json();
      if (r.ok) { setGoing(j.going); setRsvp(j.rsvped); } else { setRsvp(was); setGoing(prev); }
    } catch (_) { setRsvp(was); setGoing(prev); }
    setRsvpBusy(false);
  };
  const fav = favs.has(ev.id);
  const others = EVENTS.filter(e => e.id !== ev.id && e.cat === ev.cat).slice(0, 3);
  const more = (others.length ? others : EVENTS.filter(e => e.id !== ev.id)).slice(0, 3);

  return (
    <div className="view detail">
      <div className="shell">
        <button className="back" onClick={() => go("discover")}><Icon name="arrowLeft" size={16} /> All events</button>
        <div className="detail-grid">
          <div className="detail-main">
            <Cover seed={ev.id} aspect="16 / 8" radius="var(--radius-lg)" className="detail-cover">
              <div className="detail-cat">{ev.cat}</div>
            </Cover>
            <span className="kicker" style={{ marginTop: 26, display: "block" }}>{ev.date} · {ev.time}</span>
            <h1 className="detail-title serif">{ev.title}</h1>
            <p className="detail-blurb">{ev.blurb}</p>

            <div className="detail-section">
              <h3>About this gathering</h3>
              <p>{ev.blurb} Doors open 30 minutes early. Come as you are, bring the parivaar — chah and seating provided. Accessible venue; reach out to the host for any accommodations.</p>
            </div>

            <div className="detail-host surface">
              <Avatar seed={ev.hostU} label={ev.host} size={48} />
              <div>
                <span className="kicker">Hosted by</span>
                <b className="serif">{ev.host}</b>
                <p>Bringing the sangat together since 2019 · 31 events hosted</p>
              </div>
              <button className="btn btn-soft">Follow</button>
            </div>
          </div>

          <aside className="detail-side">
            <div className="rsvp-card surface">
              <div className="rsvp-price">
                <b className="serif">{ev.price}</b>
                <span>{going} going · {Math.max(2, 60 - going)} spots left</span>
              </div>
              <button className={"btn rsvp-btn " + (rsvp ? "rsvp-on" : "btn-primary")} data-dim={rsvpBusy} onClick={doRsvp}>
                {rsvp ? (<><Icon name="check" size={18} /> You're going</>) : (<><Icon name="ticket" size={17} /> Reserve a spot</>)}
              </button>
              <div className="rsvp-row">
                <button className={"rsvp-2nd" + (fav ? " on" : "")} onClick={() => toggleFav(ev.id)}><Icon name="heart" size={16} /> Save</button>
                <button className="rsvp-2nd"><Icon name="share" size={16} /> Share</button>
              </div>
              <div className="rsvp-facts">
                <div><Icon name="calendar" size={17} /><div><b>{ev.date}</b><span>{ev.time}</span></div></div>
                <div><Icon name="pin" size={17} /><div><b>{ev.venue}</b><span>{ev.dist} away · Worldwide</span></div></div>
              </div>
              <div className="mini-map" aria-hidden="true">
                <div className="map-grid" />
                <span className="map-pin"><Icon name="pin" size={20} /></span>
              </div>
            </div>
            <div className="going-card surface">
              <span className="kicker">Who's going</span>
              <div className="going-avas">
                {["MO", "DL", "AS", "PN", "LO", "SS"].map((s, i) => <Avatar key={i} seed={s} size={36} />)}
                <span className="going-more">+{Math.max(0, going - 6)}</span>
              </div>
            </div>
          </aside>
        </div>

        <div className="section-head" style={{ marginTop: 56 }}>
          <h2 className="serif">More like this</h2>
        </div>
        <div className="ev-grid">
          {more.map((e, i) => (
            <EventCard key={e.id} ev={e} i={i} onOpen={(x) => go("discover/" + x)} fav={favs.has(e.id)} toggleFav={toggleFav} />
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Discover, EventDetail, EventCard });