breakpilot-pwa/studio-v2/components/worksheet-editor/CanvasControls.tsx

'use client'

import { useTheme } from '@/lib/ThemeContext'
import { useLanguage } from '@/lib/LanguageContext'
import { useWorksheet } from '@/lib/worksheet-editor/WorksheetContext'

interface CanvasControlsProps {
  className?: string
}

export function CanvasControls({ className = '' }: CanvasControlsProps) {
  const { isDark } = useTheme()
  const { t } = useLanguage()
  const {
    zoom,
    setZoom,
    zoomIn,
    zoomOut,
    zoomToFit,
    showGrid,
    setShowGrid,
    snapToGrid,
    setSnapToGrid,
    gridSize,
    setGridSize
  } = useWorksheet()

  // Glassmorphism styles
  const controlsStyle = isDark
    ? 'backdrop-blur-xl bg-white/10 border border-white/20'
    : 'backdrop-blur-xl bg-white/70 border border-black/10 shadow-xl'

  const buttonStyle = (active: boolean) => isDark
    ? active
      ? 'bg-purple-500/30 text-purple-300'
      : 'text-white/70 hover:bg-white/10 hover:text-white'
    : active
      ? 'bg-purple-100 text-purple-700'
      : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900'

  const labelStyle = isDark ? 'text-white/70' : 'text-slate-600'

  return (
    <div className={`flex items-center gap-4 p-3 rounded-2xl ${controlsStyle} ${className}`}>
      {/* Zoom Controls */}
      <div className="flex items-center gap-2">
        <button
          onClick={zoomOut}
          className={`w-8 h-8 flex items-center justify-center rounded-lg transition-colors ${buttonStyle(false)}`}
          title="Verkleinern"
        >
          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 12H4" />
          </svg>
        </button>

        <div className={`w-16 text-center text-sm font-medium ${labelStyle}`}>
          {Math.round(zoom * 100)}%
        </div>

        <button
          onClick={zoomIn}
          className={`w-8 h-8 flex items-center justify-center rounded-lg transition-colors ${buttonStyle(false)}`}
          title="Vergrößern"
        >
          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
          </svg>
        </button>

        <button
          onClick={zoomToFit}
          className={`px-3 py-1.5 text-sm rounded-lg transition-colors ${buttonStyle(false)}`}
          title="An Fenster anpassen"
        >
          Fit
        </button>

        {/* Zoom Slider */}
        <input
          type="range"
          min="25"
          max="400"
          value={zoom * 100}
          onChange={(e) => setZoom(parseInt(e.target.value) / 100)}
          className="w-24"
        />
      </div>

      {/* Divider */}
      <div className={`h-8 border-l ${isDark ? 'border-white/20' : 'border-slate-200'}`} />

      {/* Grid Controls */}
      <div className="flex items-center gap-2">
        <button
          onClick={() => setShowGrid(!showGrid)}
          className={`px-3 py-1.5 text-sm rounded-lg transition-colors flex items-center gap-2 ${buttonStyle(showGrid)}`}
          title="Raster anzeigen"
        >
          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 5a1 1 0 011-1h14a1 1 0 011 1v14a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 9h16M4 13h16M4 17h16M9 4v16M13 4v16M17 4v16" />
          </svg>
          Raster
        </button>

        <button
          onClick={() => setSnapToGrid(!snapToGrid)}
          className={`px-3 py-1.5 text-sm rounded-lg transition-colors flex items-center gap-2 ${buttonStyle(snapToGrid)}`}
          title="Am Raster ausrichten"
        >
          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
          </svg>
          Snap
        </button>

        {/* Grid Size */}
        <select
          value={gridSize}
          onChange={(e) => setGridSize(parseInt(e.target.value))}
          className={`px-2 py-1.5 text-sm rounded-lg border ${
            isDark
              ? 'bg-white/10 border-white/20 text-white'
              : 'bg-white/50 border-black/10 text-slate-900'
          }`}
          title="Rastergröße"
        >
          <option value="5">5mm</option>
          <option value="10">10mm</option>
          <option value="15">15mm</option>
          <option value="20">20mm</option>
        </select>
      </div>
    </div>
  )
}