// "Today" view — day selector strip + summary + match grid. Class-based +
// cqw-sized (see /events.css). The day strip scrolls horizontally (no visible
// scrollbar) since the tournament spans ~6 weeks.

function VA_DayList({ days, selected, onSelect }) {
  return (
    <div className="aw-events__daylist wc-noscrollbar">
      {days.map((d, i) => (
        <div key={d.key || d.d} className={`aw-events__day${i === selected ? ' is-active' : ''}`} onClick={() => onSelect(i)}>
          <div>
            <div className="aw-events__day-dow">{d.short}{d.today ? ' · TODAY' : ''}</div>
            <div className="aw-events__day-num">{d.d}</div>
          </div>
          <div className="aw-events__day-count">{d.matches.length} {d.matches.length === 1 ? 'match' : 'matches'}</div>
        </div>
      ))}
    </div>
  );
}

const TIER_LABEL = { current: 'Live conditions', hourly: 'Match Forecast', quarters: 'Quarter-day forecast', daily: 'Daily forecast' };

function VA_Card({ m }) {
  const { unit } = useWC();
  const windSub = m.windDir ? `mph ${m.windDir}` : 'mph';
  const rf = wcConvert(m.realfeel, unit);
  return (
    <div className="aw-events__card">
      <div className="aw-events__card-inner">
        <div className="aw-events__card-top">
          <div className="aw-events__kick">
            <span className="aw-events__kick-time">{m.time} {m.ampm}</span>
            {m.tz && <span className="aw-events__kick-tz">{m.tz}</span>}
          </div>
          {m.tier && <span className="aw-events__tier">{TIER_LABEL[m.tier] || ''}</span>}
        </div>
        <div className="aw-events__teams">
          <TeamLine code={m.home} />
          <span className="aw-events__vs">vs</span>
          <TeamLine code={m.away} />
          {m.group && <span className="aw-events__group">{m.group}</span>}
        </div>
        <div className="aw-events__venue">
          <span className="aw-events__venue-name">{m.venue}</span>{(m.city || m.region) ? <span>· {[m.city, m.region].filter(Boolean).join(', ')}</span> : null}
        </div>
        <div className="aw-events__wxrow">
          <WxIcon code={m.code} cqw={3.6} />
          <Temp f={m.temp} unit={unit} />
          <div className="aw-events__cond">
            <div className="aw-events__cond-text">{m.cond || DASH}</div>
            <div className="aw-events__realfeel">RealFeel® <b style={{ color: m.realfeel != null && m.realfeel >= 100 ? '#F05514' : '#fff' }}>{rf == null ? DASH : `${rf}°`}</b></div>
          </div>
        </div>
        <div className="aw-events__stats">
          <Stat label="Rain" value={m.rain == null ? null : `${m.rain}%`} color={m.rain >= 50 ? '#599BE3' : '#fff'} />
          <Stat label="Wind" value={m.wind} sub={m.wind == null ? null : windSub} />
          <Stat label="Lightning" value={m.lightning == null ? null : `${m.lightning}%`} color={m.lightning >= 40 ? '#CE2027' : '#fff'} />
          <Stat label="Air" value={m.aqi} sub={m.aqiLabel} color={m.aqiColor || '#fff'} />
        </div>
        {m.hourly && m.hourly.length > 0 && (
          <div className="aw-events__hourly"><HourStrip hourly={m.hourly} unit={unit} /></div>
        )}
      </div>
    </div>
  );
}

function TodayView({ days, selected, onSelect, view, setView }) {
  const day = days[selected];
  if (!day) return null;
  return (
    <div className="aw-events__today">
      <div className="aw-events__daystrip">
        <ViewToggle view={view} onChange={setView} />
        <VA_DayList days={days} selected={selected} onSelect={onSelect} />
      </div>
      <div className="aw-events__today-main wc-noscrollbar">
        <div className="aw-events__grid">
          {day.matches.map((m) => <VA_Card key={m.id} m={m} />)}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TodayView, VA_DayList, VA_Card });