/* ============================================================
   Events — events & travel we track. Each sources brand +
   agency targets (e.g. Super Bowl → 35 sponsors + their agencies).
   ============================================================ */
function Events({ lane, onDraft }) {
  const all = window.WTC.events;
  const [filter, setFilter] = React.useState("All");
  const [openId, setOpenId] = React.useState(null);
  const [toast, setToast] = React.useState(null);
  const flash = (m) => { setToast(m); setTimeout(() => setToast(null), 1700); };

  const rows = all.filter((e) => filter === "All" ? true : filter === "Events" ? e.type === "event" : e.type === "travel");
  const open = all.find((e) => e.id === openId);

  return (
    <div className="surface-scroll">
      <div className="today-head">
        <div>
          <h1 className="page-title">Events</h1>
          <p className="page-sub">Every event & travel window you track — each one sources the brands activating there and the agencies that build for them.</p>
        </div>
        <Segmented value={filter} onChange={setFilter} options={["All", "Events", "Travel"]} />
      </div>

      <div className="event-grid">
        {rows.map((e) => (
          <div key={e.id} className="event-card lift" onClick={() => setOpenId(e.id)}>
            <div style={{ display: "flex", alignItems: "flex-start", gap: 12 }}>
              <Avatar mono={e.mono} size={42} square />
              <div style={{ minWidth: 0, flex: 1 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <span style={{ fontSize: 15, fontWeight: 680, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{e.name}</span>
                  <LaneChip lane={e.type === "travel" ? "travel" : "event"} small />
                </div>
                <div style={{ fontSize: 11.5, color: "var(--text-3)", marginTop: 3, display: "flex", alignItems: "center", gap: 6 }}>
                  <Icon name="calendar" size={12} /> {e.date} · {e.location}
                </div>
              </div>
              {e.tracked
                ? <span className="ev-track" data-on><span className="stagedot" style={{ background: "var(--green)" }}></span>Tracking</span>
                : <span className="ev-track">Not tracked</span>}
            </div>
            <div className="ev-stats">
              {e.type === "event" && <div><span className="num ev-num">{e.sponsors}</span><span className="ev-lbl">sponsors</span></div>}
              <div><span className="num ev-num">{e.brands.length}</span><span className="ev-lbl">brands mapped</span></div>
              <div><span className="num ev-num">{e.agencies.length}</span><span className="ev-lbl">agencies</span></div>
            </div>
            <div className="ev-foot">
              <div className="ev-avatars">
                {e.brands.slice(0, 5).map((b, i) => <span key={i} className="ev-mini" style={{ marginLeft: i ? -8 : 0, zIndex: 5 - i }}><Avatar mono={b.mono} size={22} square /></span>)}
                {e.brands.length > 5 && <span className="ev-more">+{e.brands.length - 5}</span>}
              </div>
              <span className="cc-open">View roster <Icon name="chevronRight" size={13} /></span>
            </div>
          </div>
        ))}
      </div>

      {open && <EventDrawer e={open} onClose={() => setOpenId(null)} flash={flash} onDraft={onDraft} />}
      {toast && <div className="toast">{toast}</div>}
    </div>
  );
}

function EventDrawer({ e, onClose, flash, onDraft }) {
  const [added, setAdded] = React.useState({});
  const add = (key, name, kind) => { setAdded((a) => ({ ...a, [key]: true })); flash(name + " added to pipeline · " + kind); };
  return (
    <div className="drawer-scrim" onClick={onClose}>
      <div className="contact-drawer" onClick={(ev) => ev.stopPropagation()} style={{ width: "min(460px, 94%)" }}>
        <button className="btn btn--ghost btn--icon drawer-x" onClick={onClose}><Icon name="x" size={18} /></button>
        <div className="cd-head" style={{ alignItems: "center" }}>
          <Avatar mono={e.mono} size={50} square />
          <div style={{ minWidth: 0 }}>
            <div style={{ fontSize: 18, fontWeight: 720 }}>{e.name}</div>
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 5, flexWrap: "wrap" }}>
              <LaneChip lane={e.type === "travel" ? "travel" : "event"} small />
              <span style={{ fontSize: 12, color: "var(--text-2)", display: "inline-flex", alignItems: "center", gap: 5 }}><Icon name="calendar" size={12} /> {e.date}</span>
              <span style={{ fontSize: 12, color: "var(--text-3)" }}>{e.location}</span>
            </div>
          </div>
        </div>
        <p style={{ fontSize: 13, color: "var(--text-2)", lineHeight: 1.55, margin: "14px 0 4px" }}>{e.note}</p>
        {e.type === "event" && <div className="ev-callout"><Icon name="radar" size={14} style={{ color: "var(--accent)" }} /> {e.sponsors} sponsors activate here — Claude maps each one and the agency behind it.</div>}

        <div className="cd-section">
          <div className="cd-section-label">Activating brands · {e.brands.length}{e.type === "event" ? " of " + e.sponsors : ""}</div>
          {e.brands.map((b, i) => (
            <div key={i} className="ev-row">
              <Avatar mono={b.mono} size={28} square />
              <span style={{ fontSize: 13, fontWeight: 600, flex: 1 }}>{b.name}</span>
              {added["b" + i]
                ? <span style={{ fontSize: 12, color: "var(--green)", display: "inline-flex", alignItems: "center", gap: 5 }}><Icon name="check" size={13} /> Added</span>
                : <button className="btn btn--sm" onClick={() => add("b" + i, b.name, "Brand")}><Icon name="plus" size={13} /> Add</button>}
            </div>
          ))}
        </div>

        {e.agencies.length > 0 && (
          <div className="cd-section">
            <div className="cd-section-label">Agencies they work with · {e.agencies.length}</div>
            {e.agencies.map((a, i) => (
              <div key={i} className="ev-row">
                <div className="inbox-ava" style={{ width: 28, height: 28, color: "var(--lane-agency)", borderColor: "rgba(182,155,232,0.4)" }}><Icon name="building" size={14} /></div>
                <span style={{ fontSize: 13, fontWeight: 600, flex: 1 }}>{a.name}</span>
                {added["a" + i]
                  ? <span style={{ fontSize: 12, color: "var(--green)", display: "inline-flex", alignItems: "center", gap: 5 }}><Icon name="check" size={13} /> Added</span>
                  : <button className="btn btn--sm" onClick={() => add("a" + i, a.name, "Agency")}><Icon name="plus" size={13} /> Add</button>}
              </div>
            ))}
          </div>
        )}

        <button className="btn btn--primary" style={{ width: "100%", marginTop: 6 }} onClick={() => flash("Added all of " + e.name + "'s roster to the pipeline")}>
          <Icon name="plus" size={15} /> Add entire roster to pipeline
        </button>
      </div>
    </div>
  );
}
Object.assign(window, { Events });