'use client'

import { Document, Version, STATUS_LABELS, DOCUMENT_TYPES } from '../_types'

interface DocumentSelectorBarProps {
  documents: Document[]
  selectedDocument: Document | null
  onSelectDocument: (doc: Document | null) => void
  currentVersion: Version | null
  draftVersion: Version | null
  onNewDocument: () => void
  onCompareView: () => void
  onToggleHistory: () => void
}

export default function DocumentSelectorBar({
  documents,
  selectedDocument,
  onSelectDocument,
  currentVersion,
  draftVersion,
  onNewDocument,
  onCompareView,
  onToggleHistory,
}: DocumentSelectorBarProps) {
  return (
    <div className="bg-white rounded-xl shadow-sm border p-4">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4">
          <label className="text-sm font-medium text-slate-700">Dokument:</label>
          <select
            value={selectedDocument?.id || ''}
            onChange={(e) => {
              const doc = documents.find(d => d.id === e.target.value)
              onSelectDocument(doc || null)
            }}
            className="px-3 py-2 border border-slate-300 rounded-lg text-sm min-w-[250px]"
          >
            <option value="">Dokument auswaehlen...</option>
            {documents.map((doc) => (
              <option key={doc.id} value={doc.id}>
                {DOCUMENT_TYPES[doc.type] || doc.type} - {doc.name}
              </option>
            ))}
          </select>
        </div>

        <div className="flex items-center gap-2">
          {currentVersion && (
            <span className="text-sm text-slate-500">
              Aktuelle Version: <span className="font-medium">v{currentVersion.version}</span>
            </span>
          )}
          {draftVersion && (
            <span className={`px-2 py-1 rounded text-xs ${STATUS_LABELS[draftVersion.status].color}`}>
              {STATUS_LABELS[draftVersion.status].label}: v{draftVersion.version}
            </span>
          )}

          <button
            onClick={onNewDocument}
            className="px-3 py-2 text-sm text-white bg-purple-600 hover:bg-purple-700 rounded-lg"
          >
            + Neues Dokument
          </button>

          <button
            onClick={onCompareView}
            className="px-3 py-2 text-sm text-purple-600 hover:text-purple-800 border border-purple-300 rounded-lg hover:bg-purple-50"
            title="Vollbild-Vergleich"
          >
            Vollbild
          </button>

          <button
            onClick={onToggleHistory}
            className="px-3 py-2 text-sm text-slate-600 hover:text-slate-900 border border-slate-300 rounded-lg hover:bg-slate-50"
          >
            Historie
          </button>
        </div>
      </div>
    </div>
  )
}
