'use client'

/**
 * RAG & Legal Corpus Management
 *
 * Verwaltet das Legal Corpus RAG System fuer Compliance.
 * Zeigt Status aller 19 Regulierungen, Chunks und ermoeglicht Suche.
 */

import React from 'react'
import Link from 'next/link'
import { PagePurpose } from '@/components/common/PagePurpose'
import { AIModuleSidebarResponsive } from '@/components/ai/AIModuleSidebar'
import { REGULATIONS_IN_RAG } from './rag-constants'
import { ChunkBrowserQA } from './components/ChunkBrowserQA'
import { useRAGPage } from './_hooks/useRAGPage'
import {
  REGULATIONS,
  COLLECTION_TOTALS,
  API_PROXY,
  TABS,
} from './rag-data'

import { OverviewTab } from './_components/OverviewTab'
import { RegulationsTab } from './_components/RegulationsTab'
import { MapTab } from './_components/MapTab'
import { SearchTab } from './_components/SearchTab'
import { DataTab } from './_components/DataTab'
import { IngestionTab } from './_components/IngestionTab'
import { PipelineTab } from './_components/PipelineTab'

export default function RAGPage() {
  const hook = useRAGPage()
  const { activeTab, setActiveTab, dsfaLoading, dsfaStatus, dsfaSources } = hook

  return (
    <div className="min-h-screen bg-slate-50">
      {/* Header */}
      <div className="bg-white border-b px-6 py-4">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-2xl font-bold text-slate-900">Daten & RAG</h1>
            <p className="text-slate-600">Legal Corpus Management fuer Compliance</p>
          </div>
          <Link
            href="/ai"
            className="flex items-center gap-2 text-slate-600 hover:text-slate-800"
          >
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
            </svg>
            KI & Automatisierung
          </Link>
        </div>
      </div>

      <div className="p-6">
        {/* Page Purpose */}
        <PagePurpose
          title="Daten & RAG"
          purpose={`Verwalten und durchsuchen Sie 7 RAG-Collections mit ${REGULATIONS.length} Regulierungen (${Object.keys(REGULATIONS_IN_RAG).length} im RAG). Legal Corpus, DSFA Corpus (70+ Quellen), NiBiS EH (Bildungsinhalte) und Legal Templates. Teil der KI-Daten-Pipeline fuer Compliance und Klausur-Korrektur.`}
          audience={['DSB', 'Compliance Officer', 'Entwickler']}
          gdprArticles={['§5 UrhG (Amtliche Werke)', 'Art. 5 DSGVO (Rechenschaftspflicht)']}
          architecture={{
            services: ['klausur-service (Python)', 'embedding-service (BGE-M3)', 'Qdrant (Vector DB)'],
            databases: ['Qdrant: bp_legal_corpus, bp_dsfa_corpus, bp_nibis_eh, bp_legal_templates'],
          }}
          relatedPages={[
            { name: 'RAG Pipeline', href: '/ai/rag-pipeline', description: 'Neue Dokumente indexieren' },
            { name: 'Klausur-Korrektur', href: '/ai/klausur-korrektur', description: 'RAG-Suche nutzen' },
            { name: 'OCR-Labeling', href: '/ai/ocr-labeling', description: 'Ground Truth erstellen' },
            { name: 'Compliance Hub', href: '/sdk/compliance-hub', description: 'Compliance-Dashboard' },
          ]}
        />

        {/* AI Module Sidebar - Desktop: Fixed, Mobile: FAB + Drawer */}
        <AIModuleSidebarResponsive currentModule="rag" />

        {/* RAG Collections Stats */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
          <div className="bg-white rounded-xl p-4 border border-slate-200">
            <p className="text-xs font-medium text-blue-600 uppercase mb-1">Legal Corpus</p>
            <p className="text-2xl font-bold text-slate-900">{COLLECTION_TOTALS.total_legal.toLocaleString()}</p>
            <p className="text-xs text-slate-500">Chunks &middot; {Object.keys(REGULATIONS_IN_RAG).length}/{REGULATIONS.length} im RAG</p>
          </div>
          <div className="bg-white rounded-xl p-4 border border-slate-200">
            <p className="text-xs font-medium text-purple-600 uppercase mb-1">DSFA Corpus</p>
            <p className="text-2xl font-bold text-slate-900">{dsfaLoading ? '-' : (dsfaStatus?.total_chunks || 0).toLocaleString()}</p>
            <p className="text-xs text-slate-500">Chunks &middot; {dsfaSources.length || '~70'} Quellen</p>
          </div>
          <div className="bg-white rounded-xl p-4 border border-slate-200">
            <p className="text-xs font-medium text-emerald-600 uppercase mb-1">NiBiS EH</p>
            <p className="text-2xl font-bold text-slate-900">7.996</p>
            <p className="text-xs text-slate-500">Chunks &middot; Bildungs-Erwartungshorizonte</p>
          </div>
          <div className="bg-white rounded-xl p-4 border border-slate-200">
            <p className="text-xs font-medium text-orange-600 uppercase mb-1">Legal Templates</p>
            <p className="text-2xl font-bold text-slate-900">7.689</p>
            <p className="text-xs text-slate-500">Chunks &middot; Dokumentvorlagen</p>
          </div>
        </div>

        {/* Tabs */}
        <div className="flex gap-1 mb-6 border-b border-slate-200">
          {TABS.map((tab) => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors ${
                activeTab === tab.id
                  ? 'border-teal-600 text-teal-600'
                  : 'border-transparent text-slate-500 hover:text-slate-700'
              }`}
            >
              <span className="mr-2">{tab.icon}</span>
              {tab.name}
            </button>
          ))}
        </div>

        {/* Tab Content */}
        {activeTab === 'overview' && <OverviewTab hook={hook} />}
        {activeTab === 'regulations' && <RegulationsTab hook={hook} />}
        {activeTab === 'map' && <MapTab hook={hook} />}
        {activeTab === 'search' && <SearchTab hook={hook} />}
        {activeTab === 'chunks' && <ChunkBrowserQA apiProxy={API_PROXY} />}
        {activeTab === 'data' && <DataTab hook={hook} />}
        {activeTab === 'ingestion' && <IngestionTab hook={hook} />}
        {activeTab === 'pipeline' && <PipelineTab hook={hook} />}
      </div>
    </div>
  )
}