'use client'

import { Version } from '../_types'

export type ApprovalMode = 'approve-internal' | 'approve-client' | 'reject'

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

// 5-Stage Lifecycle:
//   draft → review_internal (DSB-Pruefung) → review_client (Mandant-Pruefung)
//        → approved → published
// Buttons sind v1 nicht role-gefiltert — alle relevanten Aktionen sichtbar.
const STAGES: { status: string; label: string }[] = [
  { status: 'draft', label: 'Entwurf' },
  { status: 'review_internal', label: 'DSB-Pruefung' },
  { status: 'review_client', label: 'Mandant-Pruefung' },
  { status: 'approved', label: 'Freigegeben' },
  { status: 'published', label: 'Veroeffentlicht' },
]

function isActiveStage(stageStatus: string, draftStatus: string | undefined, hasDraft: boolean) {
  if (stageStatus === 'published') return !hasDraft
  return draftStatus === stageStatus
}

export default function WorkflowStatusBar({
  draftVersion,
  saving,
  onCreateNewDraft,
  onSaveDraft,
  onSubmitForReview,
  onShowApprovalModal,
  onPublishVersion,
}: WorkflowStatusBarProps) {
  const status = draftVersion?.status
  return (
    <div className="bg-white rounded-xl shadow-sm border p-4">
      <div className="flex items-center justify-between flex-wrap gap-4">
        <div className="flex items-center gap-4 flex-wrap">
          {STAGES.map((stage, idx) => (
            <div key={stage.status} className="flex items-center">
              {idx > 0 && <div className="w-6 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 ${
                    isActiveStage(stage.status, status, Boolean(draftVersion))
                      ? 'bg-purple-500 text-white'
                      : 'bg-slate-200 text-slate-600'
                  }`}
                >
                  {idx + 1}
                </div>
                <span className="text-sm text-slate-600">{stage.label}</span>
              </div>
            </div>
          ))}
        </div>

        <div className="flex items-center gap-2 flex-wrap">
          {!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>
          )}

          {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"
              >
                An DSB einreichen
              </button>
            </>
          )}

          {status === 'review_internal' && (
            <>
              <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-internal')}
                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"
              >
                DSB-Freigabe → Mandant
              </button>
            </>
          )}

          {status === 'review_client' && (
            <>
              <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-client')}
                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"
              >
                Mandant-Freigabe
              </button>
            </>
          )}

          {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>
          )}

          {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>
  )
}
