import React from 'react';
import * as Icons from 'lucide-react';

const polarToCartesian = (centerX, centerY, radius, angleInDegrees) => {
  const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
  return {
    x: centerX + radius * Math.cos(angleInRadians),
    y: centerY + radius * Math.sin(angleInRadians),
  };
};

const describeArc = (x, y, radius, startAngle, endAngle) => {
  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(' ');
};

export default function ServiceDial({ activeIndex, services }) {
  const center = 160;
  const radius = 110;
  const strokeWidth = 14;
  const gap = 4; // degrees

  const activeService = services[activeIndex] || services[0];
  const IconComponent = Icons[activeService.icon] || Icons.Sparkles;

  return (
    <div style={{
      position: 'relative',
      width: '100%',
      maxWidth: '380px',
      aspectRatio: '1',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      background: 'radial-gradient(circle, rgba(255, 170, 0, 0.05) 0%, rgba(2, 7, 16, 0.4) 70%)',
      borderRadius: '50%',
      border: '1px solid rgba(255, 255, 255, 0.03)',
      boxShadow: 'inset 0 0 40px rgba(0, 240, 255, 0.03), 0 20px 50px rgba(0, 0, 0, 0.5)',
      backdropFilter: 'blur(10px)',
      padding: '20px'
    }}>
      {/* Outer Rotating Ring */}
      <svg 
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: '100%',
          pointerEvents: 'none',
          animation: 'spin-slow 25s linear infinite',
          transformOrigin: 'center'
        }}
        viewBox="0 0 320 320"
      >
        <circle 
          cx={center} 
          cy={center} 
          r={radius + 24} 
          fill="none" 
          stroke="rgba(0, 240, 255, 0.15)" 
          strokeWidth="1.5" 
          strokeDasharray="4 8"
        />
        <circle 
          cx={center} 
          cy={center} 
          r={radius + 30} 
          fill="none" 
          stroke="rgba(255, 170, 0, 0.08)" 
          strokeWidth="1" 
          strokeDasharray="40 16"
        />
      </svg>

      {/* Main Dial Canvas */}
      <svg 
        viewBox="0 0 320 320"
        style={{
          width: '100%',
          height: '100%',
          transform: 'rotate(0deg)'
        }}
      >
        <defs>
          {/* Active Segment Glow Filter */}
          <filter id="glow-gold" x="-20%" y="-20%" width="140%" height="140%">
            <feGaussianBlur stdDeviation="6" result="blur" />
            <feMerge>
              <feMergeNode in="blur" />
              <feMergeNode in="SourceGraphic" />
            </feMerge>
          </filter>

          {/* Core Gold Radial Gradient */}
          <radialGradient id="radial-glow" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="rgba(255, 170, 0, 0.2)" />
            <stop offset="100%" stopColor="rgba(2, 7, 16, 0)" />
          </radialGradient>
        </defs>

        {/* Inner Radial Glow */}
        <circle cx={center} cy={center} r={radius - 10} fill="url(#radial-glow)" />

        {/* 8 Segments */}
        {services.map((service, idx) => {
          const startAngle = idx * 45 + gap;
          const endAngle = (idx + 1) * 45 - gap;
          const pathD = describeArc(center, center, radius, startAngle, endAngle);

          const isActive = idx === activeIndex;
          const isCompleted = idx < activeIndex;

          let strokeColor = 'rgba(255, 255, 255, 0.05)';
          let filterVal = 'none';
          let opacityVal = 0.4;

          if (isActive) {
            strokeColor = '#ffaa00'; // Vibrant Gold
            filterVal = 'url(#glow-gold)';
            opacityVal = 1;
          } else if (isCompleted) {
            strokeColor = 'rgba(255, 170, 0, 0.45)'; // Subtly Filled Gold/Amber
            opacityVal = 0.8;
          } else {
            strokeColor = 'rgba(0, 240, 255, 0.08)'; // Inactive dark cyan/blue segment
            opacityVal = 0.35;
          }

          return (
            <path
              key={service.id}
              d={pathD}
              fill="none"
              stroke={strokeColor}
              strokeWidth={strokeWidth}
              strokeLinecap="round"
              filter={filterVal}
              style={{
                opacity: opacityVal,
                transition: 'stroke 0.6s ease, filter 0.6s ease, opacity 0.6s ease',
              }}
            />
          );
        })}

        {/* Inner Ring Border */}
        <circle 
          cx={center} 
          cy={center} 
          r={radius - 15} 
          fill="none" 
          stroke="rgba(255, 255, 255, 0.04)" 
          strokeWidth="1"
        />
      </svg>

      {/* Center content overlay */}
      <div style={{
        position: 'absolute',
        width: `${(radius - 20) * 2}px`,
        height: `${(radius - 20) * 2}px`,
        borderRadius: '50%',
        background: 'radial-gradient(circle, #081125 0%, #030712 100%)',
        border: '1px solid rgba(255, 170, 0, 0.15)',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        textAlign: 'center',
        padding: '20px',
        boxShadow: '0 10px 30px rgba(0, 0, 0, 0.8)',
        zIndex: 5
      }}>
        {/* Glow indicator at the center top */}
        <div style={{
          position: 'absolute',
          top: '-1px',
          width: '40px',
          height: '2px',
          background: '#ffaa00',
          boxShadow: '0 0 10px #ffaa00'
        }} />

        <div style={{
          width: '46px',
          height: '46px',
          borderRadius: '12px',
          background: 'linear-gradient(135deg, rgba(255, 170, 0, 0.1) 0%, rgba(255, 170, 0, 0.02) 100%)',
          border: '1px solid rgba(255, 170, 0, 0.25)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          marginBottom: '10px',
          color: '#ffaa00',
          boxShadow: '0 4px 15px rgba(255, 170, 0, 0.1)'
        }}>
          <IconComponent size={22} strokeWidth={1.8} />
        </div>

        <span style={{
          fontSize: '0.65rem',
          fontWeight: 700,
          color: '#00f0ff',
          textTransform: 'uppercase',
          letterSpacing: '0.15em',
          marginBottom: '4px'
        }}>
          Service {activeService.number}
        </span>

        <h4 style={{
          fontSize: '0.85rem',
          fontWeight: 800,
          color: '#ffffff',
          margin: 0,
          lineHeight: '1.3',
          maxWidth: '120px',
          letterSpacing: '-0.01em'
        }}>
          {activeService.title}
        </h4>
      </div>

      {/* Styled animation for keyframes */}
      <style>{`
        @keyframes spin-slow {
          from { transform: rotate(0deg); }
          to { transform: rotate(360deg); }
        }
      `}</style>
    </div>
  );
}
