// ============ 랭크 시각화 컴포넌트 ============
const RankChip = ({ rank, size }) => {
  if (!rank) return (
    <div className={`rank-chip placeholder ${size || ''}`}>?</div>
  );
  const meta = RANK_META[rank];
  return (
    <div className={`rank-chip ${size || ''}`}
         style={{
           background: meta.bg,
           border: `1px solid ${meta.border}`,
           color: meta.color,
           boxShadow: size === 'xl' ? `0 0 20px ${meta.glow}` : 'none',
         }}>
      {rank}
    </div>
  );
};

const StatCell = ({ label, kd, rank }) => (
  <div className="stat">
    <div className="label">{label}</div>
    {rank ? (
      <div className="val" style={{color: RANK_META[rank].color}}>{rank}</div>
    ) : (
      <div className="val" style={{color: 'var(--text-mute)'}}>?</div>
    )}
  </div>
);

// ============ 멤버 카드 ============
const MemberCard = ({ member, isTop, onClick }) => {
  const overall = calcOverall(member);
  const matches = getMatches(member);
  const winRate = getWinRate(member);
  const isPending = matches <= 1;
  return (
    <div className={`member-card ${member.isLeader ? 'leader' : ''} ${isTop ? 'top-rank' : ''}`}
         onClick={onClick}>
      <div className="head">
        <div className="avatar">{member.name.slice(0, 1)}</div>
        <div className="name-block">
          <div className="row gap-2" style={{marginBottom: 3}}>
            <div className="name">{member.name}</div>
            {member.isLeader && <span className="badge leader">팀장</span>}
            {isPending && <span className="badge pending">배치중</span>}
          </div>
          <div className="most">MOST · {member.most || '—'}</div>
        </div>
        <RankChip rank={overall} size="lg"/>
      </div>

      <div className="stats-grid">
        <StatCell label="원형" rank={kdToRank(getKD(member, 'circle'))}/>
        <StatCell label="망미" rank={kdToRank(getKD(member, 'maze'))}/>
        <StatCell label="대맵" rank={kdToRank(getKD(member, 'map'))}/>
        <StatCell label="팀워크" rank={isPending ? null : member.teamworkRank}/>
      </div>

      <div className="foot">
        <span className="lbl">Win Rate</span>
        <span className="win-rate">
          {matches > 0 ? `${winRate}% ` : '—'}
          {matches > 0 && (
            <span className="mono" style={{fontSize: 11, color: 'var(--text-mute)', fontWeight: 500}}>
              ({member.wins ?? 0}승 {member.losses ?? 0}패)
            </span>
          )}
        </span>
      </div>
    </div>
  );
};

