// ============ 팀 편성 뷰 ============
const TeamsPage = ({ members }) => {
  const [selected, setSelected] = React.useState(null);
  const leaders = members.filter(m => m.isLeader);
  const memberById = Object.fromEntries(members.map(m => [m.id, m]));

  const teamStats = (leaderId) => {
    const teammates = members.filter(m => m.teamLeaderId === leaderId);
    const roster = [memberById[leaderId], ...teammates];
    const validRanks = roster.map(m => calcOverall(m)).filter(Boolean);
    const avgScore = validRanks.length > 0
      ? (validRanks.reduce((s, r) => s + RANK_SCORE[r], 0) / validRanks.length).toFixed(1)
      : '—';
    return { size: roster.length, avgScore, roster };
  };

  return (
    <div className="container-wide">
      <div className="page-header">
        <div className="accent-line"/>
        <h1>팀 편성</h1>
        <p className="sub">팀장 <b style={{color: 'var(--leader)'}}>{leaders.length}</b>명이 편성한 내전 팀 구성입니다.</p>
      </div>

      <div className="grid grid-3">
        {leaders.map((leader, i) => {
          const { size, avgScore, roster } = teamStats(leader.id);
          const accClass = i === 0 ? '' : i === 1 ? 'acc-1' : 'acc-2';
          return (
            <div key={leader.id} className={`team-col ${accClass}`}>
              <div className="team-head">
                <div className="row between">
                  <div>
                    <div className="team-leader-name">
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style={{color: 'var(--leader)'}}>
                        <path d="M5 16L3 5l5.5 5L12 4l3.5 6L21 5l-2 11H5zm14 3H5v2h14v-2z"/>
                      </svg>
                      {leader.name}
                    </div>
                    <div className="team-count">
                      <span className="mono">{size}</span>명 편성 · 평균 점수 <span className="mono" style={{color: 'var(--accent)'}}>{avgScore}</span>
                    </div>
                  </div>
                  <RankChip rank={calcOverall(leader)} size="lg"/>
                </div>
              </div>

              <div className="stack gap-2">
                <div style={{fontSize: 11, letterSpacing: '0.15em', color: 'var(--text-mute)', textTransform: 'uppercase', marginBottom: 4, marginLeft: 4}}>팀장</div>
                <div className="team-member-row"
                     style={{background: 'color-mix(in oklab, var(--leader) 8%, transparent)', border: '1px solid color-mix(in oklab, var(--leader) 30%, transparent)'}}
                     onClick={() => setSelected(leader)}>
                  <div className="m-avatar" style={{color: 'var(--leader)', background: 'color-mix(in oklab, var(--leader) 12%, var(--surface-hi))'}}>{leader.name.slice(0, 1)}</div>
                  <div className="m-info">
                    <div className="m-name">{leader.name}</div>
                    <div className="m-most">MOST · {leader.most}</div>
                  </div>
                  <RankChip rank={calcOverall(leader)}/>
                </div>

                <div style={{fontSize: 11, letterSpacing: '0.15em', color: 'var(--text-mute)', textTransform: 'uppercase', marginTop: 12, marginBottom: 4, marginLeft: 4}}>팀원 ({size - 1})</div>
                {roster.slice(1).map(m => (
                  <div key={m.id} className="team-member-row" onClick={() => setSelected(m)}>
                    <div className="m-avatar">{m.name.slice(0, 1)}</div>
                    <div className="m-info">
                      <div className="m-name">{m.name}</div>
                      <div className="m-most">MOST · {m.most}</div>
                    </div>
                    <RankChip rank={calcOverall(m)}/>
                  </div>
                ))}
                {roster.length === 1 && (
                  <div style={{textAlign: 'center', color: 'var(--text-mute)', fontSize: 13, padding: 20}}>
                    아직 팀원이 배정되지 않았습니다.
                  </div>
                )}
              </div>
            </div>
          );
        })}
      </div>

      {leaders.length === 0 && (
        <div style={{textAlign: 'center', padding: 80, color: 'var(--text-mute)'}}>
          팀장으로 지정된 멤버가 없습니다. 어드민 패널에서 팀장을 지정해 주세요.
        </div>
      )}

      {selected && <MemberDetailModal member={selected} onClose={() => setSelected(null)}/>}
    </div>
  );
};

window.TeamsPage = TeamsPage;