'use client'

import { Version, ApprovalHistoryItem, STATUS_LABELS } from '../_types'

interface HistoryPanelProps {
  approvalHistory: ApprovalHistoryItem[]
  versions: Version[]
  draftVersion: Version | null
  currentVersion: Version | null
}

// Backend-Actions (compliance/services/legal_document_service.py):
//   submitted_internal, approved_internal, approved_client,
//   published, rejected, plus alte Werte 'submitted'/'approved'.
const ACTION_LABELS: Record<string, string> = {
  submitted: 'Eingereicht',
  submitted_internal: 'An DSB eingereicht',
  approved: 'Freigegeben',
  approved_internal: 'DSB-Freigabe → Mandant',
  approved_client: 'Mandanten-Freigabe',
  published: 'Veroeffentlicht',
  rejected: 'Abgelehnt',
}

function actionLabel(action: string): string {
  return ACTION_LABELS[action] || action
}

function actionBadgeClass(action: string): string {
  if (action.startsWith('approved') || action === 'published') {
    return 'bg-green-100 text-green-700'
  }
  if (action === 'rejected') return 'bg-red-100 text-red-700'
  if (action.startsWith('submitted')) return 'bg-blue-100 text-blue-700'
  return 'bg-slate-100 text-slate-700'
}

export default function HistoryPanel({
  approvalHistory,
  versions,
  draftVersion,
  currentVersion,
}: HistoryPanelProps) {
  return (
    <div className="bg-white rounded-xl shadow-sm border p-6">
      <h3 className="text-lg font-semibold text-slate-900 mb-4">Genehmigungsverlauf</h3>
      {approvalHistory.length > 0 ? (
        <div className="space-y-3">
          {approvalHistory.map((item, idx) => (
            <div key={idx} className="flex items-center gap-4 p-3 border border-slate-200 rounded-lg">
              <span className={`px-2 py-1 rounded text-xs ${actionBadgeClass(item.action)}`}>
                {actionLabel(item.action)}
              </span>
              <span className="text-sm text-slate-600">{item.approver || 'System'}</span>
              {item.comment && (
                <span className="text-sm text-slate-500 italic">&quot;{item.comment}&quot;</span>
              )}
              <span className="text-sm text-slate-400 ml-auto">
                {new Date(item.created_at).toLocaleString('de-DE')}
              </span>
            </div>
          ))}
        </div>
      ) : (
        <p className="text-slate-500">Keine Genehmigungshistorie vorhanden.</p>
      )}

      <h3 className="text-lg font-semibold text-slate-900 mt-6 mb-4">Alle Versionen</h3>
      <div className="space-y-3">
        {versions.map((v) => (
          <div
            key={v.id}
            className={`p-4 border rounded-lg ${
              v.id === draftVersion?.id ? 'border-purple-300 bg-purple-50' :
              v.id === currentVersion?.id ? 'border-emerald-300 bg-emerald-50' :
              'border-slate-200'
            }`}
          >
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-3">
                <span className="font-mono font-medium">v{v.version}</span>
                <span
                  className={`px-2 py-0.5 rounded text-xs ${
                    STATUS_LABELS[v.status]?.color ?? 'bg-slate-100 text-slate-700'
                  }`}
                >
                  {STATUS_LABELS[v.status]?.label ?? v.status}
                </span>
                <span className="text-sm text-slate-500">{v.title}</span>
              </div>
              <span className="text-sm text-slate-400">
                {new Date(v.created_at).toLocaleDateString('de-DE')}
              </span>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}
