import type { Task } from './types'
import { priorityColors, priorityLabels, getOverdueIndicator } from './types'

interface TaskCardProps {
  task: Task
  onUpdateStatus: (taskId: string, status: string) => void
}

export function TaskCard({ task, onUpdateStatus }: TaskCardProps) {
  const colors = priorityColors[task.priority]
  const overdueInfo = getOverdueIndicator(task.deadline)

  return (
    <div className={`bg-white rounded-lg shadow border-l-4 ${colors.border} p-6 hover:shadow-md transition-shadow`}>
      <div className="flex items-start justify-between">
        <div className="flex-1">
          {/* Header */}
          <div className="flex items-center gap-3 mb-2">
            <span className={`px-2 py-1 text-xs font-medium rounded ${colors.bg} ${colors.text}`}>
              {priorityLabels[task.priority]}
            </span>
            {overdueInfo && (
              <span className={`px-2 py-1 text-xs font-medium rounded ${overdueInfo.color}`}>
                {overdueInfo.label}
              </span>
            )}
            {task.aiExtracted && (
              <span className="px-2 py-1 text-xs font-medium rounded bg-purple-100 text-purple-700 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="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>
                KI
              </span>
            )}
          </div>

          {/* Title */}
          <h3 className="text-lg font-semibold text-slate-900 mb-2">{task.title}</h3>

          {/* Description */}
          {task.description && (
            <p className="text-slate-600 text-sm mb-3 line-clamp-2">{task.description}</p>
          )}

          {/* Source Email */}
          {task.sourceSubject && (
            <div className="flex items-center gap-2 text-sm text-slate-500 mb-3">
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
              </svg>
              <span className="truncate">
                Von: {task.sourceSender} - {task.sourceSubject}
              </span>
            </div>
          )}

          {/* Meta */}
          <div className="flex items-center gap-4 text-sm text-slate-500">
            {task.deadline && (
              <div className="flex items-center gap-1">
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                </svg>
                <span>
                  {new Date(task.deadline).toLocaleDateString('de-DE', {
                    day: '2-digit', month: '2-digit', year: 'numeric',
                  })}
                </span>
              </div>
            )}
            <div className="flex items-center gap-1">
              <svg className="w-4 h-4" 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>
              <span>Erstellt: {new Date(task.createdAt).toLocaleDateString('de-DE')}</span>
            </div>
          </div>
        </div>

        {/* Actions */}
        <div className="flex items-center gap-2 ml-4">
          {task.status === 'pending' && (
            <button
              onClick={() => onUpdateStatus(task.id, 'in_progress')}
              className="px-3 py-1.5 text-sm font-medium text-blue-600 bg-blue-50 rounded-lg hover:bg-blue-100"
            >
              Starten
            </button>
          )}
          {task.status === 'in_progress' && (
            <button
              onClick={() => onUpdateStatus(task.id, 'completed')}
              className="px-3 py-1.5 text-sm font-medium text-green-600 bg-green-50 rounded-lg hover:bg-green-100"
            >
              Erledigen
            </button>
          )}
          {task.status === 'completed' && (
            <span className="px-3 py-1.5 text-sm font-medium text-green-700 bg-green-100 rounded-lg flex items-center gap-1">
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
              </svg>
              Erledigt
            </span>
          )}
          <button className="p-2 text-slate-400 hover:text-slate-600 rounded-lg hover:bg-slate-100">
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
            </svg>
          </button>
        </div>
      </div>
    </div>
  )
}