// "Weekly" view — one row per matchday: the day tile on the left, that day's
// chips laid out left-to-right to its right (the tile stretches to match the
// chip height). Class-based + cqw-sized (see /events.css). 7 days, supplied by
// the host. Clicking a day/chip opens it in the Daily view.

function VD_Chip({ m, onClick }) {
  const { unit } = useWC();
  const home = teamInfo(m.home);
  const away = teamInfo(m.away);
  const t = wcConvert(m.temp, unit);
  return (
    <div className="aw-events__chip" onClick={onClick}>
      <div className="aw-events__chip-time">{m.time}{(m.ampm || '').toLowerCase().startsWith('p') ? 'p' : 'a'} {m.tz && <span className="aw-events__chip-tz">{m.tz}</span>}</div>
      <div className="aw-events__chip-row">
        <FlagChip code={m.home} size="sm" />
        <span className="aw-events__chip-code">{home.code}</span>
        <span className="aw-events__chip-v">v</span>
        <FlagChip code={m.away} size="sm" />
        <span className="aw-events__chip-code">{away.code}</span>
      </div>
      <div className="aw-events__chip-row">
        <WxIcon code={m.code} cqw={1.67} />
        <span className="aw-events__chip-temp">{t == null ? DASH : `${t}°`}</span>
        <span className="aw-events__chip-city">{[m.city, m.region].filter(Boolean).join(', ')}</span>
      </div>
    </div>
  );
}

function WeekView({ days, onSelectDay, view, setView }) {
  const total = days.reduce((a, d) => a + d.matches.length, 0);
  const first = days[0];
  const last = days[days.length - 1];
  const range = first && last ? `${first.dateLabel} – ${last.dateLabel}` : '';
  return (
    <div className="aw-events__weekly">
      <div className="aw-events__weekly-toolbar">
        <ViewToggle view={view} onChange={setView} />
        <span className="aw-events__weekly-range">{total} matches · {range}</span>
      </div>
      <div className="aw-events__weekly-rows wc-noscrollbar">
        {days.map((d, i) => (
          <div className="aw-events__wrow" key={d.key || i}>
            <div className={`aw-events__day${d.today ? ' is-active' : ''}`} onClick={() => onSelectDay && onSelectDay(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}</div>
            </div>
            <div className="aw-events__wrow-chips">
              {d.matches.map((m, j) => <VD_Chip key={m.id || j} m={m} onClick={() => onSelectDay && onSelectDay(i)} />)}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { WeekView, VD_Chip });