"use client";

import type { LeaderboardEntry } from "./LeaderboardOverlay";

interface Props {
  entries: LeaderboardEntry[];
  isOpen: boolean;
  onClose: () => void;
  onProfileClick: (handle: string) => void;
  timeFilter?: "all" | "month" | "week" | "yesterday";
  onTimeFilterChange?: (filter: "all" | "month" | "week" | "yesterday") => void;
}

/**
 * Full slide-in sidebar panel for the leaderboard.
 * Matches the ActivityPanel pattern (360px right sidebar on desktop, bottom drawer on mobile).
 */
export function LeaderboardPanel({
  entries,
  isOpen,
  onClose,
  onProfileClick,
  timeFilter,
  onTimeFilterChange,
}: Props) {
  return (
    <>
      {/* Desktop sidebar */}
      <aside
        className={`hidden md:flex absolute top-0 right-0 h-full w-[360px] bg-white dark:bg-zinc-900 border-l border-zinc-200 dark:border-zinc-700 flex-col shadow-xl z-30 transform transition-transform duration-300 ease-out ${
          isOpen ? "translate-x-0" : "translate-x-full"
        }`}
      >
        {/* Header */}
        <div className="flex items-center justify-between px-4 py-3 border-b border-zinc-100 dark:border-zinc-800">
          <div className="flex items-center gap-2">
            <span className="text-[11px] font-semibold text-zinc-400 uppercase tracking-wider">Leaderboard</span>
            <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>
          </div>
          <button onClick={onClose} className="p-1.5 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-lg transition-colors cursor-pointer">
            <svg className="w-4 h-4 text-zinc-400" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>

        {/* Time filter tabs */}
        {onTimeFilterChange && (
          <div className="flex bg-zinc-100 dark:bg-zinc-800 rounded-md overflow-hidden mx-4 my-2">
            {([
              ["all", "All Time"],
              ["month", "Month"],
              ["week", "Week"],
              ["yesterday", "24h"],
            ] as const).map(([value, label]) => (
              <button
                key={value}
                onClick={() => onTimeFilterChange(value)}
                className={`flex-1 px-2 py-1.5 text-[11px] font-medium transition-colors ${
                  timeFilter === value
                    ? "bg-emerald-500 text-white"
                    : "text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 hover:bg-zinc-200/60 dark:hover:bg-zinc-700/60"
                }`}
              >
                {label}
              </button>
            ))}
          </div>
        )}

        {/* Scrollable entries list */}
        <div className="flex-1 overflow-y-auto">
          {entries.map((entry, i) => (
            <button
              key={entry.handle}
              onClick={() => onProfileClick(entry.handle)}
              className="flex items-center gap-3 w-full px-4 py-3 hover:bg-zinc-50/50 dark:hover:bg-zinc-800/50 transition-colors text-left group cursor-pointer"
            >
              {/* Rank with medal colors for top 3 */}
              <span className={`text-sm font-bold tabular-nums w-6 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-9 h-9 rounded-full ring-1 ring-zinc-100 dark:ring-zinc-700 shrink-0" />
              ) : (
                <div className="w-9 h-9 rounded-full bg-zinc-100 dark:bg-zinc-800 flex items-center justify-center text-sm font-medium text-zinc-500 dark:text-zinc-400 shrink-0">
                  {entry.handle.charAt(0).toUpperCase()}
                </div>
              )}

              {/* Details */}
              <div className="flex-1 min-w-0">
                <div className="text-[13px] font-semibold text-zinc-800 dark:text-zinc-200 truncate group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors">
                  {entry.handle}
                </div>
                <div className="flex items-center gap-3 mt-0.5">
                  <span className="text-[11px] text-zinc-400">
                    <span className="font-medium text-zinc-600 dark:text-zinc-400">{entry.closedCount}</span> closed
                  </span>
                  <span className="text-[11px] text-zinc-400">
                    <span className="font-medium text-zinc-600 dark:text-zinc-400">{entry.createdCount}</span> created
                  </span>
                  <span className="text-[11px] text-zinc-400">
                    <span className="font-medium text-zinc-600 dark:text-zinc-400">{entry.commentCount}</span> comments
                  </span>
                </div>
              </div>

              {/* Score badge */}
              <div className="shrink-0 flex flex-col items-center">
                <span className="text-lg font-bold text-zinc-700 dark:text-zinc-300">{entry.score}</span>
                <span className="text-[9px] text-zinc-400 uppercase">pts</span>
              </div>
            </button>
          ))}

          {entries.length === 0 && (
            <div className="flex flex-col items-center justify-center py-12 text-zinc-300 dark:text-zinc-500">
              <svg className="w-10 h-10 mb-3" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1">
                <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">No contributors yet</span>
            </div>
          )}
        </div>

        {/* Footer with scoring explanation */}
        <div className="px-4 py-2.5 border-t border-zinc-100 dark:border-zinc-800 text-[10px] text-zinc-400">
          Score = closed×3 + created×1 + comments×1
        </div>
      </aside>

      {/* Mobile drawer */}
      <div
        className={`md:hidden fixed inset-x-0 bottom-0 z-20 transition-transform duration-300 ease-out ${
          isOpen ? "translate-y-0" : "translate-y-full"
        }`}
      >
        <div className="bg-white dark:bg-zinc-900 rounded-t-2xl shadow-xl border-t border-zinc-200 dark:border-zinc-700 max-h-[60vh] flex flex-col">
          {/* Drag handle */}
          <div className="flex justify-center pt-3 pb-1">
            <div className="w-8 h-1 bg-zinc-300 dark:bg-zinc-600 rounded-full" />
          </div>

          {/* Header */}
          <div className="flex items-center justify-between px-4 py-2 border-b border-zinc-100 dark:border-zinc-800">
            <div className="flex items-center gap-2">
              <span className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">Leaderboard</span>
              <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>
            </div>
          <button onClick={onClose} className="p-1.5 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-lg transition-colors cursor-pointer">
              <svg className="w-4 h-4 text-zinc-400" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>

          {/* Time filter tabs */}
          {onTimeFilterChange && (
            <div className="flex bg-zinc-100 dark:bg-zinc-800 rounded-md overflow-hidden mx-4 my-2">
              {([
                ["all", "All Time"],
                ["month", "Month"],
                ["week", "Week"],
                ["yesterday", "24h"],
              ] as const).map(([value, label]) => (
                <button
                  key={value}
                  onClick={() => onTimeFilterChange(value)}
                  className={`flex-1 px-2 py-1.5 text-[11px] font-medium transition-colors ${
                    timeFilter === value
                      ? "bg-emerald-500 text-white"
                      : "text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 hover:bg-zinc-200/60 dark:hover:bg-zinc-700/60"
                  }`}
                >
                  {label}
                </button>
              ))}
            </div>
          )}

          {/* Scrollable entries list */}
          <div className="flex-1 overflow-y-auto">
            {entries.map((entry, i) => (
              <button
                key={entry.handle}
                onClick={() => onProfileClick(entry.handle)}
                className="flex items-center gap-2.5 w-full px-4 py-2.5 hover:bg-zinc-50/50 dark:hover:bg-zinc-800/50 transition-colors text-left group cursor-pointer"
              >
                {/* Rank with medal colors for top 3 */}
                <span className={`text-xs font-bold tabular-nums w-5 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 (smaller on mobile) */}
                {entry.avatar ? (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img src={entry.avatar} alt={entry.handle} className="w-7 h-7 rounded-full ring-1 ring-zinc-100 dark:ring-zinc-700 shrink-0" />
                ) : (
                  <div className="w-7 h-7 rounded-full bg-zinc-100 dark:bg-zinc-800 flex items-center justify-center text-xs font-medium text-zinc-500 dark:text-zinc-400 shrink-0">
                    {entry.handle.charAt(0).toUpperCase()}
                  </div>
                )}

                {/* Details */}
                <div className="flex-1 min-w-0">
                  <div className="text-xs font-semibold text-zinc-800 dark:text-zinc-200 truncate group-hover:text-emerald-600 dark:group-hover:text-emerald-400 transition-colors">
                    {entry.handle}
                  </div>
                  <div className="flex items-center gap-2 mt-0.5">
                    <span className="text-[10px] text-zinc-400 dark:text-zinc-400">
                      <span className="font-medium text-zinc-600 dark:text-zinc-400">{entry.closedCount}</span> closed
                    </span>
                    <span className="text-[10px] text-zinc-400 dark:text-zinc-400">
                      <span className="font-medium text-zinc-600 dark:text-zinc-400">{entry.createdCount}</span> created
                    </span>
                    <span className="text-[10px] text-zinc-400 dark:text-zinc-400">
                      <span className="font-medium text-zinc-600 dark:text-zinc-400">{entry.commentCount}</span> comments
                    </span>
                  </div>
                </div>

                {/* Score badge */}
                <div className="shrink-0 flex flex-col items-center">
                  <span className="text-base font-bold text-zinc-700 dark:text-zinc-300">{entry.score}</span>
                  <span className="text-[8px] text-zinc-400 dark:text-zinc-400 uppercase">pts</span>
                </div>
              </button>
            ))}

            {entries.length === 0 && (
              <div className="flex flex-col items-center justify-center py-8 text-zinc-300 dark:text-zinc-500">
                <svg className="w-8 h-8 mb-2" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1">
                  <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-[11px]">No contributors yet</span>
              </div>
            )}
          </div>

          {/* Footer with scoring explanation */}
          <div className="px-4 py-2 border-t border-zinc-100 dark:border-zinc-800 text-[9px] text-zinc-400 text-center">
            Score = closed×3 + created×1 + comments×1
          </div>
        </div>
      </div>
    </>
  );
}