'use client'

/**
 * Quality & Audit Page
 *
 * Ermoeglicht Auditoren:
 * - Chunk-Suche und Stichproben
 * - Traceability: Chunk -> Requirement -> Control
 * - Dokumenten-Vollstaendigkeitspruefung
 */

import Link from 'next/link'
import { PagePurpose } from '@/components/common/PagePurpose'
import { useQualitySearch } from './_components/useQualitySearch'
import { SearchSection } from './_components/SearchSection'
import { ResultsList } from './_components/ResultsList'
import { TraceabilityPanel } from './_components/TraceabilityPanel'

export default function QualityPage() {
  const {
    searchQuery,
    setSearchQuery,
    searchResults,
    searching,
    selectedRegulation,
    setSelectedRegulation,
    topK,
    setTopK,
    selectedChunk,
    traceability,
    loadingTrace,
    handleSearch,
    loadTraceability,
    handleSampleQuery,
  } = useQualitySearch()

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
            Qualitaet & Audit
          </h1>
          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
            Stichproben und Traceability fuer Compliance-Auditoren
          </p>
        </div>
        <Link
          href="/ai/rag"
          className="text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400"
        >
          ← Zurueck zu RAG
        </Link>
      </div>

      <PagePurpose
        title="Audit-Werkzeuge"
        purpose="Pruefen Sie die Qualitaet der Compliance-Datenbank. Suchen Sie gezielt nach Paragraphen, Saetzen oder Begriffen und verfolgen Sie, wie Anforderungen und Controls abgeleitet wurden."
        audience={['Auditoren', 'Compliance-Beauftragte', 'Qualitaetssicherung']}
        architecture={{
          services: ['klausur-service', 'embedding-service', 'qdrant'],
          databases: ['Qdrant Vector DB']
        }}
      />

      <SearchSection
        searchQuery={searchQuery}
        selectedRegulation={selectedRegulation}
        topK={topK}
        searching={searching}
        onSearchQueryChange={setSearchQuery}
        onRegulationChange={setSelectedRegulation}
        onTopKChange={setTopK}
        onSearch={handleSearch}
        onSampleQuery={handleSampleQuery}
      />

      {/* Results Grid */}
      {searchResults.length > 0 && (
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <ResultsList
            results={searchResults}
            selectedChunk={selectedChunk}
            searchQuery={searchQuery}
            onSelect={loadTraceability}
          />
          <TraceabilityPanel
            selectedChunk={selectedChunk}
            loadingTrace={loadingTrace}
            traceability={traceability}
          />
        </div>
      )}

      {/* Empty State */}
      {!searching && searchResults.length === 0 && searchQuery && (
        <div className="bg-white dark:bg-slate-800 rounded-lg shadow p-12 text-center">
          <svg className="w-16 h-16 mx-auto mb-4 text-gray-300 dark:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
            Keine Ergebnisse gefunden
          </h3>
          <p className="text-gray-500 dark:text-gray-400">
            Versuchen Sie einen anderen Suchbegriff oder waehlen Sie eine andere Regulierung.
          </p>
        </div>
      )}

      {/* Initial State */}
      {!searching && searchResults.length === 0 && !searchQuery && (
        <div className="bg-white dark:bg-slate-800 rounded-lg shadow p-12 text-center">
          <svg className="w-16 h-16 mx-auto mb-4 text-gray-300 dark:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
          </svg>
          <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
            Bereit fuer Stichproben
          </h3>
          <p className="text-gray-500 dark:text-gray-400 max-w-md mx-auto">
            Geben Sie einen Suchbegriff ein, um Chunks zu finden. Sie koennen nach Artikeln,
            Paragraphen oder spezifischen Textpassagen suchen.
          </p>
        </div>
      )}

      {/* Audit Info */}
      <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
        <h3 className="text-sm font-medium text-blue-800 dark:text-blue-400 mb-2">
          Hinweise fuer Auditoren
        </h3>
        <ul className="text-sm text-blue-700 dark:text-blue-300 space-y-1 list-disc list-inside">
          <li>Die Suche ist semantisch - aehnliche Begriffe werden gefunden, auch wenn die exakte Formulierung abweicht</li>
          <li>Jeder Chunk entspricht einem logischen Textabschnitt aus dem Originaldokument</li>
          <li>Die Traceability zeigt, wie aus dem Originaltext Anforderungen und Controls abgeleitet wurden</li>
          <li>Klicken Sie auf &quot;Quelle oeffnen&quot;, um das Originaldokument zu pruefen</li>
        </ul>
      </div>
    </div>
  )
}