'use client'

import type { Email } from './types'
import { PRIORITY_COLORS, SENDER_TYPE_SHORT_LABELS } from './types'

interface EmailListItemProps {
  email: Email
  isSelected: boolean
  onClick: () => void
}

export default function EmailListItem({ email, isSelected, onClick }: EmailListItemProps) {
  return (
    <button
      onClick={onClick}
      className={`w-full p-4 text-left hover:bg-slate-50 transition-colors ${
        isSelected ? 'bg-primary-50' : ''
      } ${!email.isRead ? 'bg-blue-50' : ''}`}
    >
      <div className="flex items-start gap-3">
        {/* Priority Indicator */}
        {email.priority && (
          <div className={`w-2 h-2 rounded-full mt-2 ${PRIORITY_COLORS[email.priority] || 'bg-slate-300'}`}></div>
        )}

        <div className="flex-1 min-w-0">
          {/* Sender */}
          <div className="flex items-center gap-2 mb-1">
            <span className={`font-medium text-sm ${!email.isRead ? 'text-slate-900' : 'text-slate-700'}`}>
              {email.senderName || email.senderEmail.split('@')[0]}
            </span>
            {email.senderType && SENDER_TYPE_SHORT_LABELS[email.senderType] && (
              <span className="px-1.5 py-0.5 bg-purple-100 text-purple-700 text-xs font-medium rounded">
                {SENDER_TYPE_SHORT_LABELS[email.senderType]}
              </span>
            )}
          </div>

          {/* Subject */}
          <p className={`text-sm truncate ${!email.isRead ? 'font-medium text-slate-900' : 'text-slate-700'}`}>
            {email.subject || '(Kein Betreff)'}
          </p>

          {/* Preview */}
          <p className="text-xs text-slate-500 truncate mt-1">
            {email.bodyPreview}
          </p>

          {/* Meta */}
          <div className="flex items-center gap-2 mt-2">
            <span className="text-xs text-slate-400">
              {new Date(email.date).toLocaleDateString('de-DE', {
                day: '2-digit',
                month: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
              })}
            </span>
            {email.hasAttachments && (
              <svg className="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
              </svg>
            )}
            {email.deadlines && email.deadlines.length > 0 && (
              <span className="px-1.5 py-0.5 bg-red-100 text-red-700 text-xs rounded 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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                Frist
              </span>
            )}
            {email.aiAnalyzed && (
              <svg className="w-4 h-4 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-label="KI-analysiert">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
              </svg>
            )}
          </div>
        </div>
      </div>
    </button>
  )
}