'use client'

import { QRCodeUpload, UploadedFile } from '@/components/QRCodeUpload'
import { GlassCard } from './GlassCard'

// =============================================================================
// Direct Upload Modal
// =============================================================================

interface DirectUploadModalProps {
  isDark: boolean
  isDragging: boolean
  uploadedFiles: File[]
  isUploading: boolean
  error: string | null
  onDragOver: (e: React.DragEvent) => void
  onDragLeave: (e: React.DragEvent) => void
  onDrop: (e: React.DragEvent) => void
  onFileSelect: (e: React.ChangeEvent<HTMLInputElement>) => void
  onRemoveFile: (idx: number) => void
  onUpload: () => void
  onClose: () => void
}

export function DirectUploadModal({
  isDark, isDragging, uploadedFiles, isUploading, error,
  onDragOver, onDragLeave, onDrop, onFileSelect, onRemoveFile, onUpload, onClose
}: DirectUploadModalProps) {
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={onClose} />
      <GlassCard className="relative w-full max-w-lg" size="lg" delay={0} isDark={isDark}>
        <h2 className={`text-xl font-bold mb-4 ${isDark ? 'text-white' : 'text-slate-900'}`}>Arbeiten hochladen</h2>
        <p className={`mb-4 ${isDark ? 'text-white/60' : 'text-slate-600'}`}>
          Ziehen Sie eingescannte Klausuren hierher oder klicken Sie zum Auswaehlen.
        </p>

        {error && (
          <div className="mb-4 p-3 rounded-lg bg-red-500/20 border border-red-500/30 text-red-300 text-sm">{error}</div>
        )}

        <div
          onDragOver={onDragOver} onDragLeave={onDragLeave} onDrop={onDrop}
          className={`relative p-8 rounded-2xl border-2 border-dashed transition-colors ${
            isDragging ? 'border-purple-400 bg-purple-500/10'
              : isDark ? 'border-white/20 hover:border-white/40' : 'border-slate-300 hover:border-slate-400'
          }`}
        >
          <input type="file" accept=".pdf,image/*" multiple onChange={onFileSelect}
            className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" />
          <div className="text-center">
            <svg className={`w-12 h-12 mx-auto mb-4 ${isDark ? 'text-white/40' : 'text-slate-400'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
            </svg>
            <p className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>
              {isDragging ? 'Dateien hier ablegen' : 'Dateien hierher ziehen'}
            </p>
            <p className={`text-sm mt-1 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>PDF oder Bilder (JPG, PNG)</p>
          </div>
        </div>

        {uploadedFiles.length > 0 && (
          <div className="mt-4 space-y-2">
            <p className={`text-sm font-medium ${isDark ? 'text-white/60' : 'text-slate-600'}`}>
              {uploadedFiles.length} Datei(en) ausgewaehlt:
            </p>
            <div className="max-h-32 overflow-y-auto space-y-1">
              {uploadedFiles.map((file, idx) => (
                <div key={idx} className={`flex items-center justify-between p-2 rounded-lg ${isDark ? 'bg-white/5' : 'bg-slate-100'}`}>
                  <span className={`text-sm truncate ${isDark ? 'text-white/80' : 'text-slate-700'}`}>{file.name}</span>
                  <button onClick={() => onRemoveFile(idx)} className="text-red-400 hover:text-red-300">
                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                    </svg>
                  </button>
                </div>
              ))}
            </div>
          </div>
        )}

        <div className="flex gap-3 mt-6">
          <button onClick={onClose}
            className={`flex-1 px-4 py-3 rounded-xl transition-colors ${isDark ? 'bg-white/10 text-white hover:bg-white/20' : 'bg-slate-200 text-slate-700 hover:bg-slate-300'}`}>
            Abbrechen
          </button>
          <button onClick={onUpload} disabled={uploadedFiles.length === 0 || isUploading}
            className="flex-1 px-4 py-3 rounded-xl bg-gradient-to-r from-purple-500 to-pink-500 text-white font-semibold hover:shadow-lg hover:shadow-purple-500/30 transition-all disabled:opacity-50">
            {isUploading ? 'Hochladen...' : `${uploadedFiles.length} Arbeiten hochladen`}
          </button>
        </div>
      </GlassCard>
    </div>
  )
}

