'use client'

import type { AnnotationType } from '@/app/korrektur/types'
import { ANNOTATION_COLORS } from '@/app/korrektur/types'

interface AnnotationToolbarProps {
  selectedTool: AnnotationType | null
  onToolSelect: (tool: AnnotationType | null) => void
  className?: string
}

const tools: Array<{
  type: AnnotationType
  label: string
  shortcut: string
  icon: React.ReactNode
}> = [
  {
    type: 'rechtschreibung',
    label: 'Rechtschreibung',
    shortcut: 'R',
    icon: (
      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
      </svg>
    ),
  },
  {
    type: 'grammatik',
    label: 'Grammatik',
    shortcut: 'G',
    icon: (
      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129" />
      </svg>
    ),
  },
  {
    type: 'inhalt',
    label: 'Inhalt',
    shortcut: 'I',
    icon: (
      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
      </svg>
    ),
  },
  {
    type: 'struktur',
    label: 'Struktur',
    shortcut: 'S',
    icon: (
      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 10h16M4 14h16M4 18h16" />
      </svg>
    ),
  },
  {
    type: 'stil',
    label: 'Stil',
    shortcut: 'T',
    icon: (
      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
      </svg>
    ),
  },
  {
    type: 'comment',
    label: 'Kommentar',
    shortcut: 'K',
    icon: (
      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
      </svg>
    ),
  },
]

export function AnnotationToolbar({
  selectedTool,
  onToolSelect,
  className = '',
}: AnnotationToolbarProps) {
  return (
    <div className={`flex items-center gap-1 p-2 bg-white/5 rounded-xl ${className}`}>
      {tools.map((tool) => {
        const isSelected = selectedTool === tool.type
        const color = ANNOTATION_COLORS[tool.type]

        return (
          <button
            key={tool.type}
            onClick={() => onToolSelect(isSelected ? null : tool.type)}
            className={`relative p-2 rounded-lg transition-all ${
              isSelected
                ? 'bg-white/20 shadow-lg'
                : 'hover:bg-white/10'
            }`}
            style={{
              color: isSelected ? color : 'rgba(255, 255, 255, 0.6)',
            }}
            title={`${tool.label} (${tool.shortcut})`}
          >
            {tool.icon}

            {/* Shortcut Badge */}
            <span
              className={`absolute -bottom-1 -right-1 w-4 h-4 rounded text-[10px] font-bold flex items-center justify-center ${
                isSelected ? 'bg-white/20' : 'bg-white/10'
              }`}
              style={{ color: isSelected ? color : 'rgba(255, 255, 255, 0.4)' }}
            >
              {tool.shortcut}
            </span>
          </button>
        )
      })}

      {/* Divider */}
      <div className="w-px h-8 bg-white/10 mx-2" />

      {/* Clear Tool Button */}
      <button
        onClick={() => onToolSelect(null)}
        className={`p-2 rounded-lg transition-all ${
          selectedTool === null
            ? 'bg-white/20 text-white'
            : 'hover:bg-white/10 text-white/60'
        }`}
        title="Auswahl (Esc)"
      >
        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" />
        </svg>
      </button>
    </div>
  )
}

// =============================================================================
// ANNOTATION LEGEND
// =============================================================================

export function AnnotationLegend({ className = '' }: { className?: string }) {
  return (
    <div className={`flex flex-wrap gap-3 text-xs ${className}`}>
      {tools.map((tool) => (
        <div key={tool.type} className="flex items-center gap-1.5">
          <div
            className="w-3 h-3 rounded-full"
            style={{ backgroundColor: ANNOTATION_COLORS[tool.type] }}
          />
          <span className="text-white/60">{tool.label}</span>
        </div>
      ))}
    </div>
  )
}