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 { useKnobTheme } from '../core/theme';
import 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.forwardRef<HTMLDivElement, RubberKnobProps>(function RubberKnob({
  size = 90,
  color: colorProp,
  trackColor,
  textColor,
  labelColor,
  arcFrom = 'min',
  label,
  showValue = false,
  unit,
  format,
  focusRing,
  className,
  style,
  ...core
}, ref) {
  const theme = useKnobTheme();
  const color = colorProp ?? theme.accent ?? '#ff9640';
  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 ref={ref} size={size} className={className} style={style} focusRing={focusRing} {...core} getAriaValueText={core.getAriaValueText ?? (format ? (v: number) => format(v) : unit ? (v: number) => `${v}${unit}` : undefined)}>
      <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 ?? theme.track}
        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 ?? theme.text}
          unit={unit}
          format={format}
          fontSize={size * 0.15}
          fontFamily={theme.fontMono}
          dy={size * 0.02}
        />
      )}
      {label && (
        <KnobLabel
          color={labelColor ?? theme.label}
          fontFamily={theme.fontUI}
          dy={size * 0.44}
          fontSize={size * 0.1}
        >
          {label}
        </KnobLabel>
      )}
    </Knob>
  );
});