// Events + Facilities.
const { useState: useStateEv, useMemo: useMemoEv } = React;

function buildMonth(year, month) {
  // Returns 42 cells starting from Sunday of the week containing the 1st.
  const first = new Date(year, month, 1);
  const startDay = first.getDay();
  const start = new Date(year, month, 1 - startDay);
  const cells = [];
  for (let i = 0; i < 42; i++) {
    const d = new Date(start);
    d.setDate(start.getDate() + i);
    cells.push(d);
  }
  return cells;
}

function fmtDate(iso) {
  const d = new Date(iso + 'T00:00:00');
  return d.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
}

function reimbBadge(days) {
  if (days >= 15) return <span className="badge success">Reimbursable</span>;
  if (days < 14) return <span className="badge danger">Not reimbursable</span>;
  return <span className="badge warning">Borderline · 14 days</span>;
}

function EventsScreen({ user, defaultTab }) {
  const [tab, setTab] = useStateEv(defaultTab || 'schedule');
  return (
    <div data-screen-label="03 Events">
      <div className="page-head">
        <div>
          <h1 className="page-title">Events</h1>
          <div className="page-subtitle">Approvals, calendar and facility reservations</div>
        </div>
      </div>
      <div className="tabs">
        <button className={`tab ${tab === 'schedule' ? 'active' : ''}`} onClick={() => setTab('schedule')}>
          Schedule
        </button>
        <button className={`tab ${tab === 'facilities' ? 'active' : ''}`} onClick={() => setTab('facilities')}>
          Facilities
        </button>
      </div>
      {tab === 'schedule' ? <ScheduleTab user={user} /> : <FacilitiesTab user={user} />}
    </div>
  );
}

