import React from 'react'
import { Button } from '../Button'

interface DataQualityPanelProps {
  completenessRate: number
  completeCount: number
  incompleteCount: number
  pendingCount: number
  isLoading?: boolean
  onViewIncomplete?: () => void
}

export const DataQualityPanel: React.FC<DataQualityPanelProps> = ({
  completenessRate,
  completeCount,
  incompleteCount,
  pendingCount,
  isLoading = false,
  onViewIncomplete,
}) => {
  const radius = 54
  const circumference = 2 * Math.PI * radius
  const strokeDashoffset = circumference - (completenessRate / 100) * circumference

  return (
    <div className="bg-warm-card border border-warm-border rounded-lg p-6 shadow-sm">
      <h2 className="text-sm font-semibold text-warm-text-muted uppercase tracking-wide mb-4">
        Data Quality
      </h2>

      <div className="flex items-center gap-6">
        <div className="relative">
          <svg width="120" height="120" className="transform -rotate-90">
            <circle
              cx="60"
              cy="60"
              r={radius}
              stroke="#E5E7EB"
              strokeWidth="12"
              fill="none"
            />
            <circle
              cx="60"
              cy="60"
              r={radius}
              stroke="#22C55E"
              strokeWidth="12"
              fill="none"
              strokeLinecap="round"
              strokeDasharray={circumference}
              strokeDashoffset={isLoading ? circumference : strokeDashoffset}
              className="transition-all duration-500"
            />
          </svg>
          <div className="absolute inset-0 flex items-center justify-center">
            <span className="text-3xl font-bold text-warm-text-primary">
              {isLoading ? '...' : `${Math.round(completenessRate)}%`}
            </span>
          </div>
        </div>

        <div className="flex-1">
          <p className="text-sm text-warm-text-secondary mb-4">
            Annotation Complete
          </p>

          <div className="space-y-2">
            <div className="flex items-center justify-between text-sm">
              <span className="flex items-center gap-2">
                <span className="w-2 h-2 bg-green-500 rounded-full" />
                Complete
              </span>
              <span className="font-medium">{isLoading ? '...' : completeCount}</span>
            </div>
            <div className="flex items-center justify-between text-sm">
              <span className="flex items-center gap-2">
                <span className="w-2 h-2 bg-orange-500 rounded-full" />
                Incomplete
              </span>
              <span className="font-medium">{isLoading ? '...' : incompleteCount}</span>
            </div>
            <div className="flex items-center justify-between text-sm">
              <span className="flex items-center gap-2">
                <span className="w-2 h-2 bg-blue-500 rounded-full" />
                Pending
              </span>
              <span className="font-medium">{isLoading ? '...' : pendingCount}</span>
            </div>
          </div>
        </div>
      </div>

      {onViewIncomplete && incompleteCount > 0 && (
        <div className="mt-4 pt-4 border-t border-warm-border">
          <button
            onClick={onViewIncomplete}
            className="text-sm text-blue-600 hover:text-blue-800 font-medium"
          >
            View Incomplete Docs
          </button>
        </div>
      )}
    </div>
  )
}