import type { Employee } from '@skillmate/shared'

interface EmployeeCardProps {
  employee: Employee
  onClick: () => void
}

export default function EmployeeCard({ employee, onClick }: EmployeeCardProps) {
  const API_BASE = (import.meta as any).env?.VITE_API_URL || 'http://localhost:3004/api'
  const PUBLIC_BASE = (import.meta as any).env?.VITE_API_PUBLIC_URL || API_BASE.replace(/\/api$/, '')
  const photoSrc = employee.photo && employee.photo.startsWith('/uploads/')
    ? `${PUBLIC_BASE}${employee.photo}`
    : employee.photo || ''
  const getAvailabilityBadge = (status: Employee['availability']) => {
    const badges = {
      available: { class: 'badge-success', text: 'Verfügbar' },
      parttime: { class: 'badge-info', text: 'Teilzeit' },
      unavailable: { class: 'badge-error', text: 'Nicht verfügbar' },
      busy: { class: 'badge-warning', text: 'Beschäftigt' },
      away: { class: 'badge-info', text: 'Abwesend' },
      vacation: { class: 'badge-info', text: 'Urlaub' },
      sick: { class: 'badge-error', text: 'Krank' },
      training: { class: 'badge-info', text: 'Fortbildung' },
      operation: { class: 'badge-warning', text: 'Im Einsatz' },
    }
    return badges[status] || { class: 'badge', text: status }
  }

  const availability = getAvailabilityBadge(employee.availability)

  return (
    <div className="card" onClick={onClick}>
      <div className="flex items-start justify-between mb-4">
        <div className="flex items-center space-x-4">
          <div className="w-16 h-16 rounded-full bg-bg-accent dark:bg-dark-primary flex items-center justify-center overflow-hidden">
            {photoSrc ? (
              <img 
                src={photoSrc}
                alt={`${employee.firstName} ${employee.lastName}`}
                className="w-full h-full rounded-full object-cover"
              />
            ) : (
              <span className="text-2xl font-semibold text-primary-blue dark:text-dark-accent">
                {employee.firstName.charAt(0)}{employee.lastName.charAt(0)}
              </span>
            )}
          </div>
          <div>
            <h3 className="text-body font-poppins font-semibold text-primary">
              {employee.firstName} {employee.lastName}
            </h3>
            {employee.employeeNumber && (
              <p className="text-small text-tertiary">{employee.employeeNumber}</p>
            )}
          </div>
        </div>
        <span className={`badge ${availability.class}`}>
          {availability.text}
        </span>
      </div>

      <div className="space-y-2 mb-4">
        <p className="text-body text-secondary">
          <span className="font-medium">Position:</span> {employee.position}
        </p>
        {employee.officialTitle && (
          <p className="text-body text-secondary">
            <span className="font-medium">Amtsbezeichnung:</span> {employee.officialTitle}
          </p>
        )}
        <p className="text-body text-secondary">
          <span className="font-medium">Dienststelle:</span> {employee.department}
        </p>
      </div>

      {employee.specializations.length > 0 && (
        <div>
          <p className="text-small font-medium text-tertiary mb-2">Spezialisierungen:</p>
          <div className="flex flex-wrap gap-2">
            {employee.specializations.slice(0, 3).map((spec, index) => (
              <span key={index} className="badge badge-info text-xs">
                {spec}
              </span>
            ))}
            {employee.specializations.length > 3 && (
              <span className="text-xs text-tertiary">
                +{employee.specializations.length - 3} weitere
              </span>
            )}
          </div>
        </div>
      )}
    </div>
  )
}
