// screens_admin.jsx — Admin-only screens: create event, broadcast, RSVP tracker, game day live mode

// ─────────────────────────────────────────────────────────────
// Admin Home — different content in the home dashboard
// ─────────────────────────────────────────────────────────────
function AdminHomeScreen({ T, onNav }) {
  const game = NEXT_GAME;
  return (
    <div style={{ paddingBottom: 120 }}>
      <ScreenHeader T={T} title="Coach" subtitle={`${TEAM.name} · admin`} trailing={
        <button onClick={()=>onNav('notifications')} style={{
          width: 36, height: 36, borderRadius: 18, border:'none',
          background: T.fill, cursor:'pointer', position:'relative',
          display:'flex', alignItems:'center', justifyContent:'center',
        }}>
          <Icon name="bell" size={20} color={T.label} weight={1.8} />
          <div style={{ position:'absolute', top:6, right:7, width:9, height:9, borderRadius:5, background: T.red, border:`1.5px solid ${T.fill}` }}/>
        </button>
      } />

      {/* Next game admin card */}
      <div style={{ padding: '12px 16px 0' }}>
        <div style={{
          background: T.card, borderRadius: 24, overflow:'hidden',
        }}>
          <div style={{
            background: `linear-gradient(135deg, ${T.accent}, oklch(0.42 0.15 ${(hueFromHex(T.accent)+30)%360}))`,
            padding:'14px 16px', color:'#fff',
          }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: 0.5, textTransform:'uppercase', color:'rgba(255,255,255,0.82)' }}>Next game · Saturday</div>
            <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: -0.4, marginTop: 2, fontFamily: T.displayFont }}>vs. Oak Valley FC</div>
            <div style={{ fontSize: 13, color:'rgba(255,255,255,0.85)', marginTop: 2 }}>10:30 AM · Riverside F3 · {game.weather.temp}°</div>
          </div>
          <div style={{ padding: 14, display:'flex', gap: 14, alignItems:'center' }}>
            <RsvpDonut T={T} inN={game.rsvpIn} outN={game.rsvpOut} maybeN={game.rsvpMaybe} total={14} />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, color: T.label, fontWeight: 600 }}>2 haven't replied</div>
              <div style={{ fontSize: 13, color: T.label2, marginTop: 1 }}>Noah Kim, Sam Reyes</div>
              <button onClick={()=>onNav('rsvp-tracker')} style={{
                marginTop: 6, padding:'5px 10px', borderRadius: 12, border:'none',
                background: hexA(T.accent, 0.15), color: T.accent, fontSize: 12, fontWeight: 600, cursor:'pointer',
              }}>Nudge →</button>
            </div>
          </div>
          <div style={{
            display:'grid', gridTemplateColumns:'repeat(3, 1fr)',
            borderTop: `0.5px solid ${T.sep}`,
          }}>
            <AdminAction T={T} icon="play"       label="Game Mode" onClick={()=>onNav('game-day')} accent />
            <AdminAction T={T} icon="user"       label="Lineup"     sub="Set starters" />
            <AdminAction T={T} icon="map"        label="Directions" isLast />
          </div>
        </div>
      </div>

      {/* Quick admin actions */}
      <div style={{ padding:'18px 16px 0' }}>
        <SectionLabel T={T}>Quick actions</SectionLabel>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 10 }}>
          <QuickTile T={T} icon="plus"      label="New Event"   onClick={()=>onNav('new-event')} />
          <QuickTile T={T} icon="megaphone" label="Broadcast"   onClick={()=>onNav('broadcast')} tint={T.accent} />
          <QuickTile T={T} icon="team"      label="Manage Team" onClick={()=>onNav('admin-team')} />
          <QuickTile T={T} icon="check"     label="RSVP Tracker" onClick={()=>onNav('rsvp-tracker')} />
        </div>
      </div>

      <div style={{ padding:'18px 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>

      <div style={{ padding:'18px 16px 0' }}>
        <SectionLabel T={T}>Announcements</SectionLabel>
        <Card T={T} pad={false}>
          {ANNOUNCEMENTS.map((a, i, arr) => (
            <div key={a.id} style={{
              padding:'12px 14px', borderBottom: i===arr.length-1?'none':`0.5px solid ${T.sep}`,
              display:'flex', gap: 12, alignItems:'flex-start',
            }}>
              <div style={{
                width: 36, height: 36, borderRadius: 10,
                background: hexA(T.accent, 0.14),
                display:'flex', alignItems:'center', justifyContent:'center',
              }}>
                <Icon name="megaphone" size={18} color={T.accent} weight={2.2} />
              </div>
              <div style={{ flex:1 }}>
                <div style={{ display:'flex', alignItems:'center', gap: 6 }}>
                  {a.pin && <Icon name="pin" size={12} color={T.label2} weight={2.5}/>}
                  <span style={{ color: T.label, fontWeight: 600, fontSize: 14 }}>{a.title}</span>
                </div>
                <div style={{ color: T.label2, fontSize: 13, marginTop: 2 }}>{a.body}</div>
                <div style={{ color: T.label3, fontSize: 11, marginTop: 4, fontWeight: 500 }}>
                  {a.time} · read {a.read}/{a.total}
                </div>
              </div>
            </div>
          ))}
        </Card>
      </div>
    </div>
  );
}