// ============ 멤버 상세 모달 ============
const MemberDetailModal = ({ member, onClose }) => {
  const [tab, setTab] = React.useState('stats');
  const overall = calcOverall(member);
  const matches = getMatches(member);
  const winRate = getWinRate(member);
  const isPending = matches <= 1;

  const ranks = {
    circle: kdToRank(getKD(member, 'circle')),
    maze: kdToRank(getKD(member, 'maze')),
    map: kdToRank(getKD(member, 'map')),
    teamwork: isPending ? null : member.teamworkRank,
  };
  const score = isPending ? null : Object.values(ranks).reduce((s, r) => s + (r ? RANK_SCORE[r] : 0), 0);

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal-header">
          <div className="row gap-3">
            <div className="avatar" style={{
              width: 52, height: 52, borderRadius: 12,
              background: member.isLeader ? 'linear-gradient(135deg, color-mix(in oklab, var(--leader) 20%, var(--surface-hi)), var(--surface-hi2))' : 'linear-gradient(135deg, var(--surface-hi), var(--surface-hi2))',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: 'Rajdhani, sans-serif', fontWeight: 700, fontSize: 24,
              color: member.isLeader ? 'var(--leader)' : 'var(--accent)',
              border: `1px solid ${member.isLeader ? 'color-mix(in oklab, var(--leader) 50%, transparent)' : 'var(--border)'}`,
            }}>{member.name.slice(0, 1)}</div>
            <div>
              <div className="row gap-2" style={{marginBottom: 4}}>
                <div style={{fontFamily: 'Rajdhani, sans-serif', fontWeight: 700, fontSize: 22}}>{member.name}</div>
                {member.isLeader && <span className="badge leader">팀장</span>}
                {isPending && <span className="badge pending">배치중</span>}
              </div>
              <div style={{fontSize: 13, color: 'var(--text-mute)'}}>MOST · {member.most || '—'} · 내전 {matches}회</div>
            </div>
          </div>
          <button className="modal-close" onClick={onClose}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M18 6L6 18M6 6l12 12"/></svg>
          </button>
        </div>

        <div style={{padding: '0 24px', borderBottom: '1px solid var(--border)', display: 'flex', gap: 4}}>
          {[['stats', '스탯 분석'], ['character', '캐릭터 정보']].map(([k, v]) => (
            <button key={k}
                    onClick={() => setTab(k)}
                    style={{
                      background: 'transparent', border: 'none', cursor: 'pointer',
                      padding: '14px 4px', margin: '0 12px 0 0',
                      color: tab === k ? 'var(--accent)' : 'var(--text-dim)',
                      fontWeight: 600, fontSize: 14,
                      borderBottom: `2px solid ${tab === k ? 'var(--accent)' : 'transparent'}`,
                      fontFamily: 'inherit',
                    }}>{v}</button>
          ))}
        </div>

        <div className="modal-body">
          {tab === 'stats' && (
            <div>
              <div className="row between mb-4" style={{alignItems: 'flex-start'}}>
                <div>
                  <div style={{fontSize: 11, letterSpacing: '0.15em', color: 'var(--text-mute)', textTransform: 'uppercase', marginBottom: 8}}>종합 랭크</div>
                  <RankChip rank={overall} size="xl"/>
                </div>
                <div style={{textAlign: 'right'}}>
                  <div style={{fontSize: 11, letterSpacing: '0.15em', color: 'var(--text-mute)', textTransform: 'uppercase', marginBottom: 8}}>합산 점수</div>
                  <div style={{fontFamily: 'Rajdhani, sans-serif', fontWeight: 700, fontSize: 38, color: 'var(--accent)'}}>
                    {score ?? '—'}<span style={{fontSize: 18, color: 'var(--text-mute)'}}> / 32</span>
                  </div>
                </div>
              </div>

              <div style={{fontSize: 11, letterSpacing: '0.15em', color: 'var(--text-mute)', textTransform: 'uppercase', marginBottom: 12}}>세부 랭크</div>
              <div className="grid grid-2 gap-3">
                {[
                  ['원형 경기장', 'circle', ranks.circle],
                  ['망자의 미궁', 'maze', ranks.maze],
                  ['대맵', 'map', ranks.map],
                  ['팀워크', null, ranks.teamwork],
                ].map(([label, catKey, r]) => {
                  const kd = catKey ? getKD(member, catKey) : null;
                  const kills = catKey ? member[`${catKey}Kills`] : null;
                  const deaths = catKey ? member[`${catKey}Deaths`] : null;
                  return (
                    <div key={label} style={{
                      padding: 16, background: 'var(--bg-elev)', borderRadius: 10,
                      border: '1px solid var(--border)',
                    }}>
                      <div className="row between" style={{marginBottom: catKey ? 10 : 0}}>
                        <div style={{fontSize: 12, color: 'var(--text-dim)'}}>{label}</div>
                        <RankChip rank={r}/>
                      </div>
                      {catKey ? (
                        kd != null ? (
                          <>
                            <div className="mono" style={{fontSize: 18, fontWeight: 700}}>K/D {kd.toFixed(2)}</div>
                            <div className="mono" style={{fontSize: 11, color: 'var(--text-mute)', marginTop: 4, letterSpacing: '0.05em'}}>
                              <span style={{color: 'var(--mint)'}}>KILL {kills ?? 0}</span>
                              <span style={{margin: '0 6px', color: 'var(--border-hi)'}}>·</span>
                              <span style={{color: 'var(--danger)'}}>DEATH {deaths ?? 0}</span>
                            </div>
                          </>
                        ) : (
                          <div style={{fontSize: 13, color: 'var(--text-mute)'}}>데이터 없음</div>
                        )
                      ) : (
                        <div style={{fontSize: 13, color: 'var(--text-mute)'}}>어드민 지정</div>
                      )}
                    </div>
                  );
                })}
              </div>

              <div className="divider"/>
              <div className="row between">
                <div>
                  <div style={{fontSize: 11, letterSpacing: '0.15em', color: 'var(--text-mute)', textTransform: 'uppercase', marginBottom: 4}}>팀 승률</div>
                  <div className="mono" style={{fontSize: 22, fontWeight: 700, color: 'var(--mint)'}}>
                    {matches > 0 ? `${winRate}%` : '—'}
                  </div>
                  <div className="mono" style={{fontSize: 12, color: 'var(--text-mute)', marginTop: 2}}>
                    {member.wins ?? 0}승 {member.losses ?? 0}패
                  </div>
                </div>
                <div style={{textAlign: 'right'}}>
                  <div style={{fontSize: 11, letterSpacing: '0.15em', color: 'var(--text-mute)', textTransform: 'uppercase', marginBottom: 4}}>내전 참여</div>
                  <div className="mono" style={{fontSize: 22, fontWeight: 700}}>{matches}회</div>
                </div>
              </div>
            </div>
          )}

          {tab === 'character' && (
            <div>
              <div style={{fontSize: 11, letterSpacing: '0.15em', color: 'var(--text-mute)', textTransform: 'uppercase', marginBottom: 12}}>모스트 캐릭터</div>
              <div style={{
                padding: 24, background: 'var(--bg-elev)', borderRadius: 12,
                border: '1px solid var(--border)', textAlign: 'center'
              }}>
                <div style={{
                  width: 84, height: 84, borderRadius: 20,
                  background: 'linear-gradient(135deg, var(--surface-hi), var(--surface-hi2))',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'Rajdhani, sans-serif', fontWeight: 700, fontSize: 34,
                  color: 'var(--accent)', border: '1px solid var(--border)',
                  marginBottom: 16
                }}>{(member.most || '?').slice(0, 1)}</div>
                <div style={{fontFamily: 'Rajdhani, sans-serif', fontSize: 26, fontWeight: 700}}>{member.most || '지정되지 않음'}</div>
                <div style={{fontSize: 13, color: 'var(--text-mute)', marginTop: 4}}>가장 많이 사용하는 캐릭터</div>
              </div>

              <div className="mt-6" style={{fontSize: 13, color: 'var(--text-dim)', textAlign: 'center'}}>
                * 더 자세한 캐릭터 통계는 향후 업데이트에서 제공될 예정입니다.
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

// ============ 랭크 페이지 ============
const RanksPage = ({ members }) => {
  const [search, setSearch] = React.useState('');
  const [rankFilter, setRankFilter] = React.useState('all');
  const [leaderFilter, setLeaderFilter] = React.useState('all');
  const [sortBy, setSortBy] = React.useState('overall');
  const [selected, setSelected] = React.useState(null);

  // 계산된 종합 랭크 포함
  const enriched = members.map(m => ({ ...m, _overall: calcOverall(m) }));

  // 필터링
  let filtered = enriched.filter(m => {
    if (search && !m.name.toLowerCase().includes(search.toLowerCase())) return false;
    if (rankFilter !== 'all' && m._overall !== rankFilter) return false;
    if (leaderFilter === 'leader' && !m.isLeader) return false;
    if (leaderFilter === 'member' && m.isLeader) return false;
    return true;
  });

  // 정렬
  const rankOrder = (r) => r ? RANK_ORDER.indexOf(r) : 99;
  filtered.sort((a, b) => {
    if (sortBy === 'overall') return rankOrder(a._overall) - rankOrder(b._overall);
    if (sortBy === 'circle') return (getKD(b, 'circle') ?? -1) - (getKD(a, 'circle') ?? -1);
    if (sortBy === 'maze') return (getKD(b, 'maze') ?? -1) - (getKD(a, 'maze') ?? -1);
    if (sortBy === 'map') return (getKD(b, 'map') ?? -1) - (getKD(a, 'map') ?? -1);
    if (sortBy === 'winrate') return (getWinRate(b) ?? -1) - (getWinRate(a) ?? -1);
    if (sortBy === 'name') return a.name.localeCompare(b.name);
    return 0;
  });

  // TOP 5
  const top5 = [...enriched]
    .filter(m => m._overall)
    .sort((a, b) => {
      const rd = rankOrder(a._overall) - rankOrder(b._overall);
      if (rd !== 0) return rd;
      // 동일 랭크 내에서는 원형 K/D로
      return (getKD(b, 'circle') ?? 0) - (getKD(a, 'circle') ?? 0);
    })
    .slice(0, 5);

  const topIds = new Set(top5.map(m => m.id));

  return (
    <div className="container-wide">
      <div className="page-header">
        <div className="accent-line"/>
        <h1>멤버 랭크</h1>
        <p className="sub">전체 <b style={{color: 'var(--text)'}}>{members.length}</b>명 · 팀장 <b style={{color: 'var(--leader)'}}>{members.filter(m => m.isLeader).length}</b>명 · 배치중 <b style={{color: 'var(--warn)'}}>{members.filter(m => getMatches(m) <= 1).length}</b>명</p>
      </div>

      {/* TOP 5 */}
      <div className="top5">
        <div className="top5-head">
          <h3>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{color: '#ffcf4d'}}>
              <path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/>
              <path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/>
              <path d="M4 22h16"/>
              <path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/>
              <path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/>
              <path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"/>
            </svg>
            종합 랭킹 TOP 5
          </h3>
          <span className="tag">HALL OF FAME</span>
        </div>
        <div className="top5-grid">
          {top5.map((m, i) => (
            <div key={m.id} className="top5-item" onClick={() => setSelected(m)}>
              <div className={`rank-num n${i+1}`}>#{i+1}</div>
              <div className="p-name">{m.name} {m.isLeader && <span style={{color: 'var(--leader)', fontSize: 11}}>·팀장</span>}</div>
              <div className="p-most">{m.most}</div>
              <div className="p-rank"><RankChip rank={m._overall}/></div>
            </div>
          ))}
        </div>
      </div>

      {/* 필터바 */}
      <div className="filter-bar">
        <div className="search-wrap">
          <svg className="search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
          </svg>
          <input className="input" placeholder="멤버 이름 검색..." value={search} onChange={e => setSearch(e.target.value)}/>
        </div>

        <div className="filter-chip-group">
          {[['all', '전체'], ['leader', '팀장'], ['member', '멤버']].map(([k, v]) => (
            <button key={k} className={`filter-chip ${leaderFilter === k ? 'active' : ''}`}
                    onClick={() => setLeaderFilter(k)}>{v}</button>
          ))}
        </div>

        <select className="select" style={{width: 160}} value={rankFilter} onChange={e => setRankFilter(e.target.value)}>
          <option value="all">모든 랭크</option>
          {RANK_ORDER.map(r => <option key={r} value={r}>{r} 랭크</option>)}
        </select>

        <select className="select" style={{width: 200}} value={sortBy} onChange={e => setSortBy(e.target.value)}>
          <option value="overall">정렬 · 종합 랭크</option>
          <option value="circle">정렬 · 원형 K/D</option>
          <option value="maze">정렬 · 망미 K/D</option>
          <option value="map">정렬 · 대맵 K/D</option>
          <option value="winrate">정렬 · 승률</option>
          <option value="name">정렬 · 이름</option>
        </select>
      </div>

      {/* 카드 그리드 */}
      {filtered.length === 0 ? (
        <div style={{textAlign: 'center', padding: 60, color: 'var(--text-mute)'}}>
          검색 조건에 맞는 멤버가 없습니다.
        </div>
      ) : (
        <div className="grid grid-auto-300">
          {filtered.map(m => (
            <MemberCard key={m.id} member={m} isTop={topIds.has(m.id)}
                        onClick={() => setSelected(m)}/>
          ))}
        </div>
      )}

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

window.RankChip = RankChip;
window.MemberCard = MemberCard;
window.MemberDetailModal = MemberDetailModal;
window.RanksPage = RanksPage;