"use client";

import { cn } from "@/lib/utils";
import Link from "next/link";
import { useEffect, useState } from "react";

type GithubStarsProps = {
	className?: string;
	repoUrl?: string;
	label?: string;
	count?: string;
};

// Function to format star count (e.g., 26400 -> "26.4k")
function formatStarCount(count: number): string {
	if (count >= 1000000) {
		return `${(count / 1000000).toFixed(1)}M`;
	}
	if (count >= 1000) {
		return `${(count / 1000).toFixed(1)}k`;
	}
	return count.toString();
}

// Extract owner and repo from GitHub URL
function extractRepoInfo(url: string): { owner: string; repo: string } | null {
	try {
		const match = url.match(/github\.com\/([^\/]+)\/([^\/]+)/);
		if (match) {
			return { owner: match[1], repo: match[2].replace(/\.git$/, "") };
		}
	} catch (error) {
		console.error("Error extracting repo info:", error);
	}
	return null;
}

export function GithubStars({
	className,
	repoUrl = "https://github.com/dokploy/dokploy",
	label = "GitHub Stars",
	count: defaultCount = "26.4k",
}: GithubStarsProps) {
	const [starCount, setStarCount] = useState<string>(defaultCount);
	const [isLoading, setIsLoading] = useState(true);

	useEffect(() => {
		const fetchStarCount = async () => {
			const repoInfo = extractRepoInfo(repoUrl);
			if (!repoInfo) {
				setIsLoading(false);
				return;
			}

			try {
				const response = await fetch(
					`/api/github-stars?owner=${encodeURIComponent(repoInfo.owner)}&repo=${encodeURIComponent(repoInfo.repo)}`,
				);

				if (response.ok) {
					const data = await response.json();
					const formattedCount = formatStarCount(data.stargazers_count);
					setStarCount(formattedCount);
				}
			} catch (error) {
				console.error("Error fetching GitHub stars:", error);
				// Keep default count on error
			} finally {
				setIsLoading(false);
			}
		};

		fetchStarCount();
	}, [repoUrl]);

	return (
		<Link
			href={repoUrl}
			target="_blank"
			aria-label={`${label}: ${starCount}`}
			className={cn(
				"group relative inline-flex items-center gap-2 rounded-full px-3 py-1",
				"shadow-[0_0_0_2px_#000_inset,0_2px_8px_rgba(0,0,0,0.35)]",
				"bg-gradient-to-b from-yellow-300 via-yellow-400 to-yellow-500",
				"text-black",
				"transition-transform hover:scale-[1.02] active:scale-[0.99]",
				className,
			)}
		>
			{/* sparkling stars */}
			<span
				aria-hidden
				className="pointer-events-none absolute inset-0 overflow-visible"
			>
				{/* top-left star */}
				<svg
					viewBox="0 0 24 24"
					className={cn(
						"absolute -left-1 -top-1 h-3 w-3 text-yellow-100",
						"drop-shadow-[0_0_6px_rgba(255,255,200,0.9)]",
						"animate-pulse [animation-delay:.2s] [animation-duration:1.6s]",
					)}
					fill="currentColor"
				>
					<path d="M12 2l2.4 5.6L20 10l-5.6 2.4L12 18l-2.4-5.6L4 10l5.6-2.4L12 2z" />
				</svg>
				{/* top-right star */}
				<svg
					viewBox="0 0 24 24"
					className={cn(
						"absolute -top-2 right-1 h-2.5 w-2.5 text-yellow-50",
						"drop-shadow-[0_0_6px_rgba(255,255,220,0.95)]",
						"animate-pulse [animation-delay:.7s] [animation-duration:1.9s]",
					)}
					fill="currentColor"
				>
					<path d="M12 2l2.4 5.6L20 10l-5.6 2.4L12 18l-2.4-5.6L4 10l5.6-2.4L12 2z" />
				</svg>
				{/* bottom-right star */}
				<svg
					viewBox="0 0 24 24"
					className={cn(
						"absolute -bottom-1 -right-1 h-3.5 w-3.5 text-yellow-200",
						"drop-shadow-[0_0_8px_rgba(255,255,180,0.85)]",
						"animate-pulse [animation-delay:1.1s] [animation-duration:2.2s]",
					)}
					fill="currentColor"
				>
					<path d="M12 2l2.4 5.6L20 10l-5.6 2.4L12 18l-2.4-5.6L4 10l5.6-2.4L12 2z" />
				</svg>
			</span>

			{/* subtle shine */}
			<span
				aria-hidden
				className="pointer-events-none absolute inset-0 overflow-hidden rounded-full"
			>
				<span
					className={cn(
						"absolute -inset-x-10 -top-6 h-10 rotate-12",
						"bg-white/40 blur-md",
						"opacity-0 transition-opacity duration-500",
						"group-hover:opacity-40",
					)}
				/>
			</span>

			{/* GitHub mark */}
			<span
				className={cn(
					"flex h-6 w-6 items-center justify-center rounded-full",
					"bg-black text-white",
					"shadow-[inset_0_0_0_1px_rgba(255,255,255,0.15)]",
				)}
			>
				<svg
					viewBox="0 0 24 24"
					aria-hidden="true"
					className="h-3.5 w-3.5"
					fill="currentColor"
				>
					<path d="M12 0C5.37 0 0 5.37 0 12a12 12 0 0 0 8.21 11.43c.6.11.82-.26.82-.58 0-.29-.01-1.05-.02-2.07-3.34.73-4.04-1.61-4.04-1.61-.55-1.4-1.35-1.77-1.35-1.77-1.1-.75.08-.74.08-.74 1.22.09 1.87 1.25 1.87 1.25 1.08 1.85 2.83 1.32 3.52 1.01.11-.78.42-1.32.76-1.62-2.66-.3-5.46-1.33-5.46-5.9 0-1.3.47-2.36 1.24-3.2-.13-.31-.54-1.56.12-3.24 0 0 1.01-.32 3.3 1.22.96-.27 1.98-.4 3-.4s2.04.13 3 .4c2.29-1.54 3.3-1.22 3.3-1.22.66 1.68.25 2.93.12 3.24.77.84 1.24 1.9 1.24 3.2 0 4.58-2.8 5.6-5.47 5.9.43.37.81 1.1.81 2.22 0 1.6-.02 2.89-.02 3.29 0 .32.22.69.83.57A12 12 0 0 0 24 12C24 5.37 18.63 0 12 0Z" />
				</svg>
			</span>

			{/* copy */}
			<span className="flex items-baseline gap-1 pr-0.5">
				<span className="text-xs font-semibold">Stars</span>
				<span className="text-sm font-extrabold tracking-tight">
					{isLoading ? "..." : starCount}
				</span>
			</span>

			{/* subtle ring on hover */}
			<span
				aria-hidden
				className={cn(
					"pointer-events-none absolute inset-0 rounded-full",
					"ring-1 ring-black/10 group-hover:ring-black/20",
				)}
			/>
		</Link>
	);
}

export default GithubStars;