'use client'

import React, { useState, useCallback } from 'react'
import { DocumentUploader } from './_components/DocumentUploader'
import { AssessmentProgress } from './_components/AssessmentProgress'
import { PruefprotokollView } from './_components/PruefprotokollView'

type View = 'upload' | 'progress' | 'result'

interface AssessmentResult {
  vendor_name: string
  documents: DocumentResult[]
  findings: Finding[]
  overall_score: number
  category_scores: Record<string, number>
  cross_check_findings: CrossCheckFinding[]
  report_html: string
  checked_at: string
}

interface DocumentResult {
  label: string
  url: string
  doc_type: string
  word_count: number
  completeness_pct: number
  correctness_pct: number
  checks: Check[]
  findings_count: number
  error: string
}

interface Check {
  id: string
  label: string
  passed: boolean
  severity: string
  level: number
  parent: string | null
  skipped: boolean
  hint: string
  matched_text: string
}

interface Finding {
  id: string
  category: string
  severity: string
  type: string
  title: string
  description: string
  recommendation: string
  document_label: string
  document_type: string
}

interface CrossCheckFinding {
  id: string
  label: string
  severity: string
  hint: string
}

const BACKEND_URL = process.env.NEXT_PUBLIC_COMPLIANCE_API_URL || ''

export default function VendorAssessmentPage() {
  const [view, setView] = useState<View>('upload')
  const [assessmentId, setAssessmentId] = useState<string>('')
  const [result, setResult] = useState<AssessmentResult | null>(null)
  const [error, setError] = useState('')

  const handleStartAssessment = useCallback(async (
    vendorName: string,
    documents: Array<{ doc_type: string; label: string; url: string }>,
  ) => {
    setError('')
    try {
      const res = await fetch(`${BACKEND_URL}/api/vendor-compliance/assessments`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ vendor_name: vendorName, documents }),
      })
      if (!res.ok) throw new Error(await res.text())
      const data = await res.json()
      setAssessmentId(data.assessment_id)
      setView('progress')
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Fehler beim Starten')
    }
  }, [])

  const handleComplete = useCallback((data: AssessmentResult) => {
    setResult(data)
    setView('result')
  }, [])

  const handleReset = useCallback(() => {
    setView('upload')
    setAssessmentId('')
    setResult(null)
    setError('')
  }, [])

  return (
    <div className="min-h-screen bg-gray-50 py-8">
      <div className="max-w-5xl mx-auto px-4">
        {/* Header */}
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900">Vertragspruefung</h1>
          <p className="text-gray-600 mt-2">
            Automatisierte Pruefung von Auftragsverarbeitungsvertraegen gem. Art. 28 DSGVO
          </p>
        </div>

        {error && (
          <div className="mb-6 bg-red-50 border border-red-200 rounded-lg p-4">
            <p className="text-red-700 text-sm">{error}</p>
            <button onClick={() => setError('')} className="text-xs text-red-500 mt-1 underline">
              Schliessen
            </button>
          </div>
        )}

        {view === 'upload' && (
          <DocumentUploader onStart={handleStartAssessment} />
        )}

        {view === 'progress' && assessmentId && (
          <AssessmentProgress
            assessmentId={assessmentId}
            backendUrl={BACKEND_URL}
            onComplete={handleComplete}
            onError={(msg) => { setError(msg); setView('upload') }}
          />
        )}

        {view === 'result' && result && (
          <PruefprotokollView result={result} onReset={handleReset} />
        )}
      </div>
    </div>
  )
}