Lageplan/src/components/layout/left-toolbar.tsx

'use client'

import { Button } from '@/components/ui/button'
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip'
import {
  MousePointer2,
  Circle,
  CircleDot,
  Square,
  Minus,
  Pentagon,
  Type,
  Pencil,
  Undo2,
  Redo2,
  MoveRight,
  Ruler,
  Eraser,
} from 'lucide-react'
import type { DrawMode } from '@/app/app/page'
import { cn } from '@/lib/utils'

interface LeftToolbarProps {
  drawMode: DrawMode
  onDrawModeChange: (mode: DrawMode) => void
  selectedColor: string
  onColorChange: (color: string) => void
  selectedWidth: number
  onWidthChange: (width: number) => void
  onUndo: () => void
  onRedo: () => void
  canEdit: boolean
}

const colors = [
  { value: '#ef4444', name: 'Rot' },
  { value: '#f97316', name: 'Orange' },
  { value: '#eab308', name: 'Gelb' },
  { value: '#22c55e', name: 'Grün' },
  { value: '#3b82f6', name: 'Blau' },
  { value: '#8b5cf6', name: 'Violett' },
  { value: '#000000', name: 'Schwarz' },
  { value: '#ffffff', name: 'Weiss' },
]

const drawTools: { mode: DrawMode; icon: typeof MousePointer2; label: string }[] = [
  { mode: 'select', icon: MousePointer2, label: 'Auswählen' },
  { mode: 'point', icon: CircleDot, label: 'Punkt' },
  { mode: 'linestring', icon: Minus, label: 'Linie' },
  { mode: 'polygon', icon: Pentagon, label: 'Polygon' },
  { mode: 'rectangle', icon: Square, label: 'Rechteck' },
  { mode: 'circle', icon: Circle, label: 'Kreis' },
  { mode: 'freehand', icon: Pencil, label: 'Freihand' },
  { mode: 'arrow', icon: MoveRight, label: 'Pfeil / Route' },
  { mode: 'text', icon: Type, label: 'Text' },
  { mode: 'eraser', icon: Eraser, label: 'Radiergummi' },
  { mode: 'measure', icon: Ruler, label: 'Messen' },
]

export function LeftToolbar({
  drawMode,
  onDrawModeChange,
  selectedColor,
  onColorChange,
  selectedWidth,
  onWidthChange,
  onUndo,
  onRedo,
  canEdit,
}: LeftToolbarProps) {
  return (
    <TooltipProvider delayDuration={300}>
      <aside className="w-11 md:w-14 lg:w-20 border-r border-border bg-card flex flex-col items-center py-1 md:py-2 shrink-0 overflow-y-auto overflow-x-hidden z-10">
        {/* Draw Tools */}
        <div className="flex flex-col gap-px md:gap-0.5">
          {drawTools.map((tool) => (
            <Tooltip key={tool.mode}>
              <TooltipTrigger asChild>
                <Button
                  variant={drawMode === tool.mode ? 'default' : 'ghost'}
                  size="icon"
                  className="w-8 h-8 md:w-10 md:h-10 lg:w-12 lg:h-12"
                  onClick={() => onDrawModeChange(tool.mode)}
                  disabled={!canEdit && tool.mode !== 'select'}
                >
                  <tool.icon className="w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6" />
                </Button>
              </TooltipTrigger>
              <TooltipContent side="right">
                <p>{tool.label}</p>
              </TooltipContent>
            </Tooltip>
          ))}
        </div>

        <div className="w-6 md:w-8 lg:w-12 h-px bg-border my-1" />

        {/* Undo/Redo - 2-col grid to save vertical space */}
        <div className="grid grid-cols-2 gap-px md:gap-0.5">
          <Tooltip>
            <TooltipTrigger asChild>
              <Button
                variant="ghost"
                size="icon"
                className="w-5 h-5 md:w-6 md:h-6 lg:w-8 lg:h-8"
                onClick={onUndo}
                disabled={!canEdit}
              >
                <Undo2 className="w-3.5 h-3.5 md:w-4 md:h-4 lg:w-5 lg:h-5" />
              </Button>
            </TooltipTrigger>
            <TooltipContent side="right">
              <p>Rückgängig</p>
            </TooltipContent>
          </Tooltip>

          <Tooltip>
            <TooltipTrigger asChild>
              <Button
                variant="ghost"
                size="icon"
                className="w-5 h-5 md:w-6 md:h-6 lg:w-8 lg:h-8"
                onClick={onRedo}
                disabled={!canEdit}
              >
                <Redo2 className="w-3.5 h-3.5 md:w-4 md:h-4 lg:w-5 lg:h-5" />
              </Button>
            </TooltipTrigger>
            <TooltipContent side="right">
              <p>Wiederholen</p>
            </TooltipContent>
          </Tooltip>

        </div>

        <div className="w-6 md:w-8 lg:w-12 h-px bg-border my-1" />

        {/* Color Picker - 2-col grid */}
        <div className="grid grid-cols-2 gap-0.5 md:gap-1">
          {colors.map((color) => (
            <button
              key={color.value}
              className={cn(
                'w-4 h-4 md:w-5 md:h-5 lg:w-7 lg:h-7 rounded border-2 transition-all',
                selectedColor === color.value
                  ? 'border-primary ring-1 ring-primary ring-offset-1 scale-110'
                  : 'border-muted hover:border-muted-foreground'
              )}
              style={{ backgroundColor: color.value }}
              onClick={() => onColorChange(color.value)}
              disabled={!canEdit}
              title={color.name}
            />
          ))}
        </div>
      </aside>
    </TooltipProvider>
  )
}