import type { CrawlQueueItem } from './types'
import { phaseConfig } from './types'

interface QueueListProps {
  queue: CrawlQueueItem[]
  onPause: (universityId: string) => void
  onResume: (universityId: string) => void
  onRemove: (universityId: string) => void
}

export function QueueList({ queue, onPause, onResume, onRemove }: QueueListProps) {
  return (
    <div className="lg:col-span-2">
      <div className="bg-white rounded-xl shadow-sm border border-gray-100">
        <div className="px-6 py-4 border-b border-gray-100">
          <h2 className="text-lg font-semibold text-gray-900">Crawl Queue ({queue.length})</h2>
        </div>

        {queue.length === 0 ? (
          <div className="px-6 py-12 text-center text-gray-500">
            Queue ist leer. Fuege Universitaeten hinzu, um das Crawling zu starten.
          </div>
        ) : (
          <div className="divide-y divide-gray-100">
            {queue.map((item) => (
              <div key={item.id} className="px-6 py-4 hover:bg-gray-50 transition-colors">
                <div className="flex items-start justify-between gap-4">
                  <div className="flex-1">
                    {/* Header */}
                    <div className="flex items-center gap-3">
                      <span className="text-sm font-medium text-gray-400">#{item.queue_position || '-'}</span>
                      <h3 className="font-medium text-gray-900">{item.university_name}</h3>
                      <span className="text-sm text-gray-500">({item.university_short})</span>
                    </div>

                    {/* Phase Badge */}
                    <div className="flex items-center gap-2 mt-2">
                      <span className={`px-2 py-1 rounded text-xs font-medium ${phaseConfig[item.current_phase].color}`}>
                        {phaseConfig[item.current_phase].label}
                      </span>
                      <span className="text-xs text-gray-500">Prioritaet: {item.priority}</span>
                      {item.retry_count > 0 && (
                        <span className="text-xs text-orange-600">Versuch {item.retry_count}/{item.max_retries}</span>
                      )}
                    </div>

                    {/* Progress Bar */}
                    <div className="mt-3">
                      <div className="h-2 bg-gray-100 rounded-full overflow-hidden">
                        <div className="h-full bg-blue-500 transition-all duration-500" style={{ width: `${item.progress_percent}%` }} />
                      </div>
                      <div className="flex justify-between text-xs text-gray-500 mt-1">
                        <span>{item.progress_percent}%</span>
                        <span>{item.discovery_count} Disc / {item.professors_count} Prof / {item.staff_count} Staff / {item.publications_count} Pub</span>
                      </div>
                    </div>

                    {/* Phase Checkmarks */}
                    <div className="flex gap-4 mt-3 text-xs">
                      <span className={item.discovery_completed ? 'text-green-600' : 'text-gray-400'}>Discovery</span>
                      <span className={item.professors_completed ? 'text-green-600' : 'text-gray-400'}>Professoren</span>
                      <span className={item.all_staff_completed ? 'text-green-600' : 'text-gray-400'}>Mitarbeiter</span>
                      <span className={item.publications_completed ? 'text-green-600' : 'text-gray-400'}>Publikationen</span>
                    </div>

                    {/* Error Message */}
                    {item.last_error && (
                      <p className="mt-2 text-xs text-red-600 bg-red-50 px-2 py-1 rounded">{item.last_error}</p>
                    )}
                  </div>

                  {/* Actions */}
                  <div className="flex flex-col gap-2">
                    {item.current_phase === 'paused' ? (
                      <button onClick={() => onResume(item.university_id)} className="px-3 py-1 text-xs bg-green-100 text-green-700 rounded hover:bg-green-200 transition-colors">Fortsetzen</button>
                    ) : item.current_phase !== 'completed' && item.current_phase !== 'failed' ? (
                      <button onClick={() => onPause(item.university_id)} className="px-3 py-1 text-xs bg-yellow-100 text-yellow-700 rounded hover:bg-yellow-200 transition-colors">Pausieren</button>
                    ) : null}
                    <button onClick={() => onRemove(item.university_id)} className="px-3 py-1 text-xs bg-red-100 text-red-700 rounded hover:bg-red-200 transition-colors">Entfernen</button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  )
}
