'use client'

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

import { Search, X, Archive } from 'lucide-react'
import { ThemenSuche } from './components/ThemenSuche'
import { FullscreenViewer } from './components/FullscreenViewer'
import { useAbiturArchiv } from './_components/useAbiturArchiv'
import { FilterBar } from './_components/FilterBar'
import { DocumentDisplay } from './_components/DocumentDisplay'

export default function AbiturArchivPage() {
  const {
    documents,
    loading,
    error,
    page,
    setPage,
    totalPages,
    total,
    limit,
    viewMode,
    setViewMode,
    filterOpen,
    setFilterOpen,
    filterFach,
    setFilterFach,
    filterJahr,
    setFilterJahr,
    filterBundesland,
    setFilterBundesland,
    filterNiveau,
    setFilterNiveau,
    filterTyp,
    setFilterTyp,
    searchQuery,
    selectedDocument,
    setSelectedDocument,
    stats,
    clearFilters,
    handleSearch,
    handleClearSearch,
    handleDownload,
    handleAddToKlausur,
    hasActiveFilters,
    fetchDocuments,
  } = useAbiturArchiv()

  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>

        <FilterBar
          filterOpen={filterOpen}
          onToggleFilter={() => setFilterOpen(!filterOpen)}
          hasActiveFilters={hasActiveFilters}
          onClearFilters={clearFilters}
          total={total}
          viewMode={viewMode}
          onViewModeChange={setViewMode}
          filterFach={filterFach}
          filterJahr={filterJahr}
          filterBundesland={filterBundesland}
          filterNiveau={filterNiveau}
          filterTyp={filterTyp}
          onFachChange={setFilterFach}
          onJahrChange={setFilterJahr}
          onBundeslandChange={setFilterBundesland}
          onNiveauChange={setFilterNiveau}
          onTypChange={setFilterTyp}
          onResetPage={() => setPage(1)}
          searchQuery={searchQuery}
        />

        {/* 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>
        )}

        <DocumentDisplay
          documents={documents}
          loading={loading}
          error={error}
          viewMode={viewMode}
          hasActiveFilters={hasActiveFilters}
          onClearFilters={clearFilters}
          onSelectDocument={setSelectedDocument}
          onDownload={handleDownload}
          onAddToKlausur={handleAddToKlausur}
          onRetry={fetchDocuments}
          page={page}
          totalPages={totalPages}
          total={total}
          limit={limit}
          onPageChange={setPage}
        />
      </div>

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