'use client'

import { ControlDetail } from '../control-library/components/ControlDetail'
import { ControlListView } from '../control-library/components/ControlListView'
import { useControlLibraryState } from '../control-library/components/useControlLibraryState'
import { BACKEND_URL } from '../control-library/components/helpers'

/**
 * Master Controls page — reuses the Control Library UI exactly,
 * but shows Master Controls (13.5K grouped controls) instead of
 * individual atomic controls (272K).
 *
 * The MC API route (/api/sdk/v1/master-controls) returns data in
 * the same format as the canonical controls endpoint.
 */
export default function MasterControlsPage() {
  // Reuse the exact same state hook — it fetches from BACKEND_URL
  // We override BACKEND_URL via a wrapper, but for now we reuse as-is
  // since both endpoints speak the same format.
  const state = useControlLibraryState('/api/sdk/v1/master-controls')

  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>
    )
  }

  // DETAIL mode — add fallback fields that ControlDetail expects
  if (state.mode === 'detail' && state.selectedControl) {
    const safeCtrl = {
      ...state.selectedControl,
      scope: state.selectedControl.scope || { platforms: [], components: [], data_classes: [] },
      target_audience: state.selectedControl.target_audience || [],
      requirements: state.selectedControl.requirements || [],
      test_procedure: state.selectedControl.test_procedure || [],
      evidence: state.selectedControl.evidence || [],
      open_anchors: state.selectedControl.open_anchors || [],
      risk_score: state.selectedControl.risk_score || null,
      implementation_effort: state.selectedControl.implementation_effort || null,
    }
    return (
      <ControlDetail
        ctrl={safeCtrl}
        onBack={() => { state.setMode('list'); state.setSelectedControl(null) }}
        onEdit={() => {}}
        onDelete={async () => {}}
        onReview={async () => {}}
        onRefresh={state.fullReload}
        onCompare={() => {}}
        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 */ }
        }}
      />
    )
  }

  // LIST mode — exact same UI as Control Library
  return (
    <ControlListView
      frameworks={state.frameworks}
      controls={state.controls}
      totalCount={state.totalCount}
      meta={state.meta}
      loading={state.loading}
      reviewCount={0}
      bulkProcessing={false}
      showStats={state.showStats}
      processedStats={state.processedStats}
      showGenerator={false}
      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={() => {}}
      setCurrentPage={state.setCurrentPage}
      onSelectControl={(ctrl) => { state.setSelectedControl(ctrl); state.setMode('detail') }}
      onCreateMode={() => {}}
      onEnterReview={() => {}}
      onBulkReject={async () => {}}
      onRefresh={() => { state.loadControls(); state.loadMeta() }}
      onLoadStats={state.loadProcessedStats}
      onFullReload={state.fullReload}
    />
  )
}