GitHub Button

import { GithubButton } from "@/components/kanso/github-button"

export default function GithubButtonDemo() {
  return (
    <div className="flex flex-col gap-4">
      <GithubButton variantDesign="classic" href="https://github.com/Nagraj-13/Kanso-UI" />
      <GithubButton variantDesign="rainbow" href="https://github.com/Nagraj-13/Kanso-UI" />
      <GithubButton variantDesign="glow" href="https://github.com/Nagraj-13/Kanso-UI" glowColor="violet" />
    </div>
  )
}

import * as React from 'react';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';

export interface GithubButtonProps extends React.ComponentPropsWithoutRef<
  typeof Button
> {
  /** The design variant of the GitHub button */
  variantDesign?: 'rainbow' | 'classic' | 'tooltip' | 'glow';
  /** Number of stars to display (static or fallback value) */
  stars?: number | string;
  /** The repository link or target URL */
  href?: string;
  /** Custom glow color (preset name or CSS color/gradient) for the glow variant */
  glowColor?: string;
  /** Specific GitHub repository path (e.g. "owner/repo"). If omitted, parsed from href. */
  repo?: string;
}

// Production-ready shared client-side cache & pending fetch registry
const starCache = new Map<string, number>();
const pendingFetches = new Map<string, Promise<number>>();

type StarListener = (count: number) => void;
const starListeners = new Map<string, Set<StarListener>>();

const subscribeToRepoStars = (repo: string, callback: StarListener) => {
  if (!starListeners.has(repo)) {
    starListeners.set(repo, new Set());
  }
  starListeners.get(repo)!.add(callback);
  return () => {
    starListeners.get(repo)?.delete(callback);
    if (starListeners.get(repo)?.size === 0) {
      starListeners.delete(repo);
    }
  };
};

const broadcastRepoStars = (repo: string, count: number) => {
  starListeners.get(repo)?.forEach((cb) => cb(count));
};

const fetchRepoStars = async (repo: string): Promise<number> => {
  if (starCache.has(repo)) {
    return starCache.get(repo)!;
  }
  if (pendingFetches.has(repo)) {
    return pendingFetches.get(repo)!;
  }

  const promise = (async () => {
    try {
      const res = await fetch(`https://api.github.com/repos/${repo}`);
      if (!res.ok) throw new Error('GitHub API response error');
      const data = await res.json();
      const count = data.stargazers_count;
      if (typeof count === 'number') {
        starCache.set(repo, count);
        broadcastRepoStars(repo, count);
        return count;
      }
      throw new Error('Invalid count format');
    } catch (err) {
      console.error(`Failed to fetch stars for repo ${repo}:`, err);
      return 0;
    } finally {
      pendingFetches.delete(repo);
    }
  })();

  pendingFetches.set(repo, promise);
  return promise;
};