function AdminAction({ T, icon, label, sub, onClick, accent, isLast }) {
  return (
    <button onClick={onClick} style={{
      border:'none', background:'transparent', cursor:'pointer',
      padding: '12px 8px', display:'flex', flexDirection:'column', alignItems:'center', gap: 4,
      borderRight: isLast ? 'none' : `0.5px solid ${T.sep}`,
      color: accent ? T.accent : T.label, fontFamily: T.font,
    }}>
      <Icon name={icon} size={20} color={accent?T.accent:T.label} weight={2.2} />
      <span style={{ fontSize: 13, fontWeight: 600 }}>{label}</span>
      {sub && <span style={{ fontSize: 11, color: T.label2 }}>{sub}</span>}
    </button>
  );
}

function QuickTile({ T, icon, label, onClick, tint }) {
  const color = tint || T.label;
  return (
    <button onClick={onClick} style={{
      padding:'14px', borderRadius: 18, border:'none', cursor:'pointer',
      background: T.card, display:'flex', flexDirection:'column', alignItems:'flex-start', gap: 12,
      fontFamily: T.font, textAlign:'left',
    }}>
      <div style={{
        width: 36, height: 36, borderRadius: 10,
        background: tint ? hexA(tint, 0.14) : T.fill2,
        display:'flex', alignItems:'center', justifyContent:'center',
      }}>
        <Icon name={icon} size={20} color={color} weight={2.2} />
      </div>
      <span style={{ color: T.label, fontWeight: 600, fontSize: 15 }}>{label}</span>
    </button>
  );
}

