<script>"use strict";
export let value = 65;
export let max = 100;
export let lowThreshold = 50;
export let highThreshold = 80;
export let lowColor = "rose";
export let mediumColor = "yellow";
export let highColor = "green";
export let gradientShades = [400, 600, 800];
const colorClasses = {
  rose: {
    100: "text-rose-100",
    200: "text-rose-200",
    300: "text-rose-300",
    400: "text-rose-400",
    500: "text-rose-500",
    600: "text-rose-600",
    700: "text-rose-700",
    800: "text-rose-800",
    900: "text-rose-900"
  },
  red: {
    100: "text-red-100",
    200: "text-red-200",
    300: "text-red-300",
    400: "text-red-400",
    500: "text-red-500",
    600: "text-red-600",
    700: "text-red-700",
    800: "text-red-800",
    900: "text-red-900"
  },
  orange: {
    100: "text-orange-100",
    200: "text-orange-200",
    300: "text-orange-300",
    400: "text-orange-400",
    500: "text-orange-500",
    600: "text-orange-600",
    700: "text-orange-700",
    800: "text-orange-800",
    900: "text-orange-900"
  },
  amber: {
    100: "text-amber-100",
    200: "text-amber-200",
    300: "text-amber-300",
    400: "text-amber-400",
    500: "text-amber-500",
    600: "text-amber-600",
    700: "text-amber-700",
    800: "text-amber-800",
    900: "text-amber-900"
  },
  yellow: {
    100: "text-yellow-100",
    200: "text-yellow-200",
    300: "text-yellow-300",
    400: "text-yellow-400",
    500: "text-yellow-500",
    600: "text-yellow-600",
    700: "text-yellow-700",
    800: "text-yellow-800",
    900: "text-yellow-900"
  },
  lime: {
    100: "text-lime-100",
    200: "text-lime-200",
    300: "text-lime-300",
    400: "text-lime-400",
    500: "text-lime-500",
    600: "text-lime-600",
    700: "text-lime-700",
    800: "text-lime-800",
    900: "text-lime-900"
  },
  green: {
    100: "text-green-100",
    200: "text-green-200",
    300: "text-green-300",
    400: "text-green-400",
    500: "text-green-500",
    600: "text-green-600",
    700: "text-green-700",
    800: "text-green-800",
    900: "text-green-900"
  },
  emerald: {
    100: "text-emerald-100",
    200: "text-emerald-200",
    300: "text-emerald-300",
    400: "text-emerald-400",
    500: "text-emerald-500",
    600: "text-emerald-600",
    700: "text-emerald-700",
    800: "text-emerald-800",
    900: "text-emerald-900"
  },
  teal: {
    100: "text-teal-100",
    200: "text-teal-200",
    300: "text-teal-300",
    400: "text-teal-400",
    500: "text-teal-500",
    600: "text-teal-600",
    700: "text-teal-700",
    800: "text-teal-800",
    900: "text-teal-900"
  },
  cyan: {
    100: "text-cyan-100",
    200: "text-cyan-200",
    300: "text-cyan-300",
    400: "text-cyan-400",
    500: "text-cyan-500",
    600: "text-cyan-600",
    700: "text-cyan-700",
    800: "text-cyan-800",
    900: "text-cyan-900"
  },
  sky: {
    100: "text-sky-100",
    200: "text-sky-200",
    300: "text-sky-300",
    400: "text-sky-400",
    500: "text-sky-500",
    600: "text-sky-600",
    700: "text-sky-700",
    800: "text-sky-800",
    900: "text-sky-900"
  },
  blue: {
    100: "text-blue-100",
    200: "text-blue-200",
    300: "text-blue-300",
    400: "text-blue-400",
    500: "text-blue-500",
    600: "text-blue-600",
    700: "text-blue-700",
    800: "text-blue-800",
    900: "text-blue-900"
  },
  indigo: {
    100: "text-indigo-100",
    200: "text-indigo-200",
    300: "text-indigo-300",
    400: "text-indigo-400",
    500: "text-indigo-500",
    600: "text-indigo-600",
    700: "text-indigo-700",
    800: "text-indigo-800",
    900: "text-indigo-900"
  },
  violet: {
    100: "text-violet-100",
    200: "text-violet-200",
    300: "text-violet-300",
    400: "text-violet-400",
    500: "text-violet-500",
    600: "text-violet-600",
    700: "text-violet-700",
    800: "text-violet-800",
    900: "text-violet-900"
  },
  purple: {
    100: "text-purple-100",
    200: "text-purple-200",
    300: "text-purple-300",
    400: "text-purple-400",
    500: "text-purple-500",
    600: "text-purple-600",
    700: "text-purple-700",
    800: "text-purple-800",
    900: "text-purple-900"
  },
  fuchsia: {
    100: "text-fuchsia-100",
    200: "text-fuchsia-200",
    300: "text-fuchsia-300",
    400: "text-fuchsia-400",
    500: "text-fuchsia-500",
    600: "text-fuchsia-600",
    700: "text-fuchsia-700",
    800: "text-fuchsia-800",
    900: "text-fuchsia-900"
  },
  pink: {
    100: "text-pink-100",
    200: "text-pink-200",
    300: "text-pink-300",
    400: "text-pink-400",
    500: "text-pink-500",
    600: "text-pink-600",
    700: "text-pink-700",
    800: "text-pink-800",
    900: "text-pink-900"
  },
  stone: {
    100: "text-stone-100",
    200: "text-stone-200",
    300: "text-stone-300",
    400: "text-stone-400",
    500: "text-stone-500",
    600: "text-stone-600",
    700: "text-stone-700",
    800: "text-stone-800",
    900: "text-stone-900"
  },
  gray: {
    100: "text-gray-100",
    200: "text-gray-200",
    300: "text-gray-300",
    400: "text-gray-400",
    500: "text-gray-500",
    600: "text-gray-600",
    700: "text-gray-700",
    800: "text-gray-800",
    900: "text-gray-900"
  }
};
$: percentage = value / max * 100;
$: strokeDasharray = 100;
$: strokeDashoffset = 100 - percentage;
$: gradientId = (() => {
  if (percentage < lowThreshold) return "lowGradient";
  if (percentage < highThreshold) return "mediumGradient";
  return "highGradient";
})();
$: lowGradientClasses = [
  colorClasses[lowColor]?.[gradientShades[0]] || `text-${lowColor}-${gradientShades[0]}`,
  colorClasses[lowColor]?.[gradientShades[1]] || `text-${lowColor}-${gradientShades[1]}`,
  colorClasses[lowColor]?.[gradientShades[2]] || `text-${lowColor}-${gradientShades[2]}`
];
$: mediumGradientClasses = [
  colorClasses[mediumColor]?.[gradientShades[0]] || `text-${mediumColor}-${gradientShades[0]}`,
  colorClasses[mediumColor]?.[gradientShades[1]] || `text-${mediumColor}-${gradientShades[1]}`,
  colorClasses[mediumColor]?.[gradientShades[2]] || `text-${mediumColor}-${gradientShades[2]}`
];
$: highGradientClasses = [
  colorClasses[highColor]?.[gradientShades[0]] || `text-${highColor}-${gradientShades[0]}`,
  colorClasses[highColor]?.[gradientShades[1]] || `text-${highColor}-${gradientShades[1]}`,
  colorClasses[highColor]?.[gradientShades[2]] || `text-${highColor}-${gradientShades[2]}`
];
</script>

