// screens_parent.jsx — Parent-facing screens for TeamCaddy

// ─────────────────────────────────────────────────────────────
// HomeScreen — today dashboard (parent hero view)
// Two layout variants: "hero" (big game card) and "stack" (list-first)
// ─────────────────────────────────────────────────────────────
function HomeScreen({ T, onNav, layout = 'hero', user, rsvp, setRsvp }) {
  const game = NEXT_GAME;
  return (
    <div style={{ paddingBottom: 120 }}>
      <ScreenHeader
        T={T}
        title="Today"
        subtitle={user.role === 'Parent of Arjun' ? 'Arjun · ' + TEAM.name : TEAM.name}
        trailing={
          <button onClick={() => onNav('notifications')} style={{
            width: 36, height: 36, borderRadius: 18, border:'none',
            background: T.fill, display:'flex', alignItems:'center', justifyContent:'center',
            cursor:'pointer', position:'relative',
          }}>
            <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>
        }
      />

      {/* Hero game card */}
      {layout === 'hero' && (
        <div style={{ padding: '12px 16px 0' }}>
          <HeroGameCard T={T} game={game} rsvp={rsvp} setRsvp={setRsvp} onOpen={() => onNav('event')} />
        </div>
      )}

      {/* Quick stats row */}
      <div style={{ padding: '14px 16px 0', display:'flex', gap: 10 }}>
        <StatTile T={T} label="Record"   value={`${TEAM.record.w}-${TEAM.record.l}-${TEAM.record.d}`} sub="this season" icon="trophy" />
        <StatTile T={T} label="RSVP'd"   value={`${game.rsvpIn}/14`} sub="for Saturday" icon="check" tint={T.green} />
        <StatTile T={T} label="Weather"  value={`${game.weather.temp}°`} sub={game.weather.cond} icon="cloud-sun" />
      </div>

      {layout === 'stack' && (
        <div style={{ padding: '14px 16px 0' }}>
          <SectionLabel T={T}>Next up</SectionLabel>
          <HeroGameCard T={T} game={game} rsvp={rsvp} setRsvp={setRsvp} onOpen={() => onNav('event')} compact />
        </div>
      )}

      {/* Upcoming */}
      <div style={{ padding: '18px 16px 0' }}>
        <SectionLabel T={T} trailing={
          <button onClick={() => onNav('schedule')} style={{
            background:'transparent', border:'none', color: T.accent,
            fontFamily: T.font, fontSize: 15, fontWeight: 500, cursor:'pointer',
          }}>See all</button>
        }>Upcoming</SectionLabel>

        <Card T={T} pad={false}>
          {UPCOMING.slice(1, 4).map((e, i, a) => (
            <EventRow key={e.id} T={T} event={e} isLast={i === a.length-1} onClick={() => onNav('event')} />
          ))}
        </Card>
      </div>

      {/* Feed: announcements + messages */}
      <div style={{ padding:'18px 16px 0' }}>
        <SectionLabel T={T}>Feed</SectionLabel>
        <Card T={T} pad={false}>
          <FeedRow T={T} kind="announce" ann={ANNOUNCEMENTS[0]} />
          <FeedRow T={T} kind="message" msg={MESSAGES[0]} onClick={() => onNav('chat')} />
          <FeedRow T={T} kind="photo" onClick={() => onNav('photos')} isLast />
        </Card>
      </div>

      {/* Snack sign-up shortcut */}
      <div style={{ padding:'18px 16px 0' }}>
        <div onClick={() => onNav('event')} style={{
          padding: 16, borderRadius: T.listRadius,
          background: `linear-gradient(135deg, ${hexA(T.accent, 0.14)}, ${hexA(T.accent, 0.04)})`,
          border: `0.5px solid ${hexA(T.accent, 0.2)}`,
          display:'flex', gap: 14, alignItems:'center', cursor:'pointer',
        }}>
          <div style={{
            width: 42, height: 42, borderRadius: 12, background: T.accent,
            display:'flex', alignItems:'center', justifyContent:'center',
          }}>
            <span style={{ fontSize: 22 }}>🍊</span>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ color: T.label, fontWeight: 600, fontSize: 15 }}>You're on snack duty May 9</div>
            <div style={{ color: T.label2, fontSize: 13, marginTop: 2 }}>Swap or see what to bring</div>
          </div>
          <Icon name="chevron-right" size={18} color={T.label3} weight={2.5} />
        </div>
      </div>
    </div>
  );
}

