'use client'

import type { EditorMode, ReconstructionStatus } from './StepReconstructionTypes'

interface ReconstructionToolbarProps {
  editorMode: EditorMode
  setEditorMode: (mode: EditorMode) => void
  isParentWithBoxes: boolean
  cellCount: number
  changedCount: number
  emptyCellCount: number
  showEmptyHighlight: boolean
  setShowEmptyHighlight: (v: boolean) => void
  showStructure: boolean
  setShowStructure: (v: boolean) => void
  hasStructureElements: boolean
  zoom: number
  setZoom: (fn: (z: number) => number) => void
  undoCount: number
  redoCount: number
  onUndo: () => void
  onRedo: () => void
  status: ReconstructionStatus
  onSave: () => void
  // Overlay-specific
  fontScale: number
  setFontScale: (v: number) => void
  globalBold: boolean
  setGlobalBold: (fn: (b: boolean) => boolean) => void
  imageRotation: 0 | 180
  setImageRotation: (fn: (r: 0 | 180) => 0 | 180) => void
}

export function ReconstructionToolbar({
  editorMode,
  setEditorMode,
  isParentWithBoxes,
  cellCount,
  changedCount,
  emptyCellCount,
  showEmptyHighlight,
  setShowEmptyHighlight,
  showStructure,
  setShowStructure,
  hasStructureElements,
  zoom,
  setZoom,
  undoCount,
  redoCount,
  onUndo,
  onRedo,
  status,
  onSave,
  fontScale,
  setFontScale,
  globalBold,
  setGlobalBold,
  imageRotation,
  setImageRotation,
}: ReconstructionToolbarProps) {
  return (
    <div className="flex items-center justify-between bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 px-3 py-2">
      <div className="flex items-center gap-2">
        <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">
          Schritt 7: Rekonstruktion
        </h3>
        {/* Mode toggle */}
        <div className="flex items-center ml-2 border border-gray-300 dark:border-gray-600 rounded overflow-hidden text-xs">
          <button
            onClick={() => setEditorMode('simple')}
            className={`px-2 py-0.5 transition-colors ${
              editorMode === 'simple'
                ? 'bg-teal-600 text-white'
                : 'hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400'
            }`}
          >
            Einfach
          </button>
          {isParentWithBoxes && (
            <button
              onClick={() => setEditorMode('overlay')}
              className={`px-2 py-0.5 transition-colors ${
                editorMode === 'overlay'
                  ? 'bg-teal-600 text-white'
                  : 'hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400'
              }`}
            >
              Overlay
            </button>
          )}
          <button
            onClick={() => setEditorMode('editor')}
            className={`px-2 py-0.5 transition-colors ${
              editorMode === 'editor'
                ? 'bg-teal-600 text-white'
                : 'hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400'
            }`}
          >
            Editor
          </button>
        </div>
        <span className="text-xs text-gray-400">
          {cellCount} Zellen &middot; {changedCount} geaendert
          {emptyCellCount > 0 && showEmptyHighlight && (
            <span className="text-red-400 ml-1">&middot; {emptyCellCount} leer</span>
          )}
        </span>
      </div>
      <div className="flex items-center gap-2">
        {/* Undo/Redo */}
        <button
          onClick={onUndo}
          disabled={undoCount === 0}
          className="px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-30"
          title="Rueckgaengig (Ctrl+Z)"
        >
          &#x21A9;
        </button>
        <button
          onClick={onRedo}
          disabled={redoCount === 0}
          className="px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-30"
          title="Wiederholen (Ctrl+Shift+Z)"
        >
          &#x21AA;
        </button>

        <div className="w-px h-5 bg-gray-300 dark:bg-gray-600 mx-1" />

        {/* Overlay-specific toolbar */}
        {editorMode === 'overlay' && (
          <>
            <label className="flex items-center gap-1 text-xs text-gray-600 dark:text-gray-400">
              Schrift
              <input
                type="range" min={30} max={120} value={Math.round(fontScale * 100)}
                onChange={e => setFontScale(Number(e.target.value) / 100)}
                className="w-20 h-1 accent-teal-600"
              />
              <span className="w-8 text-right font-mono">{Math.round(fontScale * 100)}%</span>
            </label>
            <button
              onClick={() => setGlobalBold(b => !b)}
              className={`px-2 py-1 text-xs rounded border transition-colors font-bold ${
                globalBold
                  ? 'bg-teal-600 text-white border-teal-600'
                  : 'bg-white dark:bg-gray-700 text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600'
              }`}
            >
              B
            </button>
            <button
              onClick={() => setImageRotation(r => r === 0 ? 180 : 0)}
              className={`px-2 py-1 text-xs rounded border transition-colors ${
                imageRotation === 180
                  ? 'bg-teal-600 text-white border-teal-600'
                  : 'bg-white dark:bg-gray-700 text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600'
              }`}
              title="Bild 180 Grad drehen"
            >
              180&deg;
            </button>
            {hasStructureElements && (
              <button
                onClick={() => setShowStructure(!showStructure)}
                className={`px-2 py-1 text-xs border rounded transition-colors ${
                  showStructure
                    ? 'border-violet-300 bg-violet-50 text-violet-600 dark:border-violet-700 dark:bg-violet-900/30 dark:text-violet-400'
                    : 'border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
                }`}
                title="Strukturelemente anzeigen"
              >
                Struktur
              </button>
            )}
            <div className="w-px h-5 bg-gray-300 dark:bg-gray-600 mx-1" />
          </>
        )}

        {/* Non-overlay controls */}
        {editorMode !== 'overlay' && (
          <>
            {/* Empty field toggle */}
            <button
              onClick={() => setShowEmptyHighlight(!showEmptyHighlight)}
              className={`px-2 py-1 text-xs border rounded transition-colors ${
                showEmptyHighlight
                  ? 'border-red-300 bg-red-50 text-red-600 dark:border-red-700 dark:bg-red-900/30 dark:text-red-400'
                  : 'border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
              }`}
              title="Leere Pflichtfelder markieren"
            >
              Leer
            </button>

            {/* Structure toggle */}
            {hasStructureElements && (
              <button
                onClick={() => setShowStructure(!showStructure)}
                className={`px-2 py-1 text-xs border rounded transition-colors ${
                  showStructure
                    ? 'border-violet-300 bg-violet-50 text-violet-600 dark:border-violet-700 dark:bg-violet-900/30 dark:text-violet-400'
                    : 'border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
                }`}
                title="Strukturelemente anzeigen"
              >
                Struktur
              </button>
            )}

            <div className="w-px h-5 bg-gray-300 dark:bg-gray-600 mx-1" />

            {/* Zoom controls */}
            <button
              onClick={() => setZoom(z => Math.max(50, z - 25))}
              className="px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700"
            >
              &minus;
            </button>
            <span className="text-xs text-gray-500 w-10 text-center">{zoom}%</span>
            <button
              onClick={() => setZoom(z => Math.min(200, z + 25))}
              className="px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700"
            >
              +
            </button>
            <button
              onClick={() => setZoom(() => 100)}
              className="px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700"
            >
              Fit
            </button>

            <div className="w-px h-5 bg-gray-300 dark:bg-gray-600 mx-1" />
          </>
        )}

        <button
          onClick={onSave}
          disabled={status === 'saving'}
          className="px-4 py-1.5 text-xs bg-teal-600 text-white rounded-lg hover:bg-teal-700 disabled:opacity-50 transition-colors font-medium"
        >
          {status === 'saving' ? 'Speichert...' : 'Speichern'}
        </button>
      </div>
    </div>
  )
}