'use client'

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

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

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 ${
                item.action === 'approved' ? 'bg-green-100 text-green-700' :
                item.action === 'rejected' ? 'bg-red-100 text-red-700' :
                item.action === 'submitted' ? 'bg-blue-100 text-blue-700' :
                'bg-slate-100 text-slate-700'
              }`}>{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}`}>
                  {STATUS_LABELS[v.status].label}
                </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>
  )
}
