import React from "react";
import { ProviderInfo, CalendarData } from "../types/heatmap";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";

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

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 getRankBadgeClasses = () => {
    if (rank === 1) {
      return "bg-gradient-to-br from-yellow-400 to-yellow-600 text-yellow-900";
    }
    if (rank === 2) {
      return "bg-gradient-to-br from-gray-300 to-gray-500 text-gray-900";
    }
    if (rank === 3) {
      return "bg-gradient-to-br from-amber-600 to-amber-800 text-amber-100";
    }
    return "bg-gradient-to-br from-gray-800 to-gray-900 text-gray-100";
  };

  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <div 
            className="flex flex-col items-center min-w-0 flex-shrink-0 cursor-pointer group px-1"
            onClick={handleClick}
          >
            {/* Logo Circle */}
            <div className="relative">
              {/* Rank Badge */}
              <div className={`absolute -top-2 -left-2 ${getRankBadgeClasses()} text-xs font-bold rounded-full min-w-[24px] h-6 flex items-center justify-center px-1.5 shadow-lg border-2 border-background z-10`}>
                #{rank}
              </div>

              {provider.avatarUrl ? (
                <img 
                  src={provider.avatarUrl} 
                  alt={`${providerName} logo`}
                  className="w-16 h-16 rounded-lg shadow-lg transition-all duration-200 bg-white dark:bg-gray-900"
                />
              ) : (
                <div className="w-16 h-16 rounded-lg bg-muted flex items-center justify-center text-xl font-bold text-muted-foreground hover:bg-muted/80 transition-all duration-200">
                  {providerName.charAt(0).toUpperCase()}
                </div>
              )}
            </div>

            {/* Activity Info */}
            <div className="mt-1.5 text-center">
              {/* Provider Name */}
              <div className="text-xs font-medium text-foreground truncate max-w-20 text-center">
                {providerName}
              </div>
            </div>
          </div>
        </TooltipTrigger>
        <TooltipContent side="bottom" className="bg-background border border-border shadow-lg">
          <p className="text-sm font-medium">
            {totalCount} new repos in the last year
          </p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
};

export default OrganizationButton;