function StatTile({ T, label, value, sub, icon, tint }) {
  return (
    <div style={{
      flex: 1, background: T.card, borderRadius: 18,
      padding: '12px 12px 14px',
    }}>
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between' }}>
        <span style={{ fontSize: 11, fontWeight: 600, color: T.label2, textTransform:'uppercase', letterSpacing: 0.4 }}>{label}</span>
        <Icon name={icon} size={14} color={tint || T.label3} weight={2} />
      </div>
      <div style={{ fontSize: 22, fontWeight: 700, color: T.label, marginTop: 4, letterSpacing: -0.5, fontFamily: T.displayFont }}>{value}</div>
      <div style={{ fontSize: 11, color: T.label2, marginTop: 1 }}>{sub}</div>
    </div>
  );
}

function SectionLabel({ T, children, trailing }) {
  return (
    <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between', marginBottom: 8, padding: '0 4px' }}>
      <span style={{ fontSize: 13, fontWeight: 700, color: T.label2, textTransform:'uppercase', letterSpacing: 0.5 }}>{children}</span>
      {trailing}
    </div>
  );
}

function HeroGameCard({ T, game, rsvp, setRsvp, onOpen, compact = false }) {
  const heroH = compact ? 120 : 160;
  return (
    <div style={{
      background: T.card, borderRadius: 24, overflow:'hidden',
      boxShadow: T.dark ? 'none' : '0 1px 2px rgba(0,0,0,0.04)',
    }}>
      {/* Hero strip — team vs team */}
      <div style={{
        position:'relative', height: heroH,
        background: `linear-gradient(135deg, ${T.accent} 0%, oklch(0.45 0.15 ${hueFromHex(T.accent) + 30}) 100%)`,
      }}>
        <div style={{
          position:'absolute', inset:0,
          backgroundImage:'repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 16px)',
        }} />
        <div style={{
          position:'absolute', inset: 0, display:'flex', alignItems:'center', justifyContent:'space-around',
          padding: '0 24px',
        }}>
          <TeamMark label="RVS" name="Strikers" />
          <div style={{
            fontFamily:'"SF Mono", ui-monospace, monospace',
            fontSize: compact ? 22 : 28, fontWeight: 700, color: 'rgba(255,255,255,0.75)',
            letterSpacing: 2,
          }}>VS</div>
          <TeamMark label="OVF" name="Oak Valley" alt />
        </div>
        <div style={{
          position:'absolute', top: 12, left: 14,
          padding: '4px 10px', borderRadius: 10,
          background:'rgba(0,0,0,0.25)', backdropFilter:'blur(8px)',
          color:'#fff', fontSize: 11, fontWeight: 700, letterSpacing: 0.5, textTransform:'uppercase',
        }}>League Match</div>
        <div style={{
          position:'absolute', top: 12, right: 14, display:'flex', gap: 6, alignItems:'center',
          padding: '4px 10px', borderRadius: 10,
          background:'rgba(0,0,0,0.25)', backdropFilter:'blur(8px)',
          color:'#fff', fontSize: 12, fontWeight: 600,
        }}>
          <Icon name={game.weather.icon} size={14} color="#fff" weight={2} />
          {game.weather.temp}°
        </div>
      </div>

      {/* Meta + RSVP */}
      <div style={{ padding: 16 }}>
        <div style={{ display:'flex', alignItems:'flex-start', justifyContent:'space-between', gap: 10 }}>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontSize: 20, fontWeight: 700, color: T.label, letterSpacing: -0.4, fontFamily: T.displayFont }}>
              vs. Oak Valley FC
            </div>
            <div style={{ display:'flex', alignItems:'center', gap: 12, color: T.label2, fontSize: 14, marginTop: 4, flexWrap:'wrap' }}>
              <span style={{ display:'inline-flex', alignItems:'center', gap: 4 }}>
                <Icon name="calendar" size={14} color={T.label2} weight={2}/> {game.date}
              </span>
              <span style={{ display:'inline-flex', alignItems:'center', gap: 4 }}>
                <Icon name="clock" size={14} color={T.label2} weight={2}/> {game.time}
              </span>
            </div>
            <div style={{ display:'inline-flex', alignItems:'center', gap: 4, color: T.label2, fontSize: 14, marginTop: 4 }}>
              <Icon name="location" size={14} color={T.label2} weight={2}/> {game.location}
            </div>
          </div>
        </div>

        {/* RSVP one-tap */}
        <div style={{ marginTop: 14 }}>
          <div style={{ fontSize: 12, color: T.label2, fontWeight: 600, marginBottom: 6, letterSpacing: 0.2 }}>
            Can Arjun make it?
          </div>
          <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>
        </div>

        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginTop: 14, paddingTop: 14, borderTop: `0.5px solid ${T.sep}` }}>
          <div style={{ display:'flex', alignItems:'center', gap: -8, flexDirection:'row' }}>
            {ROSTER.slice(0,5).map((p, i) => (
              <div key={p.id} style={{ marginLeft: i === 0 ? 0 : -8 }}>
                <Avatar initials={p.initials} hue={p.hue} size={26} ring={T.card} />
              </div>
            ))}
            <span style={{ marginLeft: 8, fontSize: 13, color: T.label2, fontWeight: 500 }}>{game.rsvpIn} confirmed</span>
          </div>
          <button onClick={onOpen} style={{
            background:'transparent', border:'none', color: T.accent, fontSize: 14, fontWeight: 600, cursor:'pointer',
            display:'inline-flex', alignItems:'center', gap: 2,
          }}>
            Details <Icon name="chevron-right" size={14} color={T.accent} weight={2.5} />
          </button>
        </div>
      </div>
    </div>
  );
}

