'use client'

import React from 'react'
import {
  Enrollment,
  ENROLLMENT_STATUS_INFO,
  isEnrollmentOverdue,
  getDaysUntilDeadline
} from '@/lib/sdk/academy/types'

export function EnrollmentCard({ enrollment, courseName, onEdit, onComplete, onDelete }: {
  enrollment: Enrollment
  courseName: string
  onEdit?: (enrollment: Enrollment) => void
  onComplete?: (id: string) => void
  onDelete?: (id: string) => void
}) {
  const statusInfo = ENROLLMENT_STATUS_INFO[enrollment.status]
  const overdue = isEnrollmentOverdue(enrollment)
  const daysUntil = getDaysUntilDeadline(enrollment.deadline)

  return (
    <div className={`
      bg-white rounded-xl border-2 p-6
      ${overdue ? 'border-red-300' :
        enrollment.status === 'completed' ? 'border-green-200' :
        enrollment.status === 'in_progress' ? 'border-yellow-200' :
        'border-gray-200'
      }
    `}>
      <div className="flex items-start justify-between">
        <div className="flex-1 min-w-0">
          {/* Status Badge */}
          <div className="flex items-center gap-2 mb-2 flex-wrap">
            <span className={`px-2 py-1 text-xs rounded-full ${statusInfo.bgColor} ${statusInfo.color}`}>
              {statusInfo.label}
            </span>
            {overdue && (
              <span className="px-2 py-1 text-xs bg-red-100 text-red-700 rounded-full flex items-center gap-1">
                <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                </svg>
                Ueberfaellig
              </span>
            )}
          </div>

          {/* User Info */}
          <h3 className="text-lg font-semibold text-gray-900 truncate">
            {enrollment.userName}
          </h3>
          <p className="text-sm text-gray-500">{enrollment.userEmail}</p>
          <p className="text-sm text-gray-600 mt-1 font-medium">{courseName}</p>

          {/* Progress Bar */}
          <div className="mt-3">
            <div className="flex items-center justify-between text-sm mb-1">
              <span className="text-gray-500">Fortschritt</span>
              <span className="font-medium text-gray-700">{enrollment.progress}%</span>
            </div>
            <div className="w-full h-2 bg-gray-200 rounded-full overflow-hidden">
              <div
                className={`h-full rounded-full transition-all ${
                  enrollment.progress === 100 ? 'bg-green-500' :
                  overdue ? 'bg-red-500' :
                  'bg-purple-500'
                }`}
                style={{ width: `${enrollment.progress}%` }}
              />
            </div>
          </div>
        </div>

        {/* Right Side - Deadline */}
        <div className={`text-right ml-4 ${
          overdue ? 'text-red-600' :
          daysUntil <= 7 ? 'text-orange-600' :
          'text-gray-500'
        }`}>
          <div className="text-sm font-medium">
            {enrollment.status === 'completed'
              ? 'Abgeschlossen'
              : overdue
                ? `${Math.abs(daysUntil)} Tage ueberfaellig`
                : `${daysUntil} Tage verbleibend`
            }
          </div>
          <div className="text-xs mt-0.5">
            Frist: {new Date(enrollment.deadline).toLocaleDateString('de-DE')}
          </div>
        </div>
      </div>

      {/* Footer */}
      <div className="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between">
        <div className="text-sm text-gray-500">
          Gestartet: {new Date(enrollment.startedAt).toLocaleDateString('de-DE')}
          {enrollment.completedAt && (
            <span className="ml-3 text-green-600">
              Abgeschlossen: {new Date(enrollment.completedAt).toLocaleDateString('de-DE')}
            </span>
          )}
        </div>
        <div className="flex items-center gap-2">
          {enrollment.status === 'in_progress' && onComplete && (
            <button
              onClick={() => onComplete(enrollment.id)}
              className="px-3 py-1 text-xs bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
            >
              Abschliessen
            </button>
          )}
          {onEdit && (
            <button
              onClick={() => onEdit(enrollment)}
              className="px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors"
            >
              Bearbeiten
            </button>
          )}
          {onDelete && (
            <button
              onClick={() => onDelete(enrollment.id)}
              className="px-3 py-1 text-xs bg-red-50 text-red-600 rounded-lg hover:bg-red-100 transition-colors"
            >
              Loeschen
            </button>
          )}
        </div>
      </div>
    </div>
  )
}