'use client'

import { useRouter } from 'next/navigation'
import { PastSession } from './types'

interface SessionHistoryProps {
  pastSessions: PastSession[]
  activeSessionId: string | null
}

export function SessionHistory({ pastSessions, activeSessionId }: SessionHistoryProps) {
  const router = useRouter()

  if (pastSessions.length === 0) return null

  const statusBadge: Record<string, string> = {
    draft: 'bg-slate-100 text-slate-700',
    in_progress: 'bg-blue-100 text-blue-700',
    completed: 'bg-green-100 text-green-700',
    archived: 'bg-purple-100 text-purple-700',
  }
  const statusLabel: Record<string, string> = {
    draft: 'Entwurf',
    in_progress: 'In Bearbeitung',
    completed: 'Abgeschlossen',
    archived: 'Archiviert',
  }

  return (
    <div className="bg-white rounded-xl border border-gray-200 p-6">
      <h3 className="text-lg font-semibold text-gray-900 mb-4">Vergangene Audit-Sessions</h3>
      <div className="space-y-3">
        {pastSessions
          .filter(s => s.id !== activeSessionId)
          .map(session => (
            <div
              key={session.id}
              className="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 cursor-pointer transition-colors"
              onClick={() => router.push(`/sdk/audit-report/${session.id}`)}
            >
              <div className="flex items-center gap-3">
                <span className={`px-2 py-0.5 text-xs rounded-full ${statusBadge[session.status] || ''}`}>
                  {statusLabel[session.status] || session.status}
                </span>
                <span className="text-sm font-medium text-gray-900">{session.name}</span>
                <span className="text-xs text-gray-500">
                  {new Date(session.created_at).toLocaleDateString('de-DE')}
                </span>
              </div>
              <div className="flex items-center gap-3 text-sm">
                <span className="text-gray-500">
                  {session.completed_items}/{session.total_items} Punkte
                </span>
                <span className={`font-medium ${
                  session.completion_percentage >= 80 ? 'text-green-600' :
                  session.completion_percentage >= 50 ? 'text-yellow-600' : 'text-red-600'
                }`}>
                  {session.completion_percentage}%
                </span>
                <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                </svg>
              </div>
            </div>
          ))}
      </div>
    </div>
  )
}
