// pages-3.jsx — Notifications (You've Been Pinged), Events

// ─────────────────────────────────────────────────────────────────────────
// NOTIFICATIONS / YOU'VE BEEN PINGED
// ─────────────────────────────────────────────────────────────────────────
const PINGS = [
  { who:'Alex Morgan',    init:'AM', act:'viewed your profile',                              ago:'2m ago',  tab:'Profile',     newBadge:false },
  { who:'Jordan Lee',     init:'JL', act:'connected with you',                               ago:'15m ago', tab:'Connections', newBadge:true  },
  { who:'Taylor Grant',   init:'TG', act:'sent you a ping request',                          ago:'1h ago',  tab:'Connections', newBadge:true  },
  { who:'Jamie Wilson',   init:'JW', act:'accepted your ping request',                       ago:'2h ago',  tab:'Connections', newBadge:false },
  { who:'Morgan Smith',   init:'MS', act:'commented on your signal: "Great insights!"',      ago:'3h ago',  tab:'Signals',     newBadge:false },
  { who:'Casey Brown',    init:'CB', act:'viewed your profile',                              ago:'4h ago',  tab:'Profile',     newBadge:false },
  { who:'Riley Johnson',  init:'RJ', act:'connected with you',                               ago:'5h ago',  tab:'Connections', newBadge:false },
  { who:'Drew Carter',    init:'DC', act:'mentioned you in a signal',                        ago:'6h ago',  tab:'Signals',     newBadge:false },
  { who:'Beeprd System',  init:'B',  act:'New LinkedIn post detected on your channel',       ago:'8h ago',  tab:'System',      newBadge:false, system:true },
  { who:'Beeprd System',  init:'B',  act:'You were scanned at Atlanta Tech Week',            ago:'1d ago',  tab:'Events',      newBadge:false, system:true },
];

