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

'use client'

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 { ControlListView } from './components/ControlListView'
import { useControlLibraryState } from './components/useControlLibraryState'
import { createCRUDHandlers } from './components/useControlCRUD'
import { BACKEND_URL } from './components/helpers'

export default function ControlLibraryPage() {
  const state = useControlLibraryState()

  const {
    handleCreate, handleUpdate, handleDelete, handleReview, handleBulkReject,
  } = createCRUDHandlers({
    selectedControl: state.selectedControl,
    fullReload: state.fullReload,
    reviewMode: state.reviewMode,
    reviewIndex: state.reviewIndex,
    reviewItems: state.reviewItems,
    setMode: state.setMode,
    setSelectedControl: state.setSelectedControl,
    setReviewMode: state.setReviewMode,
    setReviewItems: state.setReviewItems,
    setReviewIndex: state.setReviewIndex,
    setSaving: state.setSaving,
    setBulkProcessing: state.setBulkProcessing,
    reviewCount: state.reviewCount,
    totalCount: state.totalCount,
    stateFilter: state.stateFilter,
  })

  // Loading / error screens
  if (state.loading && state.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 (state.error) {
    return (
      <div className="flex items-center justify-center h-96">
        <p className="text-red-600">{state.error}</p>
      </div>
    )
  }

  // CREATE mode
  if (state.mode === 'create') {
    return <ControlForm initial={EMPTY_CONTROL} onSave={handleCreate} onCancel={() => state.setMode('list')} saving={state.saving} />
  }

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

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

  // DETAIL mode
  if (state.mode === 'detail' && state.selectedControl) {
    const isDuplicateReview = state.reviewMode && state.reviewTab === 'duplicates'

    const reviewTabBar = state.reviewMode ? (
      <div className="border-b border-gray-200 bg-white px-6 py-2 flex items-center gap-4">
        <button
          onClick={() => state.switchReviewTab('duplicates')}
          className={`px-3 py-1.5 text-sm rounded-lg font-medium ${state.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 ({state.reviewDuplicates.length})
        </button>
        <button
          onClick={() => state.switchReviewTab('rule3')}
          className={`px-3 py-1.5 text-sm rounded-lg font-medium ${state.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 ({state.reviewRule3.length})
        </button>
      </div>
    ) : null

    const reviewNavProps = {
      reviewMode: state.reviewMode,
      reviewIndex: state.reviewIndex,
      reviewTotal: state.reviewItems.length,
      onReviewPrev: () => {
        const idx = Math.max(0, state.reviewIndex - 1)
        state.setReviewIndex(idx)
        state.setSelectedControl(state.reviewItems[idx])
      },
      onReviewNext: () => {
        const idx = Math.min(state.reviewItems.length - 1, state.reviewIndex + 1)
        state.setReviewIndex(idx)
        state.setSelectedControl(state.reviewItems[idx])
      },
    }

    if (isDuplicateReview) {
      return (
        <div className="flex flex-col h-full">
          {reviewTabBar}
          <div className="flex-1 overflow-hidden">
            <ReviewCompare
              ctrl={state.selectedControl}
              onBack={() => { state.setMode('list'); state.setSelectedControl(null); state.setReviewMode(false) }}
              onReview={handleReview}
              onEdit={() => state.setMode('edit')}
              reviewIndex={state.reviewIndex}
              reviewTotal={state.reviewItems.length}
              onReviewPrev={reviewNavProps.onReviewPrev}
              onReviewNext={reviewNavProps.onReviewNext}
            />
          </div>
        </div>
      )
    }

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

  // LIST mode
  return (
    <ControlListView
      frameworks={state.frameworks}
      controls={state.controls}
      totalCount={state.totalCount}
      meta={state.meta}
      loading={state.loading}
      reviewCount={state.reviewCount}
      bulkProcessing={state.bulkProcessing}
      showStats={state.showStats}
      processedStats={state.processedStats}
      showGenerator={state.showGenerator}
      currentPage={state.currentPage}
      totalPages={state.totalPages}
      sortBy={state.sortBy}
      searchQuery={state.searchQuery}
      severityFilter={state.severityFilter}
      domainFilter={state.domainFilter}
      stateFilter={state.stateFilter}
      verificationFilter={state.verificationFilter}
      categoryFilter={state.categoryFilter}
      evidenceTypeFilter={state.evidenceTypeFilter}
      audienceFilter={state.audienceFilter}
      sourceFilter={state.sourceFilter}
      typeFilter={state.typeFilter}
      hideDuplicates={state.hideDuplicates}
      setSearchQuery={state.setSearchQuery}
      setSeverityFilter={state.setSeverityFilter}
      setDomainFilter={state.setDomainFilter}
      setStateFilter={state.setStateFilter}
      setVerificationFilter={state.setVerificationFilter}
      setCategoryFilter={state.setCategoryFilter}
      setEvidenceTypeFilter={state.setEvidenceTypeFilter}
      setAudienceFilter={state.setAudienceFilter}
      setSourceFilter={state.setSourceFilter}
      setTypeFilter={state.setTypeFilter}
      setHideDuplicates={state.setHideDuplicates}
      setSortBy={state.setSortBy}
      setShowStats={state.setShowStats}
      setShowGenerator={state.setShowGenerator}
      setCurrentPage={state.setCurrentPage}
      onSelectControl={(ctrl) => { state.setSelectedControl(ctrl); state.setMode('detail') }}
      onCreateMode={() => state.setMode('create')}
      onEnterReview={state.enterReviewMode}
      onBulkReject={handleBulkReject}
      onRefresh={() => { state.loadControls(); state.loadMeta(); state.loadFrameworks(); state.loadReviewCount() }}
      onLoadStats={state.loadProcessedStats}
      onFullReload={state.fullReload}
    />
  )
}