function ScheduleTab({ user }) {
  const [view, setView] = useStateEv('month');
  const [pending, setPending] = useStateEv(window.AppData.EVENTS_PENDING);
  const [approved, setApproved] = useStateEv(window.AppData.EVENTS_APPROVED);
  const [newlyApprovedId, setNewlyApprovedId] = useStateEv(null);
  const [showForm, setShowForm] = useStateEv(false);
  const [showBulk, setShowBulk] = useStateEv(false);

  const canApprove = user.role === 'super_admin' || user.role === 'staff_admin' || user.role === 'cs_president';
  const canImport = user.role === 'super_admin' || user.role === 'cs_president';

  const calEvents = useMemoEv(() => {
    const map = {};
    window.AppData.CAL_EVENTS.forEach(e => {
      const k = e.date;
      if (!map[k]) map[k] = [];
      map[k].push(e);
    });
    return map;
  }, []);

  function approve(ev) {
    const stamp = new Date();
    setApproved(a => [{
      ...ev,
      approvedBy: user.name,
      approvedAt: stamp.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) + ' ' + stamp.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }),
    }, ...a]);
    setPending(p => p.filter(x => x.id !== ev.id));
    setNewlyApprovedId(ev.id);
    setTimeout(() => setNewlyApprovedId(null), 1000);
  }

  function deny(ev) {
    setPending(p => p.filter(x => x.id !== ev.id));
  }

  const cells = buildMonth(2026, 4); // May 2026

  return (
    <div>
      <div className="card card-pad mb-16">
        <div className="flex-between mb-12">
          <div className="flex-gap-12">
            <div style={{ fontWeight: 600, fontSize: 15 }}>May 2026</div>
            <div className="flex-gap-8" style={{ gap: 4 }}>
              <button className="btn btn-ghost btn-sm" style={{ padding: 4 }}><window.I.ChevronLeft size={14} /></button>
              <button className="btn btn-ghost btn-sm" style={{ padding: 4 }}><window.I.ChevronRight size={14} /></button>
            </div>
          </div>
          <div className="flex-gap-8">
            <div className="flex-gap-8" style={{ gap: 14, fontSize: 11, color: 'var(--text-2)' }}>
              <span className="flex-gap-8" style={{ gap: 5 }}><span style={{ width: 9, height: 9, background: 'var(--gold)', borderRadius: 2 }} />Away</span>
              <span className="flex-gap-8" style={{ gap: 5 }}><span style={{ width: 9, height: 9, background: 'var(--crimson)', borderRadius: 2 }} />Home</span>
              <span className="flex-gap-8" style={{ gap: 5 }}><span style={{ width: 9, height: 9, border: '1px dashed var(--text-3)', borderRadius: 2 }} />Pending</span>
            </div>
            <div style={{ width: 1, height: 18, background: 'var(--border)' }} />
            <div className="flex-gap-8" style={{ gap: 4 }}>
              <button className={`btn btn-xs ${view === 'month' ? 'btn-secondary' : 'btn-ghost'}`} onClick={() => setView('month')}>Month</button>
              <button className={`btn btn-xs ${view === 'week' ? 'btn-secondary' : 'btn-ghost'}`} onClick={() => setView('week')}>Week</button>
            </div>
          </div>
        </div>

        <div className="cal">
          {['Sun','Mon','Tue','Wed','Thu','Fri','Sat'].map(d => (
            <div key={d} className="cal-head">{d}</div>
          ))}
          {cells.map((d, i) => {
            const inMonth = d.getMonth() === 4;
            const iso = d.toISOString().slice(0, 10);
            const evs = calEvents[iso] || [];
            const isToday = iso === '2026-05-14';
            return (
              <div key={i} className={`cal-cell ${!inMonth ? 'dim' : ''} ${isToday ? 'today' : ''}`}>
                <div className="cal-date">{d.getDate()}</div>
                {evs.map((e, j) => (
                  <div key={j} className={`cal-event ${e.pending ? 'pending' : e.type}`}>
                    {e.label}
                  </div>
                ))}
              </div>
            );
          })}
        </div>
      </div>

      <div className="tip">
        <window.I.AlertCircle size={14} style={{ flexShrink: 0, marginTop: 1, color: 'var(--gold)' }} />
        <span>Club teams submit events through Canvas. Staff enter approved events here on their behalf.</span>
      </div>

      <div className="flex-between mb-12">
        <h2 className="section-title" style={{ margin: 0 }}>
          Pending approvals
          <span className="count">{pending.length}</span>
        </h2>
        <div className="flex-gap-8">
          {canImport && (
            <button className="btn btn-secondary btn-sm" onClick={() => setShowBulk(true)}>
              <window.I.Upload size={13} /> Bulk season import
            </button>
          )}
          <button className="btn btn-secondary btn-sm" onClick={() => setShowForm(s => !s)}>
            <window.I.Plus size={13} />
            Log Canvas submission
          </button>
        </div>
      </div>

      {showBulk && (
        <window.BulkSeasonImport
          onCancel={() => setShowBulk(false)}
          onImport={(teamId, rows) => {
            const team = window.AppData.TEAMS.find(t => t.id === teamId);
            const newPending = rows.map((row, i) => ({
              id: 'bulk-' + Date.now() + '-' + i,
              teamId,
              team: team.name,
              type: row.type,
              name: row.name,
              date: row.date,
              daysAway: row.daysAway,
              location: row.location,
              transportation: row.transportation,
              submittedAt: '2026-05-21',
            }));
            setPending(p => [...newPending, ...p]);
            setShowBulk(false);
          }}
        />
      )}

      {showForm && <ManualEventForm onCancel={() => setShowForm(false)} />}

      {pending.length === 0 ? (
        <div className="card">
          <div className="empty">
            <div className="empty-icon"><window.I.Inbox size={20} /></div>
            <div className="empty-title">No pending approvals</div>
            <div className="empty-msg">All caught up. New Canvas submissions will appear here.</div>
            <button className="btn btn-secondary"><window.I.Plus size={14} /> Log a Canvas submission</button>
          </div>
        </div>
      ) : (
        <div className="approval-grid">
          {pending.map(ev => (
            <ApprovalCard key={ev.id} ev={ev} onApprove={canApprove ? approve : null} onDeny={canApprove ? deny : null} />
          ))}
        </div>
      )}

      <h2 className="section-title">
        Approved events
        <span className="count">{approved.length}</span>
      </h2>
      <div className="approval-grid">
        {approved.map(ev => (
          <ApprovalCard
            key={ev.id}
            ev={ev}
            approved
            highlight={newlyApprovedId === ev.id}
          />
        ))}
      </div>
    </div>
  );
}

