import React from "react";
import { cn } from "@/lib/utils";

interface AttendanceGaugeProps {
  percentage: number; // 0 to 100
  size?: number; // diameter in px (default: 120)
  strokeWidth?: number; // stroke width (default: 10)
  minAttendancePct?: number; // policy threshold (default: 75.0)
  warningLevelPct?: number; // policy threshold (default: 70.0)
  criticalLevelPct?: number; // policy threshold (default: 65.0)
  showLabel?: boolean;
  className?: string;
  subtitle?: string;
}

export function AttendanceGauge({
  percentage,
  size = 120,
  strokeWidth = 10,
  minAttendancePct = 75.0,
  warningLevelPct = 70.0,
  criticalLevelPct = 65.0,
  showLabel = true,
  className,
  subtitle,
}: AttendanceGaugeProps) {
  // Clamp value between 0 and 100
  const clampedPct = Math.max(0, Math.min(100, percentage));

  // Determine tier & flat color based on active policy
  let strokeColor = "#059669"; // Emerald (Safe)
  let statusText = "Safe";
  let statusBadgeClass = "bg-emerald-50 text-emerald-700 border-emerald-200";

  if (clampedPct < criticalLevelPct) {
    strokeColor = "#e11d48"; // Rose (Shortage)
    statusText = "Shortage";
    statusBadgeClass = "bg-rose-50 text-rose-700 border-rose-200";
  } else if (clampedPct < warningLevelPct) {
    strokeColor = "#ea580c"; // Orange (Critical)
    statusText = "Critical";
    statusBadgeClass = "bg-orange-50 text-orange-700 border-orange-200";
  } else if (clampedPct < minAttendancePct) {
    strokeColor = "#d97706"; // Amber (Warning)
    statusText = "Warning";
    statusBadgeClass = "bg-amber-50 text-amber-700 border-amber-200";
  }

  // SVG Geometry
  const radius = (size - strokeWidth) / 2;
  const circumference = 2 * Math.PI * radius;
  const strokeDashoffset = circumference - (clampedPct / 100) * circumference;

  return (
    <div className={cn("flex flex-col items-center justify-center", className)}>
      <div className="relative" style={{ width: size, height: size }}>
        <svg
          width={size}
          height={size}
          viewBox={`0 0 ${size} ${size}`}
          className="rotate-[-90deg]"
        >
          {/* Subtle background track */}
          <circle
            cx={size / 2}
            cy={size / 2}
            r={radius}
            stroke="currentColor"
            strokeWidth={strokeWidth}
            fill="transparent"
            className="text-slate-200 dark:text-slate-800"
          />
          {/* Flat progress arc */}
          <circle
            cx={size / 2}
            cy={size / 2}
            r={radius}
            stroke={strokeColor}
            strokeWidth={strokeWidth}
            fill="transparent"
            strokeDasharray={circumference}
            strokeDashoffset={strokeDashoffset}
            strokeLinecap="round"
            className="transition-all duration-500 ease-out"
          />
        </svg>

        {/* Center Percentage Display */}
        <div className="absolute inset-0 flex flex-col items-center justify-center text-center">
          <span className="text-xl sm:text-2xl font-bold text-slate-900 dark:text-slate-50 tabular-nums">
            {clampedPct.toFixed(1)}%
          </span>
          {subtitle && (
            <span className="text-[10px] text-slate-500 font-medium tracking-tight">
              {subtitle}
            </span>
          )}
        </div>
      </div>

      {showLabel && (
        <span
          className={cn(
            "mt-2 text-[11px] px-2 py-0.5 rounded border font-medium",
            statusBadgeClass
          )}
        >
          {statusText}
        </span>
      )}
    </div>
  );
}