'use client'

import React from 'react'

export interface ComplianceScoreProps {
  score: number
  size?: 'small' | 'medium' | 'large'
  showLabel?: boolean
  className?: string
  style?: React.CSSProperties
}

export function ComplianceScore({
  score,
  size = 'medium',
  showLabel = true,
  className,
  style,
}: ComplianceScoreProps) {
  const sizes = {
    small: { width: 80, strokeWidth: 6, fontSize: 18 },
    medium: { width: 120, strokeWidth: 8, fontSize: 24 },
    large: { width: 160, strokeWidth: 10, fontSize: 32 },
  }

  const { width, strokeWidth, fontSize } = sizes[size]
  const radius = (width - strokeWidth) / 2
  const circumference = radius * 2 * Math.PI
  const offset = circumference - (score / 100) * circumference

  const getColor = (score: number): string => {
    if (score >= 80) return '#16a34a' // Green
    if (score >= 60) return '#f59e0b' // Yellow
    if (score >= 40) return '#f97316' // Orange
    return '#dc2626' // Red
  }

  const color = getColor(score)

  return (
    <div
      style={{
        display: 'inline-flex',
        flexDirection: 'column',
        alignItems: 'center',
        ...style,
      }}
      className={className}
    >
      <svg
        width={width}
        height={width}
        style={{ transform: 'rotate(-90deg)' }}
      >
        {/* Background circle */}
        <circle
          cx={width / 2}
          cy={width / 2}
          r={radius}
          fill="none"
          stroke="#e5e5e5"
          strokeWidth={strokeWidth}
        />
        {/* Progress circle */}
        <circle
          cx={width / 2}
          cy={width / 2}
          r={radius}
          fill="none"
          stroke={color}
          strokeWidth={strokeWidth}
          strokeDasharray={circumference}
          strokeDashoffset={offset}
          strokeLinecap="round"
          style={{
            transition: 'stroke-dashoffset 0.5s ease-in-out',
          }}
        />
        {/* Score text */}
        <text
          x="50%"
          y="50%"
          dominantBaseline="middle"
          textAnchor="middle"
          style={{
            transform: 'rotate(90deg)',
            transformOrigin: 'center',
            fontSize: `${fontSize}px`,
            fontWeight: 700,
            fill: color,
          }}
        >
          {score}%
        </text>
      </svg>

      {showLabel && (
        <div
          style={{
            marginTop: '8px',
            fontSize: '14px',
            color: '#666',
            textAlign: 'center',
          }}
        >
          Compliance Score
        </div>
      )}
    </div>
  )
}
