import { Ruler, Triangle, Slice, Trash2 } from 'lucide-react';
import { useMeshStore, ToolMode } from '../stores/meshStore';

interface MeasureToolbarProps {
  onClearMeasurements: () => void;
  measureCount: number;
}

const tools: { mode: ToolMode; icon: typeof Ruler; label: string; key: string }[] = [
  { mode: 'measure_distance', icon: Ruler, label: 'Distance', key: 'R' },
  { mode: 'measure_angle', icon: Triangle, label: 'Angle', key: 'T' },
  { mode: 'measure_section', icon: Slice, label: 'Section', key: '' },
];

const btnStyle: React.CSSProperties = {
  display: 'flex', alignItems: 'center', gap: 3,
  padding: '3px 7px', border: '1px solid #444', borderRadius: 3,
  background: '#333', color: '#ccc', cursor: 'pointer', fontSize: 11, fontFamily: 'monospace',
};
const activeBtnStyle: React.CSSProperties = { ...btnStyle, background: '#d98a4a', borderColor: '#d98a4a', color: '#fff' };

export function MeasureToolbar({ onClearMeasurements, measureCount }: MeasureToolbarProps) {
  const { state, dispatch } = useMeshStore();

  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 3 }}>
      {tools.map(({ mode, icon: Icon, label, key }) => (
        <button
          key={mode}
          style={state.toolMode === mode ? activeBtnStyle : btnStyle}
          onClick={() => dispatch({ type: 'SET_TOOL_MODE', mode })}
          data-testid={`tool-${mode.replace('_', '-')}`}
          data-active={state.toolMode === mode ? 'true' : 'false'}
          title={`${label}${key ? ` (${key})` : ''}`}
        >
          <Icon size={13} />
        </button>
      ))}
      {measureCount > 0 && (
        <button
          style={btnStyle}
          onClick={onClearMeasurements}
          data-testid="clear-measurements"
          title="Clear measurements"
        >
          <Trash2 size={12} />
          <span>{measureCount}</span>
        </button>
      )}
    </div>
  );
}
