'use client'
import React from 'react'
import type { LeaderboardEntry } from '@/types'

const LEVEL_EMOJI: Record<string, string> = {
  intern: '🌱',
  junior: '📗',
  medior: '📘',
  senior: '📙',
  staff: '🔷',
  principal: '🏆',
}

interface LeaderboardProps {
  entries: LeaderboardEntry[]
  currentUserId?: string
}

export function Leaderboard({ entries, currentUserId }: LeaderboardProps) {
  return (
    <div style={{ overflowX: 'auto', WebkitOverflowScrolling: 'touch' }}>
      <table
        style={{
          width: '100%',
          borderCollapse: 'collapse',
          fontSize: 'var(--t-small)',
          minWidth: '480px',
        }}
      >
        <thead>
          <tr>
            {['#', 'Name', 'Commits', 'Streak', 'Types', 'Badges', 'Level'].map((col) => (
              <th
                key={col}
                style={{
                  padding: 'var(--s-2) var(--s-3)',
                  textAlign: col === '#' || col === 'Name' ? 'left' : 'center',
                  fontSize: 'var(--t-label)',
                  fontFamily: 'var(--font-mono)',
                  textTransform: 'uppercase',
                  letterSpacing: 'var(--label-ls)',
                  color: 'var(--fg-muted)',
                  borderBottom: '2px solid var(--cream)',
                  background: 'var(--bg)',
                  position: col === 'Name' ? 'sticky' : undefined,
                  left: col === 'Name' ? '28px' : undefined,
                  whiteSpace: 'nowrap',
                }}
              >
                {col}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {entries.map((entry, idx) => {
            const isMe = entry.userId === currentUserId
            return (
              <tr
                key={entry.userId}
                style={{
                  background: isMe ? 'var(--accent-soft)' : idx % 2 === 0 ? 'var(--bg)' : 'var(--bg-warm)',
                }}
              >
                <td
                  style={{
                    padding: 'var(--s-2) var(--s-3)',
                    color: 'var(--fg-muted)',
                    fontWeight: idx < 3 ? 700 : 400,
                    whiteSpace: 'nowrap',
                  }}
                >
                  {idx === 0 ? '🥇' : idx === 1 ? '🥈' : idx === 2 ? '🥉' : idx + 1}
                </td>
                <td
                  style={{
                    padding: 'var(--s-2) var(--s-3)',
                    fontWeight: isMe ? 700 : 500,
                    color: isMe ? 'var(--teal-900)' : 'var(--fg)',
                    position: 'sticky',
                    left: '28px',
                    background: isMe ? 'var(--accent-soft)' : idx % 2 === 0 ? 'var(--bg)' : 'var(--bg-warm)',
                    whiteSpace: 'nowrap',
                  }}
                >
                  {entry.displayName}
                  {isMe && (
                    <span
                      style={{
                        marginLeft: 'var(--s-2)',
                        fontSize: 'var(--t-label)',
                        fontFamily: 'var(--font-mono)',
                        textTransform: 'uppercase',
                        color: 'var(--teal-700)',
                      }}
                    >
                      you
                    </span>
                  )}
                </td>
                <td style={{ padding: 'var(--s-2) var(--s-3)', textAlign: 'center', fontWeight: 600 }}>
                  {entry.totalCommits}
                </td>
                <td style={{ padding: 'var(--s-2) var(--s-3)', textAlign: 'center' }}>
                  {entry.currentStreak}w
                </td>
                <td style={{ padding: 'var(--s-2) var(--s-3)', textAlign: 'center' }}>
                  {entry.typesUsed}
                </td>
                <td style={{ padding: 'var(--s-2) var(--s-3)', textAlign: 'center' }}>
                  {entry.badgeCount}
                </td>
                <td style={{ padding: 'var(--s-2) var(--s-3)', textAlign: 'center', whiteSpace: 'nowrap' }}>
                  {LEVEL_EMOJI[entry.level] ?? ''} {entry.level}
                </td>
              </tr>
            )
          })}
        </tbody>
      </table>
    </div>
  )
}