// =============================================================================
// EH Upload Modal
// =============================================================================

interface EHUploadModalProps {
  isDark: boolean
  isDragging: boolean
  ehFile: File | null
  isUploading: boolean
  onDragOver: (e: React.DragEvent) => void
  onDragLeave: (e: React.DragEvent) => void
  onDrop: (e: React.DragEvent) => void
  onFileSelect: (e: React.ChangeEvent<HTMLInputElement>) => void
  onRemoveFile: () => void
  onUpload: () => void
  onClose: () => void
}

export function EHUploadModal({
  isDark, isDragging, ehFile, isUploading,
  onDragOver, onDragLeave, onDrop, onFileSelect, onRemoveFile, onUpload, onClose
}: EHUploadModalProps) {
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={onClose} />
      <GlassCard className="relative w-full max-w-lg" size="lg" delay={0} isDark={isDark}>
        <h2 className={`text-xl font-bold mb-4 ${isDark ? 'text-white' : 'text-slate-900'}`}>Erwartungshorizont hochladen</h2>
        <p className={`mb-6 ${isDark ? 'text-white/60' : 'text-slate-600'}`}>
          Laden Sie einen eigenen Erwartungshorizont fuer Vorabitur-Klausuren hoch.
        </p>

        <div
          onDragOver={onDragOver} onDragLeave={onDragLeave} onDrop={onDrop}
          className={`relative p-8 rounded-2xl border-2 border-dashed transition-colors ${
            isDragging ? 'border-orange-400 bg-orange-500/10'
              : isDark ? 'border-white/20 hover:border-white/40' : 'border-slate-300 hover:border-slate-400'
          }`}
        >
          <input type="file" accept=".pdf,.docx,.doc" onChange={onFileSelect}
            className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" />
          <div className="text-center">
            <svg className={`w-12 h-12 mx-auto mb-4 ${isDark ? 'text-white/40' : 'text-slate-400'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
            </svg>
            <p className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>
              {ehFile ? ehFile.name : 'EH-Datei hierher ziehen'}
            </p>
            <p className={`text-sm mt-1 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>PDF oder Word-Dokument</p>
          </div>
        </div>

        {ehFile && (
          <div className={`mt-4 flex items-center justify-between p-3 rounded-lg ${isDark ? 'bg-white/5' : 'bg-slate-100'}`}>
            <div className="flex items-center gap-3">
              <svg className="w-6 h-6 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
              </svg>
              <span className={`text-sm truncate ${isDark ? 'text-white/80' : 'text-slate-700'}`}>{ehFile.name}</span>
            </div>
            <button onClick={onRemoveFile} className="text-red-400 hover:text-red-300">
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
        )}

        <div className="flex gap-3 mt-6">
          <button onClick={onClose}
            className={`flex-1 px-4 py-3 rounded-xl transition-colors ${isDark ? 'bg-white/10 text-white hover:bg-white/20' : 'bg-slate-200 text-slate-700 hover:bg-slate-300'}`}>
            Abbrechen
          </button>
          <button onClick={onUpload} disabled={!ehFile || isUploading}
            className="flex-1 px-4 py-3 rounded-xl bg-gradient-to-r from-orange-500 to-red-500 text-white font-semibold hover:shadow-lg hover:shadow-orange-500/30 transition-all disabled:opacity-50">
            {isUploading ? 'Hochladen...' : 'EH hochladen'}
          </button>
        </div>
      </GlassCard>
    </div>
  )
}

// =============================================================================
// QR Code Modal
// =============================================================================

interface QRCodeModalProps {
  isDark: boolean
  sessionId: string
  onClose: () => void
  onFileUploaded?: (file: UploadedFile) => void
}

export function QRCodeModal({ isDark, sessionId, onClose, onFileUploaded }: QRCodeModalProps) {
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={onClose} />
      <div className={`relative w-full max-w-md rounded-3xl ${isDark ? 'bg-slate-900' : 'bg-white'}`}>
        <QRCodeUpload sessionId={sessionId} onClose={onClose} onFileUploaded={onFileUploaded} />
      </div>
    </div>
  )
}