import * as React from 'react';
import { Knob } from '../components/Knob';
import { Arc } from '../primitives/Arc';
import { GlowFilter } from '../primitives/GlowFilter';
import { Pointer } from '../primitives/Pointer';
import { KnobLabel, KnobValue } from '../primitives/Text';
import { MONO_FONT, UI_FONT, type SkinProps } from './shared';

export interface RubberKnobProps extends SkinProps {
  /** Glow/accent color. */
  color?: string;
  trackColor?: string;
  textColor?: string;
  labelColor?: string;
  arcFrom?: 'min' | 'center';
}

/** Soft-touch rubber knob with a glowing halo — modern synth hardware. */
export const RubberKnob: React.FC<RubberKnobProps> = ({
  size = 90,
  color = '#ff9640',
  trackColor = 'rgba(255,255,255,0.08)',
  textColor = 'rgba(255,255,255,0.92)',
  labelColor = 'rgba(255,255,255,0.45)',
  arcFrom = 'min',
  label,
  showValue = false,
  unit,
  format,
  className,
  style,
  ...core
}) => {
  const id = React.useId();
  const bodyId = `${id}-body`;
  const glowId = `${id}-glow`;
  const c = size / 2;
  const bodyR = size / 2 - size * 0.17;

  return (
    <Knob size={size} className={className} style={style} {...core}>
      <defs>
        <radialGradient id={bodyId} cx="0.38" cy="0.3" r="1">
          <stop offset="0" stopColor="#3a3b41" />
          <stop offset="0.55" stopColor="#232428" />
          <stop offset="1" stopColor="#0e0f12" />
        </radialGradient>
        <GlowFilter id={glowId} blur={size * 0.02} />
      </defs>

      <Arc
        radius={size / 2 - size * 0.05}
        thickness={Math.max(3, size * 0.045)}
        color={color}
        trackColor={trackColor}
        from={arcFrom}
        arcProps={{ filter: `url(#${glowId})` }}
      />

      <circle cx={c} cy={c} r={bodyR} fill={`url(#${bodyId})`} stroke="#000" strokeWidth="1" />
      {/* rubber grip */}
      <circle
        cx={c}
        cy={c}
        r={bodyR - size * 0.03}
        fill="none"
        stroke="rgba(0,0,0,0.5)"
        strokeWidth={size * 0.035}
        strokeDasharray={`${size * 0.02} ${size * 0.03}`}
      />
      {/* top sheen */}
      <ellipse
        cx={c}
        cy={c - bodyR * 0.45}
        rx={bodyR * 0.6}
        ry={bodyR * 0.28}
        fill="rgba(255,255,255,0.07)"
      />

      <Pointer
        radius={bodyR - size * 0.045}
        length={bodyR * 0.5}
        width={Math.max(2.5, size * 0.04)}
        color={color}
        shapeProps={{ filter: `url(#${glowId})` }}
      />
      {showValue && (
        <KnobValue
          color={textColor}
          unit={unit}
          format={format}
          fontSize={size * 0.15}
          fontFamily={MONO_FONT}
          dy={size * 0.02}
        />
      )}
      {label && (
        <KnobLabel color={labelColor} fontFamily={UI_FONT} dy={size * 0.44} fontSize={size * 0.1}>
          {label}
        </KnobLabel>
      )}
    </Knob>
  );
};