'use client'

import type { IpaMode, SyllableMode } from './useGridEditor'

interface GridToolbarProps {
  dirty: boolean
  saving: boolean
  canUndo: boolean
  canRedo: boolean
  showOverlay: boolean
  ipaMode: IpaMode
  syllableMode: SyllableMode
  onSave: () => void
  onUndo: () => void
  onRedo: () => void
  onRebuild: () => void
  onToggleOverlay: () => void
  onIpaModeChange: (mode: IpaMode) => void
  onSyllableModeChange: (mode: SyllableMode) => void
}

const IPA_LABELS: Record<IpaMode, string> = {
  auto: 'IPA: Auto',
  en: 'IPA: nur EN',
  de: 'IPA: nur DE',
  all: 'IPA: Alle',
  none: 'IPA: Aus',
}

const SYLLABLE_LABELS: Record<SyllableMode, string> = {
  auto: 'Silben: Original',
  en: 'Silben: nur EN',
  de: 'Silben: nur DE',
  all: 'Silben: Alle',
  none: 'Silben: Aus',
}

export function GridToolbar({
  dirty,
  saving,
  canUndo,
  canRedo,
  showOverlay,
  ipaMode,
  syllableMode,
  onSave,
  onUndo,
  onRedo,
  onRebuild,
  onToggleOverlay,
  onIpaModeChange,
  onSyllableModeChange,
}: GridToolbarProps) {
  return (
    <div className="flex items-center gap-2 flex-wrap">
      {/* Undo / Redo */}
      <div className="flex items-center gap-1 border-r border-gray-200 dark:border-gray-700 pr-2">
        <button
          onClick={onUndo}
          disabled={!canUndo}
          className="p-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-30 disabled:cursor-not-allowed"
          title="Rueckgaengig (Ctrl+Z)"
        >
          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M3 10h10a5 5 0 015 5v2M3 10l4-4M3 10l4 4" />
          </svg>
        </button>
        <button
          onClick={onRedo}
          disabled={!canRedo}
          className="p-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-30 disabled:cursor-not-allowed"
          title="Wiederholen (Ctrl+Shift+Z)"
        >
          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M21 10H11a5 5 0 00-5 5v2M21 10l-4-4M21 10l-4 4" />
          </svg>
        </button>
      </div>

      {/* Overlay toggle */}
      <button
        onClick={onToggleOverlay}
        className={`flex items-center gap-1 px-2.5 py-1.5 text-xs rounded-md border transition-colors ${
          showOverlay
            ? 'bg-teal-50 dark:bg-teal-900/30 border-teal-300 dark:border-teal-700 text-teal-700 dark:text-teal-300'
            : 'border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700'
        }`}
        title="Grid auf Bild anzeigen"
      >
        <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
        </svg>
        Bild-Overlay
      </button>

      {/* IPA mode */}
      <select
        value={ipaMode}
        onChange={(e) => onIpaModeChange(e.target.value as IpaMode)}
        className="px-2 py-1.5 text-xs rounded-md border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-400"
        title="Lautschrift (IPA): Auto = nur bei erkannten englischen Woertern, Alle = fuer alle Vokabeln, Aus = keine"
      >
        {(Object.keys(IPA_LABELS) as IpaMode[]).map((m) => (
          <option key={m} value={m}>{IPA_LABELS[m]}</option>
        ))}
      </select>

      {/* Syllable mode */}
      <select
        value={syllableMode}
        onChange={(e) => onSyllableModeChange(e.target.value as SyllableMode)}
        className="px-2 py-1.5 text-xs rounded-md border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-400"
        title="Silbentrennung: Original = nur wo im Scan vorhanden, Alle = fuer alle Woerter, Aus = keine"
      >
        {(Object.keys(SYLLABLE_LABELS) as SyllableMode[]).map((m) => (
          <option key={m} value={m}>{SYLLABLE_LABELS[m]}</option>
        ))}
      </select>

      {/* Rebuild */}
      <button
        onClick={onRebuild}
        className="flex items-center gap-1 px-2.5 py-1.5 text-xs rounded-md border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
        title="Grid neu berechnen"
      >
        <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
        </svg>
        Neu berechnen
      </button>

      {/* Spacer */}
      <div className="flex-1" />

      {/* Save */}
      <button
        onClick={onSave}
        disabled={!dirty || saving}
        className={`flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md transition-colors ${
          dirty
            ? 'bg-teal-600 text-white hover:bg-teal-700'
            : 'bg-gray-100 dark:bg-gray-800 text-gray-400 cursor-not-allowed'
        }`}
        title="Speichern (Ctrl+S)"
      >
        {saving ? (
          <svg className="w-3.5 h-3.5 animate-spin" fill="none" viewBox="0 0 24 24">
            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
          </svg>
        ) : (
          <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
          </svg>
        )}
        {saving ? 'Speichert...' : dirty ? 'Speichern' : 'Gespeichert'}
      </button>
    </div>
  )
}