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

export interface FlatKnobProps extends SkinProps {
  /** Accent color for the value arc and pointer. */
  color?: string;
  trackColor?: string;
  faceColor?: string;
  pointerColor?: string;
  textColor?: string;
  labelColor?: string;
  /** Draw the value arc from 'min' or from 'center' (pan-style). */
  arcFrom?: 'min' | 'center';
  arcThickness?: number;
}

/** Clean 2D knob — the modern DAW/plugin look. */
export const FlatKnob: React.FC<FlatKnobProps> = ({
  size = 80,
  color = '#4cc2ff',
  trackColor = 'rgba(255,255,255,0.12)',
  faceColor = 'rgba(255,255,255,0.05)',
  pointerColor,
  textColor = 'rgba(255,255,255,0.92)',
  labelColor = 'rgba(255,255,255,0.45)',
  arcFrom = 'min',
  arcThickness,
  label,
  showValue = true,
  unit,
  format,
  className,
  style,
  ...core
}) => {
  const t = arcThickness ?? Math.max(3, size * 0.055);
  return (
    <Knob size={size} className={className} style={style} {...core}>
      <Arc thickness={t} color={color} trackColor={trackColor} from={arcFrom} />
      <Face radius={size / 2 - t - 5} fill={faceColor} />
      <Pointer
        type="line"
        radius={size / 2 - t - 7}
        length={size * 0.16}
        width={Math.max(2.5, size * 0.04)}
        color={pointerColor ?? color}
      />
      {showValue && (
        <KnobValue
          color={textColor}
          unit={unit}
          format={format}
          fontSize={size * 0.17}
          fontFamily={MONO_FONT}
        />
      )}
      {label && (
        <KnobLabel color={labelColor} fontFamily={UI_FONT} dy={size * 0.42} fontSize={size * 0.1}>
          {label}
        </KnobLabel>
      )}
    </Knob>
  );
};