'use client'

import React, { useEffect, useRef, useState } from 'react'

interface Props {
  assessmentId: string
  backendUrl: string
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  onComplete: (result: any) => void
  onError: (msg: string) => void
}

export function AssessmentProgress({ assessmentId, backendUrl, onComplete, onError }: Props) {
  const [progress, setProgress] = useState('Initialisierung...')
  const [dots, setDots] = useState(0)
  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null)

  useEffect(() => {
    const dotTimer = setInterval(() => setDots(d => (d + 1) % 4), 500)

    pollRef.current = setInterval(async () => {
      try {
        const res = await fetch(
          `${backendUrl}/api/vendor-compliance/assessments/${assessmentId}`,
        )
        if (!res.ok) return

        const data = await res.json()

        if (data.status === 'completed' && data.result) {
          if (pollRef.current) clearInterval(pollRef.current)
          clearInterval(dotTimer)
          onComplete(data.result)
          return
        }

        if (data.status === 'failed') {
          if (pollRef.current) clearInterval(pollRef.current)
          clearInterval(dotTimer)
          onError(data.error || 'Pruefung fehlgeschlagen')
          return
        }

        if (data.progress) {
          setProgress(data.progress)
        }
      } catch {
        // retry silently
      }
    }, 2000)

    return () => {
      if (pollRef.current) clearInterval(pollRef.current)
      clearInterval(dotTimer)
    }
  }, [assessmentId, backendUrl, onComplete, onError])

  return (
    <div className="bg-white rounded-xl border border-gray-200 p-12 text-center">
      <div className="w-16 h-16 mx-auto mb-6 relative">
        <div className="absolute inset-0 border-4 border-blue-200 rounded-full" />
        <div className="absolute inset-0 border-4 border-blue-600 rounded-full border-t-transparent animate-spin" />
      </div>

      <h2 className="text-xl font-semibold text-gray-800 mb-2">
        Vertragspruefung laeuft
      </h2>

      <p className="text-gray-600 text-sm mb-6">
        {progress}{'.'.repeat(dots)}
      </p>

      <div className="max-w-md mx-auto">
        <div className="flex items-center gap-3 text-left text-xs text-gray-500 mb-2">
          <span className="w-5 h-5 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold">1</span>
          Text extrahieren
        </div>
        <div className="flex items-center gap-3 text-left text-xs text-gray-500 mb-2">
          <span className="w-5 h-5 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold">2</span>
          Checklisten pruefen (L1/L2)
        </div>
        <div className="flex items-center gap-3 text-left text-xs text-gray-500 mb-2">
          <span className="w-5 h-5 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold">3</span>
          Cross-Check zwischen Dokumenten
        </div>
        <div className="flex items-center gap-3 text-left text-xs text-gray-500">
          <span className="w-5 h-5 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold">4</span>
          Pruefprotokoll generieren
        </div>
      </div>
    </div>
  )
}