'use client'

import React from 'react'
import type { VocabWorksheetHook, IpaMode, SyllableMode } from '../types'
import { getApiBase } from '../constants'

export function VocabularyTab({ h }: { h: VocabWorksheetHook }) {
  const { isDark, glassCard, glassInput } = h
  const extras = h.getAllExtraColumns()
  const baseCols = 3 + extras.length
  const gridCols = `14px 32px 36px repeat(${baseCols}, 1fr) 32px`

  return (
    <div className="flex flex-col lg:flex-row gap-4" style={{ height: 'calc(100vh - 240px)', minHeight: '500px' }}>
      {/* Left: Original pages */}
      <div className={`${glassCard} rounded-2xl p-4 lg:w-1/3 flex flex-col overflow-hidden`}>
        <h2 className={`text-sm font-semibold mb-3 flex-shrink-0 ${isDark ? 'text-white/70' : 'text-slate-600'}`}>
          Original ({(() => { const pp = h.selectedPages.length > 0 ? h.selectedPages : [...new Set(h.vocabulary.map(v => (v.source_page || 1) - 1))]; return pp.length; })()} Seiten)
        </h2>
        <div className="flex-1 overflow-y-auto space-y-3">
          {(() => {
            const processedPageIndices = h.selectedPages.length > 0
              ? h.selectedPages
              : [...new Set(h.vocabulary.map(v => (v.source_page || 1) - 1))].sort((a, b) => a - b)

            const apiBase = getApiBase()
            const pagesToShow = processedPageIndices
              .filter(idx => idx >= 0)
              .map(idx => ({
                idx,
                src: h.session ? `${apiBase}/api/v1/vocab/sessions/${h.session.id}/pdf-page-image/${idx}` : null,
              }))
              .filter(t => t.src !== null) as { idx: number; src: string }[]

            if (pagesToShow.length > 0) {
              return pagesToShow.map(({ idx, src }) => (
                <div key={idx} className={`relative rounded-xl overflow-hidden border ${isDark ? 'border-white/10' : 'border-black/10'}`}>
                  <div className={`absolute top-2 left-2 px-2 py-0.5 rounded-lg text-xs font-medium z-10 ${isDark ? 'bg-black/60 text-white' : 'bg-white/90 text-slate-700'}`}>
                    S. {idx + 1}
                  </div>
                  <img src={src} alt={`Seite ${idx + 1}`} className="w-full h-auto" />
                </div>
              ))
            }
            if (h.uploadedImage) {
              return (
                <div className={`relative rounded-xl overflow-hidden border ${isDark ? 'border-white/10' : 'border-black/10'}`}>
                  <img src={h.uploadedImage} alt="Arbeitsblatt" className="w-full h-auto" />
                </div>
              )
            }
            return (
              <div className={`flex-1 flex items-center justify-center py-12 ${isDark ? 'text-white/40' : 'text-slate-400'}`}>
                <div className="text-center">
                  <svg className="w-12 h-12 mx-auto mb-2 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                  </svg>
                  <p className="text-xs">Kein Bild verfuegbar</p>
                </div>
              </div>
            )
          })()}
        </div>
      </div>

      {/* Right: Vocabulary table */}
      <div className={`${glassCard} rounded-2xl p-4 lg:w-2/3 flex flex-col overflow-hidden`}>
        <div className="flex items-center justify-between mb-3 flex-shrink-0">
          <h2 className={`text-lg font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>
            Vokabeln ({h.vocabulary.length})
          </h2>
          <div className="flex items-center gap-2">
            {/* IPA mode */}
            <select
              value={h.ipaMode}
              onChange={(e) => {
                const newIpa = e.target.value as IpaMode
                h.setIpaMode(newIpa)
                h.reprocessPages(newIpa, h.syllableMode)
              }}
              className={`px-2 py-1.5 text-xs rounded-md border ${isDark ? 'border-white/20 bg-white/10 text-white' : 'border-gray-200 bg-white text-gray-600'}`}
              title="Lautschrift (IPA)"
            >
              <option value="none">IPA: Aus</option>
              <option value="auto">IPA: Auto</option>
              <option value="en">IPA: nur EN</option>
              <option value="de">IPA: nur DE</option>
              <option value="all">IPA: Alle</option>
            </select>
            {/* Syllable mode */}
            <select
              value={h.syllableMode}
              onChange={(e) => {
                const newSyl = e.target.value as SyllableMode
                h.setSyllableMode(newSyl)
                h.reprocessPages(h.ipaMode, newSyl)
              }}
              className={`px-2 py-1.5 text-xs rounded-md border ${isDark ? 'border-white/20 bg-white/10 text-white' : 'border-gray-200 bg-white text-gray-600'}`}
              title="Silbentrennung"
            >
              <option value="none">Silben: Aus</option>
              <option value="auto">Silben: Original</option>
              <option value="en">Silben: nur EN</option>
              <option value="de">Silben: nur DE</option>
              <option value="all">Silben: Alle</option>
            </select>
            <button
              onClick={() => h.reprocessPages(h.ipaMode, h.syllableMode)}
              className={`px-3 py-2 rounded-xl text-sm font-medium transition-colors ${isDark ? 'bg-orange-500/20 hover:bg-orange-500/30 text-orange-200 border border-orange-500/30' : 'bg-orange-50 hover:bg-orange-100 text-orange-700 border border-orange-200'}`}
              title="Seiten erneut verarbeiten (OCR + Zeilenmerge)"
            >
              Neu verarbeiten
            </button>
            <button onClick={h.saveVocabulary} className={`px-4 py-2 rounded-xl text-sm font-medium transition-colors ${isDark ? 'bg-white/10 hover:bg-white/20 text-white' : 'bg-slate-100 hover:bg-slate-200 text-slate-900'}`}>
              Speichern
            </button>
            <button onClick={() => h.setActiveTab('worksheet')} className="px-4 py-2 rounded-xl text-sm font-medium bg-gradient-to-r from-purple-500 to-pink-500 text-white hover:shadow-lg transition-all">
              Weiter →
            </button>
          </div>
        </div>

        {/* OCR Quality Steps (A/B Testing) */}
        <div className={`flex items-center gap-3 mb-3 flex-shrink-0 flex-wrap ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
          <span className="text-xs font-medium">Steps:</span>
          <label className="flex items-center gap-1 text-xs cursor-pointer">
            <input type="checkbox" checked={h.ocrEnhance} onChange={(e) => h.setOcrEnhance(e.target.checked)} className="rounded" />
            CLAHE
          </label>
          <label className="flex items-center gap-1 text-xs">
            <span>MaxCols:</span>
            <select value={h.ocrMaxCols} onChange={(e) => h.setOcrMaxCols(Number(e.target.value))} className={`px-1 py-0.5 text-xs rounded border ${isDark ? 'border-white/20 bg-white/10 text-white' : 'border-gray-200 bg-white text-gray-600'}`}>
              <option value={0}>unbegrenzt</option>
              <option value={2}>2</option>
              <option value={3}>3</option>
              <option value={4}>4</option>
              <option value={5}>5</option>
            </select>
          </label>
          <label className="flex items-center gap-1 text-xs">
            <span>MinConf:</span>
            <select value={h.ocrMinConf} onChange={(e) => h.setOcrMinConf(Number(e.target.value))} className={`px-1 py-0.5 text-xs rounded border ${isDark ? 'border-white/20 bg-white/10 text-white' : 'border-gray-200 bg-white text-gray-600'}`}>
              <option value={0}>auto</option>
              <option value={20}>20</option>
              <option value={30}>30</option>
              <option value={40}>40</option>
              <option value={50}>50</option>
              <option value={60}>60</option>
            </select>
          </label>
        </div>

        {/* Error messages for failed pages */}
        {h.processingErrors.length > 0 && (
          <div className={`rounded-xl p-3 mb-3 flex-shrink-0 ${isDark ? 'bg-orange-500/20 text-orange-200 border border-orange-500/30' : 'bg-orange-100 text-orange-700 border border-orange-200'}`}>
            <div className="font-medium mb-1 text-sm">Einige Seiten konnten nicht verarbeitet werden:</div>
            <ul className="text-xs space-y-0.5">
              {h.processingErrors.map((err, idx) => (
                <li key={idx}>• {err}</li>
              ))}
            </ul>
          </div>
        )}

        {/* Processing Progress */}
        {h.currentlyProcessingPage && (
          <div className={`rounded-xl p-3 mb-3 flex-shrink-0 ${isDark ? 'bg-purple-500/20 border border-purple-500/30' : 'bg-purple-100 border border-purple-200'}`}>
            <div className="flex items-center gap-3">
              <div className={`w-4 h-4 border-2 ${isDark ? 'border-purple-300' : 'border-purple-600'} border-t-transparent rounded-full animate-spin`} />
              <div>
                <div className={`text-sm font-medium ${isDark ? 'text-purple-200' : 'text-purple-700'}`}>Verarbeite Seite {h.currentlyProcessingPage}...</div>
                <div className={`text-xs ${isDark ? 'text-purple-300/70' : 'text-purple-600'}`}>
                  {h.successfulPages.length > 0 && `${h.successfulPages.length} Seite(n) fertig • `}
                  {h.vocabulary.length} Vokabeln bisher
                </div>
              </div>
            </div>
          </div>
        )}

        {/* Success info */}
        {!h.currentlyProcessingPage && h.successfulPages.length > 0 && h.failedPages.length === 0 && (
          <div className={`rounded-xl p-2 mb-3 text-xs flex-shrink-0 ${isDark ? 'bg-green-500/20 text-green-200 border border-green-500/30' : 'bg-green-100 text-green-700 border border-green-200'}`}>
            Alle {h.successfulPages.length} Seite(n) erfolgreich verarbeitet - {h.vocabulary.length} Vokabeln insgesamt
          </div>
        )}

        {/* Partial success info */}
        {!h.currentlyProcessingPage && h.successfulPages.length > 0 && h.failedPages.length > 0 && (
          <div className={`rounded-xl p-2 mb-3 text-xs flex-shrink-0 ${isDark ? 'bg-yellow-500/20 text-yellow-200 border border-yellow-500/30' : 'bg-yellow-100 text-yellow-700 border border-yellow-200'}`}>
            {h.successfulPages.length} Seite(n) erfolgreich, {h.failedPages.length} fehlgeschlagen - {h.vocabulary.length} Vokabeln extrahiert
          </div>
        )}

        {h.vocabulary.length === 0 ? (
          <p className={`text-center py-8 ${isDark ? 'text-white/60' : 'text-slate-500'}`}>Keine Vokabeln gefunden.</p>
        ) : (
          <div className="flex flex-col flex-1 overflow-hidden">
            {/* Fixed Header */}
            <div className={`flex-shrink-0 grid gap-1 px-2 py-2 text-sm font-medium border-b items-center ${isDark ? 'border-white/10 text-white/60' : 'border-black/10 text-slate-500'}`} style={{ gridTemplateColumns: gridCols }}>
              <div>{/* insert-triangle spacer */}</div>
              <div className="flex items-center justify-center">
                <input
                  type="checkbox"
                  checked={h.vocabulary.length > 0 && h.vocabulary.every(v => v.selected)}
                  onChange={h.toggleAllSelection}
                  className="w-4 h-4 rounded border-gray-300 text-purple-600 focus:ring-purple-500 cursor-pointer"
                  title="Alle auswaehlen"
                />
              </div>
              <div>S.</div>
              <div>Englisch</div>
              <div>Deutsch</div>
              <div>Beispiel</div>
              {extras.map(col => (
                <div key={col.key} className="flex items-center gap-1 group">
                  <span className="truncate">{col.label}</span>
                  <button
                    onClick={() => {
                      const page = Object.entries(h.pageExtraColumns).find(([, cols]) => cols.some(c => c.key === col.key))
                      if (page) h.removeExtraColumn(Number(page[0]), col.key)
                    }}
                    className={`opacity-0 group-hover:opacity-100 transition-opacity ${isDark ? 'text-red-400 hover:text-red-300' : 'text-red-500 hover:text-red-600'}`}
                    title="Spalte entfernen"
                  >
                    <svg className="w-3 h-3" 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 items-center justify-center">
                <button
                  onClick={() => h.addExtraColumn(0)}
                  className={`p-0.5 rounded transition-colors ${isDark ? 'hover:bg-white/10 text-white/40 hover:text-white/70' : 'hover:bg-slate-200 text-slate-400 hover:text-slate-600'}`}
                  title="Spalte hinzufuegen"
                >
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" /></svg>
                </button>
              </div>
            </div>

            {/* Scrollable Content */}
            <div className="flex-1 overflow-y-auto">
              {h.vocabulary.map((entry, index) => (
                <React.Fragment key={entry.id}>
                  <div className={`grid gap-1 px-2 py-1 items-center ${isDark ? 'hover:bg-white/5' : 'hover:bg-black/5'}`} style={{ gridTemplateColumns: gridCols }}>
                    <button
                      onClick={() => h.addVocabularyEntry(index)}
                      className={`w-3.5 h-3.5 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity ${isDark ? 'text-purple-400' : 'text-purple-500'}`}
                      title="Zeile einfuegen"
                    >
                      <svg className="w-2.5 h-2.5" viewBox="0 0 10 10" fill="currentColor"><polygon points="0,0 10,5 0,10" /></svg>
                    </button>
                    <div className="flex items-center justify-center">
                      <input
                        type="checkbox"
                        checked={entry.selected || false}
                        onChange={() => h.toggleVocabularySelection(entry.id)}
                        className="w-4 h-4 rounded border-gray-300 text-purple-600 focus:ring-purple-500 cursor-pointer"
                      />
                    </div>
                    <div className={`flex items-center justify-center text-xs font-medium rounded ${isDark ? 'bg-white/10 text-white/60' : 'bg-black/10 text-slate-600'}`}>
                      {entry.source_page || '-'}
                    </div>
                    <input
                      type="text"
                      value={entry.english}
                      onChange={(e) => h.updateVocabularyEntry(entry.id, 'english', e.target.value)}
                      className={`px-2 py-1 rounded-lg border text-sm min-w-0 ${glassInput} focus:outline-none focus:ring-1 focus:ring-purple-500`}
                    />
                    <input
                      type="text"
                      value={entry.german}
                      onChange={(e) => h.updateVocabularyEntry(entry.id, 'german', e.target.value)}
                      className={`px-2 py-1 rounded-lg border text-sm min-w-0 ${glassInput} focus:outline-none focus:ring-1 focus:ring-purple-500`}
                    />
                    <input
                      type="text"
                      value={entry.example_sentence || ''}
                      onChange={(e) => h.updateVocabularyEntry(entry.id, 'example_sentence', e.target.value)}
                      placeholder="Beispiel"
                      className={`px-2 py-1 rounded-lg border text-sm min-w-0 ${glassInput} focus:outline-none focus:ring-1 focus:ring-purple-500`}
                    />
                    {extras.map(col => (
                      <input
                        key={col.key}
                        type="text"
                        value={(entry.extras && entry.extras[col.key]) || ''}
                        onChange={(e) => h.updateVocabularyEntry(entry.id, col.key, e.target.value)}
                        placeholder={col.label}
                        className={`px-2 py-1 rounded-lg border text-sm min-w-0 ${glassInput} focus:outline-none focus:ring-1 focus:ring-purple-500`}
                      />
                    ))}
                    <button onClick={() => h.deleteVocabularyEntry(entry.id)} className={`p-1 rounded-lg ${isDark ? 'hover:bg-red-500/20 text-red-400' : 'hover:bg-red-100 text-red-500'}`}>
                      <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>
                </React.Fragment>
              ))}
              {/* Final insert triangle */}
              <div className="px-2 py-1">
                <button
                  onClick={() => h.addVocabularyEntry()}
                  className={`w-3.5 h-3.5 flex items-center justify-center opacity-30 hover:opacity-100 transition-opacity ${isDark ? 'text-purple-400' : 'text-purple-500'}`}
                  title="Zeile am Ende einfuegen"
                >
                  <svg className="w-2.5 h-2.5" viewBox="0 0 10 10" fill="currentColor"><polygon points="0,0 10,5 0,10" /></svg>
                </button>
              </div>
            </div>

            {/* Footer */}
            <div className={`flex-shrink-0 pt-2 border-t flex items-center justify-between text-xs ${isDark ? 'border-white/10 text-white/50' : 'border-black/10 text-slate-400'}`}>
              <span>
                {h.vocabulary.length} Vokabeln
                {h.vocabulary.filter(v => v.selected).length > 0 && ` (${h.vocabulary.filter(v => v.selected).length} ausgewaehlt)`}
                {(() => {
                  const pages = [...new Set(h.vocabulary.map(v => v.source_page).filter(Boolean))].sort((a, b) => (a || 0) - (b || 0))
                  return pages.length > 1 ? ` • Seiten: ${pages.join(', ')}` : ''
                })()}
              </span>
              <button
                onClick={() => h.addVocabularyEntry()}
                className={`px-3 py-1 rounded-lg text-xs flex items-center gap-1 transition-colors ${
                  isDark
                    ? 'bg-white/10 hover:bg-white/20 text-white/70'
                    : 'bg-slate-100 hover:bg-slate-200 text-slate-600'
                }`}
              >
                <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
                </svg>
                Zeile
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}