function ApprovalCard({ ev, onApprove, onDeny, approved, highlight }) {
  return (
    <div className={`approval-card ${highlight ? 'lock-in' : ''}`}>
      <div className="approval-head">
        <div className="approval-team">
          {ev.type === 'Home' ? <span style={{ width: 8, height: 8, background: 'var(--crimson)', borderRadius: 2 }} /> : <span style={{ width: 8, height: 8, background: 'var(--gold)', borderRadius: 2 }} />}
          {ev.team}
        </div>
        {reimbBadge(ev.daysAway)}
      </div>
      <div style={{ fontSize: 13, fontWeight: 500 }}>{ev.name}</div>
      <dl className="approval-meta">
        <dt>Type</dt><dd>{ev.type} game</dd>
        <dt>Date</dt><dd>{fmtDate(ev.date)} · in {ev.daysAway} days</dd>
        <dt>Location</dt><dd>{ev.location}</dd>
        {ev.transportation && (<><dt>Transport</dt><dd>{ev.transportation}</dd></>)}
        <dt>Submitted</dt><dd>{fmtDate(ev.submittedAt)}</dd>
      </dl>
      {!approved && onApprove && (
        <div className="approval-actions">
          <button className="btn btn-success btn-sm" onClick={() => onApprove(ev)}>
            <window.I.Check size={13} /> Approve
          </button>
          <button className="btn btn-deny btn-sm" onClick={() => onDeny(ev)}>
            <window.I.X size={13} /> Deny
          </button>
          <div className="spacer" />
          <button className="btn btn-ghost btn-sm">Details</button>
        </div>
      )}
      {approved && ev.approvedBy && (
        <div className="approval-footer">
          <window.I.Check size={11} style={{ verticalAlign: 'middle', marginRight: 4, color: 'var(--success)' }} />
          Approved by {ev.approvedBy} · {ev.approvedAt}
        </div>
      )}
    </div>
  );
}

function ManualEventForm({ onCancel }) {
  const [date, setDate] = useStateEv('');
  const [type, setType] = useStateEv('Away');
  const days = useMemoEv(() => {
    if (!date) return null;
    const d = new Date(date + 'T00:00:00');
    return Math.ceil((d - new Date('2026-05-14T00:00:00')) / (1000 * 60 * 60 * 24));
  }, [date]);

  return (
    <div className="inline-form">
      <div className="inline-form-head">
        <span>Log Canvas-submitted event</span>
        <button className="btn btn-ghost btn-sm" onClick={onCancel}><window.I.X size={14} /></button>
      </div>
      <div className="form-grid cols-3">
        <div>
          <label className="field-label">Team</label>
          <select className="select" defaultValue="">
            <option value="" disabled>Select team…</option>
            {window.AppData.TEAMS.map(t => <option key={t.id}>{t.name}</option>)}
          </select>
        </div>
        <div>
          <label className="field-label">Event type</label>
          <select className="select" value={type} onChange={e => setType(e.target.value)}>
            <option>Away</option>
            <option>Home</option>
            <option>Tournament</option>
          </select>
        </div>
        <div>
          <label className="field-label">Event name</label>
          <input className="input" placeholder="vs Saginaw Valley" />
        </div>
        <div>
          <label className="field-label">Date</label>
          <input type="date" className="input" value={date} onChange={e => setDate(e.target.value)} />
        </div>
        <div>
          <label className="field-label">Location</label>
          <input className="input" placeholder="Grand Rapids, MI" />
        </div>
        <div>
          <label className="field-label">Transportation</label>
          <input className="input" placeholder="Charter bus" disabled={type !== 'Away'} />
        </div>
      </div>
      <div className="flex-between mt-16">
        <div style={{ fontSize: 12, color: 'var(--text-2)' }}>
          {date && days !== null && (
            <span className="flex-gap-8">
              <span>Reimbursement:</span>
              {reimbBadge(days)}
              <span className="dim">· {days} days out</span>
            </span>
          )}
          {!date && <span className="dim">Pick a date to compute reimbursement eligibility</span>}
        </div>
        <div className="flex-gap-8">
          <button className="btn btn-ghost btn-sm" onClick={onCancel}>Cancel</button>
          <button className="btn btn-primary btn-sm">Log event</button>
        </div>
      </div>
    </div>
  );
}

