// screens_schedule.jsx — Schedule (calendar + list) and Event Detail

function ScheduleScreen({ T, onNav }) {
  const [view, setView] = React.useState('month');
  const [selDay, setSelDay] = React.useState(18);
  return (
    <div style={{ paddingBottom: 120 }}>
      <ScreenHeader T={T} title="Schedule" trailing={
        <Segmented T={T} value={view} onChange={setView} options={[
          { value:'month', label:'Month' },
          { value:'list',  label:'List' },
        ]} />
      } />
      {view === 'month' ? (
        <MonthView T={T} selDay={selDay} setSelDay={setSelDay} onNav={onNav} />
      ) : (
        <ListView T={T} onNav={onNav} />
      )}
    </div>
  );
}

function MonthView({ T, selDay, setSelDay, onNav }) {
  const dow = ['S','M','T','W','T','F','S'];
  const daysInMonth = 30;
  const startCol = 3; // Apr 1 = Wed
  const cells = [];
  for (let i = 0; i < startCol; i++) cells.push(null);
  for (let d = 1; d <= daysInMonth; d++) cells.push(d);

  const dayEvents = CAL_EVENTS[selDay] || [];
  const fullEvents = UPCOMING.filter(e => e.date.includes(`Apr ${selDay}`));

  return (
    <div style={{ padding: '10px 16px 0' }}>
      <div style={{
        display:'flex', alignItems:'center', justifyContent:'space-between',
        padding:'8px 4px', color: T.label, fontFamily: T.displayFont,
        fontSize: 20, fontWeight: 700, letterSpacing: -0.3,
      }}>
        <span>April 2026</span>
        <div style={{ display:'flex', gap: 4 }}>
          <button style={arrowBtn(T)}><Icon name="chevron-left" size={18} color={T.accent} weight={2.4}/></button>
          <button style={arrowBtn(T)}><Icon name="chevron-right" size={18} color={T.accent} weight={2.4}/></button>
        </div>
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'repeat(7, 1fr)', gap: 2, color: T.label2, fontSize: 11, fontWeight: 600, marginBottom: 4 }}>
        {dow.map((d,i) => <div key={i} style={{ textAlign:'center', padding: 4 }}>{d}</div>)}
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'repeat(7, 1fr)', gap: 2 }}>
        {cells.map((d, i) => {
          if (d === null) return <div key={i} style={{ height: 44 }} />;
          const ev = CAL_EVENTS[d] || [];
          const isSel = d === selDay;
          const isToday = d === 18;
          return (
            <button key={i} onClick={() => setSelDay(d)} style={{
              height: 44, border:'none', cursor:'pointer',
              background: isSel ? T.accent : 'transparent',
              borderRadius: 10, padding: 0,
              display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap: 3,
              position:'relative',
            }}>
              <span style={{
                fontSize: 15, fontWeight: isToday ? 700 : 500,
                color: isSel ? '#fff' : (isToday ? T.accent : T.label),
                fontFamily: T.font,
              }}>{d}</span>
              {ev.length > 0 && (
                <div style={{ display:'flex', gap: 2 }}>
                  {ev.slice(0,3).map((e, j) => (
                    <div key={j} style={{
                      width: 4, height: 4, borderRadius: 2,
                      background: isSel ? '#fff' :
                        (e.t === 'game' ? T.accent : e.t === 'social' ? T.yellow : T.label2),
                    }}/>
                  ))}
                </div>
              )}
            </button>
          );
        })}
      </div>

      <div style={{ marginTop: 18 }}>
        <SectionLabel T={T}>April {selDay}</SectionLabel>
        <Card T={T} pad={false}>
          {fullEvents.length === 0 && dayEvents.length === 0 ? (
            <div style={{ padding:'32px 20px', textAlign:'center', color: T.label2, fontSize: 14 }}>
              Nothing scheduled.
            </div>
          ) : fullEvents.length ? fullEvents.map((e,i,a) => (
            <EventRow key={e.id} T={T} event={e} isLast={i===a.length-1} onClick={() => onNav('event')} />
          )) : dayEvents.map((e, i, a) => (
            <div key={i} style={{ padding:'14px', display:'flex', gap: 12, alignItems:'center', borderBottom: i===a.length-1?'none':`0.5px solid ${T.sep}` }}>
              <EventIcon T={T} type={e.t} size={38} />
              <div style={{ flex:1 }}>
                <div style={{ color: T.label, fontWeight: 600, fontSize: 15 }}>{e.label}</div>
                <div style={{ color: T.label2, fontSize: 13, marginTop: 1 }}>Apr {selDay}</div>
              </div>
              <Icon name="chevron-right" size={14} color={T.label3} weight={2.5} />
            </div>
          ))}
        </Card>
      </div>
    </div>
  );
}

