breakpilot-compliance/admin-compliance/app/sdk/control-library/page.tsx

'use client'

import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, Trash2 } from 'lucide-react'
import { EMPTY_CONTROL } from './components/helpers'
import { ControlForm } from './components/ControlForm'
import { ControlDetail } from './components/ControlDetail'
import { ReviewCompare } from './components/ReviewCompare'
import { V1CompareView } from './components/V1CompareView'
import { GeneratorModal } from './components/GeneratorModal'
import { ControlsHeader } from './components/ControlsHeader'
import { ControlListItem } from './components/ControlListItem'
import { useControlLibrary } from './components/useControlLibrary'
import { BACKEND_URL } from './components/helpers'

export default function ControlLibraryPage() {
  const lib = useControlLibrary()

  if (lib.loading && lib.controls.length === 0) {
    return (
      <div className="flex items-center justify-center h-96">
        <div className="animate-spin rounded-full h-8 w-8 border-2 border-purple-600 border-t-transparent" />
      </div>
    )
  }
  if (lib.error) {
    return <div className="flex items-center justify-center h-96"><p className="text-red-600">{lib.error}</p></div>
  }

  if (lib.mode === 'create') {
    return <ControlForm initial={EMPTY_CONTROL} onSave={lib.handleCreate} onCancel={() => lib.setMode('list')} saving={lib.saving} />
  }
  if (lib.mode === 'edit' && lib.selectedControl) {
    return (
      <ControlForm
        initial={{
          ...EMPTY_CONTROL, ...lib.selectedControl,
          risk_score: lib.selectedControl.risk_score,
          implementation_effort: lib.selectedControl.implementation_effort,
          open_anchors: lib.selectedControl.open_anchors.length > 0 ? lib.selectedControl.open_anchors : [{ framework: '', ref: '', url: '' }],
          requirements: lib.selectedControl.requirements.length > 0 ? lib.selectedControl.requirements : [''],
          test_procedure: lib.selectedControl.test_procedure.length > 0 ? lib.selectedControl.test_procedure : [''],
          evidence: lib.selectedControl.evidence.length > 0 ? lib.selectedControl.evidence : [{ type: '', description: '' }],
        }}
        onSave={lib.handleUpdate} onCancel={() => lib.setMode('detail')} saving={lib.saving}
      />
    )
  }

  if (lib.compareMode && lib.compareV1Control) {
    return (
      <V1CompareView
        v1Control={lib.compareV1Control} matches={lib.compareMatches}
        onBack={() => lib.setCompareMode(false)}
        onNavigateToControl={async (controlId: string) => {
          try {
            const res = await fetch(`${BACKEND_URL}?endpoint=control&id=${controlId}`)
            if (res.ok) { lib.setCompareMode(false); lib.setSelectedControl(await res.json()); lib.setMode('detail') }
          } catch { /* ignore */ }
        }}
      />
    )
  }

  if (lib.mode === 'detail' && lib.selectedControl) {
    const isDuplicateReview = lib.reviewMode && lib.reviewTab === 'duplicates'
    const reviewTabBar = lib.reviewMode ? (
      <div className="border-b border-gray-200 bg-white px-6 py-2 flex items-center gap-4">
        <button onClick={() => lib.switchReviewTab('duplicates')}
          className={`px-3 py-1.5 text-sm rounded-lg font-medium ${lib.reviewTab === 'duplicates' ? 'bg-amber-100 text-amber-800 border border-amber-300' : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'}`}>
          Duplikat-Verdacht ({lib.reviewDuplicates.length})
        </button>
        <button onClick={() => lib.switchReviewTab('rule3')}
          className={`px-3 py-1.5 text-sm rounded-lg font-medium ${lib.reviewTab === 'rule3' ? 'bg-purple-100 text-purple-800 border border-purple-300' : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'}`}>
          Rule 3 ohne Anchor ({lib.reviewRule3.length})
        </button>
      </div>
    ) : null

    if (isDuplicateReview) {
      return (
        <div className="flex flex-col h-full">
          {reviewTabBar}
          <div className="flex-1 overflow-hidden">
            <ReviewCompare
              ctrl={lib.selectedControl}
              onBack={() => { lib.setMode('list'); lib.setSelectedControl(null); lib.setReviewMode(false) }}
              onReview={lib.handleReview} onEdit={() => lib.setMode('edit')}
              reviewIndex={lib.reviewIndex} reviewTotal={lib.reviewItems.length}
              onReviewPrev={() => { const idx = Math.max(0, lib.reviewIndex - 1); lib.setReviewIndex(idx); lib.setSelectedControl(lib.reviewItems[idx]) }}
              onReviewNext={() => { const idx = Math.min(lib.reviewItems.length - 1, lib.reviewIndex + 1); lib.setReviewIndex(idx); lib.setSelectedControl(lib.reviewItems[idx]) }}
            />
          </div>
        </div>
      )
    }

    return (
      <div className="flex flex-col h-full">
        {reviewTabBar}
        <div className="flex-1 overflow-hidden">
          <ControlDetail
            ctrl={lib.selectedControl}
            onBack={() => { lib.setMode('list'); lib.setSelectedControl(null); lib.setReviewMode(false) }}
            onEdit={() => lib.setMode('edit')} onDelete={lib.handleDelete}
            onReview={lib.handleReview} onRefresh={lib.fullReload}
            onCompare={(ctrl, matches) => { lib.setCompareV1Control(ctrl); lib.setCompareMatches(matches); lib.setCompareMode(true) }}
            onNavigateToControl={async (controlId: string) => {
              try {
                const res = await fetch(`${BACKEND_URL}?endpoint=control&id=${controlId}`)
                if (res.ok) { lib.setSelectedControl(await res.json()); lib.setMode('detail') }
              } catch { /* ignore */ }
            }}
            reviewMode={lib.reviewMode} reviewIndex={lib.reviewIndex} reviewTotal={lib.reviewItems.length}
            onReviewPrev={() => { const idx = Math.max(0, lib.reviewIndex - 1); lib.setReviewIndex(idx); lib.setSelectedControl(lib.reviewItems[idx]) }}
            onReviewNext={() => { const idx = Math.min(lib.reviewItems.length - 1, lib.reviewIndex + 1); lib.setReviewIndex(idx); lib.setSelectedControl(lib.reviewItems[idx]) }}
          />
        </div>
      </div>
    )
  }

  // LIST VIEW
  return (
    <div className="flex flex-col h-full">
      <ControlsHeader
        frameworks={lib.frameworks} meta={lib.meta} reviewCount={lib.reviewCount}
        loading={lib.loading} bulkProcessing={lib.bulkProcessing}
        showStats={lib.showStats} processedStats={lib.processedStats}
        searchQuery={lib.searchQuery} severityFilter={lib.severityFilter}
        domainFilter={lib.domainFilter} stateFilter={lib.stateFilter}
        hideDuplicates={lib.hideDuplicates} verificationFilter={lib.verificationFilter}
        categoryFilter={lib.categoryFilter} evidenceTypeFilter={lib.evidenceTypeFilter}
        audienceFilter={lib.audienceFilter} sourceFilter={lib.sourceFilter}
        typeFilter={lib.typeFilter} sortBy={lib.sortBy}
        onSearchChange={lib.setSearchQuery} onSeverityChange={lib.setSeverityFilter}
        onDomainChange={lib.setDomainFilter} onStateChange={lib.setStateFilter}
        onHideDuplicatesChange={lib.setHideDuplicates} onVerificationChange={lib.setVerificationFilter}
        onCategoryChange={lib.setCategoryFilter} onEvidenceTypeChange={lib.setEvidenceTypeFilter}
        onAudienceChange={lib.setAudienceFilter} onSourceChange={lib.setSourceFilter}
        onTypeChange={lib.setTypeFilter}
        onSortChange={v => lib.setSortBy(v as 'id' | 'newest' | 'oldest' | 'source')}
        onRefresh={() => { lib.loadControls(); lib.loadMeta(); lib.loadFrameworks(); lib.loadReviewCount() }}
        onEnterReviewMode={lib.enterReviewMode} onBulkReject={lib.handleBulkReject}
        onToggleStats={() => { lib.setShowStats(!lib.showStats); if (!lib.showStats) lib.loadProcessedStats() }}
        onOpenGenerator={() => lib.setShowGenerator(true)} onCreateNew={() => lib.setMode('create')}
      />

      {lib.showGenerator && (
        <GeneratorModal onClose={() => lib.setShowGenerator(false)} onComplete={() => lib.fullReload()} />
      )}

      <div className="px-6 py-2 bg-gray-50 border-b border-gray-200 flex items-center justify-between text-xs text-gray-500">
        <div className="flex items-center gap-3">
          <span>
            {lib.totalCount} Controls gefunden
            {lib.totalCount !== (lib.meta?.total ?? lib.totalCount) && ` (von ${lib.meta?.total} gesamt)`}
            {lib.loading && <span className="ml-2 text-purple-500">Lade...</span>}
          </span>
          {lib.stateFilter && ['needs_review', 'too_close', 'duplicate'].includes(lib.stateFilter) && lib.totalCount > 0 && (
            <button onClick={() => lib.handleBulkReject(lib.stateFilter)} disabled={lib.bulkProcessing}
              className="flex items-center gap-1 px-2 py-1 text-xs text-white bg-red-600 rounded hover:bg-red-700 disabled:opacity-50">
              <Trash2 className="w-3 h-3" />
              {lib.bulkProcessing ? '...' : `Alle ${lib.totalCount} ablehnen`}
            </button>
          )}
        </div>
        <span>Seite {lib.currentPage} von {lib.totalPages}</span>
      </div>

      <div className="flex-1 overflow-y-auto p-6">
        <div className="space-y-3">
          {lib.controls.map((ctrl, idx) => (
            <ControlListItem
              key={ctrl.control_id} ctrl={ctrl} sortBy={lib.sortBy}
              prevSource={idx > 0 ? (lib.controls[idx - 1].source_citation?.source || 'Ohne Quelle') : null}
              onClick={() => { lib.setSelectedControl(ctrl); lib.setMode('detail') }}
            />
          ))}
          {lib.controls.length === 0 && !lib.loading && (
            <div className="text-center py-12 text-gray-400 text-sm">
              {lib.totalCount === 0 && !lib.debouncedSearch && !lib.severityFilter && !lib.domainFilter
                ? 'Noch keine Controls vorhanden. Klicke auf "Neues Control" um zu starten.'
                : 'Keine Controls gefunden.'}
            </div>
          )}
        </div>

        {lib.totalPages > 1 && (
          <div className="flex items-center justify-center gap-2 mt-6 pb-4">
            <button onClick={() => lib.setCurrentPage(1)} disabled={lib.currentPage === 1}
              className="p-2 text-gray-500 hover:text-purple-600 disabled:opacity-30 disabled:cursor-not-allowed" title="Erste Seite">
              <ChevronsLeft className="w-4 h-4" />
            </button>
            <button onClick={() => lib.setCurrentPage(p => Math.max(1, p - 1))} disabled={lib.currentPage === 1}
              className="p-2 text-gray-500 hover:text-purple-600 disabled:opacity-30 disabled:cursor-not-allowed" title="Vorherige Seite">
              <ChevronLeft className="w-4 h-4" />
            </button>
            {Array.from({ length: lib.totalPages }, (_, i) => i + 1)
              .filter(p => p === 1 || p === lib.totalPages || Math.abs(p - lib.currentPage) <= 2)
              .reduce<(number | 'dots')[]>((acc, p, i, arr) => {
                if (i > 0 && p - (arr[i - 1] as number) > 1) acc.push('dots')
                acc.push(p); return acc
              }, [])
              .map((p, i) => p === 'dots' ? (
                <span key={`dots-${i}`} className="px-1 text-gray-400">...</span>
              ) : (
                <button key={p} onClick={() => lib.setCurrentPage(p as number)}
                  className={`w-8 h-8 text-sm rounded-lg ${lib.currentPage === p ? 'bg-purple-600 text-white' : 'text-gray-600 hover:bg-purple-50 hover:text-purple-600'}`}>
                  {p}
                </button>
              ))}
            <button onClick={() => lib.setCurrentPage(p => Math.min(lib.totalPages, p + 1))} disabled={lib.currentPage === lib.totalPages}
              className="p-2 text-gray-500 hover:text-purple-600 disabled:opacity-30 disabled:cursor-not-allowed" title="Naechste Seite">
              <ChevronRight className="w-4 h-4" />
            </button>
            <button onClick={() => lib.setCurrentPage(lib.totalPages)} disabled={lib.currentPage === lib.totalPages}
              className="p-2 text-gray-500 hover:text-purple-600 disabled:opacity-30 disabled:cursor-not-allowed" title="Letzte Seite">
              <ChevronsRight className="w-4 h-4" />
            </button>
          </div>
        )}
      </div>
    </div>
  )
}