// PeerProfile — read-only profile view for any colleague
const PeerProfileScreen = ({ data, peer, setScreen, isMobile }) => {
  // NOTE: All hooks must come before any conditional return (Rules of Hooks).
  // This component has no hooks, so the early returns below are safe.

  if (!peer) {
    return (
      <div style={{padding: isMobile?'20px 16px':'40px 48px', maxWidth:1280, margin:'0 auto'}}>
        <div className="card" style={{padding:40, textAlign:'center'}}>
          <p className="t-body muted">No profile selected. Try searching for a colleague.</p>
          <button className="btn btn-ghost" style={{marginTop:16}} onClick={() => setScreen('dashboard')}>Go to Dashboard</button>
        </div>
      </div>
    );
  }

  // Look up full user data by name if available
  const fullUser = Object.values(window.MERIT_USERS || {}).find(u => u.name === peer.name);
  const displayUser = fullUser || peer;

  // If the resolved user has no recognisable profile data, show a clear fallback
  // instead of rendering broken/partial UI.
  if (!displayUser || (!fullUser && !peer.role && !peer.balance && !peer.lifetime)) {
    return (
      <div style={{padding: isMobile?'20px 16px':'40px 48px', maxWidth:1280, margin:'0 auto'}}>
        <button
          className="btn btn-ghost"
          style={{marginBottom:20, padding:'8px 14px', fontSize:13, display:'flex', alignItems:'center', gap:6}}
          onClick={() => setScreen('dashboard')}
        >
          <Icon name="arrow-left" size={14}/> Back
        </button>
        <div className="card" style={{padding:40, textAlign:'center'}}>
          <p className="t-body muted" style={{marginBottom:8}}>Profile not available.</p>
          <p className="t-caption muted">This colleague does not have a full Merit profile yet.</p>
          <button className="btn btn-ghost" style={{marginTop:16}} onClick={() => setScreen('dashboard')}>Go to Dashboard</button>
        </div>
      </div>
    );
  }

  const badges = displayUser?.badges ?? [];
  const rank = peer?.rank ?? displayUser?.rank;
  const points = peer?.points ?? displayUser?.balance ?? 0;
  const lifetime = displayUser?.lifetime ?? displayUser?.lifetimePoints ?? 0;

  return (
    <div className="fade-in" style={{padding: isMobile?'20px 16px 32px':'40px 48px 80px', maxWidth:1280, margin:'0 auto'}}>
      {/* Back button */}
      <button
        className="btn btn-ghost"
        style={{marginBottom:20, padding:'8px 14px', fontSize:13, display:'flex', alignItems:'center', gap:6}}
        onClick={() => setScreen('dashboard')}
      >
        <Icon name="arrow-left" size={14}/> Back
      </button>

      {/* Hero card */}
      <div className="card" style={{
        padding: isMobile?24:40, marginBottom:24,
        display:'flex', alignItems:'center',
        gap: isMobile?20:32,
        flexDirection: isMobile?'column':'row',
        textAlign: isMobile?'center':'left',
      }}>
        <div style={{position:'relative', flexShrink:0}}>
          <Avatar
            initials={displayUser?.avatarInitials ?? displayUser?.initials ?? '?'}
            tone="navy"
            size={isMobile?96:120}
            ring
          />
          {rank && (
            <div style={{
              position:'absolute', bottom:-4, right:-4,
              padding:'3px 10px', borderRadius:999,
              background:'var(--nav-navy)', color:'#fff',
              fontSize:11, fontWeight:600, letterSpacing:'0.04em',
            }} className="num">#{rank}</div>
          )}
        </div>
        <div style={{flex:1, minWidth:0}}>
          <div className="t-label muted">
            {displayUser?.team ?? peer?.team ?? '—'}
          </div>
          <h1 style={{margin:'6px 0 4px', fontSize: isMobile?28:36, fontWeight:600, letterSpacing:'-0.02em'}}>
            {displayUser?.name ?? peer?.name ?? 'Unknown User'}
          </h1>
          <p className="t-body muted" style={{margin:0}}>
            {displayUser?.role ?? '—'}
          </p>
          {displayUser?.joined && (
            <p className="t-caption muted" style={{margin:'4px 0 0'}}>
              Member since {displayUser.joined}
            </p>
          )}
        </div>
      </div>

      {/* Stats strip */}
      <div style={{display:'grid', gridTemplateColumns: isMobile?'1fr 1fr':'repeat(3, 1fr)', gap: isMobile?10:20, marginBottom:24}}>
        <HeroStat label="Current rank" value={rank ? `#${rank}` : '—'} suffix="of 232"/>
        <HeroStat label="Points this quarter" value={(points ?? 0).toLocaleString()} suffix="pts" accent/>
        <HeroStat label="Lifetime earned" value={(lifetime ?? 0).toLocaleString()} suffix="pts"/>
      </div>

      {/* Badges */}
      {badges.length > 0 && (
        <section className="card" style={{padding: isMobile?20:28}}>
          <SectionHeader title="Badges"/>
          <div style={{display:'grid', gridTemplateColumns: isMobile?'1fr 1fr':'repeat(3, 1fr)', gap:12}}>
            {badges.map(b => <BadgeCard key={b.id} b={b}/>)}
          </div>
        </section>
      )}
    </div>
  );
};

Object.assign(window, { PeerProfileScreen });