'use client'

import { useTheme } from '@/lib/ThemeContext'
import { DocumentSpace } from '@/components/DocumentSpace'

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

interface DocumentsTabProps {
  documents: StoredDocument[]
  onDelete: (id: string) => void
  onRename: (id: string, newName: string) => void
  setShowUploadModal: (show: boolean) => void
  setShowQRModal: (show: boolean) => void
}

export function DocumentsTab({ documents, onDelete, onRename, setShowUploadModal, setShowQRModal }: DocumentsTabProps) {
  const { isDark } = useTheme()

  return (
    <div className="space-y-6">
      {/* Upload-Optionen */}
      <div className="grid grid-cols-2 gap-6">
        <button
          onClick={() => setShowUploadModal(true)}
          className={`p-6 rounded-3xl border backdrop-blur-xl text-left transition-all hover:scale-105 ${
            isDark
              ? 'bg-white/10 border-white/20 hover:bg-white/15'
              : 'bg-white/70 border-black/10 hover:bg-white/90 shadow-lg'
          }`}
        >
          <div className={`w-14 h-14 rounded-2xl flex items-center justify-center text-3xl mb-4 ${
            isDark ? 'bg-blue-500/20' : 'bg-blue-100'
          }`}>
            📤
          </div>
          <h3 className={`text-lg font-semibold mb-2 ${isDark ? 'text-white' : 'text-slate-900'}`}>
            Direkt hochladen
          </h3>
          <p className={`text-sm ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
            Ziehen Sie Dateien hierher oder klicken Sie zum Auswaehlen
          </p>
        </button>

        <button
          onClick={() => setShowQRModal(true)}
          className={`p-6 rounded-3xl border backdrop-blur-xl text-left transition-all hover:scale-105 ${
            isDark
              ? 'bg-white/10 border-white/20 hover:bg-white/15'
              : 'bg-white/70 border-black/10 hover:bg-white/90 shadow-lg'
          }`}
        >
          <div className={`w-14 h-14 rounded-2xl flex items-center justify-center text-3xl mb-4 ${
            isDark ? 'bg-purple-500/20' : 'bg-purple-100'
          }`}>
            📱
          </div>
          <h3 className={`text-lg font-semibold mb-2 ${isDark ? 'text-white' : 'text-slate-900'}`}>
            Mit Mobiltelefon hochladen
          </h3>
          <p className={`text-sm ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
            QR-Code scannen (nur im lokalen Netzwerk)
          </p>
        </button>
      </div>

      {/* Document Space */}
      <div className={`rounded-3xl border backdrop-blur-xl p-6 ${
        isDark
          ? 'bg-white/10 border-white/20'
          : 'bg-white/70 border-black/10 shadow-lg'
      }`}>
        <h2 className={`text-xl font-semibold mb-6 ${isDark ? 'text-white' : 'text-slate-900'}`}>
          Meine Dokumente
        </h2>
        <DocumentSpace
          documents={documents}
          onDelete={onDelete}
          onRename={onRename}
          onOpen={(doc) => doc.url && window.open(doc.url, '_blank')}
        />
      </div>
    </div>
  )
}