'use client'

/**
 * Abitur-Archiv - Hauptseite
 * Zentralabitur-Materialien 2021-2025 mit erweiterter Themensuche
 */

import { useState, useEffect, useCallback } from 'react'
import {
  FileText, Filter, ChevronLeft, ChevronRight, Eye, Download, Search,
  X, Loader2, Grid, List, LayoutGrid, BarChart3, Archive
} from 'lucide-react'
import type { AbiturDokument, AbiturDocsResponse } from '@/lib/education/abitur-docs-types'
import {
  formatFileSize,
  FAECHER,
  JAHRE,
  BUNDESLAENDER,
  NIVEAUS,
  TYPEN,
} from '@/lib/education/abitur-docs-types'
import type { ViewMode, ThemaSuggestion } from '@/lib/education/abitur-archiv-types'
import { ThemenSuche } from './components/ThemenSuche'
import { DokumentCard } from './components/DokumentCard'
import { FullscreenViewer } from './components/FullscreenViewer'

export default function AbiturArchivPage() {
  // Documents state
  const [documents, setDocuments] = useState<AbiturDokument[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  // Pagination
  const [page, setPage] = useState(1)
  const [totalPages, setTotalPages] = useState(1)
  const [total, setTotal] = useState(0)
  const limit = 20

  // View mode
  const [viewMode, setViewMode] = useState<ViewMode>('grid')

  // Filters
  const [filterOpen, setFilterOpen] = useState(false)
  const [filterFach, setFilterFach] = useState<string>('')
  const [filterJahr, setFilterJahr] = useState<string>('')
  const [filterBundesland, setFilterBundesland] = useState<string>('')
  const [filterNiveau, setFilterNiveau] = useState<string>('')
  const [filterTyp, setFilterTyp] = useState<string>('')

  // Theme search
  const [searchQuery, setSearchQuery] = useState<string>('')
  const [themes, setThemes] = useState<ThemaSuggestion[]>([])

  // Modal
  const [selectedDocument, setSelectedDocument] = useState<AbiturDokument | null>(null)

  // Stats
  const [stats, setStats] = useState({ total: 0, indexed: 0, faecher: 0 })

  // Fetch documents
  const fetchDocuments = useCallback(async () => {
    setLoading(true)
    setError(null)

    const params = new URLSearchParams()
    params.set('page', page.toString())
    params.set('limit', limit.toString())
    if (filterFach) params.set('fach', filterFach)
    if (filterJahr) params.set('jahr', filterJahr)
    if (filterBundesland) params.set('bundesland', filterBundesland)
    if (filterNiveau) params.set('niveau', filterNiveau)
    if (filterTyp) params.set('typ', filterTyp)
    if (searchQuery) params.set('thema', searchQuery)

    try {
      const response = await fetch(`/api/education/abitur-archiv?${params.toString()}`)
      if (!response.ok) throw new Error('Fehler beim Laden der Dokumente')

      const data = await response.json()
      setDocuments(data.documents || [])
      setTotalPages(data.total_pages || 1)
      setTotal(data.total || 0)
      setThemes(data.themes || [])

      // Update stats
      const indexed = (data.documents || []).filter((d: AbiturDokument) => d.status === 'indexed').length
      const uniqueFaecher = new Set((data.documents || []).map((d: AbiturDokument) => d.fach)).size
      setStats({ total: data.total || 0, indexed, faecher: uniqueFaecher })
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unbekannter Fehler')
    } finally {
      setLoading(false)
    }
  }, [page, filterFach, filterJahr, filterBundesland, filterNiveau, filterTyp, searchQuery])

  useEffect(() => {
    fetchDocuments()
  }, [fetchDocuments])

  const clearFilters = () => {
    setFilterFach('')
    setFilterJahr('')
    setFilterBundesland('')
    setFilterNiveau('')
    setFilterTyp('')
    setSearchQuery('')
    setPage(1)
  }

  const handleSearch = (query: string) => {
    setSearchQuery(query)
    setPage(1)
  }

  const handleClearSearch = () => {
    setSearchQuery('')
    setPage(1)
  }

  const handleDownload = (doc: AbiturDokument) => {
    const link = window.document.createElement('a')
    link.href = doc.file_path
    link.download = doc.dateiname
    link.click()
  }

  const handleAddToKlausur = (doc: AbiturDokument) => {
    // Navigate to klausur-korrektur with document reference
    const params = new URLSearchParams()
    params.set('archiv_doc_id', doc.id)
    params.set('aufgabentyp', doc.typ === 'erwartungshorizont' ? 'vorlage' : 'aufgabe')
    window.location.href = `/education/klausur-korrektur?${params.toString()}`
  }

  const hasActiveFilters = filterFach || filterJahr || filterBundesland || filterNiveau || filterTyp || searchQuery

  return (
    <div className="min-h-screen bg-slate-50">
      {/* Header */}
      <div className="bg-white border-b border-slate-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center">
                <Archive className="w-6 h-6 text-white" />
              </div>
              <div>
                <h1 className="text-2xl font-bold text-slate-900">Abitur-Archiv</h1>
                <p className="text-sm text-slate-500">Zentralabitur-Materialien 2021-2025</p>
              </div>
            </div>

            {/* Stats */}
            <div className="hidden md:flex items-center gap-6">
              <div className="text-center">
                <div className="text-2xl font-bold text-slate-800">{stats.total}</div>
                <div className="text-xs text-slate-500">Dokumente</div>
              </div>
              <div className="text-center">
                <div className="text-2xl font-bold text-green-600">{stats.indexed}</div>
                <div className="text-xs text-slate-500">Indexiert</div>
              </div>
              <div className="text-center">
                <div className="text-2xl font-bold text-blue-600">{stats.faecher}</div>
                <div className="text-xs text-slate-500">Faecher</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Main Content */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 space-y-6">
        {/* Theme Search */}
        <div className="bg-white rounded-xl border border-slate-200 p-6">
          <ThemenSuche
            onSearch={handleSearch}
            onClear={handleClearSearch}
          />
        </div>

        {/* Filter Bar */}
        <div className="bg-white rounded-xl border border-slate-200 p-4">
          <div className="flex items-center justify-between mb-4">
            <div className="flex items-center gap-3">
              <button
                onClick={() => setFilterOpen(!filterOpen)}
                className={`px-4 py-2 rounded-lg font-medium flex items-center gap-2 transition-colors ${
                  filterOpen || hasActiveFilters
                    ? 'bg-purple-100 text-purple-700'
                    : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
                }`}
              >
                <Filter className="w-4 h-4" />
                Filter
                {hasActiveFilters && (
                  <span className="bg-purple-600 text-white text-xs px-1.5 py-0.5 rounded-full">
                    {[filterFach, filterJahr, filterBundesland, filterNiveau, filterTyp, searchQuery].filter(Boolean).length}
                  </span>
                )}
              </button>

              {hasActiveFilters && (
                <button
                  onClick={clearFilters}
                  className="text-sm text-slate-500 hover:text-slate-700 flex items-center gap-1"
                >
                  <X className="w-4 h-4" />
                  Filter zuruecksetzen
                </button>
              )}
            </div>

            <div className="flex items-center gap-3">
              {/* Results count */}
              <span className="text-sm text-slate-500">
                {total} Treffer
              </span>

              {/* View Mode Toggle */}
              <div className="flex bg-slate-100 rounded-lg p-1">
                <button
                  onClick={() => setViewMode('grid')}
                  className={`p-2 rounded-md transition-colors ${
                    viewMode === 'grid' ? 'bg-white shadow-sm text-blue-600' : 'text-slate-500 hover:text-slate-700'
                  }`}
                  title="Raster-Ansicht"
                >
                  <LayoutGrid className="w-4 h-4" />
                </button>
                <button
                  onClick={() => setViewMode('list')}
                  className={`p-2 rounded-md transition-colors ${
                    viewMode === 'list' ? 'bg-white shadow-sm text-blue-600' : 'text-slate-500 hover:text-slate-700'
                  }`}
                  title="Listen-Ansicht"
                >
                  <List className="w-4 h-4" />
                </button>
              </div>
            </div>
          </div>

          {/* Filter Dropdowns */}
          {filterOpen && (
            <div className="grid grid-cols-2 md:grid-cols-5 gap-3 pt-4 border-t border-slate-200">
              {/* Fach */}
              <div>
                <label className="block text-xs text-slate-500 mb-1">Fach</label>
                <select
                  value={filterFach}
                  onChange={(e) => { setFilterFach(e.target.value); setPage(1) }}
                  className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"
                >
                  <option value="">Alle Faecher</option>
                  {FAECHER.map(f => (
                    <option key={f.id} value={f.id}>{f.label}</option>
                  ))}
                </select>
              </div>

              {/* Jahr */}
              <div>
                <label className="block text-xs text-slate-500 mb-1">Jahr</label>
                <select
                  value={filterJahr}
                  onChange={(e) => { setFilterJahr(e.target.value); setPage(1) }}
                  className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"
                >
                  <option value="">Alle Jahre</option>
                  {JAHRE.map(j => (
                    <option key={j} value={j}>{j}</option>
                  ))}
                </select>
              </div>

              {/* Bundesland */}
              <div>
                <label className="block text-xs text-slate-500 mb-1">Bundesland</label>
                <select
                  value={filterBundesland}
                  onChange={(e) => { setFilterBundesland(e.target.value); setPage(1) }}
                  className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"
                >
                  <option value="">Alle Bundeslaender</option>
                  {BUNDESLAENDER.map(b => (
                    <option key={b.id} value={b.id}>{b.label}</option>
                  ))}
                </select>
              </div>

              {/* Niveau */}
              <div>
                <label className="block text-xs text-slate-500 mb-1">Niveau</label>
                <select
                  value={filterNiveau}
                  onChange={(e) => { setFilterNiveau(e.target.value); setPage(1) }}
                  className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"
                >
                  <option value="">Alle Niveaus</option>
                  {NIVEAUS.map(n => (
                    <option key={n.id} value={n.id}>{n.label}</option>
                  ))}
                </select>
              </div>

              {/* Typ */}
              <div>
                <label className="block text-xs text-slate-500 mb-1">Typ</label>
                <select
                  value={filterTyp}
                  onChange={(e) => { setFilterTyp(e.target.value); setPage(1) }}
                  className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"
                >
                  <option value="">Alle Typen</option>
                  {TYPEN.map(t => (
                    <option key={t.id} value={t.id}>{t.label}</option>
                  ))}
                </select>
              </div>
            </div>
          )}
        </div>

        {/* Active Search Query Display */}
        {searchQuery && (
          <div className="flex items-center gap-2 px-4 py-2 bg-blue-50 border border-blue-200 rounded-lg">
            <Search className="w-4 h-4 text-blue-600" />
            <span className="text-sm text-blue-700">
              Suche: <strong>{searchQuery}</strong>
            </span>
            <button
              onClick={handleClearSearch}
              className="ml-auto text-blue-600 hover:text-blue-800"
            >
              <X className="w-4 h-4" />
            </button>
          </div>
        )}

        {/* Document Display */}
        <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
          {loading ? (
            <div className="flex items-center justify-center py-16">
              <Loader2 className="w-8 h-8 text-blue-600 animate-spin" />
            </div>
          ) : error ? (
            <div className="text-center py-16 text-red-600">
              <p>{error}</p>
              <button
                onClick={() => fetchDocuments()}
                className="mt-2 text-sm text-blue-600 hover:underline"
              >
                Erneut versuchen
              </button>
            </div>
          ) : documents.length === 0 ? (
            <div className="text-center py-16 text-slate-500">
              <FileText className="w-12 h-12 mx-auto mb-3 opacity-50" />
              <p>Keine Dokumente gefunden</p>
              {hasActiveFilters && (
                <button
                  onClick={clearFilters}
                  className="mt-2 text-sm text-blue-600 hover:underline"
                >
                  Filter zuruecksetzen
                </button>
              )}
            </div>
          ) : viewMode === 'grid' ? (
            /* Grid View */
            <div className="p-4">
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                {documents.map((doc) => (
                  <DokumentCard
                    key={doc.id}
                    document={doc}
                    onPreview={setSelectedDocument}
                    onDownload={handleDownload}
                    onAddToKlausur={handleAddToKlausur}
                  />
                ))}
              </div>
            </div>
          ) : (
            /* List View */
            <table className="w-full text-sm">
              <thead className="bg-slate-50 border-b border-slate-200">
                <tr>
                  <th className="text-left px-4 py-3 font-medium text-slate-600">Dokument</th>
                  <th className="text-left px-4 py-3 font-medium text-slate-600">Fach</th>
                  <th className="text-center px-4 py-3 font-medium text-slate-600">Jahr</th>
                  <th className="text-center px-4 py-3 font-medium text-slate-600">Niveau</th>
                  <th className="text-center px-4 py-3 font-medium text-slate-600">Typ</th>
                  <th className="text-right px-4 py-3 font-medium text-slate-600">Groesse</th>
                  <th className="text-center px-4 py-3 font-medium text-slate-600">Status</th>
                  <th className="text-center px-4 py-3 font-medium text-slate-600">Aktion</th>
                </tr>
              </thead>
              <tbody>
                {documents.map((doc) => {
                  const fachLabel = FAECHER.find(f => f.id === doc.fach)?.label || doc.fach
                  return (
                    <tr
                      key={doc.id}
                      className="border-b border-slate-100 hover:bg-slate-50 cursor-pointer"
                      onClick={() => setSelectedDocument(doc)}
                    >
                      <td className="px-4 py-3">
                        <div className="flex items-center gap-2">
                          <FileText className="w-4 h-4 text-red-500" />
                          <span className="font-medium text-slate-900 truncate max-w-[200px]" title={doc.dateiname}>
                            {doc.dateiname}
                          </span>
                        </div>
                      </td>
                      <td className="px-4 py-3">
                        <span className="capitalize">{fachLabel}</span>
                      </td>
                      <td className="px-4 py-3 text-center">{doc.jahr}</td>
                      <td className="px-4 py-3 text-center">
                        <span className={`px-2 py-0.5 rounded-full text-xs ${
                          doc.niveau === 'eA'
                            ? 'bg-blue-100 text-blue-700'
                            : 'bg-slate-100 text-slate-700'
                        }`}>
                          {doc.niveau}
                        </span>
                      </td>
                      <td className="px-4 py-3 text-center">
                        <span className={`px-2 py-0.5 rounded-full text-xs ${
                          doc.typ === 'erwartungshorizont'
                            ? 'bg-orange-100 text-orange-700'
                            : 'bg-purple-100 text-purple-700'
                        }`}>
                          {doc.typ === 'erwartungshorizont' ? 'EWH' : 'Aufgabe'}
                        </span>
                      </td>
                      <td className="px-4 py-3 text-right text-slate-500">
                        {formatFileSize(doc.file_size)}
                      </td>
                      <td className="px-4 py-3 text-center">
                        <span className={`px-2 py-0.5 rounded-full text-xs ${
                          doc.status === 'indexed'
                            ? 'bg-green-100 text-green-700'
                            : doc.status === 'error'
                            ? 'bg-red-100 text-red-700'
                            : 'bg-yellow-100 text-yellow-700'
                        }`}>
                          {doc.status === 'indexed' ? 'Indexiert' : doc.status === 'error' ? 'Fehler' : 'Ausstehend'}
                        </span>
                      </td>
                      <td className="px-4 py-3 text-center">
                        <div className="flex items-center justify-center gap-1" onClick={(e) => e.stopPropagation()}>
                          <button
                            onClick={() => setSelectedDocument(doc)}
                            className="p-1.5 text-blue-600 hover:bg-blue-50 rounded"
                            title="Vorschau"
                          >
                            <Eye className="w-4 h-4" />
                          </button>
                          <button
                            onClick={() => handleDownload(doc)}
                            className="p-1.5 text-slate-600 hover:bg-slate-100 rounded"
                            title="Download"
                          >
                            <Download className="w-4 h-4" />
                          </button>
                        </div>
                      </td>
                    </tr>
                  )
                })}
              </tbody>
            </table>
          )}

          {/* Pagination */}
          {documents.length > 0 && (
            <div className="flex items-center justify-between px-4 py-3 border-t border-slate-200 bg-slate-50">
              <div className="text-sm text-slate-500">
                Zeige {(page - 1) * limit + 1}-{Math.min(page * limit, total)} von {total} Dokumenten
              </div>
              <div className="flex items-center gap-2">
                <button
                  onClick={() => setPage(p => Math.max(1, p - 1))}
                  disabled={page === 1}
                  className="p-2 rounded-lg hover:bg-slate-200 disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  <ChevronLeft className="w-4 h-4" />
                </button>
                <span className="text-sm text-slate-600">
                  Seite {page} von {totalPages}
                </span>
                <button
                  onClick={() => setPage(p => Math.min(totalPages, p + 1))}
                  disabled={page === totalPages}
                  className="p-2 rounded-lg hover:bg-slate-200 disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  <ChevronRight className="w-4 h-4" />
                </button>
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Fullscreen Viewer Modal */}
      <FullscreenViewer
        document={selectedDocument}
        onClose={() => setSelectedDocument(null)}
        onAddToKlausur={handleAddToKlausur}
      />
    </div>
  )
}