"use client";

export interface LeaderboardEntry {
  handle: string;
  avatar?: string;
  did?: string;
  score: number;
  createdCount: number;
  closedCount: number;
  commentCount: number;
}

interface Props {
  entries: LeaderboardEntry[];
  collapsed: boolean;
  compact?: boolean;
  onToggleCollapse: () => void;
  onExpandPanel: () => void;
  onProfileClick: (handle: string) => void;
}

/**
 * Compact leaderboard overlay widget that sits below the ActivityOverlay.
 * Shows top contributors with avatars and key stats.
 */
export function LeaderboardOverlay({
  entries,
  collapsed,
  compact,
  onToggleCollapse,
  onExpandPanel,
  onProfileClick,
}: Props) {
  if (collapsed) {
    return (
      <button
        onClick={onToggleCollapse}
        className="flex items-center gap-2 px-3 py-1.5 bg-white/90 dark:bg-zinc-900/90 backdrop-blur-sm rounded-full border border-zinc-200/80 dark:border-zinc-700/80 shadow-sm hover:shadow-md transition-all cursor-pointer"
      >
        {/* Trophy icon */}
        <svg className="w-3.5 h-3.5 text-amber-500" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
          <path d="M4 2h8v5a4 4 0 01-8 0V2zM4 4H2a1 1 0 00-1 1v1a2 2 0 002 2h1M12 4h2a1 1 0 011 1v1a2 2 0 01-2 2h-1M6 12h4M8 10v2M5 14h6" />
        </svg>
        <span className="text-xs font-medium text-zinc-600 dark:text-zinc-400">Leaderboard</span>
        {entries.length > 0 && (
          <span className="text-[10px] font-medium text-white bg-amber-500 rounded-full px-1.5 py-0.5 min-w-[18px] text-center">
            {entries.length}
          </span>
        )}
      </button>
    );
  }

  return (
    <div className={`${compact ? "w-60" : "w-72"} max-w-[calc(100vw-2rem)] bg-white/95 dark:bg-zinc-900/95 backdrop-blur-sm rounded-xl border border-zinc-200/80 dark:border-zinc-700/80 shadow-lg overflow-hidden`}>
      {/* Header */}
      <div className="flex items-center justify-between px-3 py-2 border-b border-zinc-100 dark:border-zinc-800">
        <div className="flex items-center gap-2">
          <div className="w-1.5 h-1.5 rounded-full bg-amber-400" />
          <span className="text-[11px] font-semibold text-zinc-700 dark:text-zinc-300 uppercase tracking-wider">Leaderboard</span>
        </div>
        <button onClick={onToggleCollapse} className="p-1 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-lg transition-colors cursor-pointer">
          {/* Chevron up icon */}
          <svg className="w-3.5 h-3.5 text-zinc-400" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
          </svg>
        </button>
      </div>

      {/* Entries list — show top 3, scroll for more */}
      <div className="max-h-[220px] overflow-y-auto">
        {entries.slice(0, 3).map((entry, i) => (
          <button
            key={entry.handle}
            onClick={() => onProfileClick(entry.handle)}
            className="flex items-center gap-2.5 w-full px-3 py-2 hover:bg-zinc-50/60 dark:hover:bg-zinc-800/60 transition-colors text-left cursor-pointer"
          >
            {/* Rank */}
            <span className={`text-[11px] font-bold tabular-nums w-4 text-center shrink-0 ${
              i === 0 ? "text-amber-500" : i === 1 ? "text-zinc-400" : i === 2 ? "text-amber-700" : "text-zinc-300 dark:text-zinc-500"
            }`}>
              {i + 1}
            </span>

            {/* Avatar */}
            {entry.avatar ? (
              // eslint-disable-next-line @next/next/no-img-element
              <img src={entry.avatar} alt={entry.handle} className="w-6 h-6 rounded-full ring-1 ring-zinc-100 dark:ring-zinc-700 shrink-0" />
            ) : (
              <div className="w-6 h-6 rounded-full bg-zinc-100 dark:bg-zinc-800 flex items-center justify-center text-[10px] font-medium text-zinc-500 dark:text-zinc-400 shrink-0">
                {entry.handle.charAt(0).toUpperCase()}
              </div>
            )}

            {/* Handle + score */}
            <div className="flex-1 min-w-0">
              <div className="text-[11px] font-medium text-zinc-700 dark:text-zinc-300 truncate">{entry.handle}</div>
              <div className="text-[10px] text-zinc-400 dark:text-zinc-400">
                {entry.closedCount} closed · {entry.createdCount} created · {entry.commentCount} comments
              </div>
            </div>
          </button>
        ))}
      </div>

      {/* Footer with "See all" */}
      {entries.length > 0 && (
        <div className="flex items-center justify-between px-3 py-2 border-t border-zinc-100 dark:border-zinc-800">
          <span className="text-[10px] text-zinc-400 dark:text-zinc-400">{entries.length} contributors</span>
          <button
            onClick={onExpandPanel}
            className="text-[10px] font-medium text-emerald-600 dark:text-emerald-400 hover:text-emerald-700 dark:hover:text-emerald-300 transition-colors cursor-pointer"
          >
            See all →
          </button>
        </div>
      )}
    </div>
  );
}