const GithubButton = React.forwardRef<HTMLButtonElement, GithubButtonProps>(
  (
    {
      className,
      variantDesign = 'classic',
      stars = 11,
      href,
      glowColor,
      repo,
      children,
      ...props
    },
    ref
  ) => {
    // Shared GitHub SVG Logo path
    const githubIcon = (
      <svg
        className="size-4 shrink-0"
        fill="currentColor"
        viewBox="0 0 24 24"
        aria-hidden="true"
      >
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.53 1.032 1.53 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
        />
      </svg>
    );

    // Resolve glow color to a CSS background gradient
    const getGlowBg = (color?: string) => {
      if (!color) {
        return 'linear-gradient(135deg, rgb(122, 105, 249), rgb(242, 99, 120), rgb(245, 131, 63))';
      }
      const presets: Record<string, string> = {
        violet:
          'linear-gradient(135deg, oklch(0.6 0.25 300), oklch(0.5 0.3 320))',
        rose: 'linear-gradient(135deg, oklch(0.65 0.25 0), oklch(0.55 0.3 20))',
        emerald:
          'linear-gradient(135deg, oklch(0.7 0.25 140), oklch(0.6 0.3 160))',
        blue: 'linear-gradient(135deg, oklch(0.6 0.25 250), oklch(0.5 0.3 270))',
        orange:
          'linear-gradient(135deg, oklch(0.7 0.25 45), oklch(0.6 0.3 65))',
        rainbow:
          'linear-gradient(90deg, hsl(0, 100%, 63%), hsl(90, 100%, 63%), hsl(210, 100%, 63%), hsl(195, 100%, 63%), hsl(270, 100%, 63%))',
      };
      if (color in presets) {
        return presets[color];
      }
      if (
        color.includes('gradient') ||
        color.includes('var(') ||
        color.includes('rgb') ||
        color.includes('hsl') ||
        color.includes('#')
      ) {
        return color;
      }
      return `linear-gradient(135deg, ${color}, ${color}cc)`;
    };

    // Dynamic Live Star Count State
    const [starCount, setStarCount] = React.useState<number | string>(stars);

    React.useEffect(() => {
      setStarCount(stars);
    }, [stars]);

    React.useEffect(() => {
      let targetRepo = repo;
      if (!targetRepo && href) {
        // Try parsing from GitHub URL format: github.com/owner/repo
        const match = href.match(/github\.com\/([^\/]+\/[^\/#?]+)/);
        if (match) {
          targetRepo = match[1];
        }
      }

      if (!targetRepo) return;

      if (starCache.has(targetRepo)) {
        setStarCount(starCache.get(targetRepo)!);
      }

      const unsubscribe = subscribeToRepoStars(targetRepo, (count) => {
        setStarCount(count);
      });

      fetchRepoStars(targetRepo).then((count) => {
        if (count > 0) {
          setStarCount(count);
        }
      });

      return () => unsubscribe();
    }, [repo, href]);

    // Standard button element to render (using primitive Button from shadcn)
    const buttonElement = (
      <Button
        ref={ref}
        variant="ghost"
        className={cn(
          'transition-all duration-200 cursor-pointer h-auto hover:bg-transparent text-inherit select-none',

          // Rainbow variant styling
          variantDesign === 'rainbow' && [
            'animate-rainbow-button items-center justify-center whitespace-nowrap rounded-md text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group relative animate-rainbow text-foreground hover:scale-105 active:scale-95 px-4 py-2 inline-flex',
            'before:absolute before:bottom-[-20%] before:left-1/2 before:z-[0] before:h-[20%] before:w-[60%] before:-translate-x-1/2 before:animate-rainbow before:bg-[linear-gradient(90deg,hsl(0,100%,63%),hsl(90,100%,63%),hsl(210,100%,63%),hsl(195,100%,63%),hsl(270,100%,63%))] before:bg-[length:200%_auto] before:[filter:blur(calc(0.8*1rem))]',
          ],

          // Classic variant styling
          variantDesign === 'classic' && [
            'gap-2 rounded-full font-bold justify-center px-4 py-2.5 text-xs bg-zinc-900/90 text-white shadow-[inset_0_1px_0_0_rgba(255,255,255,0.04),inset_0_0_0_1px_rgba(255,255,255,0.04)] dark:bg-zinc-950/90 hover:bg-zinc-950 hover:text-yellow-300 dark:hover:bg-zinc-900 hover:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.08),inset_0_0_0_1px_rgba(252,232,3,0.08)] hover:-translate-y-1 hover:scale-102 transition-all duration-300 ease-out',
          ],

          // Tooltip variant styling (button portion)
          variantDesign === 'tooltip' && [
            'rounded-lg p-2 bg-zinc-100 hover:bg-zinc-200 dark:bg-zinc-900 dark:hover:bg-zinc-800 text-zinc-950 dark:text-zinc-50 hover:scale-110 active:scale-95 transition-all duration-200',
          ],

          // Glow variant styling
          variantDesign === 'glow' && [
            'group/glow relative rounded-full p-[1.5px] overflow-hidden dark:bg-neutral-800 bg-neutral-200 border-0 hover:scale-105 active:scale-95 transition-all duration-300 hover:shadow-lg dark:hover:shadow-black/50',
          ],

          className
        )}
        {...props}
      >
        {variantDesign === 'rainbow' && (
          <>
            <div className="flex items-center gap-1.5 relative z-10">
              {githubIcon}
              <span className="text-zinc-900 dark:text-zinc-50 font-medium">
                {children || 'Star on GitHub'}
              </span>
            </div>
            <div className="ml-3 flex items-center gap-1.5 text-xs relative z-10 border-l border-zinc-200 dark:border-zinc-800 pl-3">
              <svg
                className="size-3.5 text-zinc-400 group-hover:text-yellow-500 group-hover:scale-110 transition-all duration-200"
                fill="currentColor"
                viewBox="0 0 24 24"
              >
                <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
              </svg>
              <span className="tabular-nums font-semibold text-zinc-600 dark:text-zinc-400">
                {starCount}
              </span>
            </div>
          </>
        )}

        {variantDesign === 'classic' && (
          <>
            {githubIcon}
            <span>{children || 'View on Github'}</span>
          </>
        )}

        {variantDesign === 'tooltip' && (
          <div className="size-5 flex items-center justify-center">
            {githubIcon}
          </div>
        )}

        {variantDesign === 'glow' && (
          <>
            {/* Animated Left Glow Border background */}
            <span className="absolute inset-0 rounded-full overflow-hidden">
              <span className="inset-0 absolute pointer-events-none select-none">
                <span
                  className="block -translate-x-1/2 -translate-y-1/3 size-24 blur-xl animate-glow-translate"
                  style={{
                    background: getGlowBg(glowColor),
                  }}
                />
              </span>
            </span>

            {/* Animated Right Glow Border background */}
            <span className="absolute inset-0 rounded-full overflow-hidden">
              <span className="inset-0 absolute pointer-events-none select-none">
                <span
                  className="block translate-x-1/2 translate-y-1/3 size-24 blur-xl animate-glow-translate-right"
                  style={{
                    background: getGlowBg(glowColor),
                  }}
                />
              </span>
            </span>

            {/* Left scaling glow */}
            <span className="inset-0 absolute pointer-events-none select-none animate-glow-translate">
              <span
                className="block z-0 h-full w-12 blur-xl -translate-x-1/2 rounded-full animate-glow-scale"
                style={{
                  background: getGlowBg(glowColor),
                }}
              />
            </span>

            {/* Right scaling glow */}
            <span className="inset-0 absolute pointer-events-none select-none animate-glow-translate">
              <span
                className="block z-0 h-full w-12 blur-xl translate-x-1/2 rounded-full animate-glow-scale"
                style={{
                  background: getGlowBg(glowColor),
                }}
              />
            </span>

            {/* Inner Content pill */}
            <span className="flex items-center justify-center gap-2 relative z-10 dark:bg-neutral-950/90 bg-neutral-50/90 rounded-full py-2 px-4 pl-3.5 w-full h-full text-zinc-900 dark:text-zinc-50 hover:bg-neutral-100/90 dark:hover:bg-neutral-900/90">
              <span className="relative group-hover/glow:scale-105 group-hover/glow:rotate-[360deg] transition-all duration-700 ease-in-out">
                {githubIcon}
                <span
                  className="rounded-full size-11 absolute opacity-0 dark:opacity-35 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 blur-lg animate-star-shine"
                  style={{
                    background: getGlowBg(glowColor),
                  }}
                />
              </span>
              <span className="bg-gradient-to-b ml-0.5 dark:from-white dark:to-white/50 from-neutral-950 to-neutral-950/60 bg-clip-text text-xs text-transparent font-semibold">
                {children || 'Star on Github'}
              </span>
              <span className="ml-1.5 tabular-nums text-[10px] font-semibold bg-neutral-200 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 px-1.5 py-0.5 rounded-full">
                {starCount}
              </span>
            </span>
          </>
        )}
      </Button>
    );

    // Wrap in tooltip layout if variant is tooltip
    if (variantDesign === 'tooltip') {
      return (
        <div className="group relative inline-block">
          {href ? (
            <a
              href={href}
              target="_blank"
              rel="noopener noreferrer"
              className="block focus:outline-none"
            >
              {buttonElement}
            </a>
          ) : (
            buttonElement
          )}
          {/* Tooltip box */}
          <span className="absolute -top-12 left-[50%] -translate-x-[50%] z-20 origin-bottom scale-0 px-2.5 py-1.5 rounded-lg border border-zinc-200 bg-white text-xs font-semibold text-zinc-800 shadow-sm transition-all duration-200 ease-in-out group-hover:scale-100 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-200">
            {children || 'GitHub'}
          </span>
        </div>
      );
    }

    if (href) {
      return (
        <a
          href={href}
          target="_blank"
          rel="noopener noreferrer"
          className="inline-block focus:outline-none"
        >
          {buttonElement}
        </a>
      );
    }

    return buttonElement;
  }
);

GithubButton.displayName = 'GithubButton';

export { GithubButton };