const PageNotifications = ({ go }) => {
  const [tab, setTab] = React.useState('All');
  const [list, setList] = React.useState(PINGS);
  const toast = (m) => window.__beeprd?.toast?.(m);
  const filtered = list.filter(p => tab === 'All' ? true : p.tab === tab);

  const markAll = () => setList(list.map(p => ({...p, newBadge:false})));

  return (
    <div className="page page-enter" data-screen-label="07 Notifications" style={{maxWidth:980, margin:'0 auto'}}>
      <div className="notifications-hero">
        <div className="eyebrow" style={{marginBottom:8}}>Notifications</div>
        <h1 className="serif" style={{fontWeight:400, letterSpacing:'-0.02em', margin:0, lineHeight:1}}>You've Been Pinged</h1>
        <div className="subtle" style={{marginTop:10}}>
          <span style={{color:'var(--accent)', fontWeight:600}}>24 new notifications</span>
          <span style={{margin:'0 8px'}}>·</span>
          <button className="link" onClick={markAll}>Mark all as read</button>
        </div>
      </div>

      <div className="row between" style={{marginBottom:14, flexWrap:'wrap', rowGap:10}}>
        <div className="seg">
          {['All','Profile','Connections','Signals','Events','System'].map(t => (
            <button key={t} className={tab===t ? 'on' : ''} onClick={() => setTab(t)}>{t}</button>
          ))}
        </div>
        <div className="row gap-sm">
          <button className="btn btn-ghost" style={{padding:'6px 10px', fontSize:12.5}} onClick={() => toast('Filter (demo)')}>
            <I name="filter" size={12}/> Filter
          </button>
        </div>
      </div>

      <div className="card">
        <div>
          {filtered.length === 0 && (
            <div style={{padding:'60px 20px', textAlign:'center', color:'var(--mute)'}}>
              <div className="serif" style={{fontSize:24}}>You're all caught up</div>
              <div className="subtle" style={{marginTop:6}}>Nothing in this category yet.</div>
            </div>
          )}
          {filtered.map((p, i) => (
            <div
              key={i}
              className="row gap-md"
              role="button"
              tabIndex={0}
              onClick={() => toast('Opened notification (demo)')}
              onKeyDown={(e) => {
                if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toast('Opened notification (demo)'); }
              }}
              style={{padding:'14px 20px', borderTop: i===0 ? '0' : '1px solid var(--line-2)', cursor:'pointer'}}
            >
              {p.system ? (
                <div className="avatar" style={{
                  background:'var(--surface-2)', color:'var(--accent)',
                  boxShadow:'inset 0 0 0 1px var(--line)'
                }}>
                  <I name="ping" size={15}/>
                </div>
              ) : (
                <div className="avatar">{p.init}</div>
              )}
              <div style={{flex:1, minWidth:0}}>
                <div style={{fontSize:14}}>
                  <span style={{fontWeight:600}}>{p.who}</span>
                  <span style={{color:'var(--ink-2)'}}> {p.act}</span>
                </div>
                <div className="tiny mono" style={{color:'var(--mute-2)', marginTop:2}}>{p.ago}</div>
              </div>
              <div className="row gap-sm">
                {p.newBadge && <span className="tag accent" style={{fontSize:10.5}}>New</span>}
                <button className="icon-btn" style={{width:30, height:30}} onClick={(e) => { e.stopPropagation(); toast('Opened notification (demo)'); }} aria-label="Open notification"><I name="chevron" size={13}/></button>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div style={{textAlign:'center', marginTop:18}}>
        <button className="btn btn-ghost" onClick={() => toast('Loaded older pings (demo)')}>Load older pings</button>
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────────────────
// EVENTS
// ─────────────────────────────────────────────────────────────────────────
const EVENTS = [
  { t:'Atlanta Tech Week',           d:'May 8–10, 2025',  loc:'@JetSuite HQ',           cat:'Technology', mine:false },
  { t:'SaaS Founders Summit',         d:'Jun 17, 2025',   loc:'@FoundersHall',          cat:'Business',   mine:true  },
  { t:'Creator Economy Expo',         d:'Jul 6–8, 2025',  loc:'@MiamiFL',               cat:'Media',      mine:false },
  { t:'Investors & Innovators Mixer', d:'Aug 21, 2025',   loc:'@FoundryLA',             cat:'Networking', mine:true  },
  { t:'Product-Led Growth Conf',      d:'Sep 14, 2025',   loc:'@SeattlePavilion',       cat:'Product',    mine:false },
];

const PageEvents = ({ go, onShowQR, onOpenEvent }) => {
  const [tab, setTab] = React.useState('Upcoming');
  const [cat, setCat] = React.useState('All Categories');
  const toast = (m) => window.__beeprd?.toast?.(m);

  const shown = EVENTS.filter(e => {
    if (tab === 'My Events') return e.mine;
    if (tab === 'Past') return false;
    return true;
  }).filter(e => cat === 'All Categories' ? true : e.cat === cat);

  return (
    <div className="page page-enter" data-screen-label="08 Events">
      <div className="row between" style={{marginBottom:6, flexWrap:'wrap', rowGap:10}}>
        <h1 className="h1">Events</h1>
        <div className="row gap-sm" style={{flexWrap:'wrap'}}>
          <button className="btn btn-ghost" onClick={() => { window.__beeprd?.openModal?.('share'); toast('Scan to check in (demo)'); }}><I name="qr" size={14}/> Scan to Check In</button>
          <button className="btn btn-primary" onClick={() => toast('Host Event (demo)')}><I name="plus" size={14}/> Host Event</button>
        </div>
      </div>
      <div className="subtle" style={{marginBottom:18}}>Discover and connect at events.</div>

      <div className="row between" style={{marginBottom:14, flexWrap:'wrap', rowGap:10}}>
        <div className="seg">
          {['Upcoming','My Events','Past'].map(t => (
            <button key={t} className={tab===t ? 'on' : ''} onClick={() => setTab(t)}>{t}</button>
          ))}
        </div>
        <select className="select" style={{width:'auto', padding:'6px 28px 6px 12px', fontSize:13}} value={cat} onChange={(e)=>setCat(e.target.value)}>
          <option>All Categories</option>
          <option>Technology</option>
          <option>Business</option>
          <option>Media</option>
          <option>Networking</option>
          <option>Product</option>
        </select>
      </div>

      <div className="split" style={{'--split-left':'1.4fr','--split-right':'1fr'}}>
        <div className="grid" style={{gap:14}}>
          {shown.map((e, i) => (
            <div key={i}
              className="card event-card"
              style={{padding:14, display:'flex', gap:16, alignItems:'center', cursor:'pointer'}}
              onClick={() => onOpenEvent?.(e)}
              role="button"
              tabIndex={0}
              onKeyDown={(ev) => (ev.key === 'Enter' || ev.key === ' ') && onOpenEvent?.(e)}
              aria-label={`View details for ${e.t}`}
            >
              <div className="placeholder-img" style={{width:140, height:90, flex:'0 0 auto', borderRadius:10}}>{e.cat.toUpperCase()}</div>
              <div style={{flex:1, minWidth:0}}>
                <div className="row gap-sm" style={{marginBottom:4}}>
                  <span className="tag accent">{e.cat}</span>
                  {e.mine && <span className="tag">Attending</span>}
                </div>
                <div className="h3" style={{fontSize:16}}>{e.t}</div>
                <div className="tiny" style={{color:'var(--mute)', marginTop:4}}>
                  <I name="events" size={11}/> &nbsp;{e.d} &nbsp; · &nbsp; <I name="pin" size={11}/> &nbsp;{e.loc}
                </div>
                <div className="row gap-sm" style={{marginTop:8}}>
                  <div className="row" style={{gap:-6}}>
                    {['AM','JL','TG','MS'].map((n, j) => (
                      <div key={j} className="avatar sm" style={{
                        marginLeft: j === 0 ? 0 : -8,
                        boxShadow:'0 0 0 2px var(--surface)'
                      }}>{n}</div>
                    ))}
                  </div>
                  <span className="tiny" style={{color:'var(--mute)'}}>+42 of your operators attending</span>
                </div>
              </div>
              <div className="row event-card-actions" style={{flexDirection:'column', gap:6}}>
                <button className="btn btn-primary" style={{padding:'7px 14px', fontSize:12.5}} onClick={(ev) => { ev.stopPropagation(); onOpenEvent?.(e); }}>View Event</button>
                <button className="btn btn-ghost" style={{padding:'7px 14px', fontSize:12.5}} onClick={(ev) => { ev.stopPropagation(); toast('Saved event'); }}>Save</button>
              </div>
            </div>
          ))}
        </div>

        <div className="grid" style={{gap:14, alignContent:'start'}}>
          <div className="card">
            <div className="card-head"><h3>Nearby Operators</h3><span className="tiny" style={{color:'var(--mute)'}}>Atlanta · 12 within 1mi</span></div>
            <div style={{padding:6}}>
              {[
                { n:'Maya Brooks', r:'Founder · AI Tooling', ago:'200ft' },
                { n:'Devon Park',  r:'VC · Seed/Series A',   ago:'480ft' },
                { n:'Sasha Reid',  r:'Creator · Tech YouTube', ago:'700ft' },
                { n:'Ari Cohen',   r:'Eng Lead · Stripe',    ago:'0.4mi' },
              ].map((o, i) => (
                <div key={i} className="row gap-md" style={{padding:'10px 12px'}}>
                  <div className="avatar sm">{o.n.split(' ').map(w=>w[0]).join('')}</div>
                  <div style={{flex:1, minWidth:0}}>
                    <div style={{fontSize:13, fontWeight:600}}>{o.n}</div>
                    <div className="tiny" style={{color:'var(--mute)'}}>{o.r}</div>
                  </div>
                  <span className="tiny mono" style={{color:'var(--mute-2)'}}>{o.ago}</span>
                  <button className="btn btn-ghost" style={{padding:'4px 10px', fontSize:11.5}} onClick={() => toast(`Ping sent to ${o.n.split(' ')[0]}`)}>Ping</button>
                </div>
              ))}
            </div>
          </div>

          <div className="card">
            <div className="card-head"><h3>Your Event Pass</h3></div>
            <div style={{padding:18}}>
              <PagerCard msg="PASS OK" id="CLARENCE" subtitle="Event Access" actions={false}/>
              <div className="row between" style={{marginTop:14}}>
                <div>
                  <div className="tiny" style={{color:'var(--mute)'}}>Next Event</div>
                  <div style={{fontWeight:600, fontSize:13.5}}>Atlanta Tech Week</div>
                  <div className="tiny mono" style={{color:'var(--mute)'}}>MAY 8 · 9:00 AM</div>
                </div>
                <button className="btn btn-ghost" onClick={() => onShowQR?.()}><I name="qr" size={14}/> Show QR</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { PageNotifications, PageEvents });