/**
 * ConfidenceRing — Animated SVG donut chart for confidence scores.
 *
 * Props:
 *   percentage (number) — 0-100 confidence value
 *   severity   (string) — 'low' | 'moderate' | 'high' | 'critical' (determines colour)
 *   size       (number) — Diameter in px (default: 140)
 *   label      (string) — Text below the number (default: "Confidence")
 *   icon       (string) — Material Symbol name to show instead of percentage (e.g. "biotech")
 */
var ConfidenceRing = function (props) {
    var percentage = props.percentage || 0;
    var severity = props.severity || 'low';
    var size = props.size || 140;
    var label = props.label !== undefined ? props.label : 'Confidence';
    var icon = props.icon;

    var radius = 60;
    var circumference = 2 * Math.PI * radius;
    var offset = circumference - (percentage / 100) * circumference;

    var ringColor = SeverityConfig.get(severity).text;

    return (
        <div className="relative flex items-center justify-center" style={{ width: size, height: size }}>
            <svg className="w-full h-full" viewBox="0 0 140 140">
                <circle
                    className="text-muted/20"
                    cx="70" cy="70" r={radius}
                    fill="transparent" stroke="currentColor" strokeWidth="12"
                />
                <circle
                    className={ringColor + ' progress-ring__circle'}
                    cx="70" cy="70" r={radius}
                    fill="transparent" stroke="currentColor"
                    strokeWidth="12" strokeLinecap="round"
                    strokeDasharray={circumference}
                    strokeDashoffset={offset}
                />
            </svg>
            <div className="absolute flex flex-col items-center">
                {icon ? (
                    <span className={'material-symbols-outlined ' + ringColor} style={{ fontVariationSettings: "'FILL' 1", fontSize: size > 100 ? '32px' : '24px' }}>{icon}</span>
                ) : (
                    <span className="text-4xl font-extrabold text-forest">{percentage}%</span>
                )}
                {label && <span className="text-[10px] font-bold text-muted uppercase">{label}</span>}
            </div>
        </div>
    );
};

window.ConfidenceRing = ConfidenceRing;