// screens_social.jsx — Chat, Photos, Roster, Notifications

// ─────────────────────────────────────────────────────────────
// Chat Screen
// ─────────────────────────────────────────────────────────────
function ChatScreen({ T }) {
  const [text, setText] = React.useState('');
  const [msgs, setMsgs] = React.useState(MESSAGES);
  const send = () => {
    if (!text.trim()) return;
    setMsgs([...msgs, { id: 'new'+Date.now(), who:'me', initials:'JP', hue: 280, time:'now', text, me:true }]);
    setText('');
  };
  return (
    <div style={{ display:'flex', flexDirection:'column', height:'100%' }}>
      {/* Header */}
      <div style={{ padding:'8px 16px 10px', borderBottom: `0.5px solid ${T.sep}`, background: T.bg }}>
        <div style={{ display:'flex', alignItems:'center', gap: 10 }}>
          <div style={{
            width: 40, height: 40, borderRadius: 12,
            background: `linear-gradient(135deg, ${T.accent}, oklch(0.45 0.15 ${(hueFromHex(T.accent)+30)%360}))`,
            display:'flex', alignItems:'center', justifyContent:'center',
            color:'#fff', fontWeight: 800, fontSize: 14, letterSpacing: 0.3,
          }}>RVS</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontWeight: 600, color: T.label, fontSize: 16 }}>{TEAM.name}</div>
            <div style={{ color: T.label2, fontSize: 12 }}>#general · 24 members</div>
          </div>
          <button style={{ ...arrowBtn(T), width: 36, height: 36, borderRadius: 18 }}>
            <Icon name="dots" size={18} color={T.label} weight={2}/>
          </button>
        </div>
      </div>

      {/* Messages */}
      <div style={{ flex: 1, overflow:'auto', padding: '14px 12px 0', display:'flex', flexDirection:'column', gap: 10 }}>
        <DayDivider T={T} label="Today" />
        {msgs.map(m => <MessageBubble key={m.id} T={T} m={m} />)}
        <TypingIndicator T={T} />
      </div>

      {/* Composer */}
      <div style={{
        padding: '8px 10px 110px', background: T.bg,
        borderTop: `0.5px solid ${T.sep}`,
      }}>
        <div style={{
          display:'flex', alignItems:'center', gap: 8,
          background: T.card, borderRadius: 22, padding: '4px 4px 4px 14px',
        }}>
          <Icon name="plus" size={22} color={T.label2} weight={2}/>
          <input value={text} onChange={e=>setText(e.target.value)}
            onKeyDown={e => e.key === 'Enter' && send()}
            placeholder="Message"
            style={{
              flex: 1, border:'none', background:'transparent', outline:'none',
              fontFamily: T.font, fontSize: 15, color: T.label, padding: '10px 4px',
            }}/>
          <button onClick={send} style={{
            width: 36, height: 36, borderRadius: 18, border:'none', cursor:'pointer',
            background: text.trim() ? T.accent : T.fill,
            display:'flex', alignItems:'center', justifyContent:'center',
          }}>
            <Icon name="send" size={18} color={text.trim()?'#fff':T.label3} weight={2.2}/>
          </button>
        </div>
      </div>
    </div>
  );
}

function DayDivider({ T, label }) {
  return (
    <div style={{ textAlign:'center', margin:'4px 0 4px' }}>
      <span style={{
        padding:'3px 10px', borderRadius: 10, background: T.fill2,
        color: T.label2, fontSize: 11, fontWeight: 600, letterSpacing: 0.3,
      }}>{label}</span>
    </div>
  );
}