<div class="relative w-24 h-24">
	<svg class="w-full h-full rotate-[-90deg]" viewBox="0 0 36 36">
		<defs>
			<!-- Low values gradient -->
			<linearGradient id="lowGradient" x1="0%" y1="0%" x2="100%" y2="100%">
				<stop
					offset="0%"
					class={lowGradientClasses[0]}
					style="stop-color:currentColor;stop-opacity:1"
				/>
				<stop
					offset="50%"
					class={lowGradientClasses[1]}
					style="stop-color:currentColor;stop-opacity:1"
				/>
				<stop
					offset="100%"
					class={lowGradientClasses[2]}
					style="stop-color:currentColor;stop-opacity:1"
				/>
			</linearGradient>

			<!-- Medium values gradient -->
			<linearGradient id="mediumGradient" x1="0%" y1="0%" x2="100%" y2="100%">
				<stop
					offset="0%"
					class={mediumGradientClasses[0]}
					style="stop-color:currentColor;stop-opacity:1"
				/>
				<stop
					offset="50%"
					class={mediumGradientClasses[1]}
					style="stop-color:currentColor;stop-opacity:1"
				/>
				<stop
					offset="100%"
					class={mediumGradientClasses[2]}
					style="stop-color:currentColor;stop-opacity:1"
				/>
			</linearGradient>

			<!-- High values gradient -->
			<linearGradient id="highGradient" x1="0%" y1="0%" x2="100%" y2="100%">
				<stop
					offset="0%"
					class={highGradientClasses[0]}
					style="stop-color:currentColor;stop-opacity:1"
				/>
				<stop
					offset="50%"
					class={highGradientClasses[1]}
					style="stop-color:currentColor;stop-opacity:1"
				/>
				<stop
					offset="100%"
					class={highGradientClasses[2]}
					style="stop-color:currentColor;stop-opacity:1"
				/>
			</linearGradient>
		</defs>

		<circle
			class="text-gray-200"
			cx="18"
			cy="18"
			r="16"
			fill="none"
			stroke="currentColor"
			stroke-width="4"
		/>

		<circle
			class="transition-all duration-500"
			cx="18"
			cy="18"
			r="16"
			fill="none"
			stroke="url(#{gradientId})"
			stroke-width="4"
			stroke-dasharray={strokeDasharray}
			stroke-dashoffset={strokeDashoffset}
			stroke-linecap="round"
		/>
	</svg>

	<!-- Text -->
	<div
		class="absolute inset-0 flex items-center justify-center text-stone-500 font-semibold text-md"
	>
		{value}/{max}
	</div>
</div>