function RsvpDonut({ T, inN, outN, maybeN, total, size = 56 }) {
  const r = size/2 - 5;
  const c = 2 * Math.PI * r;
  const inPct = inN/total, maybePct = maybeN/total, outPct = outN/total;
  return (
    <div style={{ position:'relative', width: size, height: size, flexShrink: 0 }}>
      <svg width={size} height={size} style={{ transform:'rotate(-90deg)' }}>
        <circle cx={size/2} cy={size/2} r={r} stroke={T.fill2} strokeWidth="6" fill="none"/>
        <circle cx={size/2} cy={size/2} r={r} stroke={T.green} strokeWidth="6" fill="none"
          strokeDasharray={`${c*inPct} ${c}`} strokeLinecap="round"/>
        <circle cx={size/2} cy={size/2} r={r} stroke={T.yellow} strokeWidth="6" fill="none"
          strokeDasharray={`${c*maybePct} ${c}`} strokeDashoffset={-c*inPct} strokeLinecap="round"/>
        <circle cx={size/2} cy={size/2} r={r} stroke={T.red} strokeWidth="6" fill="none"
          strokeDasharray={`${c*outPct} ${c}`} strokeDashoffset={-c*(inPct+maybePct)} strokeLinecap="round"/>
      </svg>
      <div style={{
        position:'absolute', inset: 0, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center',
      }}>
        <span style={{ fontSize: 14, fontWeight: 700, color: T.label, fontFamily: T.displayFont }}>{inN}/{total}</span>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Create Event
// ─────────────────────────────────────────────────────────────
function CreateEventScreen({ T, onBack }) {
  const [type, setType] = React.useState('game');
  return (
    <div style={{ paddingBottom: 120 }}>
      <ScreenHeader T={T} title="New Event" onBack={onBack} trailing={
        <button style={{
          padding:'7px 14px', borderRadius: 16, border:'none', cursor:'pointer',
          background: T.accent, color:'#fff', fontFamily: T.font, fontSize: 14, fontWeight: 600,
        }}>Post</button>
      } />
      <div style={{ padding:'12px 16px 0' }}>
        {/* Type selector */}
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 8 }}>
          {[
            { v:'game',     label:'Game',     icon:'soccer' },
            { v:'practice', label:'Practice', icon:'whistle' },
            { v:'social',   label:'Social',   icon:'star' },
          ].map(o => {
            const active = o.v === type;
            return (
              <button key={o.v} onClick={()=>setType(o.v)} style={{
                padding:'12px 8px', borderRadius: 14, border:'none', cursor:'pointer',
                background: active ? hexA(T.accent, 0.12) : T.card,
                color: active ? T.accent : T.label,
                fontFamily: T.font, fontSize: 14, fontWeight: 600,
                display:'flex', flexDirection:'column', alignItems:'center', gap: 6,
                boxShadow: active ? `inset 0 0 0 1.5px ${T.accent}` : 'none',
              }}>
                <Icon name={o.icon} size={22} color={active?T.accent:T.label2} weight={2.2}/>
                {o.label}
              </button>
            );
          })}
        </div>

        <div style={{ marginTop: 16, background: T.card, borderRadius: T.listRadius, overflow:'hidden' }}>
          <FormRow T={T} label="Opponent" value="Coastal Galaxy" />
          <FormRow T={T} label="Date"     value="Sat, May 2, 2026" />
          <FormRow T={T} label="Time"     value="10:30 AM" />
          <FormRow T={T} label="Arrive"   value="30 min early" />
          <FormRow T={T} label="Location" value="Riverside Field 1" />
          <FormRow T={T} label="Kit"      value="Home (red)" last />
        </div>

        <div style={{ marginTop: 16 }}>
          <SectionLabel T={T}>Options</SectionLabel>
          <div style={{ background: T.card, borderRadius: T.listRadius, overflow:'hidden' }}>
            <ToggleRow T={T} label="Require RSVP" on />
            <ToggleRow T={T} label="Enable snack sign-up" on />
            <ToggleRow T={T} label="Enable carpool board" />
            <ToggleRow T={T} label="Notify immediately" on last />
          </div>
        </div>

        <div style={{ marginTop: 16 }}>
          <SectionLabel T={T}>Notes</SectionLabel>
          <div style={{ background: T.card, borderRadius: 16, padding: 14, minHeight: 80, color: T.label2, fontSize: 14 }}>
            Tap to add notes for parents — directions, what to bring, parking tips…
          </div>
        </div>
      </div>
    </div>
  );
}

function FormRow({ T, label, value, last }) {
  return (
    <div style={{
      display:'flex', alignItems:'center', justifyContent:'space-between',
      padding:'14px 16px', borderBottom: last ? 'none' : `0.5px solid ${T.sep}`,
    }}>
      <span style={{ fontSize: 15, color: T.label, fontWeight: 500 }}>{label}</span>
      <span style={{ display:'inline-flex', alignItems:'center', gap: 4, color: T.label2, fontSize: 15 }}>
        {value}
        <Icon name="chevron-right" size={14} color={T.label3} weight={2.5} />
      </span>
    </div>
  );
}