function arrowBtn(T) {
  return {
    width: 32, height: 32, borderRadius: 16, border:'none',
    background: T.fill, cursor:'pointer',
    display:'inline-flex', alignItems:'center', justifyContent:'center',
  };
}

function ListView({ T, onNav }) {
  return (
    <div style={{ padding: '10px 16px 0' }}>
      <SectionLabel T={T}>This Week</SectionLabel>
      <Card T={T} pad={false}>
        {UPCOMING.slice(0, 3).map((e,i,a) => (
          <EventRow key={e.id} T={T} event={e} isLast={i===a.length-1} onClick={() => onNav('event')} />
        ))}
      </Card>
      <div style={{ height: 16 }} />
      <SectionLabel T={T}>Next Week</SectionLabel>
      <Card T={T} pad={false}>
        {UPCOMING.slice(3).map((e,i,a) => (
          <EventRow key={e.id} T={T} event={e} isLast={i===a.length-1} onClick={() => onNav('event')} />
        ))}
      </Card>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Event detail
// ─────────────────────────────────────────────────────────────
function EventDetailScreen({ T, onBack, isAdmin, rsvp, setRsvp }) {
  const g = NEXT_GAME;
  return (
    <div style={{ paddingBottom: 120 }}>
      {/* Hero map/image */}
      <div style={{ height: 220, position:'relative', overflow:'hidden' }}>
        <div style={{
          position:'absolute', inset: 0,
          background: `linear-gradient(135deg, ${T.accent}, oklch(0.45 0.15 ${(hueFromHex(T.accent)+30)%360}))`,
        }}/>
        <div style={{
          position:'absolute', inset: 0,
          backgroundImage:`
            linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px)
          `,
          backgroundSize:'24px 24px',
        }}/>
        <div style={{
          position:'absolute', inset: 0, display:'flex', alignItems:'center', justifyContent:'space-around',
          padding:'0 32px',
        }}>
          <TeamMark label="RVS" name="Strikers" />
          <div style={{ fontFamily:'"SF Mono", monospace', fontSize: 32, fontWeight: 700, color:'rgba(255,255,255,0.75)', letterSpacing: 2 }}>VS</div>
          <TeamMark label="OVF" name="Oak Valley" alt />
        </div>
        <button onClick={onBack} style={{
          position:'absolute', top: 58, left: 14,
          width: 36, height: 36, borderRadius: 18, border:'none', cursor:'pointer',
          background:'rgba(0,0,0,0.25)', backdropFilter:'blur(12px)',
          display:'flex', alignItems:'center', justifyContent:'center',
        }}>
          <Icon name="chevron-left" size={20} color="#fff" weight={2.4}/>
        </button>
      </div>

      <div style={{ padding: '16px 16px 0' }}>
        <div style={{
          display:'inline-block', padding:'4px 10px', borderRadius: 8,
          background: hexA(T.accent, 0.12), color: T.accent,
          fontSize: 11, fontWeight: 700, letterSpacing: 0.5, textTransform:'uppercase',
        }}>League Match · Home</div>
        <h1 style={{
          fontFamily: T.displayFont, fontSize: 26, fontWeight: 700, color: T.label,
          margin:'8px 0 2px', letterSpacing: -0.6,
        }}>vs. Oak Valley FC</h1>
        <div style={{ color: T.label2, fontSize: 15 }}>Saturday, April 18 · 10:30 AM</div>

        {/* Detail rows */}
        <div style={{ marginTop: 16, background: T.card, borderRadius: T.listRadius, overflow:'hidden' }}>
          <DetailRow T={T} icon="clock"    label="Arrive" value="10:00 AM (30 min early)" />
          <DetailRow T={T} icon="location" label="Field"  value={g.location} sub={g.address} trailing={
            <Pill T={T} bg={hexA(T.accent, 0.12)} color={T.accent} icon="map">Directions</Pill>
          } />
          <DetailRow T={T} icon="shield"   label="Kit"    value={g.kit} />
          <DetailRow T={T} icon={g.weather.icon} label="Weather" value={`${g.weather.temp}°F · ${g.weather.cond}`} sub="Light wind from NW · 0% precip" last />
        </div>

        {/* RSVP */}
        {!isAdmin && (
          <>
            <SectionLabel T={T} style={{ marginTop: 20 }}>Your RSVP</SectionLabel>
            <div style={{ display:'flex', gap: 8 }}>
              <RsvpButton T={T} active={rsvp==='in'}  kind="in"  onClick={()=>setRsvp('in')}  label="I'm in" />
              <RsvpButton T={T} active={rsvp==='?'}   kind="?"   onClick={()=>setRsvp('?')}   label="Maybe" />
              <RsvpButton T={T} active={rsvp==='out'} kind="out" onClick={()=>setRsvp('out')} label="Can't go" />
            </div>
          </>
        )}

        {/* Team RSVP strip */}
        <div style={{ marginTop: 18 }}>
          <SectionLabel T={T}>Availability ({g.rsvpIn} of 14)</SectionLabel>
          <Card T={T}>
            <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between' }}>
              <div style={{ display:'flex', gap: 14, fontSize: 13, color: T.label2 }}>
                <span style={{ display:'inline-flex', alignItems:'center', gap: 5 }}>
                  <span style={{ width: 8, height: 8, borderRadius: 4, background: T.green }}/> {g.rsvpIn} in
                </span>
                <span style={{ display:'inline-flex', alignItems:'center', gap: 5 }}>
                  <span style={{ width: 8, height: 8, borderRadius: 4, background: T.yellow }}/> {g.rsvpMaybe} maybe
                </span>
                <span style={{ display:'inline-flex', alignItems:'center', gap: 5 }}>
                  <span style={{ width: 8, height: 8, borderRadius: 4, background: T.red }}/> {g.rsvpOut} out
                </span>
              </div>
            </div>
            <div style={{ display:'flex', height: 6, borderRadius: 3, overflow:'hidden', marginTop: 10, background: T.fill }}>
              <div style={{ flex: g.rsvpIn, background: T.green }}/>
              <div style={{ flex: g.rsvpMaybe, background: T.yellow }}/>
              <div style={{ flex: g.rsvpOut, background: T.red }}/>
            </div>
            <div style={{ marginTop: 12, display:'flex', flexWrap:'wrap', gap: 8 }}>
              {ROSTER.slice(0, 10).map(p => (
                <div key={p.id} style={{ position:'relative' }}>
                  <Avatar initials={p.initials} hue={p.hue} size={32} />
                  <div style={{
                    position:'absolute', right: -2, bottom: -2,
                    width: 14, height: 14, borderRadius: 7, border: `2px solid ${T.card}`,
                    background: p.avail === 'in' ? T.green : p.avail === 'out' ? T.red : T.label3,
                  }}/>
                </div>
              ))}
              <div style={{
                width: 32, height: 32, borderRadius: 16, background: T.fill,
                display:'flex', alignItems:'center', justifyContent:'center',
                color: T.label2, fontSize: 12, fontWeight: 600,
              }}>+4</div>
            </div>
          </Card>
        </div>

        {/* Snack + carpool shortcuts */}
        <div style={{ marginTop: 18, display:'flex', gap: 10 }}>
          <MiniCard T={T} icon="🍊" title="Snack" sub="Okafor family" />
          <MiniCard T={T} icon="🚗" title="Carpool" sub="2 seats open" />
        </div>

        {isAdmin && (
          <div style={{ marginTop: 18, display:'flex', gap: 10 }}>
            <button style={bigBtn(T, T.accent)}>
              <Icon name="soccer" size={18} color="#fff" weight={2.2}/> Start Game Mode
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

function DetailRow({ T, icon, label, value, sub, trailing, last }) {
  return (
    <div style={{
      display:'flex', alignItems:'center', gap: 14, padding:'14px 16px',
      borderBottom: last ? 'none' : `0.5px solid ${T.sep}`,
    }}>
      <div style={{
        width: 34, height: 34, borderRadius: 10, background: T.fill2,
        display:'flex', alignItems:'center', justifyContent:'center', flexShrink: 0,
      }}>
        <Icon name={icon} size={18} color={T.label} weight={2}/>
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 11, color: T.label2, fontWeight: 600, letterSpacing: 0.3, textTransform:'uppercase' }}>{label}</div>
        <div style={{ fontSize: 15, color: T.label, fontWeight: 500, marginTop: 1 }}>{value}</div>
        {sub && <div style={{ fontSize: 12, color: T.label2, marginTop: 2 }}>{sub}</div>}
      </div>
      {trailing}
    </div>
  );
}

function MiniCard({ T, icon, title, sub }) {
  return (
    <div style={{
      flex: 1, background: T.card, borderRadius: 18, padding: 12,
      display:'flex', alignItems:'center', gap: 10,
    }}>
      <div style={{ fontSize: 26 }}>{icon}</div>
      <div>
        <div style={{ fontSize: 11, fontWeight: 600, color: T.label2, textTransform:'uppercase', letterSpacing: 0.3 }}>{title}</div>
        <div style={{ fontSize: 14, fontWeight: 600, color: T.label, marginTop: 1 }}>{sub}</div>
      </div>
    </div>
  );
}

function bigBtn(T, bg) {
  return {
    flex: 1, height: 52, borderRadius: 16, border:'none', cursor:'pointer',
    background: bg, color:'#fff', fontFamily: T.font, fontSize: 16, fontWeight: 600,
    display:'inline-flex', alignItems:'center', justifyContent:'center', gap: 8,
    boxShadow: `0 4px 16px ${hexA(bg, 0.35)}`,
  };
}

Object.assign(window, { ScheduleScreen, EventDetailScreen, DetailRow, MiniCard, bigBtn });