// Meeting Load + Fragmentation widget · team aggregate by default.

function MeetingLoad() {
  const m = DATA.meetingAggregate;
  const overload = DATA.engineers.filter(e => e.meetingHrs > 8).length;
  const total = DATA.engineers.length;
  const peakEng = DATA.engineers.reduce((a, b) => (b.meetingHrs > a.meetingHrs ? b : a));

  return (
    <div className="card">
      <div className="card-head">
        <div>
          <div className="ch-eyebrow">Meeting load · this week</div>
          <div className="ch-title" style={{ marginTop: 4 }}>
            <Icon name="calendar" size={13} />
            <span>Team-aggregate fragmentation</span>
          </div>
        </div>
      </div>

      <div className="meeting-grid">
        <div className="meeting-stat">
          <div className="ms-label">Meeting hrs / engineer</div>
          <div className={`ms-value ${m.teamHoursThisWeek > 8 ? 'tone-bad' : m.teamHoursThisWeek > 6 ? 'tone-warn' : 'tone-good'}`}>
            {m.teamHoursThisWeek}<span style={{ fontSize: 13, color: 'var(--text-3)', marginLeft: 4 }}>hrs</span>
          </div>
          <div className="ms-sub">Avg across 8 engineers</div>
        </div>
        <div className="meeting-stat">
          <div className="ms-label">Deep focus block (yesterday)</div>
          <div className={`ms-value ${m.longestFocusYesterday >= 2 ? 'tone-good' : 'tone-warn'}`}>
            {m.longestFocusYesterday}<span style={{ fontSize: 13, color: 'var(--text-3)', marginLeft: 4 }}>hrs</span>
          </div>
          <div className="ms-sub">Weekly avg: {m.longestFocusWeekAvg}h</div>
        </div>
        <div className="meeting-stat">
          <div className="ms-label">Engineers over 8h</div>
          <div className={`ms-value ${overload >= 3 ? 'tone-bad' : overload >= 1 ? 'tone-warn' : 'tone-good'}`}>
            {overload}<span style={{ fontSize: 13, color: 'var(--text-3)', marginLeft: 6 }}>/ {total}</span>
          </div>
          <div className="ms-sub">Hidden by team avg</div>
        </div>
        <div className="meeting-stat">
          <div className="ms-label">Peak load · individual</div>
          <div className={`ms-value ${peakEng.meetingHrs > 8 ? 'tone-bad' : peakEng.meetingHrs > 6 ? 'tone-warn' : 'tone-good'}`}>
            {peakEng.meetingHrs}<span style={{ fontSize: 13, color: 'var(--text-3)', marginLeft: 4 }}>hrs</span>
          </div>
          <div className="ms-sub">{peakEng.name.split(' ')[0]}</div>
        </div>
      </div>
    </div>
  );
}

window.MeetingLoad = MeetingLoad;