import { MousePointer2, Square, Paintbrush, Network, CheckSquare, XSquare, RefreshCw, Trash2 } from 'lucide-react';
import { useMeshStore, ToolMode } from '../stores/meshStore';

interface SelectionToolbarProps {
  onSelectAll: () => void;
  onDeselectAll: () => void;
  onInvertSelection: () => void;
  onDeleteSelected: () => void;
}

const tools: { mode: ToolMode; icon: typeof MousePointer2; label: string; key: string }[] = [
  { mode: 'navigate', icon: MousePointer2, label: 'Navigate', key: 'Esc' },
  { mode: 'select_rect', icon: Square, label: 'Rect Select', key: 'Q' },
  { mode: 'select_brush', icon: Paintbrush, label: 'Brush Select', key: 'W' },
  { mode: 'select_click', icon: Network, label: 'Component Select', key: 'E' },
];

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: '#4a90d9', borderColor: '#4a90d9', color: '#fff' };
const sepStyle: React.CSSProperties = { width: 1, height: 18, background: '#444', margin: '0 4px' };

export function SelectionToolbar({ onSelectAll, onDeselectAll, onInvertSelection, onDeleteSelected }: SelectionToolbarProps) {
  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}`}
          data-active={state.toolMode === mode ? 'true' : 'false'}
          title={`${label} (${key})`}
        >
          <Icon size={13} />
        </button>
      ))}

      <div style={sepStyle} />

      <button style={btnStyle} onClick={onSelectAll} data-testid="select-all" title="Select All (Ctrl+A)">
        <CheckSquare size={13} />
      </button>
      <button style={btnStyle} onClick={onDeselectAll} data-testid="deselect-all" title="Deselect All (Ctrl+D)">
        <XSquare size={13} />
      </button>
      <button style={btnStyle} onClick={onInvertSelection} data-testid="invert-selection" title="Invert Selection">
        <RefreshCw size={13} />
      </button>

      <div style={sepStyle} />

      <button
        style={{ ...btnStyle, color: state.selectedFaceCount > 0 ? '#ff6666' : '#666' }}
        onClick={onDeleteSelected}
        data-testid="delete-selected"
        disabled={state.selectedFaceCount === 0}
        title="Delete Selected"
      >
        <Trash2 size={13} />
      </button>

      {state.selectedFaceCount > 0 && (
        <span data-testid="selected-faces" style={{ color: '#4a90d9', fontSize: 11, fontFamily: 'monospace', marginLeft: 4 }}>
          {state.selectedFaceCount}F sel
        </span>
      )}

      {state.toolMode === 'select_brush' && (
        <span data-testid="brush-size" style={{ color: '#888', fontSize: 11, fontFamily: 'monospace', marginLeft: 4 }}>
          r={state.brushSize}
        </span>
      )}
    </div>
  );
}
