'use client'

import React from 'react'
import type { VocabWorksheetHook } from '../types'
import { formatFileSize } from '../constants'

export function UploadScreen({ h }: { h: VocabWorksheetHook }) {
  const { isDark, glassCard, glassInput } = h

  return (
    <div className="space-y-6">
      {/* Existing Sessions */}
      {h.existingSessions.length > 0 && (
        <div className={`${glassCard} rounded-2xl p-6`}>
          <h2 className={`text-lg font-semibold mb-4 ${isDark ? 'text-white' : 'text-slate-900'}`}>
            Vorhandene Sessions fortsetzen
          </h2>
          {h.isLoadingSessions ? (
            <div className="flex items-center gap-3 py-4">
              <div className="w-5 h-5 border-2 border-purple-500 border-t-transparent rounded-full animate-spin" />
              <span className={isDark ? 'text-white/60' : 'text-slate-500'}>Lade Sessions...</span>
            </div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              {h.existingSessions.map((s) => (
                <div
                  key={s.id}
                  className={`${glassCard} p-4 rounded-xl text-left transition-all hover:shadow-lg relative group cursor-pointer ${
                    isDark ? 'hover:border-purple-400/50' : 'hover:border-purple-400'
                  }`}
                  onClick={() => h.resumeSession(s)}
                >
                  {/* Delete Button */}
                  <button
                    onClick={(e) => h.deleteSession(s.id, e)}
                    className={`absolute top-2 right-2 p-1.5 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity ${
                      isDark ? 'hover:bg-red-500/20 text-red-400' : 'hover:bg-red-100 text-red-500'
                    }`}
                    title="Session loeschen"
                  >
                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                    </svg>
                  </button>

                  <div className="flex items-start gap-3">
                    <div className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${
                      s.status === 'extracted' || s.status === 'completed'
                        ? (isDark ? 'bg-green-500/30' : 'bg-green-100')
                        : (isDark ? 'bg-white/10' : 'bg-slate-100')
                    }`}>
                      {s.status === 'extracted' || s.status === 'completed' ? (
                        <svg className="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                        </svg>
                      ) : (
                        <svg className={`w-5 h-5 ${isDark ? 'text-white/40' : 'text-slate-400'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                        </svg>
                      )}
                    </div>
                    <div className="flex-1 min-w-0">
                      <h3 className={`font-medium truncate ${isDark ? 'text-white' : 'text-slate-900'}`}>{s.name}</h3>
                      <p className={`text-sm ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
                        {s.vocabulary_count} Vokabeln
                        {s.status === 'pending' && ' • Nicht gestartet'}
                        {s.status === 'extracted' && ' • Bereit'}
                        {s.status === 'completed' && ' • Abgeschlossen'}
                      </p>
                      {s.created_at && (
                        <p className={`text-xs mt-1 ${isDark ? 'text-white/40' : 'text-slate-400'}`}>
                          {new Date(s.created_at).toLocaleDateString('de-DE', {
                            day: '2-digit',
                            month: '2-digit',
                            year: 'numeric',
                            hour: '2-digit',
                            minute: '2-digit'
                          })}
                        </p>
                      )}
                    </div>
                    <svg className={`w-5 h-5 flex-shrink-0 ${isDark ? 'text-white/30' : 'text-slate-300'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                    </svg>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      )}

      {/* Explanation */}
      <div className={`${glassCard} rounded-2xl p-6 ${isDark ? 'bg-gradient-to-br from-purple-500/20 to-pink-500/20' : 'bg-gradient-to-br from-purple-100/50 to-pink-100/50'}`}>
        <h2 className={`text-lg font-semibold mb-3 ${isDark ? 'text-white' : 'text-slate-900'}`}>
          {h.existingSessions.length > 0 ? 'Oder neue Session starten:' : 'So funktioniert es:'}
        </h2>
        <ol className={`space-y-2 ${isDark ? 'text-white/70' : 'text-slate-600'}`}>
          {['Dokument (Bild oder PDF) auswaehlen', 'Vorschau pruefen und Session benennen', 'Bei PDFs: Seiten auswaehlen die verarbeitet werden sollen', 'KI extrahiert Vokabeln — pruefen, korrigieren, Arbeitsblatt-Typ waehlen', 'PDF herunterladen und ausdrucken'].map((text, i) => (
            <li key={i} className="flex items-start gap-2">
              <span className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0 ${isDark ? 'bg-purple-500/30 text-purple-300' : 'bg-purple-200 text-purple-700'}`}>{i + 1}</span>
              <span>{text}</span>
            </li>
          ))}
        </ol>
      </div>

      {/* Step 1: Document Selection */}
      <div className={`${glassCard} rounded-2xl p-6`}>
        <h2 className={`text-lg font-semibold mb-4 ${isDark ? 'text-white' : 'text-slate-900'}`}>
          1. Dokument auswaehlen
        </h2>

        <input ref={h.directFileInputRef} type="file" accept="image/png,image/jpeg,image/jpg,application/pdf" onChange={h.handleDirectFileSelect} className="hidden" />

        <div className="grid grid-cols-2 gap-3 mb-4">
          {/* File Upload Button */}
          <button
            onClick={() => h.directFileInputRef.current?.click()}
            className={`p-4 rounded-xl border-2 border-dashed transition-all ${
              h.directFile
                ? (isDark ? 'border-green-400/50 bg-green-500/20' : 'border-green-500 bg-green-50')
                : (isDark ? 'border-white/20 hover:border-purple-400/50' : 'border-slate-300 hover:border-purple-500')
            }`}
          >
            {h.directFile ? (
              <div className="flex items-center gap-3">
                <span className="text-2xl">{h.directFile.type === 'application/pdf' ? '📄' : '🖼️'}</span>
                <div className="text-left flex-1 min-w-0">
                  <p className={`font-medium truncate ${isDark ? 'text-white' : 'text-slate-900'}`}>{h.directFile.name}</p>
                  <p className={`text-xs ${isDark ? 'text-white/60' : 'text-slate-500'}`}>{formatFileSize(h.directFile.size)}</p>
                </div>
                <svg className="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                </svg>
              </div>
            ) : (
              <div className={`text-center ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
                <span className="text-2xl block mb-1">📁</span>
                <span className="text-sm">Datei auswaehlen</span>
              </div>
            )}
          </button>

          {/* QR Code Upload Button */}
          <button
            onClick={() => h.setShowQRModal(true)}
            className={`p-4 rounded-xl border-2 border-dashed transition-all ${
              h.selectedMobileFile
                ? (isDark ? 'border-green-400/50 bg-green-500/20' : 'border-green-500 bg-green-50')
                : (isDark ? 'border-white/20 hover:border-purple-400/50' : 'border-slate-300 hover:border-purple-500')
            }`}
          >
            {h.selectedMobileFile ? (
              <div className="flex items-center gap-3">
                <span className="text-2xl">{h.selectedMobileFile.type.startsWith('image/') ? '🖼️' : '📄'}</span>
                <div className="text-left flex-1 min-w-0">
                  <p className={`font-medium truncate text-sm ${isDark ? 'text-white' : 'text-slate-900'}`}>{h.selectedMobileFile.name}</p>
                  <p className={`text-xs ${isDark ? 'text-white/60' : 'text-slate-500'}`}>vom Handy</p>
                </div>
                <svg className="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                </svg>
              </div>
            ) : (
              <div className={`text-center ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
                <span className="text-2xl block mb-1">📱</span>
                <span className="text-sm">Mit Handy scannen</span>
              </div>
            )}
          </button>
        </div>

        {/* Mobile Uploaded Files */}
        {h.mobileUploadedFiles.length > 0 && !h.directFile && (
          <>
            <div className={`text-center text-sm mb-3 ${isDark ? 'text-white/40' : 'text-slate-400'}`}>— Vom Handy hochgeladen —</div>
            <div className="space-y-2 max-h-32 overflow-y-auto mb-4">
              {h.mobileUploadedFiles.map((file) => (
                <button
                  key={file.id}
                  onClick={() => { h.setSelectedMobileFile(file); h.setDirectFile(null); h.setSelectedDocumentId(null); h.setError(null) }}
                  className={`w-full flex items-center gap-3 p-3 rounded-xl text-left transition-all ${
                    h.selectedMobileFile?.id === file.id
                      ? (isDark ? 'bg-green-500/30 border-2 border-green-400/50' : 'bg-green-100 border-2 border-green-500')
                      : (isDark ? 'bg-white/5 border-2 border-transparent hover:border-white/20' : 'bg-slate-50 border-2 border-transparent hover:border-slate-200')
                  }`}
                >
                  <span className="text-xl">{file.type.startsWith('image/') ? '🖼️' : '📄'}</span>
                  <div className="flex-1 min-w-0">
                    <p className={`font-medium truncate ${isDark ? 'text-white' : 'text-slate-900'}`}>{file.name}</p>
                    <p className={`text-xs ${isDark ? 'text-white/60' : 'text-slate-500'}`}>{formatFileSize(file.size)}</p>
                  </div>
                  {h.selectedMobileFile?.id === file.id && (
                    <svg className="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                    </svg>
                  )}
                </button>
              ))}
            </div>
          </>
        )}

        {/* Stored Documents */}
        {h.storedDocuments.length > 0 && !h.directFile && !h.selectedMobileFile && (
          <>
            <div className={`text-center text-sm mb-3 ${isDark ? 'text-white/40' : 'text-slate-400'}`}>— oder aus Ihren Dokumenten —</div>
            <div className="space-y-2 max-h-32 overflow-y-auto">
              {h.storedDocuments.map((doc) => (
                <button
                  key={doc.id}
                  onClick={() => { h.setSelectedDocumentId(doc.id); h.setDirectFile(null); h.setSelectedMobileFile(null); h.setError(null) }}
                  className={`w-full flex items-center gap-3 p-3 rounded-xl text-left transition-all ${
                    h.selectedDocumentId === doc.id
                      ? (isDark ? 'bg-purple-500/30 border-2 border-purple-400/50' : 'bg-purple-100 border-2 border-purple-500')
                      : (isDark ? 'bg-white/5 border-2 border-transparent hover:border-white/20' : 'bg-slate-50 border-2 border-transparent hover:border-slate-200')
                  }`}
                >
                  <span className="text-xl">{doc.type === 'application/pdf' ? '📄' : '🖼️'}</span>
                  <div className="flex-1 min-w-0">
                    <p className={`font-medium truncate ${isDark ? 'text-white' : 'text-slate-900'}`}>{doc.name}</p>
                    <p className={`text-xs ${isDark ? 'text-white/60' : 'text-slate-500'}`}>{formatFileSize(doc.size)}</p>
                  </div>
                  {h.selectedDocumentId === doc.id && (
                    <svg className="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                    </svg>
                  )}
                </button>
              ))}
            </div>
          </>
        )}
      </div>

      {/* Step 2: Preview + Session Name */}
      {(h.directFile || h.selectedMobileFile || h.selectedDocumentId) && (
        <div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
          {/* Document Preview */}
          <div className={`${glassCard} rounded-2xl p-6 lg:col-span-3`}>
            <div className="flex items-center justify-between mb-4">
              <h2 className={`text-lg font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>
                Vorschau
              </h2>
              <button
                onClick={() => h.setShowFullPreview(true)}
                className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-all flex items-center gap-2 ${
                  isDark ? 'bg-white/10 hover:bg-white/20 text-white' : 'bg-slate-100 hover:bg-slate-200 text-slate-700'
                }`}
              >
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7" />
                </svg>
                Originalgroesse
              </button>
            </div>
            <div className={`max-h-[60vh] overflow-auto rounded-xl border ${isDark ? 'border-white/10' : 'border-black/10'}`}>
              {h.directFile?.type.startsWith('image/') && h.directFilePreview && (
                <img src={h.directFilePreview} alt="Vorschau" className="w-full h-auto" />
              )}
              {h.directFile?.type === 'application/pdf' && h.directFilePreview && (
                <iframe src={h.directFilePreview} className="w-full border-0 rounded-xl" style={{ height: '60vh' }} />
              )}
              {h.selectedMobileFile && !h.directFile && (
                h.selectedMobileFile.type.startsWith('image/')
                  ? <img src={h.selectedMobileFile.dataUrl} alt="Vorschau" className="w-full h-auto" />
                  : <iframe src={h.selectedMobileFile.dataUrl} className="w-full border-0 rounded-xl" style={{ height: '60vh' }} />
              )}
              {h.selectedDocumentId && !h.directFile && !h.selectedMobileFile && (() => {
                const doc = h.storedDocuments.find(d => d.id === h.selectedDocumentId)
                if (!doc?.url) return <p className={`p-8 text-center ${isDark ? 'text-white/40' : 'text-slate-400'}`}>Keine Vorschau verfuegbar</p>
                return doc.type.startsWith('image/')
                  ? <img src={doc.url} alt="Vorschau" className="w-full h-auto" />
                  : <iframe src={doc.url} className="w-full border-0 rounded-xl" style={{ height: '60vh' }} />
              })()}
            </div>
          </div>

          {/* Session Name + Start */}
          <div className={`${glassCard} rounded-2xl p-6 lg:col-span-2 flex flex-col`}>
            <h2 className={`text-lg font-semibold mb-4 ${isDark ? 'text-white' : 'text-slate-900'}`}>
              2. Session benennen
            </h2>
            <input
              type="text"
              value={h.sessionName}
              onChange={(e) => { h.setSessionName(e.target.value); h.setError(null) }}
              placeholder="z.B. Englisch Klasse 7 - Unit 3"
              className={`w-full px-4 py-3 rounded-xl border ${glassInput} focus:outline-none focus:ring-2 focus:ring-purple-500 mb-4`}
              autoFocus
            />
            <p className={`text-sm mb-6 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>
              Benennen Sie die Session z.B. nach dem Schulbuch-Kapitel, damit Sie sie spaeter wiederfinden.
            </p>
            <div className="flex-1" />
            <button
              onClick={() => {
                if (!h.sessionName.trim()) {
                  h.setError('Bitte geben Sie einen Session-Namen ein (z.B. "Englisch Klasse 7 - Unit 3")')
                  return
                }
                h.startSession()
              }}
              disabled={h.isCreatingSession || !h.sessionName.trim()}
              className="w-full px-6 py-4 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-2xl font-semibold text-lg disabled:opacity-50 hover:shadow-xl hover:shadow-purple-500/30 transition-all transform hover:scale-105"
            >
              {h.isCreatingSession ? 'Verarbeite...' : 'Weiter →'}
            </button>
          </div>
        </div>
      )}
    </div>
  )
}