/**
 * CanvasToolbar — tool switcher, undo/redo, grid toggle, zoom controls.
 *
 * Rendered at the top of the DesignCanvas view.
 */

import type { CanvasTool } from './KonvaStage';

// -- Tool definitions --------------------------------------------------------

const TOOLS: { tool: CanvasTool; label: string; icon: string }[] = [
  { tool: 'pointer', label: 'Select', icon: '↖' },
  { tool: 'rect', label: 'Rectangle', icon: '▭' },
  { tool: 'circle', label: 'Circle', icon: '○' },
  { tool: 'ellipse', label: 'Ellipse', icon: '⬯' },
  { tool: 'line', label: 'Line', icon: '╱' },
  { tool: 'text', label: 'Text', icon: 'T' },
];

// -- Props --------------------------------------------------------------------

export interface CanvasToolbarProps {
  activeTool: CanvasTool;
  onToolChange: (tool: CanvasTool) => void;
  canUndo: boolean;
  canRedo: boolean;
  onUndo: () => void;
  onRedo: () => void;
  showGrid: boolean;
  onToggleGrid: () => void;
  zoomLevel: number;
  onZoomIn: () => void;
  onZoomOut: () => void;
  onZoomFit: () => void;
}

// -- Component ----------------------------------------------------------------

export default function CanvasToolbar({
  activeTool,
  onToolChange,
  canUndo,
  canRedo,
  onUndo,
  onRedo,
  showGrid,
  onToggleGrid,
  zoomLevel,
  onZoomIn,
  onZoomOut,
  onZoomFit,
}: CanvasToolbarProps) {
  return (
    <div className="canvas-toolbar" data-testid="canvas-toolbar">
      {/* Tool buttons */}
      <div className="canvas-toolbar-group" data-testid="tool-group">
        {TOOLS.map(({ tool, label, icon }) => (
          <button
            key={tool}
            type="button"
            className={`canvas-tool-btn${activeTool === tool ? ' canvas-tool-btn--active' : ''}`}
            onClick={() => onToolChange(tool)}
            title={label}
            aria-pressed={activeTool === tool}
            data-testid={`tool-btn-${tool}`}
          >
            <span className="canvas-tool-icon">{icon}</span>
            <span className="canvas-tool-label">{label}</span>
          </button>
        ))}
      </div>

      {/* Undo / Redo */}
      <div className="canvas-toolbar-group" data-testid="undo-redo-group">
        <button
          type="button"
          className="canvas-tool-btn"
          onClick={onUndo}
          disabled={!canUndo}
          title="Undo (Ctrl+Z)"
          data-testid="undo-btn"
        >
          ↩ Undo
        </button>
        <button
          type="button"
          className="canvas-tool-btn"
          onClick={onRedo}
          disabled={!canRedo}
          title="Redo (Ctrl+Shift+Z)"
          data-testid="redo-btn"
        >
          ↪ Redo
        </button>
      </div>

      {/* Grid toggle */}
      <div className="canvas-toolbar-group">
        <button
          type="button"
          className={`canvas-tool-btn${showGrid ? ' canvas-tool-btn--active' : ''}`}
          onClick={onToggleGrid}
          title={showGrid ? 'Hide grid' : 'Show grid'}
          aria-pressed={showGrid}
          data-testid="grid-toggle-btn"
        >
          # Grid
        </button>
      </div>

      {/* Zoom controls */}
      <div className="canvas-toolbar-group" data-testid="zoom-group">
        <button
          type="button"
          className="canvas-tool-btn"
          onClick={onZoomOut}
          title="Zoom out"
          data-testid="zoom-out-btn"
        >
          −
        </button>
        <span className="canvas-toolbar-zoom-label" data-testid="zoom-level">
          {Math.round(zoomLevel * 100)}%
        </span>
        <button
          type="button"
          className="canvas-tool-btn"
          onClick={onZoomIn}
          title="Zoom in"
          data-testid="zoom-in-btn"
        >
          +
        </button>
        <button
          type="button"
          className="canvas-tool-btn"
          onClick={onZoomFit}
          title="Fit to artboard"
          data-testid="zoom-fit-btn"
        >
          ⊞ Fit
        </button>
      </div>
    </div>
  );
}
