'use client'

import React from 'react'
import { DSRRequest, getDaysRemaining, isOverdue, isUrgent } from '@/lib/sdk/dsr/types'

export function DeadlineDisplay({ request }: { request: DSRRequest }) {
  const daysRemaining = getDaysRemaining(request.deadline.currentDeadline)
  const overdue = isOverdue(request)
  const urgent = isUrgent(request)
  const isTerminal = request.status === 'completed' || request.status === 'rejected' || request.status === 'cancelled'

  if (isTerminal) {
    return (
      <div className="text-gray-500">
        <div className="text-sm">Abgeschlossen am</div>
        <div className="text-lg font-semibold">
          {request.completedAt
            ? new Date(request.completedAt).toLocaleDateString('de-DE')
            : '-'
          }
        </div>
      </div>
    )
  }

  return (
    <div className={`${overdue ? 'text-red-600' : urgent ? 'text-orange-600' : 'text-gray-900'}`}>
      <div className="text-sm">Frist</div>
      <div className="text-2xl font-bold">
        {overdue
          ? `${Math.abs(daysRemaining)} Tage ueberfaellig`
          : `${daysRemaining} Tage`
        }
      </div>
      <div className="text-xs text-gray-500 mt-1">
        bis {new Date(request.deadline.currentDeadline).toLocaleDateString('de-DE')}
      </div>
      {request.deadline.extended && (
        <div className="text-xs text-purple-600 mt-1">
          (Verlaengert)
        </div>
      )}
    </div>
  )
}