'use client'

/**
 * Zeugnisse-Crawler Page
 * Verwaltet Zeugnis-Strukturen und -Vorlagen
 */

import { PagePurpose } from '@/components/common/PagePurpose'
import { getModuleByHref } from '@/lib/navigation'
import { FileText, Upload, Settings, Database, RefreshCw } from 'lucide-react'

export default function ZeugnisseCrawlerPage() {
  const moduleInfo = getModuleByHref('/education/zeugnisse-crawler')

  return (
    <div className="space-y-6">
      {moduleInfo && (
        <PagePurpose
          title={moduleInfo.module.name}
          purpose={moduleInfo.module.purpose}
          audience={moduleInfo.module.audience}
          collapsible={true}
          defaultCollapsed={true}
        />
      )}

      {/* Stats */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <div className="bg-white rounded-xl border border-slate-200 p-4">
          <div className="text-3xl font-bold text-blue-600">16</div>
          <div className="text-sm text-slate-500">Bundeslaender</div>
        </div>
        <div className="bg-white rounded-xl border border-slate-200 p-4">
          <div className="text-3xl font-bold text-green-600">48</div>
          <div className="text-sm text-slate-500">Zeugnis-Vorlagen</div>
        </div>
        <div className="bg-white rounded-xl border border-slate-200 p-4">
          <div className="text-3xl font-bold text-purple-600">12</div>
          <div className="text-sm text-slate-500">Schulformen</div>
        </div>
        <div className="bg-white rounded-xl border border-slate-200 p-4">
          <div className="text-3xl font-bold text-orange-600">156</div>
          <div className="text-sm text-slate-500">Felder erkannt</div>
        </div>
      </div>

      {/* Main Content */}
      <div className="bg-white rounded-xl border border-slate-200 p-6">
        <h2 className="text-lg font-semibold text-slate-900 mb-4">Zeugnis-Strukturen</h2>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {/* Upload Card */}
          <div className="border border-dashed border-slate-300 rounded-xl p-6 text-center hover:border-blue-500 hover:bg-blue-50/50 transition-colors cursor-pointer">
            <Upload className="w-10 h-10 mx-auto mb-3 text-slate-400" />
            <div className="font-medium text-slate-700">Zeugnis hochladen</div>
            <div className="text-sm text-slate-500 mt-1">PDF oder Bild</div>
          </div>

          {/* Niedersachsen */}
          <div className="border border-slate-200 rounded-xl p-4 hover:shadow-md transition-shadow">
            <div className="flex items-center gap-3 mb-3">
              <FileText className="w-8 h-8 text-blue-600" />
              <div>
                <div className="font-medium text-slate-900">Niedersachsen</div>
                <div className="text-xs text-slate-500">12 Vorlagen</div>
              </div>
            </div>
            <div className="flex flex-wrap gap-1">
              <span className="px-2 py-0.5 bg-slate-100 text-slate-600 text-xs rounded">Grundschule</span>
              <span className="px-2 py-0.5 bg-slate-100 text-slate-600 text-xs rounded">Gymnasium</span>
              <span className="px-2 py-0.5 bg-slate-100 text-slate-600 text-xs rounded">IGS</span>
            </div>
          </div>

          {/* Bayern */}
          <div className="border border-slate-200 rounded-xl p-4 hover:shadow-md transition-shadow">
            <div className="flex items-center gap-3 mb-3">
              <FileText className="w-8 h-8 text-blue-600" />
              <div>
                <div className="font-medium text-slate-900">Bayern</div>
                <div className="text-xs text-slate-500">10 Vorlagen</div>
              </div>
            </div>
            <div className="flex flex-wrap gap-1">
              <span className="px-2 py-0.5 bg-slate-100 text-slate-600 text-xs rounded">Grundschule</span>
              <span className="px-2 py-0.5 bg-slate-100 text-slate-600 text-xs rounded">Gymnasium</span>
              <span className="px-2 py-0.5 bg-slate-100 text-slate-600 text-xs rounded">Realschule</span>
            </div>
          </div>

          {/* NRW */}
          <div className="border border-slate-200 rounded-xl p-4 hover:shadow-md transition-shadow">
            <div className="flex items-center gap-3 mb-3">
              <FileText className="w-8 h-8 text-blue-600" />
              <div>
                <div className="font-medium text-slate-900">Nordrhein-Westfalen</div>
                <div className="text-xs text-slate-500">14 Vorlagen</div>
              </div>
            </div>
            <div className="flex flex-wrap gap-1">
              <span className="px-2 py-0.5 bg-slate-100 text-slate-600 text-xs rounded">Grundschule</span>
              <span className="px-2 py-0.5 bg-slate-100 text-slate-600 text-xs rounded">Gesamtschule</span>
              <span className="px-2 py-0.5 bg-slate-100 text-slate-600 text-xs rounded">Gymnasium</span>
            </div>
          </div>

          {/* Baden-Württemberg */}
          <div className="border border-slate-200 rounded-xl p-4 hover:shadow-md transition-shadow">
            <div className="flex items-center gap-3 mb-3">
              <FileText className="w-8 h-8 text-blue-600" />
              <div>
                <div className="font-medium text-slate-900">Baden-Wuerttemberg</div>
                <div className="text-xs text-slate-500">8 Vorlagen</div>
              </div>
            </div>
            <div className="flex flex-wrap gap-1">
              <span className="px-2 py-0.5 bg-slate-100 text-slate-600 text-xs rounded">Grundschule</span>
              <span className="px-2 py-0.5 bg-slate-100 text-slate-600 text-xs rounded">Gymnasium</span>
            </div>
          </div>

          {/* Weitere */}
          <div className="border border-slate-200 rounded-xl p-4 hover:shadow-md transition-shadow bg-slate-50">
            <div className="flex items-center gap-3 mb-3">
              <Database className="w-8 h-8 text-slate-400" />
              <div>
                <div className="font-medium text-slate-700">Weitere Bundeslaender</div>
                <div className="text-xs text-slate-500">4 Vorlagen</div>
              </div>
            </div>
            <div className="text-sm text-slate-500">
              Hessen, Sachsen, Berlin, Hamburg...
            </div>
          </div>
        </div>
      </div>

      {/* Crawler Section */}
      <div className="bg-white rounded-xl border border-slate-200 p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4 flex items-center gap-2">
          <RefreshCw className="w-5 h-5" />
          Crawler-Status
        </h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="border border-slate-200 rounded-lg p-4">
            <div className="flex items-center justify-between mb-2">
              <span className="font-medium">Schulportal NI</span>
              <span className="px-2 py-0.5 bg-green-100 text-green-700 text-xs rounded-full">Aktiv</span>
            </div>
            <div className="text-sm text-slate-500">Letzter Crawl: vor 2 Stunden</div>
          </div>
          <div className="border border-slate-200 rounded-lg p-4">
            <div className="flex items-center justify-between mb-2">
              <span className="font-medium">KMK Vorlagen</span>
              <span className="px-2 py-0.5 bg-green-100 text-green-700 text-xs rounded-full">Aktiv</span>
            </div>
            <div className="text-sm text-slate-500">Letzter Crawl: vor 1 Tag</div>
          </div>
        </div>
      </div>

      {/* Info Box */}
      <div className="bg-blue-50 border border-blue-200 rounded-xl p-6">
        <h3 className="font-semibold text-blue-800 flex items-center gap-2">
          <Settings className="w-5 h-5" />
          Verwandte Module
        </h3>
        <div className="mt-3 grid grid-cols-1 md:grid-cols-2 gap-4">
          <a href="/education/edu-search" className="block p-3 bg-white rounded-lg hover:shadow-md transition-shadow">
            <div className="font-medium text-slate-900">Education Search</div>
            <div className="text-sm text-slate-500">Bildungsdokumente durchsuchen</div>
          </a>
          <a href="/ai/rag-pipeline" className="block p-3 bg-white rounded-lg hover:shadow-md transition-shadow">
            <div className="font-medium text-slate-900">RAG Pipeline</div>
            <div className="text-sm text-slate-500">Dokumente indexieren</div>
          </a>
        </div>
      </div>
    </div>
  )
}