function FacilitiesTab({ user }) {
  const [reservations, setReservations] = useStateEv(window.AppData.RESERVATIONS);
  const [showForm, setShowForm] = useStateEv(false);

  const days = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'];
  const today = 3; // Thu

  const courts = ['Court 1','Court 2','Court 3','Court 4'];
  const fields = ['IM Field 1','IM Field 2'];

  function canApprove(facility) {
    if (user.role === 'super_admin' || user.role === 'cs_president') return true;
    if (user.role === 'staff_admin') {
      if (courts.includes(facility) && user.domain === 'courts') return true;
      if (fields.includes(facility) && user.domain === 'fields') return true;
    }
    return false;
  }

  function approveRes(id) {
    setReservations(rs => rs.map(r => r.id === id ? { ...r, status: 'approved', approvedBy: user.name } : r));
  }
  function denyRes(id) {
    setReservations(rs => rs.filter(r => r.id !== id));
  }

  // Render row per facility, days as super-columns
  // For demo, show a single day (Thursday) grid with 16 columns
  // Actually spec says weekly grid: 6 rows, columns = time slots. Let's show weekly with day toggle? 
  // Use weekly: rows = facilities × days, columns = hours. That's 42 rows, too dense.
  // Better: show one day at a time with day selector.
  const [dayIdx, setDayIdx] = useStateEv(today);

  const hours = window.AppData.FACILITY_HOURS;
  const totalCols = hours.length;

  const pending = reservations.filter(r => r.status === 'pending');

  return (
    <div>
      <div className="card card-pad mb-16">
        <div className="flex-between mb-12">
          <div className="flex-gap-12">
            <div style={{ fontWeight: 600, fontSize: 15 }}>Week of May 11 · 2026</div>
            <div className="flex-gap-8" style={{ gap: 4 }}>
              <button className="btn btn-ghost btn-sm" style={{ padding: 4 }}><window.I.ChevronLeft size={14} /></button>
              <button className="btn btn-ghost btn-sm" style={{ padding: 4 }}><window.I.ChevronRight size={14} /></button>
            </div>
          </div>
          <div className="flex-gap-12">
            <div className="flex-gap-8" style={{ gap: 14, fontSize: 11, color: 'var(--text-2)' }}>
              <span className="flex-gap-8" style={{ gap: 5 }}><span style={{ width: 9, height: 9, background: 'var(--facility-blue)', borderRadius: 2 }} />Practice</span>
              <span className="flex-gap-8" style={{ gap: 5 }}><span style={{ width: 9, height: 9, background: 'rgba(139,0,0,0.5)', borderRadius: 2 }} />Game</span>
              <span className="flex-gap-8" style={{ gap: 5 }}><span style={{ width: 9, height: 9, border: '1px dashed var(--gold)', borderRadius: 2 }} />Pending</span>
            </div>
          </div>
        </div>

        <div className="flex-gap-8 mb-12" style={{ gap: 4 }}>
          {days.map((d, i) => (
            <button
              key={d}
              className={`btn btn-xs ${i === dayIdx ? 'btn-secondary' : 'btn-ghost'}`}
              onClick={() => setDayIdx(i)}
              style={{ fontWeight: i === dayIdx ? 600 : 500, minWidth: 56, justifyContent: 'center' }}
            >
              {d} {i === today && <span style={{ color: 'var(--gold)', marginLeft: 4 }}>·</span>}
            </button>
          ))}
        </div>

        <div className="facility-grid" style={{ gridTemplateColumns: `130px repeat(${totalCols}, 1fr)` }}>
          <div className="fg-cell fg-head" style={{ background: 'var(--surface-2)' }}></div>
          {hours.map(h => (
            <div key={h} className="fg-cell fg-head">{h % 12 || 12}{h >= 12 ? 'p' : 'a'}</div>
          ))}
          {window.AppData.FACILITIES.map(fac => {
            const facRes = reservations.filter(r => r.facility === fac && r.day === dayIdx);
            return (
              <React.Fragment key={fac}>
                <div className="fg-cell fg-row-label">{fac}</div>
                {hours.map((h, i) => {
                  const block = facRes.find(r => h >= r.startHr && h < r.endHr);
                  const isStart = block && h === block.startHr;
                  return (
                    <div key={i} className="fg-cell" style={{ position: 'relative' }}>
                      {isStart && (
                        <div
                          className={`fg-block ${block.status === 'pending' ? 'pending' : block.kind}`}
                          style={{ width: `calc(${(block.endHr - block.startHr) * 100}% - 4px)` }}
                          title={`${block.team} · ${block.kind}`}
                        >
                          <div className="fg-block-team">{block.team}</div>
                          <div className="fg-block-meta">
                            {block.startHr % 12 || 12}{block.startHr >= 12 ? 'p' : 'a'}–
                            {block.endHr % 12 || 12}{block.endHr >= 12 ? 'p' : 'a'}
                            {' · '}{block.kind}{block.status === 'pending' ? ' · pending' : ''}
                          </div>
                        </div>
                      )}
                    </div>
                  );
                })}
              </React.Fragment>
            );
          })}
        </div>
      </div>

      <div className="flex-between mb-12">
        <h2 className="section-title" style={{ margin: 0 }}>
          Approval queue
          <span className="count">{pending.length}</span>
        </h2>
        <button className="btn btn-secondary btn-sm" onClick={() => setShowForm(s => !s)}>
          <window.I.Plus size={13} />
          Manual reservation
        </button>
      </div>

      {showForm && <ManualReservationForm onCancel={() => setShowForm(false)} />}

      <div className="card">
        <div className="table-wrap">
          <table className="data">
            <thead>
              <tr>
                <th>Facility</th>
                <th>Team</th>
                <th>Day · Time</th>
                <th>Purpose</th>
                <th>Domain</th>
                <th style={{ textAlign: 'right' }}>Action</th>
              </tr>
            </thead>
            <tbody>
              {pending.length === 0 ? (
                <tr><td colSpan={6}>
                  <div className="empty" style={{ padding: '36px 20px' }}>
                    <div className="empty-title">Nothing waiting</div>
                    <div className="empty-msg">New facility requests will appear here for approval.</div>
                  </div>
                </td></tr>
              ) : pending.map(r => {
                const allowed = canApprove(r.facility);
                const domain = courts.includes(r.facility) ? 'Courts (Val)' : 'Fields (Stoney)';
                return (
                  <tr key={r.id}>
                    <td><strong>{r.facility}</strong></td>
                    <td>{r.team}</td>
                    <td className="cell-mono">
                      {days[r.day]} · {r.startHr % 12 || 12}{r.startHr >= 12 ? 'p' : 'a'}–{r.endHr % 12 || 12}{r.endHr >= 12 ? 'p' : 'a'}
                    </td>
                    <td><span className="badge neutral">{r.kind}</span></td>
                    <td className="cell-muted">{domain}</td>
                    <td style={{ textAlign: 'right' }}>
                      {allowed ? (
                        <div className="flex-gap-8" style={{ justifyContent: 'flex-end', gap: 6 }}>
                          <button className="btn btn-success btn-xs" onClick={() => approveRes(r.id)}>Approve</button>
                          <button className="btn btn-deny btn-xs" onClick={() => denyRes(r.id)}>Deny</button>
                        </div>
                      ) : (
                        <span className="dim" style={{ fontSize: 11 }}>Outside your domain</span>
                      )}
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

function ManualReservationForm({ onCancel }) {
  return (
    <div className="inline-form">
      <div className="inline-form-head">
        <span>Book a slot on behalf of a team</span>
        <button className="btn btn-ghost btn-sm" onClick={onCancel}><window.I.X size={14} /></button>
      </div>
      <div className="form-grid cols-3">
        <div>
          <label className="field-label">Facility</label>
          <select className="select">
            {window.AppData.FACILITIES.map(f => <option key={f}>{f}</option>)}
          </select>
        </div>
        <div>
          <label className="field-label">Team</label>
          <select className="select" defaultValue="">
            <option value="" disabled>Select team…</option>
            {window.AppData.TEAMS.map(t => <option key={t.id}>{t.name}</option>)}
          </select>
        </div>
        <div>
          <label className="field-label">Purpose</label>
          <select className="select">
            <option>Practice</option>
            <option>Home game</option>
            <option>Other</option>
          </select>
        </div>
        <div>
          <label className="field-label">Date</label>
          <input type="date" className="input" />
        </div>
        <div>
          <label className="field-label">Start time</label>
          <input type="time" className="input" defaultValue="18:00" />
        </div>
        <div>
          <label className="field-label">End time</label>
          <input type="time" className="input" defaultValue="20:00" />
        </div>
      </div>
      <div className="flex-between mt-16">
        <span className="dim" style={{ fontSize: 12 }}>Reservation logs with your name on submit.</span>
        <div className="flex-gap-8">
          <button className="btn btn-ghost btn-sm" onClick={onCancel}>Cancel</button>
          <button className="btn btn-primary btn-sm">Book slot</button>
        </div>
      </div>
    </div>
  );
}

window.EventsScreen = EventsScreen;
window.reimbBadge = reimbBadge;