// ============================================================================
// pages-schedule-committee.jsx — Schedule & Committee
// ============================================================================

// --- Schedule ---------------------------------------------------------------
const CAT_COLORS = {
  ceremony: '#ef3b2f', sport: '#16a34a', logistics: '#f5a300',
};
const CAT_LABEL = {
  ceremony: 'Ceremony', sport: 'Match', logistics: 'Logistics',
};

function FixturePreview({ fixture }) {
  if (!fixture) return null;
  const matches = fixture.matches || [];
  return (
    <div className="fixtureinline">
      <div className="fixtureinline__head">
        <div>
          <b>{fixture.title}</b>
          <span>{fixture.format}</span>
        </div>
        <div className="fixtureinline__powered">
          <span>Powered by</span>
          <img src={ASSETS.logoSportall} alt="Sportall" />
        </div>
      </div>
      <div className="fixtureinline__meta">
        <span>{fixture.date} · {fixture.start}–{fixture.end}</span>
        <em>{fixture.venue}</em>
      </div>
      {matches.length ? (
        <div className="fixtureinline__matches">
          {matches.map((match, i) => {
            const time = match.end ? `${match.start}–${match.end}` : match.time;
            const classes = [
              'fixtureinline__match',
              match.end ? 'fixtureinline__match--timed' : '',
              match.games ? 'fixtureinline__match--multi' : '',
              match.participants ? 'fixtureinline__match--participants' : '',
            ].filter(Boolean).join(' ');
            return (
              <div className={classes} key={i}>
                <span>{time}</span>
                {match.games ? (
                  <div className="fixtureinline__multi">
                    {match.games.map((game, n) => (
                      <small key={`${game[0]}-${game[1]}-${n}`}>
                        <b>{game[0]}</b>
                        <em>vs</em>
                        <b>{game[1]}</b>
                      </small>
                    ))}
                  </div>
                ) : (
                  <React.Fragment>
                    <b>{match.event || match.home}</b>
                    {match.participants ? (
                      <small>{match.participants}</small>
                    ) : (
                      <React.Fragment>
                        <em>vs</em>
                        <b>{match.away}</b>
                      </React.Fragment>
                    )}
                  </React.Fragment>
                )}
              </div>
            );
          })}
        </div>
      ) : (
        <div className="fixtureinline__empty">Detailed fixtures TBC</div>
      )}
    </div>
  );
}

function SchedulePage() {
  const days = Object.keys(SCHEDULE);
  const [day, setDay] = React.useState(days[0]);
  const { date, items } = SCHEDULE[day];
  const fixtureFor = (item) => FIXTURES.find((fixture) => fixture.event === item.title);
  return (
    <main>
      <Banner title="SCHEDULE" />
      <div className="wrap">
        <div className="daytabs">
          {days.map((d) => (
            <button
              key={d}
              className={`daytab ${day === d ? 'is-active' : ''}`}
              onClick={() => setDay(d)}
            >
              <span className="daytab__d">{d}</span>
              <span className="daytab__date">{SCHEDULE[d].date}</span>
            </button>
          ))}
        </div>

        <div className="tllegend">
          {Object.keys(CAT_LABEL).map((k) => (
            <span className="tllegend__item" key={k}>
              <i style={{ background: CAT_COLORS[k] }} />{CAT_LABEL[k]}
            </span>
          ))}
        </div>

        <div className="tlday">
          <span className="tlday__dot" />
          <h2 className="tlday__title">{day}</h2>
          <span className="tlday__date">{date}</span>
          <span className="tlday__count">{items.length} events</span>
        </div>

        <div className="tl">
          {items.map((it, i) => (
            <div className="tlrow" key={i} style={{ '--cat': CAT_COLORS[it.type] }}>
              <div className="tlrow__time">
                <span className="tlrow__start">{it.start}</span>
                <span className="tlrow__end">{it.end}</span>
              </div>
              <div className="tlrow__spine"><span className="tlrow__dot" /></div>
              <div className="tlrow__card">
                <div className="tlrow__top">
                  <span className="tlrow__cat">{CAT_LABEL[it.type]}</span>
                  {it.sport && <img className="tlrow__pic" src={ASSETS.pic[it.sport]} alt="" />}
                </div>
                <h3 className="tlrow__title">{it.title}</h3>
                <button className="tlrow__venue" type="button" aria-label={`View ${it.venue}`}>
                  <Icon.pin width="15" height="15" />
                  <span>{it.venue}</span>
                  {VENUE_PHOTOS[it.venue] && (
                    <span className="venuepop" role="presentation">
                      <img src={VENUE_PHOTOS[it.venue]} alt="" />
                      <b>{it.venue}</b>
                    </span>
                  )}
                </button>
                {it.sport && <FixturePreview fixture={fixtureFor(it)} />}
              </div>
            </div>
          ))}
        </div>
      </div>
    </main>
  );
}

// --- Committee --------------------------------------------------------------
function PersonCard({ p, color, featured }) {
  return (
    <div className={`pcard ${featured ? 'pcard--lg' : ''} ${p.rank ? 'pcard--rank' : ''}`}>
      <div className="pcard__frame">
        <div className="pcard__photo" style={{ '--c': color }}>
          {p.photo ? (
            <img className="pcard__img" src={p.photo} alt={p.name} style={{ objectPosition: p.photoPosition || 'center top' }} />
          ) : (
            <svg className="pcard__avatar" viewBox="0 0 100 120" aria-hidden="true">
              <circle cx="50" cy="46" r="21" />
              <path d="M14 112c0-22 16-37 36-37s36 15 36 37" />
            </svg>
          )}
        </div>
        <span className="pcard__pos" style={{ background: color }}>{p.position}</span>
      </div>
      <div className="pcard__name">{p.name}</div>
    </div>
  );
}

function DeptSection({ dept, people, color, featured }) {
  return (
    <section className="deptsec">
      <div className="deptsec__head">
        <span className="deptsec__dot" style={{ background: color }} />
        <h3 className="deptsec__title">{dept}</h3>
        <span className="deptsec__line" style={{ background: `${color}33` }} />
      </div>
      <div className="deptsec__grid">
        {people.map((p, i) => (
          <PersonCard key={i} p={p} color={color} featured={featured} />
        ))}
      </div>
    </section>
  );
}

function CommitteePage() {
  const [directors, ...rest] = COMMITTEE;
  return (
    <main>
      <div className="wrap committee__head">
        <h1 className="committee__title">
          <img className="committee__face" src={ASSETS.faceTiger} alt="" />
          <span className="ghead ghead--blue">COMMITTEE</span>
          <img className="committee__face" src={ASSETS.faceKoala} alt="" />
        </h1>
        <p className="committee__sub">The people behind the games — meet the team making it all happen.</p>
      </div>

      <div className="committee__band">
        <div className="wrap">
          <DeptSection {...directors} featured />
        </div>
      </div>

      <div className="wrap committee__body">
        {rest.map((c) => <DeptSection key={c.dept} {...c} />)}
      </div>
    </main>
  );
}

Object.assign(window, { SchedulePage, CommitteePage });