// screens-b.jsx — Members + Events

window.MembersScreen = function MembersScreen({ screen, setScreen, role }) {
  const [search, setSearch] = React.useState('');
  const [selected, setSelected] = React.useState(null);
  const [showInvite, setShowInvite] = React.useState(false);
  const [inviteForm, setInviteForm] = React.useState({ name: '', email: '', role: 'member' });

  const filtered = DATA.members.filter(m =>
    m.name.toLowerCase().includes(search.toLowerCase()) ||
    m.chapter.toLowerCase().includes(search.toLowerCase())
  );

  return (
    <AppShell screen={screen} setScreen={setScreen} role={role}>
      <div className="page-header">
        <h1>Members</h1>
        <div style={{ display: 'flex', gap: '0.5rem' }}>
          {role === 'admin' && (
            <Btn variant="primary" onClick={() => setShowInvite(true)}>+ Invite Member</Btn>
          )}
        </div>
      </div>

      {/* Search */}
      <div style={{ position: 'relative', marginBottom: '1rem', maxWidth: 360 }}>
        <span style={{ position: 'absolute', left: '0.75rem', top: '50%', transform: 'translateY(-50%)', color: '#9ca3af', fontSize: '0.9rem' }}>🔍</span>
        <input
          type="text"
          placeholder="Search members..."
          value={search}
          onChange={e => setSearch(e.target.value)}
          style={{ paddingLeft: '2.25rem', width: '100%', padding: '0.5rem 0.75rem 0.5rem 2.25rem', border: '1px solid #dde1e9', borderRadius: 8, fontSize: '0.875rem' }}
        />
      </div>

      {/* Table */}
      <div className="table-wrap">
        <table>
          <thead>
            <tr>
              <th>Name</th>
              <th>Chapter</th>
              <th>Status</th>
              <th>Role</th>
              <th>Events</th>
            </tr>
          </thead>
          <tbody>
            {filtered.map(m => (
              <tr key={m.id} onClick={() => setSelected(m)}>
                <td>
                  <div style={{ display: 'flex', alignItems: 'center', gap: '0.6rem' }}>
                    <Avatar name={m.name} />
                    <span style={{ fontWeight: 500 }}>{m.name}</span>
                  </div>
                </td>
                <td style={{ color: '#6b7280' }}>{m.chapter}</td>
                <td><StatusBadge status={m.status} /></td>
                <td><RoleBadge role={m.role} /></td>
                <td style={{ color: '#6b7280' }}>{m.eventsAttended}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Member detail drawer */}
      <Drawer open={!!selected} onClose={() => setSelected(null)} title="Member Detail">
        {selected && (
          <>
            <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '1.5rem' }}>
              <Avatar name={selected.name} size="lg" />
              <div>
                <div style={{ fontWeight: 700, fontSize: '1.05rem' }}>{selected.name}</div>
                <div style={{ color: '#6b7280', fontSize: '0.85rem' }}>{selected.email}</div>
              </div>
            </div>

            <div className="detail-row"><span className="detail-label">Chapter</span><span className="detail-value">{selected.chapter}</span></div>
            <div className="detail-row"><span className="detail-label">Status</span><span className="detail-value"><StatusBadge status={selected.status} /></span></div>
            <div className="detail-row"><span className="detail-label">Role</span>
              <span className="detail-value">
                {role === 'admin'
                  ? <select style={{ border: '1px solid #dde1e9', borderRadius: 6, padding: '0.25rem 0.5rem', fontSize: '0.875rem' }}>
                      {['admin','editor','member','viewer'].map(r => <option key={r} selected={r===selected.role}>{r}</option>)}
                    </select>
                  : <RoleBadge role={selected.role} />
                }
              </span>
            </div>
            <div className="detail-row"><span className="detail-label">Joined</span><span className="detail-value">{selected.joined || '—'}</span></div>
            <div className="detail-row"><span className="detail-label">Events attended</span><span className="detail-value">{selected.eventsAttended}</span></div>

            <hr className="divider" />
            <div className="btn-row">
              <Btn variant="secondary" size="sm">Edit Profile</Btn>
              {role === 'admin' && selected.id !== 1 && (
                <Btn variant="danger" size="sm" onClick={() => setSelected(null)}>Remove Member</Btn>
              )}
            </div>
          </>
        )}
      </Drawer>

      {/* Invite modal */}
      <Modal
        open={showInvite}
        onClose={() => setShowInvite(false)}
        title="Invite Member"
        footer={
          <>
            <Btn variant="ghost" onClick={() => setShowInvite(false)}>Cancel</Btn>
            <Btn variant="primary" onClick={() => setShowInvite(false)}>Send Invite</Btn>
          </>
        }
      >
        <div className="form-group"><label>Full Name</label><input placeholder="e.g. Jane Smith" value={inviteForm.name} onChange={e => setInviteForm({...inviteForm, name: e.target.value})} /></div>
        <div className="form-group"><label>Email Address</label><input type="email" placeholder="jane@example.com" value={inviteForm.email} onChange={e => setInviteForm({...inviteForm, email: e.target.value})} /></div>
        <div className="form-group">
          <label>Role</label>
          <select value={inviteForm.role} onChange={e => setInviteForm({...inviteForm, role: e.target.value})}>
            <option value="editor">Editor</option>
            <option value="member">Member</option>
            <option value="viewer">Viewer</option>
          </select>
        </div>
        <p style={{ fontSize: '0.8rem', color: '#6b7280' }}>An invite link will be emailed to them, valid for 7 days.</p>
      </Modal>
    </AppShell>
  );
};

