import React from "react";
import { ProviderInfo, CalendarData } from "../types/heatmap";

interface OrganizationButtonProps {
  provider: ProviderInfo;
  calendarData: CalendarData;
  rank: number;
}

// Compact vertical-leaderboard row: rank badge · avatar · name · repo count.
const OrganizationButton: React.FC<OrganizationButtonProps> = ({
  provider,
  calendarData,
  rank,
}) => {
  const providerName = provider.fullName || provider.authors[0];
  const calendarKey = provider.authors[0];
  const providerData = calendarData[calendarKey] || [];
  const totalCount = providerData.reduce((sum, day) => sum + day.count, 0);

  const handleClick = () => {
    const element = document.getElementById(`provider-${calendarKey}`);
    if (element) {
      element.scrollIntoView({ behavior: "smooth" });
    }
  };

  const medal = rank === 1 ? "👑" : rank === 2 ? "🥈" : rank === 3 ? "🥉" : null;

  const badgeClasses =
    rank === 1
      ? "bg-gradient-to-br from-yellow-400 to-yellow-600 text-yellow-900"
      : rank === 2
      ? "bg-gradient-to-br from-gray-300 to-gray-500 text-gray-900"
      : rank === 3
      ? "bg-gradient-to-br from-amber-600 to-amber-800 text-amber-100"
      : "bg-muted text-muted-foreground";

  return (
    <div
      className="flex items-center gap-3 w-full px-3 py-2 rounded-xl border border-border/60 bg-card hover:bg-muted/60 hover:border-border cursor-pointer transition-colors group"
      onClick={handleClick}
    >
      <div
        className={`shrink-0 w-9 h-9 rounded-full flex items-center justify-center text-sm font-bold shadow-sm ${badgeClasses}`}
      >
        {medal || `#${rank}`}
      </div>

      {provider.avatarUrl ? (
        <img
          src={provider.avatarUrl}
          alt={`${providerName} logo`}
          className="w-8 h-8 rounded-md bg-white dark:bg-gray-900 shrink-0"
        />
      ) : (
        <div className="w-8 h-8 rounded-md bg-muted flex items-center justify-center text-sm font-bold text-muted-foreground shrink-0">
          {providerName.charAt(0).toUpperCase()}
        </div>
      )}

      <span className="flex-1 min-w-0 truncate text-sm font-semibold text-foreground">
        {provider.flag ? <span className="mr-1">{provider.flag}</span> : null}
        {providerName}
      </span>

      <span className="shrink-0 text-xs font-medium text-muted-foreground tabular-nums">
        {totalCount.toLocaleString()}{" "}
        <span className="hidden sm:inline">repos</span>
      </span>
    </div>
  );
};

export default OrganizationButton;