// Primus IQ — Leaderboard Screen

const LEADERBOARD_PAGE_SIZE = 50;   // rows rendered per "page" — windowed so a big board stays light

const ScreenLeaderboard = ({ currentUser }) => {
  const [entries, setEntries] = React.useState([]);
  const [loading, setLoading] = React.useState(false);
  const [myRank, setMyRank] = React.useState(null);
  const [myScore, setMyScore] = React.useState(0);
  const [totalUsers, setTotalUsers] = React.useState(0);
  const [visible, setVisible] = React.useState(LEADERBOARD_PAGE_SIZE);

  React.useEffect(() => {
    setLoading(true);
    PrimusAPI.getLeaderboard(100)
      .then(data => {
        setEntries(data?.entries || []);
        setMyRank(data?.your_rank ?? null);
        setMyScore(data?.your_score ?? 0);
        setTotalUsers(data?.total_users ?? 0);
      })
      .catch(() => {
        setEntries([]);
        setMyRank(null);
        setMyScore(0);
        setTotalUsers(0);
      })
      .finally(() => setLoading(false));
  }, []);

  // Only show users who have actually uploaded something
  const board = entries
    .filter(e => (e.total_uploads || 0) > 0)
    .map((entry, index) => ({
      rank: entry.rank || index + 1,
      userId: entry.user_id,
      name: entry.full_name || 'Unknown user',
      designation: entry.designation || 'Primus Partners',
      uploads: entry.total_uploads || 0,
      score: entry.score || 0,
      isCurrentUser: currentUser && (entry.user_id === currentUser.id || entry.full_name === currentUser.full_name),
    }));

  // Windowed rendering — keeps a large board from mounting every row at once.
  const shown = board.slice(0, visible);
  const hasMore = board.length > visible;

  const rankLabel = myRank ? `${myRank}/${totalUsers}` : '—';

  return (
    <div style={contentArea}>
      <div className="mobile-p-16" style={{ padding: '40px 48px 48px', maxWidth: 980, margin: '0 auto', display: 'flex', flexDirection: 'column', height: '100%' }}>
        <div className="mobile-stack" style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 24, marginBottom: 24 }}>
          <div>
            <div className="t-eyebrow" style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
              <PIcon name="trophy" size={13} color="var(--maroon)" /> Contributions
            </div>
            <h1 className="serif" style={{ fontSize: 28, fontWeight: 500, margin: 0, letterSpacing: '-0.02em' }}>Leaderboard</h1>
            <p style={{ fontSize: 13, color: 'var(--mute)', margin: '6px 0 0' }}>
              Scores come from artifacts added to projects and the firm library.
            </p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 130px)', gap: 10 }}>
            <LeaderboardMetric label="Your rank" value={rankLabel} />
            <LeaderboardMetric label="Your score" value={myScore || '—'} />
          </div>
        </div>

        {loading ? (
          <LeaderboardEmpty text="Loading leaderboard..." />
        ) : board.length === 0 ? (
          <LeaderboardEmpty text="No data available. Upload files to appear on the leaderboard." />
        ) : (
          <div style={{ background: 'var(--bg-soft)', border: '1px solid var(--line)', borderRadius: 14, overflow: 'hidden', boxShadow: 'var(--shadow-xs)', display: 'flex', flexDirection: 'column', flex: 1 }}>
            {/* Header */}
            <div className="leaderboard-grid-row" style={{
              padding: '12px 18px', borderBottom: '1px solid var(--line)',
              fontSize: 10, fontWeight: 700, color: 'var(--mute)', letterSpacing: '0.08em', textTransform: 'uppercase',
              flexShrink: 0,
            }}>
              <span>Rank</span>
              <span>Person</span>
              <span style={{ textAlign: 'center' }}>Uploads</span>
              <span style={{ textAlign: 'center' }}>Score</span>
            </div>
            {/* Scrollable rows */}
            <div className="pi-thin-scroll" style={{ overflowY: 'auto', flex: 1 }}>
              {shown.map((entry, index) => {
                const initials = entry.name.split(' ').filter(Boolean).map(w => w[0].toUpperCase()).slice(0, 2).join('') || '?';
                return (
                  <div key={entry.userId} className="leaderboard-grid-row" style={{
                    alignItems: 'center', gap: 0, padding: '14px 18px',
                    borderBottom: (!hasMore && index === shown.length - 1) ? 'none' : '1px solid var(--line)',
                    background: entry.isCurrentUser ? 'var(--maroon-06)' : 'var(--bg-soft)',
                  }}>
                    <div style={{ fontSize: 15, fontWeight: 700, color: entry.isCurrentUser ? 'var(--maroon)' : 'var(--mute)' }}>
                      #{entry.rank}<span style={{ fontSize: 11, fontWeight: 500, color: 'var(--mute)' }}>/{totalUsers}</span>
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 12, minWidth: 0 }}>
                      <div className="avatar" style={{ width: 34, height: 34, fontSize: 12, borderColor: entry.isCurrentUser ? 'var(--maroon-10)' : 'var(--bg-card)' }}>{initials}</div>
                      <div style={{ minWidth: 0 }}>
                        <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--ink)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                          {entry.name}
                          {entry.isCurrentUser && <span style={{ marginLeft: 8, fontSize: 10, color: 'var(--maroon)', fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase' }}>You</span>}
                        </div>
                        <div className="mobile-hide" style={{ fontSize: 11, color: 'var(--mute)', marginTop: 2, textTransform: 'capitalize' }}>{entry.designation}</div>
                      </div>
                    </div>
                    <div style={{ fontSize: 13, color: 'var(--ink-2)', textAlign: 'center', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                      {entry.uploads}
                      <span className="mobile-hide">&nbsp;files</span>
                    </div>
                    <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--ink)', textAlign: 'center' }}>{entry.score}</div>
                  </div>
                );
              })}
              {hasMore && (
                <div style={{ padding: '14px 18px', textAlign: 'center' }}>
                  <button onClick={() => setVisible(v => v + LEADERBOARD_PAGE_SIZE)} className="btn-secondary" style={{ height: 34 }}>
                    Load more · showing {shown.length} of {board.length}
                  </button>
                </div>
              )}
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

const LeaderboardMetric = ({ label, value }) => (
  <div style={{ background: 'var(--bg-card)', border: '1px solid var(--line)', borderRadius: 12, padding: '12px 14px' }}>
    <div className="t-eyebrow" style={{ fontSize: 9 }}>{label}</div>
    <div style={{ fontSize: 22, fontWeight: 700, color: 'var(--maroon)', marginTop: 4 }}>{value}</div>
  </div>
);

const LeaderboardEmpty = ({ text }) => (
  <div style={{ padding: 56, borderRadius: 14, background: 'var(--bg-card)', border: '1px dashed var(--line-2)', textAlign: 'center', fontSize: 13, color: 'var(--mute)' }}>
    {text}
  </div>
);

Object.assign(window, {
  ScreenLeaderboard,
  LeaderboardMetric,
  LeaderboardEmpty,
});