function hueFromHex(hex) {
  const h = hex.replace('#','');
  const n = parseInt(h.length === 3 ? h.split('').map(c=>c+c).join('') : h, 16);
  const r = ((n>>16)&255)/255, g = ((n>>8)&255)/255, b = (n&255)/255;
  const max = Math.max(r,g,b), min = Math.min(r,g,b);
  let hue = 0;
  if (max === min) hue = 0;
  else if (max === r) hue = 60 * (((g-b)/(max-min)) % 6);
  else if (max === g) hue = 60 * (((b-r)/(max-min)) + 2);
  else hue = 60 * (((r-g)/(max-min)) + 4);
  return (hue + 360) % 360;
}

function TeamMark({ label, name, alt }) {
  return (
    <div style={{ display:'flex', flexDirection:'column', alignItems:'center', gap: 4 }}>
      <div style={{
        width: 56, height: 56, borderRadius: 14,
        background: alt ? 'rgba(255,255,255,0.18)' : 'rgba(255,255,255,0.22)',
        backdropFilter:'blur(4px)',
        border:'1.5px solid rgba(255,255,255,0.35)',
        display:'flex', alignItems:'center', justifyContent:'center',
        color:'#fff', fontWeight: 800, fontSize: 17, letterSpacing: 0.5, fontFamily:'"SF Pro Display", system-ui',
      }}>{label}</div>
      <div style={{ color:'rgba(255,255,255,0.92)', fontSize: 12, fontWeight: 600, letterSpacing: 0.2 }}>{name}</div>
    </div>
  );
}