function ToggleRow({ T, label, on, last }) {
  const [v, setV] = React.useState(!!on);
  return (
    <div style={{
      display:'flex', alignItems:'center', justifyContent:'space-between',
      padding:'12px 16px', borderBottom: last ? 'none' : `0.5px solid ${T.sep}`,
    }}>
      <span style={{ fontSize: 15, color: T.label, fontWeight: 500 }}>{label}</span>
      <button onClick={()=>setV(!v)} style={{
        width: 51, height: 31, borderRadius: 16, border:'none', cursor:'pointer', padding: 2,
        background: v ? T.green : T.fill,
        display:'flex', alignItems:'center', justifyContent: v?'flex-end':'flex-start',
        transition:'background 0.2s',
      }}>
        <div style={{ width: 27, height: 27, borderRadius: 14, background:'#fff', boxShadow:'0 2px 4px rgba(0,0,0,0.15)' }}/>
      </button>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Broadcast
// ─────────────────────────────────────────────────────────────
function BroadcastScreen({ T, onBack }) {
  const [text, setText] = React.useState("Friendly reminder — Saturday's kit is HOME (red). See you on the pitch!");
  const [pin, setPin] = React.useState(true);
  const [push, setPush] = React.useState(true);
  return (
    <div style={{ paddingBottom: 120 }}>
      <ScreenHeader T={T} title="Broadcast" onBack={onBack} trailing={
        <button style={{
          padding:'7px 14px', borderRadius: 16, border:'none', cursor:'pointer',
          background: T.accent, color:'#fff', fontFamily: T.font, fontSize: 14, fontWeight: 600,
        }}>Send</button>
      } />
      <div style={{ padding:'8px 16px 0' }}>
        <div style={{ fontSize: 13, color: T.label2, padding:'0 4px 8px' }}>Sends to all 24 members. They'll get a push notification.</div>
        <div style={{ background: T.card, borderRadius: 18, padding: 14 }}>
          <div style={{ fontSize: 12, color: T.label2, fontWeight: 600, textTransform:'uppercase', letterSpacing: 0.4 }}>Title</div>
          <input defaultValue="Saturday Game Reminder" style={{
            width:'100%', border:'none', background:'transparent', outline:'none',
            fontFamily: T.displayFont, fontSize: 20, fontWeight: 700, color: T.label,
            padding:'4px 0', letterSpacing: -0.3,
          }}/>
          <div style={{ height: 1, background: T.sep, margin:'8px 0' }}/>
          <textarea value={text} onChange={e=>setText(e.target.value)} style={{
            width:'100%', border:'none', background:'transparent', outline:'none', resize:'none',
            fontFamily: T.font, fontSize: 15, color: T.label, minHeight: 110, lineHeight: 1.4,
          }}/>
        </div>

        <div style={{ marginTop: 16 }}>
          <SectionLabel T={T}>Options</SectionLabel>
          <div style={{ background: T.card, borderRadius: T.listRadius, overflow:'hidden' }}>
            <ToggleRow T={T} label="Pin to top of feed" on={pin} />
            <ToggleRow T={T} label="Send push notification" on={push} />
            <ToggleRow T={T} label="Also post to #general" on={true} last />
          </div>
        </div>

        <div style={{ marginTop: 16 }}>
          <SectionLabel T={T}>Preview</SectionLabel>
          <div style={{
            background: T.card, borderRadius: 18, padding: 14, display:'flex', gap: 12,
          }}>
            <div style={{ width: 38, height: 38, borderRadius: 10, background: hexA(T.accent, 0.14), display:'flex', alignItems:'center', justifyContent:'center' }}>
              <Icon name="megaphone" size={20} color={T.accent} weight={2.2} />
            </div>
            <div style={{ flex:1 }}>
              <div style={{ fontSize: 14, color: T.label, fontWeight: 600 }}>📌 Saturday Game Reminder</div>
              <div style={{ fontSize: 13, color: T.label2, marginTop: 2, lineHeight: 1.4 }}>{text}</div>
              <div style={{ fontSize: 11, color: T.label3, marginTop: 4, fontWeight: 500 }}>just now · Coach Marco</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// RSVP Tracker
// ─────────────────────────────────────────────────────────────
function RsvpTrackerScreen({ T, onBack }) {
  const g = NEXT_GAME;
  const ins = ROSTER.filter(p => p.avail === 'in');
  const outs = ROSTER.filter(p => p.avail === 'out');
  const noreply = ROSTER.filter(p => p.avail === '?');
  return (
    <div style={{ paddingBottom: 120 }}>
      <ScreenHeader T={T} title="RSVPs" subtitle="vs. Oak Valley FC · Saturday" onBack={onBack} />

      <div style={{ padding:'10px 16px 0' }}>
        <Card T={T}>
          <div style={{ display:'flex', alignItems:'center', gap: 14 }}>
            <RsvpDonut T={T} inN={g.rsvpIn} outN={g.rsvpOut} maybeN={g.rsvpMaybe} total={14} size={70} />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 22, fontWeight: 700, color: T.label, fontFamily: T.displayFont, letterSpacing: -0.3 }}>{g.rsvpIn} of 14</div>
              <div style={{ fontSize: 13, color: T.label2, marginTop: 2 }}>
                {g.rsvpMaybe} maybe · {g.rsvpOut} out · {14 - g.rsvpIn - g.rsvpMaybe - g.rsvpOut} haven't replied
              </div>
            </div>
          </div>
          <div style={{ marginTop: 12, display:'flex', gap: 8 }}>
            <Pill T={T} bg={T.accent} color="#fff" icon="send" style={{ flex: 1, justifyContent:'center', height: 38 }}>Nudge no-replies</Pill>
            <Pill T={T} bg={T.fill} color={T.label} icon="team" style={{ flex: 1, justifyContent:'center', height: 38 }}>By family</Pill>
          </div>
        </Card>
      </div>

      <RsvpGroup T={T} label={`In · ${ins.length}`} players={ins} kind="in" />
      <RsvpGroup T={T} label={`No reply · ${noreply.length}`} players={noreply} kind="?" />
      <RsvpGroup T={T} label={`Out · ${outs.length}`} players={outs} kind="out" />
    </div>
  );
}

function RsvpGroup({ T, label, players, kind }) {
  if (players.length === 0) return null;
  const color = kind === 'in' ? T.green : kind === 'out' ? T.red : T.yellow;
  return (
    <div style={{ padding:'18px 16px 0' }}>
      <SectionLabel T={T}>
        <span style={{ color }}>●</span> {label}
      </SectionLabel>
      <Card T={T} pad={false}>
        {players.map((p, i) => (
          <PersonRow key={p.id} T={T}
            name={p.name}
            sub={`#${p.num} · ${p.parent}`}
            initials={p.initials} hue={p.hue}
            trailing={kind === '?' ? (
              <Pill T={T} bg={hexA(T.accent, 0.14)} color={T.accent}>Nudge</Pill>
            ) : <RsvpBadge T={T} status={kind} />}
            isLast={i === players.length-1}
          />
        ))}
      </Card>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Admin Team Management
// ─────────────────────────────────────────────────────────────
function AdminTeamScreen({ T, onBack }) {
  return (
    <div style={{ paddingBottom: 120 }}>
      <ScreenHeader T={T} title="Manage Team" onBack={onBack} trailing={
        <button style={{
          padding:'7px 12px', borderRadius: 16, border:'none', cursor:'pointer',
          background: T.accent, color:'#fff', fontFamily: T.font, fontSize: 13, fontWeight: 600,
          display:'inline-flex', alignItems:'center', gap: 3,
        }}>
          <Icon name="plus" size={14} color="#fff" weight={2.5}/> Add
        </button>
      } />

      <div style={{ padding:'10px 16px 0' }}>
        <Card T={T}>
          <div style={{ display:'flex', alignItems:'center', gap: 12 }}>
            <div style={{
              width: 46, height: 46, borderRadius: 14,
              background:`linear-gradient(135deg, ${T.accent}, oklch(0.45 0.15 ${(hueFromHex(T.accent)+30)%360}))`,
              color:'#fff', fontWeight: 800, fontSize: 15, letterSpacing: 0.3,
              display:'flex', alignItems:'center', justifyContent:'center',
            }}>RVS</div>
            <div style={{ flex:1 }}>
              <div style={{ color: T.label, fontWeight: 600, fontSize: 15 }}>Riverside Strikers</div>
              <div style={{ color: T.label2, fontSize: 13 }}>U11 Boys · Spring 2026</div>
            </div>
            <Icon name="edit" size={18} color={T.label2} weight={2}/>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 8, marginTop: 12 }}>
            <MiniStat T={T} label="Players" val={ROSTER.length}/>
            <MiniStat T={T} label="Parents" val={22}/>
            <MiniStat T={T} label="Coaches" val={2}/>
          </div>
        </Card>
      </div>

      <div style={{ padding:'18px 16px 0' }}>
        <SectionLabel T={T}>Roster</SectionLabel>
        <Card T={T} pad={false}>
          {ROSTER.slice(0, 6).map((p, i, a) => (
            <div key={p.id} style={{
              display:'flex', alignItems:'center', gap: 12, padding:'10px 14px',
              borderBottom: i===a.length-1?'none':`0.5px solid ${T.sep}`,
            }}>
              <Avatar initials={p.initials} hue={p.hue} size={40}/>
              <div style={{ flex:1, minWidth: 0 }}>
                <div style={{ color: T.label, fontWeight: 600, fontSize: 15 }}>{p.name}</div>
                <div style={{ color: T.label2, fontSize: 13, marginTop: 1 }}>#{p.num} · {p.pos}</div>
              </div>
              <button style={{
                padding:'5px 10px', borderRadius: 12, border:'none', background: T.fill, cursor:'pointer',
                color: T.label, fontSize: 12, fontWeight: 600,
              }}>Edit</button>
              <Icon name="more" size={18} color={T.label3} weight={2}/>
            </div>
          ))}
        </Card>
      </div>

      <div style={{ padding:'18px 16px 0' }}>
        <SectionLabel T={T}>Admin</SectionLabel>
        <Card T={T} pad={false}>
          <AdminListRow T={T} icon="user"      label="Invite parents"      sub="Share link or QR"/>
          <AdminListRow T={T} icon="coach"     label="Manage coaches"      sub="2 active"/>
          <AdminListRow T={T} icon="shield"    label="Team privacy"        sub="Private · by invite"/>
          <AdminListRow T={T} icon="settings"  label="Team settings" last/>
        </Card>
      </div>
    </div>
  );
}

function MiniStat({ T, label, val }) {
  return (
    <div style={{ padding:'10px 8px', background: T.fill2, borderRadius: 12, textAlign:'center' }}>
      <div style={{ fontSize: 20, fontWeight: 700, color: T.label, fontFamily: T.displayFont }}>{val}</div>
      <div style={{ fontSize: 11, color: T.label2, fontWeight: 600 }}>{label}</div>
    </div>
  );
}

function AdminListRow({ T, icon, label, sub, last }) {
  return (
    <div style={{
      display:'flex', alignItems:'center', gap: 12, padding:'12px 14px',
      borderBottom: last?'none':`0.5px solid ${T.sep}`, cursor:'pointer',
    }}>
      <div style={{ width: 32, height: 32, borderRadius: 8, background: T.fill2, display:'flex', alignItems:'center', justifyContent:'center' }}>
        <Icon name={icon} size={18} color={T.label} weight={2}/>
      </div>
      <div style={{ flex:1 }}>
        <div style={{ color: T.label, fontSize: 15, fontWeight: 500 }}>{label}</div>
        {sub && <div style={{ color: T.label2, fontSize: 12, marginTop: 1 }}>{sub}</div>}
      </div>
      <Icon name="chevron-right" size={14} color={T.label3} weight={2.5}/>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Game Day Live Mode
// ─────────────────────────────────────────────────────────────
function GameDayScreen({ T, onBack }) {
  const [us, setUs] = React.useState(2);
  const [them, setThem] = React.useState(1);
  const [min, setMin] = React.useState(27);
  const [period, setPeriod] = React.useState('2nd Half');
  const [running, setRunning] = React.useState(true);
  React.useEffect(() => {
    if (!running) return;
    const id = setInterval(() => setMin(m => m+1), 3000);
    return () => clearInterval(id);
  }, [running]);
  return (
    <div style={{
      height:'100%', background: '#000', color:'#fff',
      display:'flex', flexDirection:'column', paddingBottom: 110,
    }}>
      {/* Top bar */}
      <div style={{ padding:'58px 16px 0', display:'flex', alignItems:'center', gap: 10 }}>
        <button onClick={onBack} style={{
          width: 36, height: 36, borderRadius: 18, border:'none', cursor:'pointer',
          background:'rgba(255,255,255,0.1)', display:'flex', alignItems:'center', justifyContent:'center',
        }}>
          <Icon name="x" size={18} color="#fff" weight={2.4}/>
        </button>
        <div style={{ flex:1, textAlign:'center' }}>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: 0.8, color:'rgba(255,255,255,0.6)', textTransform:'uppercase' }}>
            ● LIVE · {period}
          </div>
          <div style={{ fontSize: 13, color:'rgba(255,255,255,0.85)', marginTop: 1 }}>Oak Valley FC · League</div>
        </div>
        <button style={{
          width: 36, height: 36, borderRadius: 18, border:'none', cursor:'pointer',
          background:'rgba(255,255,255,0.1)', display:'flex', alignItems:'center', justifyContent:'center',
        }}>
          <Icon name="send" size={18} color="#fff" weight={2.2}/>
        </button>
      </div>

      {/* Scoreboard */}
      <div style={{
        margin: '18px 16px 0', padding: '20px 18px',
        borderRadius: 22, background: `linear-gradient(160deg, ${hexA(T.accent, 0.85)}, oklch(0.28 0.12 ${(hueFromHex(T.accent)+20)%360}))`,
        position:'relative', overflow:'hidden',
      }}>
        <div style={{ position:'absolute', inset: 0, backgroundImage:'repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 14px)' }}/>
        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', position:'relative' }}>
          <div style={{ textAlign:'center' }}>
            <div style={{ width: 54, height: 54, borderRadius: 14, background:'rgba(255,255,255,0.18)', border:'1.5px solid rgba(255,255,255,0.35)', color:'#fff', fontWeight: 800, fontSize: 16, display:'flex', alignItems:'center', justifyContent:'center', margin:'0 auto' }}>RVS</div>
            <div style={{ fontSize: 12, fontWeight: 600, marginTop: 6, color:'rgba(255,255,255,0.9)' }}>Strikers</div>
          </div>
          <div style={{ textAlign:'center' }}>
            <div style={{ fontSize: 64, fontWeight: 800, fontFamily: T.displayFont, letterSpacing: -3, lineHeight: 1, color:'#fff' }}>
              {us}<span style={{ color:'rgba(255,255,255,0.6)', margin:'0 10px' }}>:</span>{them}
            </div>
            <div style={{ fontSize: 13, fontWeight: 600, marginTop: 4, color:'rgba(255,255,255,0.9)', fontFamily:'"SF Mono", monospace' }}>
              {min}' · {period}
            </div>
          </div>
          <div style={{ textAlign:'center' }}>
            <div style={{ width: 54, height: 54, borderRadius: 14, background:'rgba(255,255,255,0.12)', border:'1.5px solid rgba(255,255,255,0.25)', color:'#fff', fontWeight: 800, fontSize: 16, display:'flex', alignItems:'center', justifyContent:'center', margin:'0 auto' }}>OVF</div>
            <div style={{ fontSize: 12, fontWeight: 600, marginTop: 6, color:'rgba(255,255,255,0.9)' }}>Oak Valley</div>
          </div>
        </div>
      </div>

      {/* Quick actions */}
      <div style={{ padding: '16px 16px 0', display:'grid', gridTemplateColumns:'1fr 1fr 1fr 1fr', gap: 8 }}>
        {[
          { icon:'soccer', label:'Goal · us', onClick: () => setUs(us+1), color: T.green },
          { icon:'soccer', label:'Goal · them', onClick: () => setThem(them+1) },
          { icon:'whistle', label:'Sub' },
          { icon:running?'pause':'play', label:running?'Pause':'Resume', onClick: () => setRunning(!running) },
        ].map((a, i) => (
          <button key={i} onClick={a.onClick} style={{
            padding:'10px 4px', borderRadius: 14, border:'none', cursor:'pointer',
            background: a.color ? hexA(a.color, 0.2) : 'rgba(255,255,255,0.08)',
            color: a.color || '#fff',
            display:'flex', flexDirection:'column', alignItems:'center', gap: 4, fontFamily: T.font, fontSize: 11, fontWeight: 600,
          }}>
            <Icon name={a.icon} size={20} color={a.color || '#fff'} weight={2.2}/>
            {a.label}
          </button>
        ))}
      </div>

      {/* Lineup on pitch */}
      <div style={{ padding: '18px 16px 0' }}>
        <div style={{
          position:'relative', height: 240, borderRadius: 16, overflow:'hidden',
          background:'linear-gradient(180deg, oklch(0.55 0.15 145), oklch(0.38 0.15 150))',
          border:'1px solid rgba(255,255,255,0.1)',
        }}>
          {/* Field markings */}
          <div style={{ position:'absolute', inset: '8px 12px', borderRadius: 6, border:'1.5px solid rgba(255,255,255,0.45)' }}/>
          <div style={{ position:'absolute', left: 0, right: 0, top:'50%', height: 1.5, background:'rgba(255,255,255,0.45)' }}/>
          <div style={{ position:'absolute', left:'50%', top:'50%', transform:'translate(-50%,-50%)', width: 44, height: 44, borderRadius: 22, border:'1.5px solid rgba(255,255,255,0.45)' }}/>
          {/* Players */}
          {[
            { x: 50, y: 90, n: 2, role:'GK' },
            { x: 22, y: 72, n: 3 }, { x: 42, y: 72, n: 4 }, { x: 58, y: 72, n: 5 }, { x: 78, y: 72, n: 6 },
            { x: 30, y: 50, n: 8 }, { x: 50, y: 50, n: 10 }, { x: 70, y: 50, n: 11 },
            { x: 35, y: 28, n: 7 }, { x: 65, y: 28, n: 9 },
          ].map((p, i) => (
            <div key={i} style={{
              position:'absolute', left:`${p.x}%`, top:`${p.y}%`, transform:'translate(-50%,-50%)',
              width: 28, height: 28, borderRadius: 14, background: T.accent,
              display:'flex', alignItems:'center', justifyContent:'center',
              color:'#fff', fontSize: 11, fontWeight: 700,
              boxShadow:'0 2px 6px rgba(0,0,0,0.25)', border:'1.5px solid rgba(255,255,255,0.4)',
            }}>{p.n}</div>
          ))}
        </div>
        <div style={{ display:'flex', justifyContent:'space-between', marginTop: 8, fontSize: 12, color:'rgba(255,255,255,0.7)' }}>
          <span>4-3-2 · 10 on pitch</span>
          <span style={{ color: T.accent, fontWeight: 600 }}>Bench · 4</span>
        </div>
      </div>

      {/* Live feed */}
      <div style={{ padding: '14px 16px 0' }}>
        <div style={{ fontSize: 12, fontWeight: 700, color:'rgba(255,255,255,0.6)', textTransform:'uppercase', letterSpacing: 0.5, marginBottom: 8 }}>Live updates · parents see these</div>
        <div style={{ display:'flex', flexDirection:'column', gap: 6 }}>
          <LiveRow T={T} min="27" text="⚽ GOAL · Diego (#9) assist Arjun (#7)" accent />
          <LiveRow T={T} min="18" text="🔄 Sub: Mateo on for Sam" />
          <LiveRow T={T} min="09" text="⚽ GOAL · Oak Valley — 1:1" />
          <LiveRow T={T} min="00" text="▶️ Kick-off · 2nd Half" />
        </div>
      </div>
    </div>
  );
}

function LiveRow({ T, min, text, accent }) {
  return (
    <div style={{
      display:'flex', alignItems:'center', gap: 10, padding:'8px 12px',
      background:'rgba(255,255,255,0.06)', borderRadius: 10,
      borderLeft: accent ? `3px solid ${T.accent}` : '3px solid transparent',
    }}>
      <span style={{ fontFamily:'"SF Mono", monospace', fontSize: 12, color:'rgba(255,255,255,0.55)', width: 24 }}>{min}'</span>
      <span style={{ fontSize: 14, color:'#fff' }}>{text}</span>
    </div>
  );
}

Object.assign(window, {
  AdminHomeScreen, CreateEventScreen, BroadcastScreen, RsvpTrackerScreen,
  AdminTeamScreen, GameDayScreen, RsvpDonut, AdminAction, QuickTile,
});