'use client'

import React from 'react'
import { DSRRequest } from '@/lib/sdk/dsr/types'
import { StatusBadge } from './StatusBadge'
import { DeadlineDisplay } from './DeadlineDisplay'
import { ActionButtons } from './ActionButtons'
import { AuditLog } from './AuditLog'

export function DSRSidebar({
  request,
  history,
  onVerifyIdentity,
  onExtendDeadline,
  onComplete,
  onReject,
  onAssign,
}: {
  request: DSRRequest
  history: any[]
  onVerifyIdentity: () => void
  onExtendDeadline: () => void
  onComplete: () => void
  onReject: () => void
  onAssign: () => void
}) {
  return (
    <div className="space-y-6">
      {/* Status Card */}
      <div className="bg-white rounded-xl border border-gray-200 p-6 space-y-4">
        <div className="flex items-center justify-between">
          <h3 className="font-medium text-gray-900">Status</h3>
          <StatusBadge status={request.status} />
        </div>

        <div className="border-t border-gray-100 pt-4">
          <DeadlineDisplay request={request} />
        </div>

        {/* Priority */}
        <div className="border-t border-gray-100 pt-4">
          <div className="text-sm text-gray-500 mb-1">Prioritaet</div>
          <div className={`
            inline-flex px-2 py-1 text-sm font-medium rounded-lg
            ${request.priority === 'critical' ? 'bg-red-100 text-red-700' :
              request.priority === 'high' ? 'bg-orange-100 text-orange-700' :
              request.priority === 'normal' ? 'bg-gray-100 text-gray-700' :
              'bg-blue-100 text-blue-700'
            }
          `}>
            {request.priority === 'critical' ? 'Kritisch' :
             request.priority === 'high' ? 'Hoch' :
             request.priority === 'normal' ? 'Normal' : 'Niedrig'}
          </div>
        </div>

        {/* Assignment */}
        <div className="border-t border-gray-100 pt-4">
          <div className="text-sm text-gray-500 mb-1">Zugewiesen an</div>
          <div className="font-medium text-gray-900">
            {request.assignment.assignedTo || 'Nicht zugewiesen'}
          </div>
        </div>
      </div>

      {/* Actions Card */}
      <div className="bg-white rounded-xl border border-gray-200 p-6">
        <h3 className="font-medium text-gray-900 mb-4">Aktionen</h3>
        <ActionButtons
          request={request}
          onVerifyIdentity={onVerifyIdentity}
          onExtendDeadline={onExtendDeadline}
          onComplete={onComplete}
          onReject={onReject}
          onAssign={onAssign}
        />
      </div>

      {/* Audit Log Card */}
      <div className="bg-white rounded-xl border border-gray-200 p-6">
        <AuditLog history={history} />
      </div>
    </div>
  )
}