import React from 'react';

interface GaugeCardProps {
  title: string;
  subtitle: string;
  value: string | number;
  subValue: string;
  percentage: number;
  maxPercentage?: number;
  color: string;
  gradientColors: {
    start: string;
    middle?: string;
    end: string;
  };
}

const GaugeCard: React.FC<GaugeCardProps> = ({
  title,
  subtitle,
  value,
  subValue,
  percentage,
  maxPercentage = 100,
  color,
  gradientColors,
}) => {
  // 게이지는 -135도에서 시작해서 135도까지 (총 270도)
  const startAngle = -135;
  const endAngle = 135;
  const totalAngle = endAngle - startAngle;
  
  // 현재 값에 따른 각도 계산
  const currentAngle = startAngle + (percentage / maxPercentage) * totalAngle;
  
  // SVG 경로 생성 함수
  const polarToCartesian = (centerX: number, centerY: number, radius: number, angleInDegrees: number) => {
    const angleInRadians = (angleInDegrees * Math.PI) / 180.0;
    return {
      x: centerX + radius * Math.cos(angleInRadians),
      y: centerY + radius * Math.sin(angleInRadians),
    };
  };

  const describeArc = (x: number, y: number, radius: number, startAngle: number, endAngle: number) => {
    const start = polarToCartesian(x, y, radius, endAngle);
    const end = polarToCartesian(x, y, radius, startAngle);
    const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
    return [
      'M', start.x, start.y,
      'A', radius, radius, 0, largeArcFlag, 0, end.x, end.y
    ].join(' ');
  };

  const centerX = 100;
  const centerY = 100;
  const radius = 75;
  const trackRadius = 75;

  // 바늘 끝점 계산
  const needleLength = 60;
  const needleAngleRad = (currentAngle * Math.PI) / 180;
  const needleEndX = centerX + needleLength * Math.cos(needleAngleRad);
  const needleEndY = centerY + needleLength * Math.sin(needleAngleRad);

  const gradientId = `gradient-${title.replace(/\s+/g, '-')}`;
  const glowId = `glow-${title.replace(/\s+/g, '-')}`;

  return (
    <div 
      className="relative rounded-2xl p-6 border shadow-2xl backdrop-blur-sm transition-all duration-300 hover:shadow-3xl hover:-translate-y-1"
      style={{
        background: 'linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%)',
        borderColor: 'rgba(71, 85, 105, 0.5)',
        minWidth: '240px',
      }}
    >
      {/* SVG 게이지 */}
      <div className="flex justify-center mb-2 relative">
        <svg width="180" height="180" viewBox="0 0 200 200" className="overflow-visible">
          <defs>
            {/* 게이지 그라데이션 */}
            <linearGradient id={gradientId} x1="0%" y1="0%" x2="100%" y2="0%">
              <stop offset="0%" style={{ stopColor: gradientColors.start, stopOpacity: 1 }} />
              {gradientColors.middle && (
                <stop offset="50%" style={{ stopColor: gradientColors.middle, stopOpacity: 1 }} />
              )}
              <stop offset="100%" style={{ stopColor: gradientColors.end, stopOpacity: 1 }} />
            </linearGradient>
            
            {/* 글로우 효과 */}
            <filter id={glowId}>
              <feGaussianBlur stdDeviation="4" result="coloredBlur"/>
              <feMerge>
                <feMergeNode in="coloredBlur"/>
                <feMergeNode in="SourceGraphic"/>
              </feMerge>
            </filter>
            
            {/* 외부 글로우 */}
            <filter id={`${glowId}-outer`}>
              <feGaussianBlur stdDeviation="8" result="coloredBlur"/>
              <feFlood floodColor={color} floodOpacity="0.6"/>
              <feComposite in2="coloredBlur" operator="in"/>
              <feMerge>
                <feMergeNode/>
                <feMergeNode in="SourceGraphic"/>
              </feMerge>
            </filter>
          </defs>

          {/* 외부 원 테두리 */}
          <circle
            cx={centerX}
            cy={centerY}
            r={85}
            fill="none"
            stroke="rgba(71, 85, 105, 0.3)"
            strokeWidth="1"
          />

          {/* 내부 배경 원 */}
          <circle
            cx={centerX}
            cy={centerY}
            r={78}
            fill="url(#radial-bg)"
            className="opacity-40"
          />
          
          <defs>
            <radialGradient id="radial-bg">
              <stop offset="0%" stopColor="rgba(30, 41, 59, 0.8)" />
              <stop offset="100%" stopColor="rgba(15, 23, 42, 0.9)" />
            </radialGradient>
          </defs>

          {/* 게이지 트랙 (배경) */}
          <path
            d={describeArc(centerX, centerY, trackRadius, startAngle, endAngle)}
            fill="none"
            stroke="rgba(71, 85, 105, 0.2)"
            strokeWidth="12"
            strokeLinecap="round"
          />

          {/* 게이지 진행 바 */}
          <path
            d={describeArc(centerX, centerY, radius, startAngle, currentAngle)}
            fill="none"
            stroke={`url(#${gradientId})`}
            strokeWidth="12"
            strokeLinecap="round"
            filter={`url(#${glowId}-outer)`}
            className="transition-all duration-1000 ease-out"
          />

          {/* 바늘 그림자 */}
          <line
            x1={centerX}
            y1={centerY}
            x2={needleEndX + 1}
            y2={needleEndY + 1}
            stroke="rgba(0, 0, 0, 0.4)"
            strokeWidth="3"
            strokeLinecap="round"
            className="transition-all duration-1000 ease-out"
          />

          {/* 바늘 */}
          <line
            x1={centerX}
            y1={centerY}
            x2={needleEndX}
            y2={needleEndY}
            stroke="rgba(255, 255, 255, 0.95)"
            strokeWidth="2.5"
            strokeLinecap="round"
            filter={`url(#${glowId})`}
            className="transition-all duration-1000 ease-out"
          />

          {/* 바늘 중심점 외곽 그림자 */}
          <circle
            cx={centerX}
            cy={centerY}
            r="7"
            fill="rgba(0, 0, 0, 0.3)"
          />

          {/* 바늘 중심점 */}
          <circle
            cx={centerX}
            cy={centerY}
            r="6"
            fill={color}
            stroke="rgba(255, 255, 255, 0.9)"
            strokeWidth="1.5"
            filter={`url(#${glowId})`}
          />

          {/* 바늘 중심점 하이라이트 */}
          <circle
            cx={centerX - 1.5}
            cy={centerY - 1.5}
            r="2.5"
            fill="rgba(255, 255, 255, 0.6)"
          />

          {/* 내부 어두운 원 */}
          <circle
            cx={centerX}
            cy={centerY}
            r={62}
            fill="rgba(15, 23, 42, 0.95)"
            stroke="rgba(71, 85, 105, 0.2)"
            strokeWidth="0.5"
          />
        </svg>
      </div>

      {/* 중앙 값 표시 - SVG 위에 오버레이 */}
      <div 
        className="absolute left-1/2 transform -translate-x-1/2 pointer-events-none z-10"
        style={{ top: '80px' }}
      >
        <div 
          className="text-center"
        >
          <div 
            className="font-bold text-white tracking-tight leading-none"
            style={{ 
              fontSize: '2rem',
              textShadow: `0 0 20px ${color}, 0 0 40px ${color}40`,
              fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
            }}
          >
            {value}
          </div>
          <div 
            className="font-semibold mt-1.5" 
            style={{ 
              fontSize: '0.8rem',
              color: color,
              textShadow: `0 0 10px ${color}`,
            }}
          >
            {percentage.toFixed(percentage < 10 ? 2 : 1)}%
          </div>
        </div>
      </div>

      {/* 하단 라벨 */}
      <div className="text-center mt-2">
        <div 
          className="font-semibold text-white mb-1 leading-tight"
          style={{ fontSize: '0.95rem' }}
        >
          {title}
        </div>
        <div 
          className="text-slate-400"
          style={{ fontSize: '0.7rem' }}
        >
          {subtitle}
        </div>
      </div>
    </div>
  );
};

export default GaugeCard;
