'use client'
import React from 'react'
import { scoreToCssVar, red as redHex, green as greenHex } from '../colors'
import { ArrowUpIcon } from 'lucide-react'

export type ProgressCircleProps = {
  value: number
  size?: number
  thickness?: number
  className?: string
  showLabel?: boolean
  label?: string
  // Optional highlight segment (e.g., to preview gain from an action)
  highlightFrom?: number
  highlightTo?: number
  highlightPulse?: boolean
  // Optional center indicator arrow: 'up' (green) or 'down' (red)
  centerIndicator?: 'up' | 'down' | null
  indicatorPulse?: boolean
}

export function ProgressCircle(props: ProgressCircleProps) {
  const { value, size = 72, thickness = 6, className, showLabel = true, label, highlightFrom, highlightTo, highlightPulse, centerIndicator, indicatorPulse } = props

  const rawId = React.useId()
  const gradientId = React.useMemo(() => `kyd-pc-${String(rawId).replace(/:/g, '')}` , [rawId])

  const clamped = Math.max(0, Math.min(100, Number.isFinite(value) ? value : 0))
  const radius = (size - thickness) / 2
  const circumference = 2 * Math.PI * radius
  const dashOffset = circumference * (1 - clamped / 100)

  const hasHighlight = Number.isFinite(highlightFrom as number) && Number.isFinite(highlightTo as number) && (typeof highlightFrom === 'number') && (typeof highlightTo === 'number') && highlightTo! > (highlightFrom as number)
  const fromClamped = hasHighlight ? Math.max(0, Math.min(100, highlightFrom as number)) : 0
  const toClamped = hasHighlight ? Math.max(0, Math.min(100, highlightTo as number)) : 0
  const highlightLength = hasHighlight ? circumference * ((toClamped - fromClamped) / 100) : 0
  const highlightOffset = hasHighlight ? circumference * (1 - toClamped / 100) : 0

  const strokeColor = React.useMemo(() => scoreToCssVar(clamped), [clamped])
  const indicatorColor = React.useMemo(() => {
    if (!centerIndicator) return undefined
    return centerIndicator === 'up' ? `var(--status-positive, ${greenHex})` : `var(--status-negative, ${redHex})`
  }, [centerIndicator])

  return (
    <div className={`relative inline-flex items-center justify-center ${className || ''}`} style={{ width: size, height: size }}>
      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} className="block">
        <defs>
          <linearGradient id={gradientId} x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stopColor="var(--icon-accent)" />
            <stop offset="100%" stopColor="var(--icon-accent-hover)" />
          </linearGradient>
        </defs>
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          fill="none"
          stroke="var(--icon-button-secondary)"
          strokeOpacity={0.3}
          strokeWidth={thickness}
        />
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          fill="none"
          stroke={strokeColor}
          strokeWidth={thickness}
          strokeLinecap="round"
          strokeDasharray={circumference}
          strokeDashoffset={dashOffset}
          style={{ transition: 'stroke-dashoffset 800ms ease, stroke 400ms ease, stroke-opacity 400ms ease' }}
          transform={`rotate(-90 ${size / 2} ${size / 2})`}
        />
        {hasHighlight ? (
          <circle
            cx={size / 2}
            cy={size / 2}
            r={radius}
            fill="none"
            stroke="var(--icon-accent)"
            strokeOpacity={0.6}
            strokeWidth={thickness}
            strokeLinecap="round"
            strokeDasharray={`${highlightLength} ${circumference}`}
            strokeDashoffset={highlightOffset}
            transform={`rotate(-90 ${size / 2} ${size / 2})`}
            className={highlightPulse ? 'animate-pulse' : ''}
          />
        ) : null}
        {/* subtle pulsing halo */}
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius + thickness / 2}
          fill="none"
          stroke={strokeColor}
          strokeOpacity={0.15}
          strokeWidth={2}
          // className="animate-pulse"
          // style={{ transition: 'stroke 200ms ease, stroke-opacity 200ms ease' }}
        />
      </svg>
      {centerIndicator ? (
        <div className={`absolute inset-0 flex items-center justify-center`} aria-hidden>
          <ArrowUpIcon
            className={`w-4 h-4`}
            style={{
              color: centerIndicator === 'up' ? greenHex : redHex,
              transform: centerIndicator === 'up' ? undefined : 'rotate(180deg)',
            }}
          />
        </div>
      ) : null}
    </div>
  )
}

export default ProgressCircle