'use client'

import { useRouter } from 'next/navigation'
import { UploadZone } from './_components/UploadZone'
import { FileItem } from './_components/FileItem'
import { GapAnalysisPreview } from './_components/GapAnalysisPreview'
import { ImportHistory } from './_components/ImportHistory'
import { useImport } from './_hooks/useImport'

export default function ImportPage() {
  const router = useRouter()
  const {
    state,
    files,
    setFiles,
    isAnalyzing,
    analysisResult,
    importHistory,
    historyLoading,
    handleFilesAdded,
    handleTypeChange,
    handleRemove,
    handleAnalyze,
    handleDeleteHistory,
  } = useImport()

  if (state.customerType === 'new') {
    router.push('/sdk')
    return null
  }

  return (
    <div className="max-w-4xl mx-auto space-y-8">
      {/* Header */}
      <div>
        <h1 className="text-2xl font-bold text-gray-900">Dokumente importieren</h1>
        <p className="mt-1 text-gray-500">
          Laden Sie Ihre bestehenden Compliance-Dokumente hoch. Unsere KI analysiert sie und identifiziert Luecken fuer KI-Compliance.
        </p>
      </div>

      {/* Upload Zone */}
      <UploadZone onFilesAdded={handleFilesAdded} isDisabled={isAnalyzing} />

      {/* File List */}
      {files.length > 0 && (
        <div className="space-y-4">
          <div className="flex items-center justify-between">
            <h2 className="font-semibold text-gray-900">{files.length} Dokument(e)</h2>
            {!isAnalyzing && !analysisResult && (
              <button onClick={() => setFiles([])} className="text-sm text-gray-500 hover:text-red-500">
                Alle entfernen
              </button>
            )}
          </div>
          <div className="space-y-3">
            {files.map(file => (
              <FileItem key={file.id} file={file} onTypeChange={handleTypeChange} onRemove={handleRemove} />
            ))}
          </div>
        </div>
      )}

      {/* Analyze Button */}
      {files.length > 0 && !analysisResult && (
        <div className="flex justify-center">
          <button
            onClick={handleAnalyze}
            disabled={isAnalyzing}
            className="px-8 py-3 bg-gradient-to-r from-purple-600 to-indigo-600 text-white font-medium rounded-xl hover:from-purple-700 hover:to-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed transition-all flex items-center gap-2"
          >
            {isAnalyzing ? (
              <>
                <svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
                </svg>
                Analysiere Dokumente...
              </>
            ) : (
              <>
                <svg className="w-5 h-5" 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>
                Gap-Analyse starten
              </>
            )}
          </button>
        </div>
      )}

      {/* Analysis Result */}
      {analysisResult && <GapAnalysisPreview analysis={analysisResult} />}

      {/* Continue Button */}
      {analysisResult && (
        <div className="flex justify-between items-center pt-4 border-t border-gray-200">
          <p className="text-sm text-gray-500">
            Die Gap-Analyse wurde gespeichert. Sie koennen jetzt mit dem Compliance-Assessment fortfahren.
          </p>
          <button
            onClick={() => router.push('/sdk/screening')}
            className="px-6 py-2.5 bg-green-600 text-white font-medium rounded-lg hover:bg-green-700 transition-colors flex items-center gap-2"
          >
            Weiter zum Screening
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
            </svg>
          </button>
        </div>
      )}

      {/* Import History */}
      <ImportHistory
        importHistory={importHistory}
        historyLoading={historyLoading}
        onDelete={handleDeleteHistory}
      />
    </div>
  )
}