import { StaffMember } from './types'
import { getPositionBadgeColor } from './helpers'

export function StaffListItem({
  member,
  isSelected,
  onClick,
}: {
  member: StaffMember
  isSelected: boolean
  onClick: () => void
}) {
  return (
    <div
      onClick={onClick}
      className={`p-4 cursor-pointer hover:bg-gray-50 transition-colors ${
        isSelected ? 'bg-primary-50' : ''
      }`}
    >
      <div className="flex items-start gap-4">
        {member.photo_url ? (
          <img
            src={member.photo_url}
            alt={member.full_name || member.last_name}
            className="w-12 h-12 rounded-full object-cover"
          />
        ) : (
          <div className="w-12 h-12 rounded-full bg-slate-200 flex items-center justify-center text-slate-500 font-medium">
            {(member.first_name?.[0] || '') + (member.last_name?.[0] || '')}
          </div>
        )}

        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2">
            <span className="font-medium text-slate-900">
              {member.title && `${member.title} `}
              {member.full_name || `${member.first_name || ''} ${member.last_name}`}
            </span>
            {member.is_professor && (
              <span className="px-2 py-0.5 text-xs rounded-full bg-purple-100 text-purple-800">
                Prof
              </span>
            )}
          </div>

          <div className="text-sm text-slate-500 truncate">
            {member.position || member.position_type}
            {member.department_name && ` - ${member.department_name}`}
          </div>

          <div className="flex items-center gap-2 mt-1">
            <span className="text-xs text-slate-400">
              {member.university_short || member.university_name}
            </span>
            {member.publication_count > 0 && (
              <span className="text-xs text-green-600">
                {member.publication_count} Publikationen
              </span>
            )}
          </div>
        </div>

        <div className="flex flex-col items-end gap-1">
          {member.position_type && (
            <span className={`px-2 py-0.5 text-xs rounded-full ${getPositionBadgeColor(member.position_type)}`}>
              {member.position_type}
            </span>
          )}
          {member.email && (
            <a
              href={`mailto:${member.email}`}
              onClick={(e) => e.stopPropagation()}
              className="text-xs text-primary-600 hover:underline"
            >
              E-Mail
            </a>
          )}
        </div>
      </div>

      {member.research_interests && member.research_interests.length > 0 && (
        <div className="mt-2 flex flex-wrap gap-1">
          {member.research_interests.slice(0, 5).map((interest, i) => (
            <span key={i} className="px-2 py-0.5 text-xs bg-slate-100 rounded-full">
              {interest}
            </span>
          ))}
          {member.research_interests.length > 5 && (
            <span className="px-2 py-0.5 text-xs text-slate-400">
              +{member.research_interests.length - 5} mehr
            </span>
          )}
        </div>
      )}
    </div>
  )
}