// ── Calendar helpers ──────────────────────────────────────────────────────────
function calDays(year, month) {
  const firstDow = new Date(year, month, 1).getDay();
  const daysInMonth = new Date(year, month + 1, 0).getDate();
  const daysInPrev = new Date(year, month, 0).getDate();
  const cells = [];
  for (let i = firstDow - 1; i >= 0; i--) cells.push({ day: daysInPrev - i, curr: false });
  for (let d = 1; d <= daysInMonth; d++) cells.push({ day: d, curr: true });
  while (cells.length % 7 !== 0) cells.push({ day: cells.length - daysInMonth - firstDow + 1, curr: false });
  return cells;
}

const MONTHS = ['January','February','March','April','May','June','July','August','September','October','November','December'];

window.EventsScreen = function EventsScreen({ screen, setScreen, role }) {
  const [view, setView] = React.useState('calendar');
  const [year, setYear] = React.useState(2026);
  const [month, setMonth] = React.useState(5); // June
  const [rsvps, setRsvps] = React.useState({});
  const [popover, setPopover] = React.useState(null);

  const cells = calDays(year, month);
  const todayD = 31, todayM = 4; // May 31, 2026 (month 4 = May)

  const eventsInMonth = DATA.events.filter(e => e.month === month);

  function prevMonth() {
    if (month === 0) { setMonth(11); setYear(y => y - 1); }
    else setMonth(m => m - 1);
  }
  function nextMonth() {
    if (month === 11) { setMonth(0); setYear(y => y + 1); }
    else setMonth(m => m + 1);
  }

  function toggleRsvp(eventId, status) {
    setRsvps(r => ({ ...r, [eventId]: r[eventId] === status ? null : status }));
  }

  return (
    <AppShell screen={screen} setScreen={setScreen} role={role}>
      <div className="page-header">
        <h1>Events</h1>
        <div style={{ display: 'flex', gap: '0.75rem', alignItems: 'center' }}>
          {(role === 'admin' || role === 'editor') && (
            <Btn variant="primary" size="sm">+ Add Event</Btn>
          )}
          <div className="toggle-group">
            <button className={`toggle-btn${view === 'calendar' ? ' active' : ''}`} onClick={() => setView('calendar')}>Calendar</button>
            <button className={`toggle-btn${view === 'timeline' ? ' active' : ''}`} onClick={() => setView('timeline')}>Timeline</button>
          </div>
        </div>
      </div>

      {view === 'calendar' && (
        <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
          {/* Month nav */}
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '1rem 1.25rem', borderBottom: '1px solid #dde1e9' }}>
            <button onClick={prevMonth} style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: '1.1rem', color: '#6b7280', padding: '0.25rem 0.5rem' }}>‹</button>
            <span style={{ fontWeight: 600 }}>{MONTHS[month]} {year}</span>
            <button onClick={nextMonth} style={{ background: 'none', border: 'none', cursor: 'pointer', fontSize: '1.1rem', color: '#6b7280', padding: '0.25rem 0.5rem' }}>›</button>
          </div>
          {/* Grid */}
          <div className="cal-grid" style={{ margin: '0.5rem' }}>
            {['Su','Mo','Tu','We','Th','Fr','Sa'].map(d => (
              <div key={d} className="cal-dow">{d}</div>
            ))}
            {cells.map((cell, i) => {
              const isToday = cell.curr && cell.day === todayD && month === todayM;
              const dayEvents = eventsInMonth.filter(e => e.day === cell.day);
              return (
                <div key={i} className={`cal-day${!cell.curr ? ' other-month' : ''}${isToday ? ' today' : ''}`}>
                  <div className="cal-day-num">{cell.day}</div>
                  {dayEvents.map(ev => (
                    <div key={ev.id} className="cal-event-chip" onClick={(e) => { e.stopPropagation(); setPopover(ev); }}>
                      {ev.fundraiser ? '$ ' : ''}{ev.title}
                    </div>
                  ))}
                </div>
              );
            })}
          </div>
        </div>
      )}

      {view === 'timeline' && (
        <div>
          {DATA.events.map(ev => (
            <div key={ev.id} className="timeline-item">
              <div className="timeline-date">{ev.date.slice(5)}</div>
              <div className={`timeline-card ${ev.fundraiser ? 'fundraiser' : 'regular'}`}>
                <div className="timeline-card-title">
                  {ev.title}
                  {ev.fundraiser && <Badge variant="blue">$ Fundraiser</Badge>}
                </div>
                <div className="timeline-card-meta">
                  <span>📍 {ev.location}</span>
                  {role !== 'viewer' && (
                    <div style={{ display: 'flex', gap: '0.3rem', marginLeft: 'auto' }}>
                      {['going','maybe','no'].map(s => (
                        <button key={s} onClick={() => toggleRsvp(ev.id, s)}
                          style={{
                            padding: '0.2rem 0.5rem', border: '1px solid',
                            borderRadius: 6, cursor: 'pointer', fontSize: '0.75rem',
                            fontWeight: 500,
                            background: rsvps[ev.id] === s ? '#3a5ca8' : 'white',
                            color: rsvps[ev.id] === s ? 'white' : '#6b7280',
                            borderColor: rsvps[ev.id] === s ? '#3a5ca8' : '#dde1e9',
                          }}>
                          {s.charAt(0).toUpperCase() + s.slice(1)}
                        </button>
                      ))}
                    </div>
                  )}
                </div>
              </div>
            </div>
          ))}
        </div>
      )}

      {/* Event popover / modal */}
      <Modal open={!!popover} onClose={() => setPopover(null)} title={popover?.title || ''}
        footer={
          role !== 'viewer' && popover && (
            <div style={{ display: 'flex', gap: '0.4rem' }}>
              {['Going','Maybe','No'].map(s => (
                <Btn key={s} size="sm"
                  variant={rsvps[popover.id] === s.toLowerCase() ? 'primary' : 'secondary'}
                  onClick={() => { toggleRsvp(popover.id, s.toLowerCase()); setPopover(null); }}>
                  {s}
                </Btn>
              ))}
            </div>
          )
        }
      >
        {popover && (
          <>
            <div className="detail-row"><span className="detail-label">Date</span><span className="detail-value">{popover.date}</span></div>
            <div className="detail-row"><span className="detail-label">Location</span><span className="detail-value">{popover.location}</span></div>
            <div className="detail-row"><span className="detail-label">Type</span><span className="detail-value">{popover.fundraiser ? <Badge variant="blue">Fundraiser</Badge> : <Badge variant="gray">Regular</Badge>}</span></div>
            {popover.fundraiser && role !== 'viewer' && (
              <>
                <div className="detail-row"><span className="detail-label">Revenue</span><span className="detail-value profit-positive">{fmt(popover.revenue)}</span></div>
                <div className="detail-row"><span className="detail-label">Expenses</span><span className="detail-value profit-negative">{fmt(popover.expense)}</span></div>
              </>
            )}
          </>
        )}
      </Modal>
    </AppShell>
  );
};