breakpilot-compliance/admin-compliance/app/sdk/master-controls/page.tsx

'use client'

import React, { useState, useEffect } from 'react'
import { ControlListView } from '../control-library/components/ControlListView'
import { useControlLibraryState } from '../control-library/components/useControlLibraryState'
import { useCaseLabel, mcVerificationLabel } from '../control-library/components/mcMappingLabels'

/**
 * 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 — show MC members
  if (state.mode === 'detail' && state.selectedControl) {
    return (
      <MCDetail
        mc={state.selectedControl as unknown as Record<string, unknown>}
        onBack={() => { state.setMode('list'); state.setSelectedControl(null) }}
      />
    )
  }

  // 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}
      useCaseFilter={state.useCaseFilter}
      primaryOnly={state.primaryOnly}
      regulationFilter={state.regulationFilter}
      mappedFilter={state.mappedFilter}
      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}
      setUseCaseFilter={state.setUseCaseFilter}
      setPrimaryOnly={state.setPrimaryOnly}
      setRegulationFilter={state.setRegulationFilter}
      setMappedFilter={state.setMappedFilter}
      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}
    />
  )
}

// ── MC Detail Panel ─────────────────────────────────────────────

interface Member {
  control_id: string
  title: string
  severity: string
  phase: string
  action: string
  regulation_source?: string
  regulation_article?: string
}

const SEV = {
  critical: 'bg-red-100 text-red-800',
  high: 'bg-orange-100 text-orange-800',
  medium: 'bg-yellow-100 text-yellow-800',
  low: 'bg-blue-100 text-blue-800',
} as Record<string, string>

interface MCMapping {
  use_cases?: Array<{ use_case: string; is_primary: boolean }>
  verification_method?: string | null
  regulations?: Array<{ source_regulation: string; is_primary: boolean; member_count: number }>
}

function MCDetail({ mc, onBack }: { mc: Record<string, unknown>; onBack: () => void }) {
  const [members, setMembers] = useState<Member[]>([])
  const [mapping, setMapping] = useState<MCMapping>({})
  const [loading, setLoading] = useState(true)
  const [phaseFilter, setPhaseFilter] = useState('')

  const mcId = (mc.control_id || mc.master_control_id || '') as string
  const mcName = (mc.title || mc.canonical_name || '') as string
  const totalControls = (mc.total_controls || 0) as number
  const phases = (mc.phases_covered || []) as string[]

  useEffect(() => {
    setLoading(true)
    fetch(`/api/sdk/v1/master-controls?endpoint=control&id=${mcId}`)
      .then(r => r.ok ? r.json() : null)
      .then(data => {
        if (data) setMapping({
          use_cases: data.use_cases, verification_method: data.verification_method,
          regulations: data.regulations,
        })
        if (data?.members) setMembers(data.members)
        else if (data?.requirements) {
          // Fallback: parse requirements strings
          setMembers((data.requirements as string[]).map((req: string) => {
            const match = req.match(/^\[(\w+)\]\s+(\S+):\s+(.+)$/)
            return match
              ? { control_id: match[2], title: match[3], phase: match[1], action: '', severity: '' }
              : { control_id: '', title: req, phase: '', action: '', severity: '' }
          }))
        }
      })
      .catch(() => {})
      .finally(() => setLoading(false))
  }, [mcId])

  const filtered = phaseFilter ? members.filter(m => m.phase === phaseFilter) : members
  const uniquePhases = [...new Set(members.map(m => m.phase).filter(Boolean))]
  const phaseGroups = uniquePhases.reduce((acc, p) => {
    acc[p] = members.filter(m => m.phase === p).length
    return acc
  }, {} as Record<string, number>)

  return (
    <div className="max-w-5xl mx-auto">
      {/* Header */}
      <button onClick={onBack} className="mb-4 text-purple-600 hover:text-purple-800 text-sm flex items-center gap-1">
        ← Zurueck zur Liste
      </button>

      <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-4">
        <h1 className="text-2xl font-bold text-gray-900">{mcName}</h1>
        <p className="text-gray-500 mt-1">{mcId} — {totalControls} Atomic Controls</p>

        {/* Zuordnung: Use Cases + Verifikation + Quell-Regulierung */}
        {(mapping.use_cases?.length || mapping.verification_method || mapping.regulations?.length) ? (
          <div className="mt-4 flex flex-wrap items-center gap-2">
            {(mapping.use_cases || []).map(u => (
              <span key={u.use_case}
                className={`px-2 py-0.5 rounded text-xs font-medium ${u.is_primary
                  ? 'bg-purple-100 text-purple-800 border border-purple-300'
                  : 'bg-purple-50 text-purple-600'}`}
                title={u.is_primary ? 'Primärzweck' : 'Mehrfachzweck'}>
                {useCaseLabel(u.use_case)}{u.is_primary ? ' ★' : ''}
              </span>
            ))}
            {mapping.verification_method && (
              <span className="px-2 py-0.5 rounded text-xs font-medium bg-emerald-100 text-emerald-800 border border-emerald-300">
                Nachweis: {mcVerificationLabel(mapping.verification_method)}
              </span>
            )}
            {(mapping.regulations || []).slice(0, 4).map(r => (
              <span key={r.source_regulation}
                className="px-2 py-0.5 rounded text-xs bg-blue-50 text-blue-700"
                title={`${r.member_count} Member${r.is_primary ? ' · Primärquelle' : ''}`}>
                {r.source_regulation}{r.is_primary ? ' ★' : ''}
              </span>
            ))}
          </div>
        ) : null}

        {/* Phase badges */}
        <div className="flex flex-wrap gap-2 mt-4">
          {uniquePhases.map(p => (
            <button
              key={p}
              onClick={() => setPhaseFilter(phaseFilter === p ? '' : p)}
              className={`px-3 py-1 rounded-full text-xs font-medium border transition-colors ${
                phaseFilter === p
                  ? 'bg-purple-100 border-purple-400 text-purple-800'
                  : 'border-gray-200 text-gray-600 hover:bg-gray-50'
              }`}
            >
              {p} ({phaseGroups[p]})
            </button>
          ))}
          {phaseFilter && (
            <button onClick={() => setPhaseFilter('')} className="text-xs text-gray-400 hover:text-gray-600 ml-2">
              Filter aufheben
            </button>
          )}
        </div>
      </div>

      {/* Members */}
      <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <div className="px-4 py-3 bg-gray-50 border-b text-sm text-gray-500">
          {filtered.length} von {members.length} Controls{phaseFilter ? ` (Phase: ${phaseFilter})` : ''}
        </div>

        {loading ? (
          <div className="p-8 text-center">
            <div className="animate-spin rounded-full h-6 w-6 border-2 border-purple-600 border-t-transparent mx-auto" />
          </div>
        ) : (
          <div className="divide-y divide-gray-50">
            {filtered.map((m, i) => {
              const inner = (
                <>
                  <div className="flex items-center gap-2 mb-1">
                    <span className="text-xs font-mono text-gray-400">{m.control_id}</span>
                    {m.severity && (
                      <span className={`px-1.5 py-0.5 rounded text-[10px] font-bold ${SEV[m.severity] || 'bg-gray-100 text-gray-600'}`}>
                        {m.severity}
                      </span>
                    )}
                    {m.phase && (
                      <span className="text-[10px] text-purple-600 bg-purple-50 px-1.5 py-0.5 rounded">
                        {m.phase}
                      </span>
                    )}
                    {m.action && (
                      <span className="text-[10px] text-gray-400">{m.action}</span>
                    )}
                  </div>
                  <p className="text-sm text-gray-900">{m.title}</p>
                  {m.regulation_source && (
                    <p className="text-xs text-blue-600 mt-1">
                      {m.regulation_source} {m.regulation_article}
                    </p>
                  )}
                </>
              )
              return m.control_id ? (
                <a key={i}
                  href={`/sdk/control-library?control=${encodeURIComponent(m.control_id)}`}
                  className="block px-4 py-3 hover:bg-purple-50/40 transition-colors">
                  {inner}
                </a>
              ) : (
                <div key={i} className="px-4 py-3 hover:bg-gray-50">{inner}</div>
              )
            })}
            {filtered.length === 0 && !loading && (
              <div className="p-8 text-center text-gray-400">Keine Controls gefunden</div>
            )}
          </div>
        )}
      </div>
    </div>
  )
}