/* eslint-disable */
// ─────────────────────────────────────────────────────────────
// searchgg · 전적검색(프로필) 화면 — 메인 헤더 유지 + 검색 서브헤더
// 섹션 컴포넌트는 sa-profile-sections.jsx (window 전역)
// ─────────────────────────────────────────────────────────────

function ProfileScreen({ player, onClose, onPick, onLogin, onClan, onCommunity }) {
  const SA = window.SA;
  const p = player;
  const [tab, setTab] = React.useState('전적');
  const tabs = ['전적', '통계'];
  return (
    <div style={{ position: 'fixed', inset: 0, zIndex: 200, background: 'var(--bg2)', display: 'flex', flexDirection: 'column', animation: 'sgFade .22s ease' }}>
      <Nav active="전적검색" onLogin={onLogin} onClan={() => onClan && onClan(p.clan || '불곰부대')} onCommunity={onCommunity} />
      {/* 검색 서브헤더 */}
      <div style={{ flexShrink: 0, background: '#fff', borderBottom: '1px solid var(--line2)' }}>
        <div style={{ maxWidth: 1180, margin: '0 auto', padding: '11px 28px', display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{ flex: 1, maxWidth: 520 }}>
            <SearchBar onPick={onPick} placeholder="다른 유저의 닉네임을 검색하세요" />
          </div>
        </div>
      </div>

      {/* 본문 */}
      <div style={{ flex: 1, overflowY: 'auto' }}>
        <div style={{ maxWidth: 1180, width: '100%', margin: '0 auto', padding: '24px 28px 44px' }}>
          <ProfileSummary p={p} />

          {/* 서브탭 바 */}
          <div style={{ display: 'flex', gap: 4, borderBottom: '1px solid var(--line2)', marginBottom: 18 }}>
            {tabs.map((t) => {
              const on = tab === t;
              return (
                <button key={t} onClick={() => setTab(t)} style={{ position: 'relative', padding: '12px 22px', border: 'none', background: 'transparent', cursor: 'pointer',
                  fontFamily: "'Pretendard',sans-serif", fontWeight: 700, fontSize: 14.5, color: on ? 'var(--ink)' : 'var(--t3)' }}>
                  {t}
                  {on && <span style={{ position: 'absolute', left: 12, right: 12, bottom: -1, height: 3, background: p.rank.color, borderRadius: 2 }} />}
                </button>
              );
            })}
          </div>

          {tab === '전적' && (
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 340px', gap: 18, alignItems: 'start' }}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 18, minWidth: 0 }}>
                <RankedSeasons p={p} />
                <ClanRecords p={p} />
                <MatchHistory p={p} />
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
                <RecentTrend p={p} />
                <Companions p={p} onPick={onPick} />
              </div>
            </div>
          )}

          {tab === '통계' && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
              <TrendChart p={p} />
              <ModeRecords p={p} />
              <MapRecords p={p} />
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ProfileScreen });