function RsvpButton({ T, active, kind, onClick, label }) {
  const colors = {
    in:  { bg: T.green, fg:'#fff' },
    '?': { bg: T.yellow, fg:'#000' },
    out: { bg: T.red,   fg:'#fff' },
  };
  const c = colors[kind];
  return (
    <button onClick={onClick} style={{
      flex: 1, height: 44, borderRadius: 14, border:'none', cursor:'pointer',
      background: active ? c.bg : T.fill,
      color: active ? c.fg : T.label,
      fontFamily: T.font, fontSize: 15, fontWeight: 600, letterSpacing: -0.2,
      transition: 'all 0.15s',
      boxShadow: active ? `0 2px 8px ${hexA(c.bg, 0.35)}` : 'none',
    }}>{label}</button>
  );
}

function EventRow({ T, event, isLast, onClick, rsvpLabel }) {
  return (
    <div onClick={onClick} style={{
      display:'flex', alignItems:'center', gap: 12, padding: '12px 14px',
      borderBottom: isLast ? 'none' : `0.5px solid ${T.sep}`,
      cursor: onClick ? 'pointer' : 'default', position:'relative',
    }}>
      <EventIcon T={T} type={event.type} size={38} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display:'flex', alignItems:'center', gap: 8 }}>
          <span style={{ color: T.label, fontWeight: 600, fontSize: 15 }}>{event.title}</span>
        </div>
        <div style={{ color: T.label2, fontSize: 13, marginTop: 1 }}>
          {event.date} · {event.time} · {event.loc}
        </div>
      </div>
      {event.rsvp && <RsvpBadge T={T} status={event.rsvp} />}
      <Icon name="chevron-right" size={14} color={T.label3} weight={2.5} />
    </div>
  );
}

function FeedRow({ T, kind, ann, msg, onClick, isLast }) {
  let icon, title, body, meta;
  if (kind === 'announce') {
    icon = <div style={{ width: 38, height: 38, borderRadius: 12, background: hexA(T.accent, 0.15), display:'flex', alignItems:'center', justifyContent:'center' }}>
      <Icon name="megaphone" size={20} color={T.accent} weight={2.2} />
    </div>;
    title = <>📌 {ann.title}</>;
    body = ann.body;
    meta = ann.time + ' · Coach Marco';
  } else if (kind === 'message') {
    icon = <Avatar initials={msg.initials} hue={msg.hue} size={38} />;
    title = msg.who + ' in #general';
    body = msg.text;
    meta = msg.time;
  } else if (kind === 'photo') {
    icon = <div style={{ width: 38, height: 38, borderRadius: 12, overflow:'hidden' }}>
      <PhotoPlaceholder hue={140} style={{ width:'100%', height:'100%' }} radius={12} />
    </div>;
    title = 'New photos from Coach Marco';
    body = '12 photos · Tap to view';
    meta = '2 hours ago';
  }
  return (
    <div onClick={onClick} style={{
      display:'flex', gap: 12, padding:'12px 14px',
      borderBottom: isLast ? 'none' : `0.5px solid ${T.sep}`,
      cursor: onClick ? 'pointer' : 'default',
    }}>
      {icon}
      <div style={{ flex:1, minWidth: 0 }}>
        <div style={{ color: T.label, fontWeight: 600, fontSize: 14 }}>{title}</div>
        <div style={{
          color: T.label2, fontSize: 14, marginTop: 2, lineHeight: 1.35,
          display:'-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient:'vertical', overflow:'hidden',
        }}>{body}</div>
        <div style={{ color: T.label3, fontSize: 11, marginTop: 3, fontWeight: 500 }}>{meta}</div>
      </div>
    </div>
  );
}

Object.assign(window, {
  HomeScreen, HeroGameCard, StatTile, SectionLabel, EventRow, FeedRow, RsvpButton, TeamMark, hueFromHex,
});