// Events list + event detail
function EventsPage() {
  const { go } = CTSCShell.useNav();
  const { data } = CTSCStore.useStore();
  const { fmtDate, fedName } = CTSCStore;
  const [type, setType] = React.useState('All');
  const approved = [...data.events].filter(e => e.status === 'Approved').sort((a, b) => a.date.localeCompare(b.date));
  const types = ['All', ...Array.from(new Set(approved.map(e => e.type)))];
  const list = approved.filter(e => type === 'All' || e.type === type);
  // group by month
  const groups = {};
  list.forEach(e => {
    const k = new Date(e.date + 'T00:00:00').toLocaleDateString('en-ZA', { month: 'long', year: 'numeric' });
    (groups[k] = groups[k] || []).push(e);
  });
  const typeColor = { Competition: 'var(--navy)', Development: 'var(--ocean)', Festival: 'var(--gold-d)' };

  return (
    <div className="fade-in">
      <PageHead title="Events Calendar" sub="Competitions, festivals and development days across every affiliated federation." />
      <div className="wrap" style={{ padding: '0 32px' }}>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', margin: '0 0 28px' }}>
          {types.map(t => <button key={t} className={'chip' + (type === t ? ' active' : '')} onClick={() => setType(t)}>{t}</button>)}
        </div>
        {Object.entries(groups).map(([month, evs]) => (
          <div key={month} style={{ marginBottom: 34 }}>
            <div style={{ fontSize: 13, fontWeight: 800, textTransform: 'uppercase', letterSpacing: '.1em', color: 'var(--ocean)', marginBottom: 14 }}>{month}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {evs.map(e => {
                const d = new Date(e.date + 'T00:00:00');
                return (
                  <button key={e.id} className="card card-hover" onClick={() => go('event', { id: e.id })}
                    style={{ padding: 18, textAlign: 'left', display: 'flex', alignItems: 'center', gap: 20 }}>
                    <div style={{ textAlign: 'center', background: 'var(--navy)', color: '#fff', borderRadius: 8, padding: '12px 16px', flex: '0 0 auto' }}>
                      <div style={{ fontSize: 26, fontWeight: 900, lineHeight: 1 }}>{d.getDate()}</div>
                      <div style={{ fontSize: 11, fontWeight: 800, textTransform: 'uppercase', color: 'var(--gold)' }}>{d.toLocaleDateString('en-ZA', { month: 'short' })}</div>
                    </div>
                    <div style={{ flex: 1 }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4 }}>
                        <span style={{ fontSize: 10.5, fontWeight: 800, textTransform: 'uppercase', letterSpacing: '.06em', color: '#fff', background: typeColor[e.type] || 'var(--navy)', padding: '3px 8px', borderRadius: 4 }}>{e.type}</span>
                        <span style={{ fontSize: 12.5, color: 'var(--muted)', fontWeight: 700 }}>{fedName(data, e.fedId)}</span>
                      </div>
                      <div style={{ fontSize: 17, fontWeight: 800, lineHeight: 1.25 }}>{e.title}</div>
                      <div style={{ fontSize: 13, color: 'var(--muted)', fontWeight: 600, marginTop: 3 }}>📍 {e.venue}</div>
                    </div>
                    <span style={{ color: 'var(--ocean)', fontWeight: 800, fontSize: 13 }}>Details ›</span>
                  </button>
                );
              })}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function EventDetail({ id }) {
  const { go } = CTSCShell.useNav();
  const { data } = CTSCStore.useStore();
  const { fmtDate, fedName } = CTSCStore;
  const { Photo } = CTSCShell;
  const e = data.events.find(x => x.id === id);
  if (!e) return <PageHead title="Event not found" sub="" />;
  const d = new Date(e.date + 'T00:00:00');
  return (
    <div className="fade-in">
      <div className="wrap" style={{ padding: '28px 32px 0' }}>
        <button onClick={() => go('events')} style={{ color: 'var(--ocean)', fontSize: 13, fontWeight: 700, marginBottom: 20 }}>‹ All events</button>
      </div>
      <div className="wrap" style={{ padding: '0 32px', display: 'grid', gridTemplateColumns: '1fr 320px', gap: 36, alignItems: 'start' }}>
        <div>
          <Photo h={300} tag="Event photography" src={e.photo} style={{ borderRadius: 10, marginBottom: 24 }} />
          <span style={{ fontSize: 11, fontWeight: 800, textTransform: 'uppercase', letterSpacing: '.06em', color: '#fff', background: 'var(--navy)', padding: '4px 10px', borderRadius: 4 }}>{e.type}</span>
          <h1 style={{ fontSize: 34, fontWeight: 900, margin: '14px 0 14px', letterSpacing: '-.02em' }}>{e.title}</h1>
          <p style={{ fontSize: 16.5, lineHeight: 1.65, color: '#3c4f5a' }}>{e.desc}</p>
        </div>
        <aside className="card" style={{ padding: 22 }}>
          <div style={{ textAlign: 'center', borderBottom: '1px solid var(--line2)', paddingBottom: 16, marginBottom: 16 }}>
            <div style={{ fontSize: 13, color: 'var(--muted)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.1em' }}>{d.toLocaleDateString('en-ZA', { weekday: 'long' })}</div>
            <div style={{ fontSize: 40, fontWeight: 900, color: 'var(--navy)', lineHeight: 1.1 }}>{d.getDate()}</div>
            <div style={{ fontSize: 15, fontWeight: 800, color: 'var(--ocean)' }}>{d.toLocaleDateString('en-ZA', { month: 'long', year: 'numeric' })}</div>
          </div>
          <Row k="Venue" v={e.venue} />
          <Row k="Hosted by" v={fedName(data, e.fedId)} />
          <Row k="Type" v={e.type} />
          <button className="btn btn-gold" style={{ width: '100%', marginTop: 16, justifyContent: 'center' }}>Register interest</button>
          <button className="btn btn-ghost btn-sm" style={{ width: '100%', marginTop: 10, justifyContent: 'center' }} onClick={() => go('federation', { id: e.fedId })}>View federation ›</button>
        </aside>
      </div>
    </div>
  );
}
window.EventsPage = EventsPage;
window.EventDetail = EventDetail;