function MessageBubble({ T, m }) {
  const me = m.me;
  return (
    <div style={{ display:'flex', gap: 8, alignItems:'flex-end', flexDirection: me?'row-reverse':'row' }}>
      {!me && <Avatar initials={m.initials} hue={m.hue} size={30} />}
      <div style={{ maxWidth: '75%', display:'flex', flexDirection:'column', alignItems: me?'flex-end':'flex-start' }}>
        {!me && <div style={{ fontSize: 11, color: T.label2, fontWeight: 600, marginBottom: 3, marginLeft: 10 }}>{m.who} · {m.time}</div>}
        <div style={{
          background: me ? T.accent : T.card,
          color: me ? '#fff' : T.label,
          padding:'9px 14px', borderRadius: 20,
          borderBottomRightRadius: me ? 6 : 20,
          borderBottomLeftRadius: me ? 20 : 6,
          fontSize: 15, lineHeight: 1.35, letterSpacing: -0.2,
          position:'relative',
        }}>{m.text}</div>
        {m.reactions && (
          <div style={{ display:'flex', gap: 4, marginTop: 4, marginLeft: me?0:10 }}>
            {m.reactions.map((r, i) => (
              <div key={i} style={{
                padding:'2px 8px', borderRadius: 12,
                background: T.card, border: `0.5px solid ${T.sep}`,
                fontSize: 12, color: T.label2, display:'inline-flex', alignItems:'center', gap: 3,
              }}>
                <span>{r.e}</span><span style={{ fontWeight: 600 }}>{r.n}</span>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

function TypingIndicator({ T }) {
  return (
    <div style={{ display:'flex', gap: 8, alignItems:'flex-end' }}>
      <Avatar initials="LR" hue={100} size={30} />
      <div style={{
        padding: '10px 14px', borderRadius: 20, borderBottomLeftRadius: 6,
        background: T.card, display:'flex', gap: 3,
      }}>
        {[0,1,2].map(i => (
          <div key={i} style={{
            width: 7, height: 7, borderRadius: 4, background: T.label3,
            animation: `tp 1.2s ${i*0.15}s infinite`,
          }}/>
        ))}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Photos Screen
// ─────────────────────────────────────────────────────────────
function PhotosScreen({ T }) {
  const [filter, setFilter] = React.useState('all');
  return (
    <div style={{ paddingBottom: 120 }}>
      <ScreenHeader T={T} title="Photos" subtitle="182 photos · 4 albums" trailing={
        <button style={{
          width: 36, height: 36, borderRadius: 18, border:'none',
          background: T.accent, display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer',
        }}>
          <Icon name="camera" size={18} color="#fff" weight={2.2}/>
        </button>
      }/>
      <div style={{ padding:'8px 16px 0', display:'flex', gap: 8, overflowX:'auto' }}>
        {['all','games','practice','social','arjun'].map(f => (
          <button key={f} onClick={()=>setFilter(f)} style={{
            padding:'7px 14px', borderRadius: 15, border:'none',
            background: filter === f ? T.label : T.fill,
            color: filter === f ? T.bg : T.label, cursor:'pointer',
            fontSize: 13, fontWeight: 600, textTransform:'capitalize',
            fontFamily: T.font, whiteSpace:'nowrap',
          }}>
            {f === 'arjun' ? '★ Arjun' : f}
          </button>
        ))}
      </div>

      {/* Featured album */}
      <div style={{ padding:'14px 16px 0' }}>
        <div style={{
          borderRadius: 20, overflow:'hidden', position:'relative', height: 180,
        }}>
          <PhotoPlaceholder hue={130} style={{ width:'100%', height:'100%' }} radius={20} />
          <div style={{
            position:'absolute', inset: 0,
            background: 'linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.55))',
          }}/>
          <div style={{ position:'absolute', left: 14, bottom: 12, right: 14 }}>
            <div style={{ color:'rgba(255,255,255,0.85)', fontSize: 11, fontWeight: 700, letterSpacing: 0.5, textTransform:'uppercase' }}>This Week</div>
            <div style={{ color:'#fff', fontSize: 22, fontWeight: 700, fontFamily: T.displayFont, letterSpacing: -0.3, marginTop: 2 }}>vs. Bayside United</div>
            <div style={{ color:'rgba(255,255,255,0.75)', fontSize: 13, marginTop: 1 }}>32 photos · Added by Coach Marco</div>
          </div>
        </div>
      </div>

      {/* Grid */}
      <div style={{ padding: '14px 16px 0' }}>
        <SectionLabel T={T}>Recent</SectionLabel>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 3 }}>
          {PHOTOS.map((p, i) => (
            <div key={p.id} style={{
              aspectRatio: '1', borderRadius: i === 0 ? '14px 4px 4px 4px' : 4, overflow:'hidden',
              gridColumn: p.w === 2 ? 'span 2' : undefined,
              gridRow: p.h === 2 ? 'span 2' : undefined,
            }}>
              <PhotoPlaceholder hue={p.hue} style={{ width:'100%', height:'100%' }} radius={4} label={i<3?p.caption:null} />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Roster / Team Screen
// ─────────────────────────────────────────────────────────────
function RosterScreen({ T, isAdmin, onNav }) {
  return (
    <div style={{ paddingBottom: 120 }}>
      <ScreenHeader T={T} title="Team" subtitle={`${TEAM.name} · ${ROSTER.length} players`}
        trailing={isAdmin ? (
          <button onClick={()=>onNav('admin-team')} style={{
            width: 36, height: 36, borderRadius: 18, border:'none',
            background: T.accent, cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center',
          }}>
            <Icon name="plus" size={20} color="#fff" weight={2.4}/>
          </button>
        ) : null}
      />

      {/* Team summary strip */}
      <div style={{ padding: '10px 16px 0' }}>
        <div style={{
          padding: 14, borderRadius: T.listRadius, background: T.card,
          display:'flex', alignItems:'center', gap: 14,
        }}>
          <div style={{
            width: 54, height: 54, borderRadius: 16,
            background: `linear-gradient(135deg, ${T.accent}, oklch(0.45 0.15 ${(hueFromHex(T.accent)+30)%360}))`,
            display:'flex', alignItems:'center', justifyContent:'center',
            color:'#fff', fontWeight: 800, fontSize: 18, letterSpacing: 0.3,
          }}>RVS</div>
          <div style={{ flex: 1 }}>
            <div style={{ color: T.label, fontWeight: 600, fontSize: 16 }}>{TEAM.age} · {TEAM.season}</div>
            <div style={{ color: T.label2, fontSize: 13 }}>{TEAM.record.w}W · {TEAM.record.l}L · {TEAM.record.d}D</div>
          </div>
          <Pill T={T} bg={hexA(T.accent, 0.15)} color={T.accent}>Share</Pill>
        </div>
      </div>

      {/* Coaches */}
      <div style={{ padding: '18px 16px 0' }}>
        <SectionLabel T={T}>Coaches</SectionLabel>
        <Card T={T} pad={false}>
          <PersonRow T={T} name="Marco Ruiz" sub="Head Coach · Team Admin" initials="MR" hue={12} badge="coach" isLast={false} />
          <PersonRow T={T} name="Aya Nakamura" sub="Assistant Coach" initials="AN" hue={200} badge="coach" isLast />
        </Card>
      </div>

      <div style={{ padding:'18px 16px 0' }}>
        <SectionLabel T={T}>Players · #</SectionLabel>
        <Card T={T} pad={false}>
          {ROSTER.map((p, i) => (
            <PersonRow key={p.id} T={T}
              name={p.name}
              sub={`#${p.num} · ${p.pos} · ${p.parent}`}
              initials={p.initials} hue={p.hue}
              trailing={<RsvpBadge T={T} status={p.avail} />}
              isLast={i === ROSTER.length-1}
            />
          ))}
        </Card>
      </div>
    </div>
  );
}

function PersonRow({ T, name, sub, initials, hue, trailing, badge, isLast }) {
  return (
    <div style={{
      display:'flex', alignItems:'center', gap: 12, padding:'10px 14px',
      borderBottom: isLast ? 'none' : `0.5px solid ${T.sep}`,
    }}>
      <Avatar initials={initials} hue={hue} size={40} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display:'flex', alignItems:'center', gap: 6 }}>
          <span style={{ color: T.label, fontWeight: 600, fontSize: 15 }}>{name}</span>
          {badge === 'coach' && (
            <span style={{ padding:'1px 6px', borderRadius: 6, background: hexA(T.accent, 0.14), color: T.accent, fontSize: 10, fontWeight: 700, textTransform:'uppercase', letterSpacing: 0.4 }}>Coach</span>
          )}
        </div>
        <div style={{ color: T.label2, fontSize: 13, marginTop: 1, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{sub}</div>
      </div>
      {trailing}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Notifications
// ─────────────────────────────────────────────────────────────
function NotificationsScreen({ T, onBack }) {
  const items = [
    { who:'Coach Marco', hue: 12, initials:'MR', title:'posted an announcement', body:'Saturday Game — Kit Reminder', time:'2h', pin: true },
    { who:'Aya Nakamura', hue: 200, initials:'AN', title:'mentioned you in #general', body:'Can anyone carpool from the Sunset?', time:'4h' },
    { who:'TeamCaddy', hue: hueFromHex(T.accent), initials:'TT', title:'Weather alert', body:'Tuesday practice — 40% chance of rain', time:'6h' },
    { who:'Ada Okafor', hue: 260, initials:'AO', title:'reacted 🙏 to your message', body:'"We can hop in! Will swing by..."', time:'yesterday' },
    { who:'Coach Marco', hue: 12, initials:'MR', title:'added 12 photos', body:'Album: vs. Bayside United', time:'yesterday' },
    { who:'TeamCaddy', hue: hueFromHex(T.accent), initials:'TT', title:'Snack reminder', body:'You\'re on snack duty May 9', time:'2d' },
  ];
  return (
    <div style={{ paddingBottom: 120 }}>
      <ScreenHeader T={T} title="Activity" onBack={onBack} padTop={4} />
      <div style={{ padding:'8px 16px 0' }}>
        <Card T={T} pad={false}>
          {items.map((it, i, a) => (
            <div key={i} style={{
              display:'flex', gap: 12, padding:'12px 14px',
              borderBottom: i===a.length-1?'none':`0.5px solid ${T.sep}`,
              position:'relative',
            }}>
              <Avatar initials={it.initials} hue={it.hue} size={40} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 14, color: T.label }}>
                  <b style={{ fontWeight: 600 }}>{it.who}</b> <span style={{ color: T.label2 }}>{it.title}</span>
                </div>
                <div style={{ fontSize: 14, color: T.label, marginTop: 2, lineHeight: 1.35 }}>{it.body}</div>
                <div style={{ fontSize: 11, color: T.label3, marginTop: 3, fontWeight: 500 }}>{it.time} ago</div>
              </div>
              {i < 2 && <div style={{
                position:'absolute', right: 14, top: 16,
                width: 9, height: 9, borderRadius: 5, background: T.accent,
              }}/>}
            </div>
          ))}
        </Card>
      </div>
    </div>
  );
}

Object.assign(window, { ChatScreen, PhotosScreen, RosterScreen, PersonRow, NotificationsScreen });