// Schedule tab — three-column WHEN / WHAT / WHERE table for the weekend.
// All event times are pinned to Eastern Time (EDT, UTC-4 during May).
// The NOW indicator works regardless of which timezone the user's phone is in.
//
// Edit the SCHEDULE array below to update what shows up on the Schedule tab.

const { useState: useStateSched, useEffect: useEffectSched } = React;

// May 2026 is in EDT (UTC-4)
const TZ = '-04:00';
const D = (date, hhmm) => `${date}T${hhmm}:00${TZ}`;

const FIELD_DAY_GAMES = ['water', 'pict', 'kadima', 'balloon', 'cotton', 'leg', 'rps', 'pyramid', 'lol', 'dance'];

const SCHEDULE = [
  { day: 'FRIDAY · MAY 8' },
  { when: 'Afternoon', what: 'Arrival',          where: 'SoWilo Retreat',
    start: D('2026-05-08','14:00'), end: D('2026-05-08','18:30') },
  { when: '6:30pm',    what: 'Opening Ceremony', where: 'Outdoor Lounge',
    image: 'assets/torch-icon.png',
    start: D('2026-05-08','18:30'), end: D('2026-05-08','19:30') },
  { when: '7:30pm',    what: 'Dinner',           where: 'Main Lodge',
    start: D('2026-05-08','19:30'), end: D('2026-05-08','22:00') },
  { when: '10pm',      what: 'Evening Games',    where: 'Yoga Room',
    start: D('2026-05-08','22:00'), end: D('2026-05-08','23:59') },

  { day: 'SATURDAY · MAY 9' },
  { when: 'Morning',   what: 'Sleep in · trail · spa', where: '',
    start: D('2026-05-09','06:00'), end: D('2026-05-09','10:00') },
  { when: '10am',      what: 'Brunch',                 where: 'Main Lodge',
    start: D('2026-05-09','10:00'), end: D('2026-05-09','11:30') },
  { when: '11:30–3pm', what: 'Free block · trail · games · spa', where: '',
    start: D('2026-05-09','11:30'), end: D('2026-05-09','15:00') },
  { when: '3–5pm',     what: 'Field Day',              where: 'Outdoor Lounge (Yoga Room if rain)',
    start: D('2026-05-09','15:00'), end: D('2026-05-09','17:00'), icons: FIELD_DAY_GAMES },
  { when: '5–7pm',     what: 'Free block · trail · games · spa', where: '',
    start: D('2026-05-09','17:00'), end: D('2026-05-09','19:00') },
  { when: '7pm',       what: 'Dinner',                 where: 'Main Lodge',
    start: D('2026-05-09','19:00'), end: D('2026-05-09','20:30') },
  { when: '8:30pm',    what: 'Evening Games',          where: 'Yoga Room',
    start: D('2026-05-09','20:30'), end: D('2026-05-09','23:00') },

  { day: 'SUNDAY · MAY 10' },
  { when: 'Morning',   what: 'Sleep in · trail · spa', where: '',
    start: D('2026-05-10','06:00'), end: D('2026-05-10','09:00') },
  { when: '9am',       what: 'Brunch',                 where: 'Main Lodge',
    start: D('2026-05-10','09:00'), end: D('2026-05-10','10:30') },
  { when: '10:30am',   what: 'Awards Ceremony',        where: 'Outdoor Lounge',
    medals: true,
    start: D('2026-05-10','10:30'), end: D('2026-05-10','12:00') },
  { when: 'Afternoon', what: 'Departure (2pm checkout)', where: '',
    start: D('2026-05-10','12:00'), end: D('2026-05-10','14:00') },
];

function MedalIcon({ kind }) {
  const palette = {
    gold:   { face: '#f5c518', inner: '#a88848' },
    silver: { face: '#cfd8dc', inner: '#9aa3a8' },
    bronze: { face: '#cd7f32', inner: '#7a4a1c' },
  }[kind];
  return (
    <svg viewBox="0 0 16 16" width="20" height="20" shapeRendering="crispEdges">
      <rect x="6" y="0" width="4" height="3" fill="#5a3a25" />
      <rect x="5" y="2" width="6" height="1" fill="#7a4a1c" />
      <rect x="4" y="3" width="8" height="2" fill={palette.face} />
      <rect x="3" y="5" width="10" height="6" fill={palette.face} />
      <rect x="4" y="11" width="8" height="2" fill={palette.face} />
      <rect x="6" y="6" width="4" height="4" fill={palette.inner} />
    </svg>
  );
}

function ScheduleTab() {
  const [now, setNow] = useStateSched(Date.now());
  useEffectSched(() => {
    // Tick once a minute to update NOW marker without burning battery.
    const id = setInterval(() => setNow(Date.now()), 60_000);
    return () => clearInterval(id);
  }, []);

  // Find the index of the row that's currently happening, or the next upcoming.
  let currentRowIdx = -1;
  let nextRowIdx = -1;
  for (let i = 0; i < SCHEDULE.length; i++) {
    const row = SCHEDULE[i];
    if (!row.start) continue;
    const s = Date.parse(row.start), e = Date.parse(row.end);
    if (s <= now && now < e) { currentRowIdx = i; break; }
  }
  if (currentRowIdx === -1) {
    for (let i = 0; i < SCHEDULE.length; i++) {
      const row = SCHEDULE[i];
      if (!row.start) continue;
      if (Date.parse(row.start) > now) { nextRowIdx = i; break; }
    }
  }

  return (
    <div>
      <div className="section-title">SCHEDULE</div>
      <div className="sched-wrap">
        <div className="sched-head-row">
          <div>WHEN</div>
          <div>WHAT</div>
          <div>WHERE</div>
        </div>
        {SCHEDULE.map((row, i) => {
          if (row.day) return <div key={i} className="sched-day">{row.day}</div>;
          const isNow = i === currentRowIdx;
          const isNext = i === nextRowIdx;
          const isPast = row.end && Date.parse(row.end) <= now;
          const cls = ['sched-row', isNow && 'is-now', isNext && 'is-next', isPast && !isNow && 'is-past']
            .filter(Boolean).join(' ');
          return (
            <div key={i} className={cls}>
              <div className="sched-when">
                {isNow && <span className="sched-pill now">NOW</span>}
                {isNext && <span className="sched-pill next">NEXT</span>}
                {row.when}
              </div>
              <div className="sched-what">
                {row.image ? (
                  <img className="sched-media smooth" src={row.image} alt={row.what || ''} />
                ) : row.medals ? (
                  <div className="sched-icons">
                    <span className="sched-icon"><MedalIcon kind="gold" /></span>
                    <span className="sched-icon"><MedalIcon kind="silver" /></span>
                    <span className="sched-icon"><MedalIcon kind="bronze" /></span>
                  </div>
                ) : (
                  <div>{row.what}</div>
                )}
                {row.icons && (
                  <div className="sched-icons">
                    {row.icons.map(id => (
                      <span key={id} className="sched-icon"><GameIcon id={id} size={20} /></span>
                    ))}
                  </div>
                )}
              </div>
              <div className="sched-where">{row.where || '·'}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

window.ScheduleTab = ScheduleTab;