'use client'

import { useTheme } from '@/lib/ThemeContext'
import { DocumentUpload } from '@/components/DocumentUpload'
import { QRCodeUpload } from '@/components/QRCodeUpload'

interface StoredDocument {
  id: string
  name: string
  type: string
  size: number
  uploadedAt: Date
  url?: string
}

interface UploadModalProps {
  documents: StoredDocument[]
  onUploadComplete: (docs: any[]) => void
  onClose: () => void
  onGoToDocuments: () => void
}

export function UploadModal({ documents, onUploadComplete, onClose, onGoToDocuments }: UploadModalProps) {
  const { isDark } = useTheme()

  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-2xl rounded-3xl border p-6 max-h-[90vh] overflow-y-auto ${
        isDark
          ? 'bg-slate-900 border-white/20'
          : 'bg-white border-slate-200 shadow-2xl'
      }`}>
        <div className="flex items-center justify-between mb-6">
          <h2 className={`text-xl font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>
            Dokumente hochladen
          </h2>
          <button
            onClick={onClose}
            className={`p-2 rounded-lg ${isDark ? 'hover:bg-white/10' : 'hover:bg-slate-100'}`}
          >
            <svg className={`w-5 h-5 ${isDark ? 'text-white/60' : 'text-slate-400'}`} 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>
        <DocumentUpload
          onUploadComplete={(docs) => {
            onUploadComplete(docs)
          }}
        />
        {/* Aktions-Buttons */}
        <div className={`mt-6 pt-6 border-t flex justify-between items-center ${
          isDark ? 'border-white/10' : 'border-slate-200'
        }`}>
          <p className={`text-sm ${isDark ? 'text-white/50' : 'text-slate-500'}`}>
            {documents.length > 0 ? `${documents.length} Dokument${documents.length !== 1 ? 'e' : ''} gespeichert` : 'Noch keine Dokumente'}
          </p>
          <div className="flex gap-3">
            <button
              onClick={onClose}
              className={`px-4 py-2 rounded-xl text-sm font-medium ${
                isDark ? 'text-white/60 hover:text-white' : 'text-slate-500 hover:text-slate-700'
              }`}
            >
              Schliessen
            </button>
            <button
              onClick={onGoToDocuments}
              className="px-4 py-2 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-xl text-sm font-medium hover:shadow-lg transition-all"
            >
              Zu meinen Dokumenten
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}

interface QRModalProps {
  sessionId: string
  onClose: () => void
}

export function QRModal({ sessionId, onClose }: QRModalProps) {
  const { isDark } = useTheme()

  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}
        />
      </div>
    </div>
  )
}