'use client'

import { Version } from '../_types'

interface WorkflowStatusBarProps {
  draftVersion: Version | null
  saving: boolean
  onCreateNewDraft: () => void
  onSaveDraft: () => void
  onSubmitForReview: () => void
  onShowApprovalModal: (mode: 'approve' | 'reject') => void
  onPublishVersion: () => void
}

export default function WorkflowStatusBar({
  draftVersion,
  saving,
  onCreateNewDraft,
  onSaveDraft,
  onSubmitForReview,
  onShowApprovalModal,
  onPublishVersion,
}: WorkflowStatusBarProps) {
  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-6">
          {['draft', 'review', 'approved', 'published'].map((status, idx) => (
            <div key={status} className="flex items-center">
              {idx > 0 && <div className="w-8 h-0.5 bg-slate-200 mr-2" />}
              <div className="flex items-center gap-2">
                <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium ${
                  (status === 'draft' && draftVersion?.status === 'draft') ||
                  (status === 'review' && draftVersion?.status === 'review') ||
                  (status === 'approved' && draftVersion?.status === 'approved') ||
                  (status === 'published' && !draftVersion)
                    ? 'bg-purple-500 text-white'
                    : 'bg-slate-200 text-slate-600'
                }`}>{idx + 1}</div>
                <span className="text-sm text-slate-600">
                  {status === 'draft' ? 'Entwurf' :
                   status === 'review' ? 'Pruefung' :
                   status === 'approved' ? 'Freigegeben' : 'Veroeffentlicht'}
                </span>
              </div>
            </div>
          ))}
        </div>

        {/* Action Buttons */}
        <div className="flex items-center gap-2">
          {!draftVersion && (
            <button
              onClick={onCreateNewDraft}
              disabled={saving}
              className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 text-sm font-medium"
            >
              Neue Version erstellen
            </button>
          )}

          {draftVersion?.status === 'draft' && (
            <>
              <button
                onClick={onSaveDraft}
                disabled={saving}
                className="px-4 py-2 bg-slate-600 text-white rounded-lg hover:bg-slate-700 disabled:opacity-50 text-sm font-medium"
              >
                {saving ? 'Speichern...' : 'Speichern'}
              </button>
              <button
                onClick={onSubmitForReview}
                disabled={saving}
                className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 text-sm font-medium"
              >
                Zur Pruefung einreichen
              </button>
            </>
          )}

          {draftVersion?.status === 'review' && (
            <>
              <button
                onClick={() => onShowApprovalModal('reject')}
                disabled={saving}
                className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50 text-sm font-medium"
              >
                Ablehnen
              </button>
              <button
                onClick={() => onShowApprovalModal('approve')}
                disabled={saving}
                className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 text-sm font-medium"
              >
                Freigeben
              </button>
            </>
          )}

          {draftVersion?.status === 'approved' && (
            <button
              onClick={onPublishVersion}
              disabled={saving}
              className="px-4 py-2 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 disabled:opacity-50 text-sm font-medium"
            >
              Jetzt veroeffentlichen
            </button>
          )}

          {draftVersion?.status === 'rejected' && (
            <div className="flex items-center gap-2">
              <span className="text-sm text-red-600">Abgelehnt: {draftVersion.rejection_reason}</span>
              <button
                onClick={onCreateNewDraft}
                disabled={saving}
                className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 text-sm font-medium"
              >
                Neu bearbeiten
              </button>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}
